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