git.iko.soy/bridge
on master help sign in
- Refactored common dropdown functionality into the InnerLabelDropdown component
5e6f67aChris Johnson
src/bridge/components/InnerLabelDropdown.js+88−47
compare with master
unifiedsplit
@@ -1,73 +1,114 @@
1import React from 'react'
1import React from 'react'
2import PropTypes from 'prop-types';
2import PropTypes from 'prop-types';
3
3
4+import { DropdownItem, DropdownDivider } from '../components/Base'
4
5
5−const InnerLabelDropdown = props => {
6+class InnerLabelDropdown extends React.Component {
6−
7+ constructor(props) {
8+ super(props)
9+
10+ this.state = {
11+ isOpen: false
12+ }
13+
14+ this.toggle = this.toggle.bind(this)
15+ this.close = this.close.bind(this)
16+ }
17+
18+ toggle() {
19+ this.setState({
20+ isOpen: !this.state.isOpen
21+ })
22+ }
23+
24+ close() {
25+ this.setState({
26+ isOpen: false
27+ })
28+ }
29+
30+ selectOption(opt) {
31+ this.close()
32+ this.props.handleUpdate(opt)
33+ }
34+
35+ getOptionElems() {
36+ return this.props.options.map(opt => {
37+ if (opt.type === "divider") {
38+ return <DropdownDivider />
39+ } else {
40+ return (
41+ <DropdownItem onClick={() => this.selectOption(opt.value)}>
42+ { opt.title }
43+ </DropdownItem>
44+ )
45+ }
46+ })
47+ }
48+
49+ render() {
50+ const { props, state } = this
51+
52+ const optionElems = this.getOptionElems()
53+
7− const menuVisibility = props.isOpen === true
54+ const menuVisibility = state.isOpen === true
8− ? 'visible'
55+ ? 'visible'
9− : 'hidden';
56+ : 'hidden';
10−
57+
11− const selectedClasses = props.isOpen === true
58+ const selectedClasses = state.isOpen === true
12− ? 'br-blue'
59+ ? 'br-blue'
13− : 'br-gray-50';
60+ : 'br-gray-50';
14−
61+
15− const fullWidthClass = props.fullWidth ? 'full-width' : ''
62+ const fullWidthClass = props.fullWidth ? 'full-width' : ''
16−
63+
17− return (
64+ return (
18− <div className={`rel table ${fullWidthClass}`}>
65+ <div className={`rel table ${fullWidthClass}`}>
19− <div
66+ <div
20− className={`fix full o-0 ${menuVisibility}`}
67+ className={`fix full o-0 ${menuVisibility}`}
21− onClick={props.handleClose}
68+ onClick={this.close}
22− />
69+ />
23−
70+
24− <button
71+ <button
25− className={`h-10 mp-0 bg-white outline-blue sans ${props.className} ${fullWidthClass}`}
72+ className={`h-10 mp-0 bg-white outline-blue sans ${props.className} ${fullWidthClass}`}
26− onClick={props.handleToggle}
73+ onClick={this.toggle}
27− disabled={props.disabled}>
74+ disabled={props.disabled}>
28− <div className={'flex'}>
75+ <div className={'flex'}>
29− <div className={`ph-4 flex-center-all b-2 br-0 b-solid h-10 ${selectedClasses} ${fullWidthClass}`}>
76+ <div className={`ph-4 flex align-center b-2 br-0 b-solid h-10 ${selectedClasses} ${fullWidthClass}`}>
30− <div className={'text-400 mr-2'}>{props.title}</div>
77+ <div className={'text-400 mr-2'}>{props.title}</div>
31− <div className={'text-600'}>{props.currentSelectionTitle}</div>
78+ <div className={'text-600'}>{props.currentSelectionTitle}</div>
79+ </div>
80+ <div className={'white bg-blue s-10 flex-center-all text-sm'}>{'▼'}</div>
32 </div>
81 </div>
33− <div className={'white bg-blue s-10 flex-center-all text-sm'}>{'▼'}</div>
34− </div>
35− </button>
82+ </button>
36
83
37− <div className={`abs flex-column bg-white t-12 l-0 w-100 ${menuVisibility}`}>
84+ <div className={`abs flex-column bg-white t-12 l-0 w-100 z-1 ${menuVisibility}`}>
38− <div className={'pv-1 b-solid b-gray-50 b-2 bb-0'} />
85+ <div className={'pv-1 b-solid b-gray-50 b-2 bb-0'} />
39
86
40− { props.children }
87+ { optionElems }
41
88
42− <div className={'pv-1 b-solid b-gray-50 b-2 bt-0'} />
89+ <div className={'pv-1 b-solid b-gray-50 b-2 bt-0'} />
43− </div>
90+ </div>
44
91
45− </div>
92+ </div>
46− )
93+ )
94+ }
47}
95}
48
96
49InnerLabelDropdown.propTypes = {
97InnerLabelDropdown.propTypes = {
50 disabled: PropTypes.bool,
98 disabled: PropTypes.bool,
51− isOpen: PropTypes.bool,
52− handleToggle: PropTypes.func,
53− handleClose: PropTypes.func,
54 className: PropTypes.string,
99 className: PropTypes.string,
55 title: PropTypes.string,
100 title: PropTypes.string,
56− children: PropTypes.node,
57 style: PropTypes.object,
101 style: PropTypes.object,
58 currentSelectionTitle: PropTypes.string,
102 currentSelectionTitle: PropTypes.string,
103+ children: PropTypes.node,
59};
104};
60
105
61−
62InnerLabelDropdown.defaultProps = {
106InnerLabelDropdown.defaultProps = {
63− isOpen: false,
107+ disabled: false,
64 className: '',
108 className: '',
65 title: '',
109 title: '',
66− currentSelectionTitle: '',
67− handleToggle: () => {},
68− handleClose: () => {},
69− disabled: false,
70 style: {},
110 style: {},
111+ currentSelectionTitle: '',
71};
112};
72
113
73export default InnerLabelDropdown
114export default InnerLabelDropdown
src/bridge/style/extend.css+4
@@ -481,3 +481,7 @@ code {
481.full-width {
481.full-width {
482 width: 100%;
482 width: 100%;
483}
483}
484+
485+.z-1 {
486+ z-index: 1
487+}
src/bridge/views/Network.js+43−98
@@ -1,11 +1,7 @@
1import Maybe from 'folktale/maybe'
1import Maybe from 'folktale/maybe'
2import React from 'react'
2import React from 'react'
3import { Button } from '../components/Base'
3import { Button } from '../components/Base'
4−import {
5− DropdownItem,
6− InnerLabelDropdown,
4+import { InnerLabelDropdown } from '../components/Base'
7− DropdownDivider,
8−} from '../components/Base'
9import { Row, Col, H1, P } from '../components/Base'
5import { Row, Col, H1, P } from '../components/Base'
10import * as azimuth from 'azimuth-js'
6import * as azimuth from 'azimuth-js'
11import Web3 from 'web3'
7import Web3 from 'web3'
@@ -19,21 +15,9 @@ class Network extends React.Component {
19 constructor(props) {
15 constructor(props) {
20 super(props)
16 super(props)
21
17
22− this.state = {
23− dropdownOpen: false
24− };
25−
26− this.toggle = this.toggle.bind(this);
27− this.close = this.close.bind(this);
28 this.handleNetworkChange = this.handleNetworkChange.bind(this);
18 this.handleNetworkChange = this.handleNetworkChange.bind(this);
29 }
19 }
30
20
31− toggle() {
32− this.setState((state, _) => ({
33− dropdownOpen: !state.dropdownOpen
34− }))
35− }
36−
37 handleNetworkChange(network) {
21 handleNetworkChange(network) {
38 const { setNetworkType, setNetwork } = this.props
22 const { setNetworkType, setNetwork } = this.props
39
23
@@ -99,97 +83,58 @@ class Network extends React.Component {
99 }
83 }
100 }
84 }
101
85
102− selectClose(f) {
86+ getNetworkOptions() {
103− f()
87+ return [{
104− this.setState({ dropdownOpen: false })
88+ title: 'Main Network (default)',
105− }
89+ value: NETWORK_NAMES.MAINNET
106−
90+ }, {
107−
91+ title: 'Local Node',
108− close () {
92+ value: NETWORK_NAMES.LOCAL
109− this.setState({ dropdownOpen: false })
93+ }, {
94+ title: 'Ropsten',
95+ value: NETWORK_NAMES.ROPSTEN
96+ }, {
97+ type: 'divider'
98+ }, {
99+ title: 'Offline',
100+ value: NETWORK_NAMES.OFFLINE
101+ }, ]
110 }
102 }
111
103
112 render() {
104 render() {
113− const { dropdownOpen } = this.state
114 const { networkType, pushRoute } = this.props
105 const { networkType, pushRoute } = this.props
106+ const networkOptions = this.getNetworkOptions()
115
107
116 return (
108 return (
117 <Row>
109 <Row>
118 <Col>
110 <Col>
119 <H1>{ 'Select Network' }</H1>
111 <H1>{ 'Select Network' }</H1>
120
112
121−
122− <P>
113+ <P>
123− {
114+ {
124− "Please select the Ethereum node you'd like to send " +
115+ "Please select the Ethereum node you'd like to send " +
125− "transactions to. For highly valuable keys, please select " +
116+ "transactions to. For highly valuable keys, please select " +
126− "offline mode."
117+ "offline mode."
127− }
118+ }
128− </P>
119+ </P>
129−
120+
130−
131− <InnerLabelDropdown
121+ <InnerLabelDropdown
132− className={'mt-6'}
122+ className={'mt-6'}
133− handleToggle={this.toggle}
134− handleClose={this.close}
135− isOpen={dropdownOpen}
136− title={'Node:'}
123+ title={'Node:'}
124+ handleUpdate={this.handleNetworkChange}
125+ options={networkOptions}
137− currentSelectionTitle={renderNetworkType(networkType)}
126+ currentSelectionTitle={renderNetworkType(networkType)}>
138− >
139−
140− <DropdownItem
141− isSelected={ false }
142− onClick={
143− () => this.selectClose(() => this.handleNetworkChange(NETWORK_NAMES.MAINNET))
144− }
145− >
146− { 'Main Network (default)' }
147− </DropdownItem>
148−
149− <DropdownItem
150− isSelected={false}
151− onClick={
152− () => this.selectClose(() => this.handleNetworkChange(NETWORK_NAMES.LOCAL))
153− }
154− >
155− { //'Ganache Node @ Port 8545 (Default)'
156− }
157− {'Local Node'}
158− </DropdownItem>
159−
160− <DropdownItem
161− // disabled={ true }
162− isSelected={ false }
163− onClick={
164− () => this.selectClose(() => this.handleNetworkChange(NETWORK_NAMES.ROPSTEN))
165− }
166− >
167− { 'Ropsten' }
168− </DropdownItem>
169−
170− <DropdownDivider />
171−
172− <DropdownItem
173− // disabled={ true }
174− isSelected={ false }
175− onClick={
176− () => this.selectClose(() => this.handleNetworkChange(NETWORK_NAMES.OFFLINE))
177− }
178− >
179− { 'Offline' }
180− </DropdownItem>
181−
182− </InnerLabelDropdown>
127+ </InnerLabelDropdown>
183−
128+
184− <Button
129+ <Button
185− className={'mt-10'}
130+ className={'mt-10'}
186− onClick={ () => pushRoute(ROUTE_NAMES.WALLET) }
131+ onClick={ () => pushRoute(ROUTE_NAMES.WALLET) }
187− >
132+ >
188− { 'Continue →' }
133+ { 'Continue →' }
189− </Button>
134+ </Button>
190−
135+
191− </Col>
136+ </Col>
192− </Row>
137+ </Row>
193 )
138 )
194 }
139 }
195}
140}