pbca26
7 years ago
committed by
GitHub
GitHub
18 changed files with 636 additions and 608 deletions
@ -0,0 +1,86 @@ |
|||
import React from 'react'; |
|||
import className from 'classnames'; |
|||
import * as Utils from './settings.panelUtils'; |
|||
|
|||
class Panel extends React.Component { |
|||
|
|||
constructor(props) { |
|||
super(props); |
|||
this.toggleSection = this.toggleSection.bind(this); |
|||
this.state = { |
|||
singleOpen: this.props.singleOpen, |
|||
openByDefault: this.props.openByDefault, |
|||
activeSections: [], |
|||
}; |
|||
} |
|||
|
|||
componentWillMount() { |
|||
const { |
|||
singleOpen, |
|||
openByDefault, |
|||
uniqId, |
|||
children } = this.props; |
|||
|
|||
const settings = { |
|||
singleOpen, |
|||
openByDefault, |
|||
uniqId, |
|||
kids: children |
|||
}; |
|||
|
|||
const initialStateSections = Utils.setupAccordion(settings).activeSections; |
|||
this.setState({ activeSections: initialStateSections }); |
|||
} |
|||
|
|||
getChildrenWithProps() { |
|||
const { |
|||
children, |
|||
} = this.props; |
|||
|
|||
|
|||
const kids = React.Children.map(children, (child, i) => { |
|||
if(child) { |
|||
const unqId = `panel-sec-${i}`; |
|||
return React.cloneElement(child, { |
|||
toggle: (acId) => this.toggleSection(acId), |
|||
key: unqId, |
|||
unq: unqId, |
|||
active: (this.state.activeSections && this.state.activeSections.lastIndexOf(unqId) !== -1) |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
|
|||
return kids; |
|||
} |
|||
|
|||
toggleSection(sectionId) { |
|||
const newActive = Utils.toggleSection( |
|||
sectionId, |
|||
this.state.activeSections, |
|||
this.state.singleOpen); |
|||
|
|||
this.setState({ |
|||
activeSections: newActive |
|||
}); |
|||
} |
|||
|
|||
render() { |
|||
const { |
|||
className: propClasses, |
|||
uniqId: propId |
|||
} = this.props; |
|||
|
|||
const childrenWithProps = this.getChildrenWithProps(); |
|||
const accordionClasses = className('panel-group', propClasses); |
|||
const uniqId = propId || ''; |
|||
|
|||
return( |
|||
<div className={accordionClasses} id={uniqId}> |
|||
{childrenWithProps} |
|||
</div> |
|||
); |
|||
} |
|||
} |
|||
|
|||
export default Panel; |
|||
@ -0,0 +1,89 @@ |
|||
import React from 'react'; |
|||
import className from 'classnames'; |
|||
|
|||
class PanelSection extends React.Component { |
|||
constructor(props) { |
|||
super(props); |
|||
this.state = { |
|||
sectionHeight: 0, |
|||
} |
|||
this.toggleSection = this.toggleSection.bind(this); |
|||
} |
|||
|
|||
componentDidMount() { |
|||
const { active } = this.props; |
|||
if (active) this.setState({sectionHeight: this.accordionContent.scrollHeight}); |
|||
} |
|||
|
|||
componentWillReceiveProps(nextProps) { |
|||
if(this.props.active) { |
|||
this.setState({ |
|||
sectionHeight: 'auto', |
|||
}); |
|||
} |
|||
if (nextProps.active !== this.props.active) { |
|||
this.toggleOpen(nextProps.active); |
|||
} |
|||
} |
|||
|
|||
getHeight() { |
|||
const { active } = this.props; |
|||
return (active) ? this.accordionContent.scrollHeight : 0; |
|||
} |
|||
|
|||
toggleSection() { |
|||
const { |
|||
unq, |
|||
toggle |
|||
} = this.props; |
|||
toggle(unq); |
|||
} |
|||
|
|||
toggleOpen(active) { |
|||
const height = (active) ? `${this.accordionContent.scrollHeight}px` : 0; |
|||
this.setState({ |
|||
sectionHeight: height, |
|||
}); |
|||
} |
|||
|
|||
render() { |
|||
const { |
|||
title, |
|||
icon, |
|||
children, |
|||
active, |
|||
className: propClasses |
|||
} = this.props; |
|||
|
|||
const contentStyles = { |
|||
height: this.state.sectionHeight, |
|||
overflow: 'hidden', |
|||
transition: 'height .25s ease', |
|||
}; |
|||
|
|||
const triggerClasses = className('panel', { |
|||
active |
|||
}); |
|||
|
|||
const contentClasses = className('panel-collapse', { |
|||
active |
|||
}); |
|||
|
|||
return( |
|||
<div className={triggerClasses} onClick={() => this.toggleSection()}> |
|||
<div className="panel-heading"> |
|||
<a className='panel-title'> |
|||
<i className={icon}></i> {title} |
|||
</a> |
|||
</div> |
|||
<div className={contentClasses} style={contentStyles} ref={(ref) => this.accordionContent = ref}> |
|||
<div className="panel-body"> |
|||
{children} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
); |
|||
} |
|||
} |
|||
|
|||
export default PanelSection; |
|||
@ -0,0 +1,48 @@ |
|||
export function checkUndef(item) { |
|||
return (typeof item !== 'undefined'); |
|||
} |
|||
|
|||
export function toggleSection(sectionId, activeSections, singleOpen) { |
|||
let present = null; |
|||
let newActiveSections = activeSections; |
|||
|
|||
newActiveSections.map((section) => { |
|||
if (section === sectionId) present = true; |
|||
return true; |
|||
}); |
|||
|
|||
if (!singleOpen) { |
|||
if (present) { |
|||
const pos = newActiveSections.indexOf(sectionId); |
|||
newActiveSections.splice(pos, 1); |
|||
} else { |
|||
newActiveSections.push(sectionId); |
|||
} |
|||
} else { |
|||
newActiveSections = [sectionId]; |
|||
} |
|||
|
|||
return newActiveSections; |
|||
} |
|||
|
|||
export function setupAccordion(info) { |
|||
const singleOpen = (checkUndef(info.singleOpen)) ? info.singleOpen : false; |
|||
const activeSections = []; |
|||
const singleChild = typeof info.kids.length === 'undefined'; |
|||
|
|||
if (!singleChild) { |
|||
info.kids.forEach((child, i) => { |
|||
const { openByDefault } = child ? child.props : false; |
|||
if (singleOpen && activeSections.length === 0 && openByDefault) { |
|||
activeSections.push(`panel-sec-${i}`); |
|||
} |
|||
if (!singleOpen && openByDefault) { |
|||
activeSections.push(`panel-sec-${i}`); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
return { |
|||
activeSections, |
|||
}; |
|||
} |
|||
@ -1,227 +1,111 @@ |
|||
import React from 'react'; |
|||
import { translate } from '../../../translate/translate'; |
|||
import PanelSection from './settings.panelBody'; |
|||
import Panel from './settings.panel'; |
|||
|
|||
import AppUpdatePanel from './settings.appUpdatePanel'; |
|||
import AppInfoPanel from './settings.appInfoPanel'; |
|||
import AddNodePanel from './settings.addNodePanel'; |
|||
import AppSettingsPanel from './settings.appSettingsPanel'; |
|||
import CliPanel from './settings.cliPanel'; |
|||
import DebugLogPanel from './settings.debugLogPanel'; |
|||
import FiatCurrencyPanel from './settings.fiatCurrencyPanel'; |
|||
import ExportKeysPanel from './settings.exportKeysPanel'; |
|||
import ImportKeysPanel from './settings.importKeysPanel'; |
|||
import SupportPanel from './settings.supportPanel'; |
|||
import WalletInfoPanel from './settings.walletInfoPanel'; |
|||
import WalletBackupPanel from './settings.walletBackupPanel'; |
|||
|
|||
export const SettingsRender = function() { |
|||
return ( |
|||
<div className="margin-left-0 full-height"> |
|||
<div |
|||
className="page-content full-height" |
|||
id="section-iguana-wallet-settings"> |
|||
<div |
|||
id="section-iguana-wallet-settings" |
|||
className="padding-30"> |
|||
<div className="row"> |
|||
<div className="col-xlg-12 col-md-12"> |
|||
<div className="row"> |
|||
<div className="col-xlg-12 col-md-12"> |
|||
<h4 className="font-size-14 text-uppercase">{ translate('INDEX.WALLET_SETTINGS') }</h4> |
|||
<div |
|||
className="panel-group" |
|||
id="SettingsAccordion"> |
|||
|
|||
{ !this.props.disableWalletSpecificUI && |
|||
<div |
|||
id="WalletInfo" |
|||
onClick={ () => this.openTab('WalletInfo', 0) } |
|||
className={ 'panel' + (this.state.nativeOnly ? ' hide' : '') }> |
|||
<div className="panel-heading"> |
|||
<a className={ 'panel-title' + (this.state.activeTab === 0 ? '' : ' collapsed') }> |
|||
<i className="icon md-balance-wallet"></i>{ translate('INDEX.WALLET_INFO') } |
|||
</a> |
|||
</div> |
|||
<div |
|||
className={ 'panel-collapse collapse' + (this.state.activeTab === 0 ? ' in' : '') } |
|||
style={{ height: this.state.activeTab === 0 ? `auto` : '0' }}> |
|||
{ this.renderWalletInfo() } |
|||
</div> |
|||
</div> |
|||
} |
|||
{ !this.props.disableWalletSpecificUI && |
|||
<div |
|||
id="AddNodeforCoin" |
|||
onClick={ () => this.openTab('AddNodeforCoin', 1) } |
|||
className={ 'panel' + (this.state.nativeOnly ? ' hide' : '') }> |
|||
<div className="panel-heading"> |
|||
<a className={ 'panel-title' + (this.state.activeTab === 1 ? '' : ' collapsed') }> |
|||
<i className="icon md-plus-square"></i>{ translate('INDEX.ADD_NODE') } |
|||
</a> |
|||
</div> |
|||
<div |
|||
className={ 'panel-collapse collapse' + (this.state.activeTab === 1 ? ' in' : '') } |
|||
style={{ height: this.state.activeTab === 1 ? `auto` : '0' }}> |
|||
{ this.renderAddNode() } |
|||
</div> |
|||
</div> |
|||
} |
|||
{ !this.props.disableWalletSpecificUI && |
|||
<div |
|||
id="DumpWallet" |
|||
onClick={ () => this.openTab('DumpWallet', 2) } |
|||
className={ 'hide panel' + (this.state.nativeOnly ? ' hide' : '') }> |
|||
<div className="panel-heading"> |
|||
<a className={ 'panel-title' + (this.state.activeTab === 2 ? '' : ' collapsed') }> |
|||
<i className="icon wb-briefcase"></i>{ translate('INDEX.WALLET_BACKUP') } |
|||
</a> |
|||
</div> |
|||
<div |
|||
className={ 'panel-collapse collapse' + (this.state.activeTab === 2 ? ' in' : '') } |
|||
style={{ height: this.state.activeTab === 2 ? `auto` : '0' }}> |
|||
{ this.renderWalletBackup() } |
|||
</div> |
|||
</div> |
|||
} |
|||
{ !this.props.disableWalletSpecificUI && |
|||
<div |
|||
id="FiatCurrencySettings" |
|||
onClick={ () => this.openTab('FiatCurrencySettings', 3) } |
|||
className={ 'hide panel' + (this.state.nativeOnly ? ' hide' : '') }> |
|||
<div className="panel-heading"> |
|||
<a className={ 'panel-title' + (this.state.activeTab === 3 ? '' : ' collapsed') }> |
|||
<i className="icon fa-money"></i>{ translate('INDEX.FIAT_CURRENCY') } |
|||
</a> |
|||
</div> |
|||
<div |
|||
className={ 'panel-collapse collapse' + (this.state.activeTab === 3 ? ' in' : '') } |
|||
style={{ height: this.state.activeTab === 3 ? `auto` : '0' }}> |
|||
{ this.renderFiatCurrency() } |
|||
</div> |
|||
</div> |
|||
} |
|||
{ !this.props.disableWalletSpecificUI && |
|||
<div |
|||
id="ExportKeys" |
|||
onClick={ () => this.openTab('ExportKeys', 4) } |
|||
className={ 'panel' + (this.state.nativeOnly ? ' hide' : '') }> |
|||
<div className="panel-heading"> |
|||
<a className={ 'panel-title' + (this.state.activeTab === 4 ? '' : ' collapsed') }> |
|||
<i className="icon md-key"></i>{ translate('INDEX.EXPORT_KEYS') } |
|||
</a> |
|||
</div> |
|||
<div |
|||
className={ 'panel-collapse collapse' + (this.state.activeTab === 4 ? ' in' : '') } |
|||
style={{ height: this.state.activeTab === 4 ? `auto` : '0' }}> |
|||
{ this.renderExportKeys() } |
|||
</div> |
|||
</div> |
|||
} |
|||
{ !this.props.disableWalletSpecificUI && |
|||
<div |
|||
id="ImportKeys" |
|||
onClick={ () => this.openTab('ImportKeys', 5) } |
|||
className={ 'panel' + (this.state.nativeOnly ? ' hide' : '') }> |
|||
<div className="panel-heading"> |
|||
<a className={ 'panel-title' + (this.state.activeTab === 5 ? '' : ' collapsed') }> |
|||
<i className="icon md-key"></i>{ translate('INDEX.IMPORT_KEYS') } |
|||
</a> |
|||
</div> |
|||
<div |
|||
className={ 'panel-collapse collapse' + (this.state.activeTab === 5 ? ' in' : '') } |
|||
style={{ height: this.state.activeTab === 5 ? `auto` : '0' }}> |
|||
{ this.renderImportKeys() } |
|||
</div> |
|||
</div> |
|||
} |
|||
|
|||
<div |
|||
className="panel" |
|||
id="DebugLog" |
|||
onClick={ () => this.openTab('DebugLog', 6) }> |
|||
<div className="panel-heading"> |
|||
<a className={ 'panel-title' + (this.state.activeTab === 6 ? '' : ' collapsed') }> |
|||
<i className="icon fa-bug"></i>{ translate('INDEX.DEBUG_LOG') } |
|||
</a> |
|||
</div> |
|||
<div |
|||
className={ 'panel-collapse collapse' + (this.state.activeTab === 6 ? ' in' : '') } |
|||
style={{ height: this.state.activeTab === 6 ? `auto` : '0' }}> |
|||
{ this.renderDebugLog() } |
|||
</div> |
|||
</div> |
|||
|
|||
<div |
|||
className="panel" |
|||
id="AppSettings" |
|||
onClick={ () => this.openTab('AppSettings', 7) }> |
|||
<div className="panel-heading"> |
|||
<a className={ 'panel-title' + (this.state.activeTab === 7 ? '' : ' collapsed') }> |
|||
<i className="icon fa-wrench"></i>{ translate('SETTINGS.APP_CONFIG') } (config.json) |
|||
</a> |
|||
</div> |
|||
<div |
|||
className={ 'panel-collapse collapse' + (this.state.activeTab === 7 ? ' in' : '') } |
|||
style={{ height: this.state.activeTab === 7 ? `auto` : '0' }}> |
|||
{ this.renderAppSettings() } |
|||
</div> |
|||
</div> |
|||
|
|||
<div |
|||
className="panel" |
|||
id="AppInfo" |
|||
onClick={ () => this.openTab('AppInfo', 8) }> |
|||
<div className="panel-heading"> |
|||
<a className={ 'panel-title' + (this.state.activeTab === 8 ? '' : ' collapsed') }> |
|||
<i className="icon md-info"></i>{ translate('SETTINGS.APP_INFO') } |
|||
</a> |
|||
</div> |
|||
<div |
|||
className={ 'panel-collapse collapse' + (this.state.activeTab === 8 ? ' in' : '') } |
|||
style={{ height: this.state.activeTab === 8 ? `auto` : '0' }}> |
|||
{ this.renderAppInfoTab() } |
|||
</div> |
|||
</div> |
|||
|
|||
{ this.props.Main && this.props.Main.coins.native && |
|||
<div |
|||
id="Cli" |
|||
onClick={ () => this.openTab('Cli', 9) } |
|||
className={ 'panel' + (!this.props.Main.coins.native.length ? ' hide' : '') }> |
|||
<div className="panel-heading"> |
|||
<a className={ 'panel-title' + (this.state.activeTab === 9 ? '' : ' collapsed') }> |
|||
<i className="icon fa-code"></i> CLI |
|||
</a> |
|||
</div> |
|||
<div |
|||
className={ 'panel-collapse collapse' + (this.state.activeTab === 9 ? ' in' : '') } |
|||
style={{ height: this.state.activeTab === 9 ? `auto` : '0' }}> |
|||
{ this.renderCliPanel() } |
|||
</div> |
|||
</div> |
|||
} |
|||
|
|||
<div |
|||
className="panel" |
|||
id="AppUpdate" |
|||
onClick={ () => this.openTab('AppUpdate', 10) }> |
|||
<div className="panel-heading"> |
|||
<a className={ 'panel-title' + (this.state.activeTab === 10 ? '' : ' collapsed') }> |
|||
<i className="icon fa fa-cloud-download"></i> { translate('INDEX.UPDATE') } |
|||
</a> |
|||
</div> |
|||
<div |
|||
className={ 'panel-collapse collapse' + (this.state.activeTab === 10 ? ' in' : '') } |
|||
style={{ height: this.state.activeTab === 10 ? `auto` : '0' }}> |
|||
{ this.renderAppUpdateTab() } |
|||
</div> |
|||
</div> |
|||
|
|||
<div |
|||
className="panel" |
|||
id="Support" |
|||
onClick={ () => this.openTab('Support', 11) }> |
|||
<div className="panel-heading"> |
|||
<a className={ 'panel-title' + (this.state.activeTab === 11 ? '' : ' collapsed') }> |
|||
<i className="icon fa fa-life-ring"></i> Support |
|||
</a> |
|||
</div> |
|||
<div |
|||
className={ 'panel-collapse collapse' + (this.state.activeTab === 11 ? ' in' : '') } |
|||
style={{ height: this.state.activeTab === 11 ? `auto` : '0' }}> |
|||
{ this.renderSupportPanel() } |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div className="col-sm-12"> |
|||
<h4 className="font-size-14 text-uppercase">{ translate('INDEX.WALLET_SETTINGS') }</h4> |
|||
<Panel |
|||
uniqId={'SettingsAccordion'} |
|||
singleOpen={true}> |
|||
{ !this.props.disableWalletSpecificUI && |
|||
<PanelSection |
|||
title={ translate('INDEX.WALLET_INFO') } |
|||
icon="icon md-balance-wallet" |
|||
openByDefault={!this.props.disableWalletSpecificUI}> |
|||
<WalletInfoPanel /> |
|||
</PanelSection> |
|||
} |
|||
{ !this.props.disableWalletSpecificUI && |
|||
<PanelSection |
|||
title={ translate('INDEX.ADD_NODE') } |
|||
icon="icon md-plus-square"> |
|||
<AddNodePanel /> |
|||
</PanelSection> |
|||
} |
|||
{ !this.props.disableWalletSpecificUI && |
|||
<PanelSection |
|||
title={ translate('INDEX.WALLET_BACKUP') } |
|||
icon="icon wb-briefcase"> |
|||
<WalletBackupPanel /> |
|||
</PanelSection> |
|||
} |
|||
{ !this.props.disableWalletSpecificUI && |
|||
<PanelSection |
|||
title={ translate('INDEX.FIAT_CURRENCY') } |
|||
icon="icon fa-money"> |
|||
<FiatCurrencyPanel /> |
|||
</PanelSection> |
|||
} |
|||
{ !this.props.disableWalletSpecificUI && |
|||
<PanelSection |
|||
title={ translate('INDEX.EXPORT_KEYS') } |
|||
icon="icon md-key"> |
|||
<ExportKeysPanel /> |
|||
</PanelSection> |
|||
} |
|||
{ !this.props.disableWalletSpecificUI && |
|||
<PanelSection |
|||
title={ translate('INDEX.IMPORT_KEYS') } |
|||
icon="icon md-key"> |
|||
<ImportKeysPanel /> |
|||
</PanelSection> |
|||
} |
|||
<PanelSection |
|||
title={ translate('INDEX.DEBUG_LOG') } |
|||
icon="icon fa-bug" |
|||
openByDefault={this.props.disableWalletSpecificUI}> |
|||
<DebugLogPanel /> |
|||
</PanelSection> |
|||
<PanelSection |
|||
title={ translate('SETTINGS.APP_CONFIG') + ' (config.json)' } |
|||
icon="icon fa-bug"> |
|||
<AppSettingsPanel /> |
|||
</PanelSection> |
|||
<PanelSection |
|||
title={ translate('SETTINGS.APP_INFO') } |
|||
icon="icon md-info"> |
|||
<AppInfoPanel /> |
|||
</PanelSection> |
|||
{ this.props.Main && this.props.Main.coins.native && |
|||
<PanelSection |
|||
title="CLI" |
|||
icon="icon fa-code"> |
|||
<CliPanel /> |
|||
</PanelSection> |
|||
} |
|||
<PanelSection |
|||
title={ translate('INDEX.UPDATE') } |
|||
icon="icon fa fa-cloud-download"> |
|||
<AppUpdatePanel /> |
|||
</PanelSection> |
|||
<PanelSection |
|||
title="Support" |
|||
icon="icon fa fa-life-ring"> |
|||
<SupportPanel /> |
|||
</PanelSection> |
|||
</Panel> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
); |
|||
}; |
|||
Loading…
Reference in new issue