Miika Turunen
7 years ago
2 changed files with 0 additions and 207 deletions
@ -1,140 +0,0 @@ |
|||
import React from 'react'; |
|||
import AnimateMixin from 'react-animate'; |
|||
/** |
|||
* Accordion object that maintains a list of content containers and their collapsed or expanded state |
|||
* @type {*|Function} |
|||
*/ |
|||
class Accordion extends React.Component { |
|||
/** |
|||
* Mixin the AnimateMixin |
|||
*/ |
|||
mixins: [AnimateMixin], |
|||
/** |
|||
* Get the initial state |
|||
* @returns {{itemMap: {}}} |
|||
*/ |
|||
getInitialState: function() { |
|||
//map item indexes and their initial states
|
|||
var itemMap = this.props.items.map(function( i, idx ) { |
|||
return { |
|||
animating: false, |
|||
open: idx === 0, |
|||
content:i.content, |
|||
header:i.header |
|||
}; |
|||
}); |
|||
|
|||
return { |
|||
itemMap: itemMap |
|||
} |
|||
|
|||
}, |
|||
/** |
|||
* Event handler for clicking on an accordion header |
|||
* @param idx |
|||
* @param event |
|||
*/ |
|||
toggle: function( idx, event ) { |
|||
var _this = this, currentHeight = this.getParentHeight(event), |
|||
scrollHeight = this.getParentScrollHeight(event), newHeight, |
|||
itemMap = this.state.itemMap; |
|||
|
|||
//toggle animation for this item
|
|||
itemMap[idx].animating = true; |
|||
this.setState({itemMap: itemMap}); |
|||
|
|||
//choose the right the new height
|
|||
newHeight = currentHeight >= 25 ? "25px" : scrollHeight + "px"; |
|||
|
|||
//send off to the animation library
|
|||
this.animate( |
|||
idx + "toggle", |
|||
{height: currentHeight + "px"}, |
|||
{height: newHeight}, |
|||
250, |
|||
{ |
|||
//when it's done, toggle animating bool
|
|||
onComplete: function() { |
|||
var newMap = _this.state.itemMap; |
|||
newMap[idx].animating = false; |
|||
newMap[idx].open = newHeight !== "25px"; |
|||
_this.setState({itemMap: newMap}); |
|||
} |
|||
} |
|||
); |
|||
|
|||
}, |
|||
/** |
|||
* Get the clientHeight of the parent element from a triggered event |
|||
* @param event |
|||
* @returns {number} |
|||
*/ |
|||
getParentHeight: function( event ) { |
|||
return event.target.parentNode.clientHeight; |
|||
}, |
|||
/** |
|||
* Get the scrollHeight of the parent element from a trigger event |
|||
* @param event |
|||
* @returns {number} |
|||
*/ |
|||
getParentScrollHeight: function( event ) { |
|||
return event.target.parentNode.scrollHeight; |
|||
}, |
|||
/** |
|||
* Define our default header style |
|||
* @returns {{height: string, backgroundColor: string, cursor: string}} |
|||
*/ |
|||
getItemHeaderStyle: function() { |
|||
return { |
|||
height: "25px", |
|||
backgroundColor: "#f9f9f9", |
|||
cursor: "pointer" |
|||
}; |
|||
}, |
|||
/** |
|||
*The default style for each accordion item |
|||
*/ |
|||
getDefaultItemStyle: function() { |
|||
return { |
|||
borderRadius: "3px", |
|||
marginBottom: "5px", |
|||
overflow: "hidden", |
|||
border: "1px solid #cecece" |
|||
} |
|||
}, |
|||
/** |
|||
* Render |
|||
* @returns {XML} |
|||
*/ |
|||
render: function() { |
|||
var _this = this; |
|||
var items = this.props.items; |
|||
|
|||
//add the content to the accordion container
|
|||
var contents = items.map(function( i, idx ) { |
|||
|
|||
//calculate the current style
|
|||
var itemStyle = _this.getDefaultItemStyle(); |
|||
if ( _this.state.itemMap[idx].animating ) { |
|||
itemStyle.height = _this.getAnimatedStyle(idx + "toggle").height; |
|||
} else { |
|||
itemStyle.height = _this.state.itemMap[idx].open ? "auto" : "25px" |
|||
} |
|||
|
|||
return <div style={itemStyle} className={_this.props.itemClassName} key={idx}> |
|||
<div style={_this.getItemHeaderStyle()} onClick={_this.toggle.bind(_this, idx)}> |
|||
{i.header} |
|||
</div> |
|||
{i.content} |
|||
</div> |
|||
}); |
|||
|
|||
return ( |
|||
<div className={this.props.className}> |
|||
{contents} |
|||
</div> |
|||
); |
|||
} |
|||
}); |
|||
|
|||
export default Accordion; |
|||
@ -1,67 +0,0 @@ |
|||
import React from 'react'; |
|||
import { translate } from '../../../translate/translate'; |
|||
|
|||
const LoginModalRender = function () { |
|||
return ( |
|||
<div> |
|||
<div |
|||
className={ 'modal modal-3d-sign add-coin-modal ' + (this.state.display ? 'show in' : 'fade hide') } |
|||
id="AddCoinDilogModel-login" |
|||
aria-hidden="true" |
|||
aria-labelledby="AddCoinDilogModel-login" |
|||
role="dialog" |
|||
tabIndex="-1"> |
|||
<div className="modal-dialog modal-center modal-lg"> |
|||
<div className="modal-content"> |
|||
<div className="modal-header bg-orange-a400 wallet-send-header"> |
|||
<button |
|||
type="button" |
|||
className="close white" |
|||
aria-label="Close" |
|||
onClick={ this.dismiss }> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
<h4 className="modal-title white">{ translate('INDEX.SELECT_A_COIN') }</h4> |
|||
</div> |
|||
<div className="modal-body"> |
|||
<div id="wallet-login"> |
|||
<div className="page animsition vertical-align text-center fade-in"> |
|||
<div className="page-content vertical-align-middle"> |
|||
<div className="brand"> |
|||
<img className="brand-img" src="assets/images/easydex-logo-big.png" alt="SuperNET Iguana" /> |
|||
</div> |
|||
<div id="section-login" className={ this.state.activeLoginSection === 'login' ? 'show' : 'hide' }> |
|||
<h4 className="color-white" id="login-welcome">{ translate('INDEX.WELCOME_LOGIN') }</h4> |
|||
<div className="login-form"> |
|||
<div className="form-group form-material floating"> |
|||
<input |
|||
type={ this.state.seedInputVisibility ? 'text' : 'password' } |
|||
className="form-control" |
|||
name="loginPassphrase" |
|||
id="password" |
|||
onChange={ this.updateInput } /> |
|||
<i |
|||
className={ this.state.seedInputVisibility ? 'seed-toggle fa fa-eye-slash' : 'seed-toggle fa fa-eye' } |
|||
onClick={ this.toggleSeedInputVisibility }></i> |
|||
<label className="floating-label" htmlFor="inputPassword">{translate('INDEX.WALLET_SEED')}</label> |
|||
</div> |
|||
<button |
|||
type="button" |
|||
className="btn btn-primary btn-block" |
|||
id="loginbtn" |
|||
onClick={ this.loginSeed } |
|||
disabled={ this.isLoginPassphraseEmpty() }>{ translate('INDEX.SIGN_IN') }</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
); |
|||
}; |
|||
|
|||
export default LoginModalRender; |
|||
Loading…
Reference in new issue