git.iko.soy/bridge
on master help sign in
- Refactored common dropdown functionality into the InnerLabelDropdown component

- Fixed a z-index issue on dropdown menu

commit5e6f67a8bec37fc5ec10e0ab2fa8833f9850c947 authorChris Johnson <chris@cjohnson.io> dateTue 9 Apr 2019, 14:24 (8 years ago) parent565935b
3 files changed+135−145
compare with master
unifiedsplit
src/bridge/components/InnerLabelDropdown.js+88−47 src/bridge/style/extend.css+4 src/bridge/views/Network.js+43−98
src/bridge/components/InnerLabelDropdown.js+88−47
@@ -1,73 +1,114 @@
11import React from 'react'
22import PropTypes from 'prop-types';
33
4+import { DropdownItem, DropdownDivider } from '../components/Base'
45
5−const InnerLabelDropdown = props => {
6−
7− const menuVisibility = props.isOpen === true
8− ? 'visible'
9− : 'hidden';
10−
11− const selectedClasses = props.isOpen === true
12− ? 'br-blue'
13− : 'br-gray-50';
14−
15− const fullWidthClass = props.fullWidth ? 'full-width' : ''
16−
17− return (
18− <div className={`rel table ${fullWidthClass}`}>
19− <div
20− className={`fix full o-0 ${menuVisibility}`}
21− onClick={props.handleClose}
22− />
23−
24− <button
25− className={`h-10 mp-0 bg-white outline-blue sans ${props.className} ${fullWidthClass}`}
26− onClick={props.handleToggle}
27− disabled={props.disabled}>
28− <div className={'flex'}>
29− <div className={`ph-4 flex-center-all b-2 br-0 b-solid h-10 ${selectedClasses} ${fullWidthClass}`}>
30− <div className={'text-400 mr-2'}>{props.title}</div>
31− <div className={'text-600'}>{props.currentSelectionTitle}</div>
6+class InnerLabelDropdown extends React.Component {
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+
54+ const menuVisibility = state.isOpen === true
55+ ? 'visible'
56+ : 'hidden';
57+
58+ const selectedClasses = state.isOpen === true
59+ ? 'br-blue'
60+ : 'br-gray-50';
61+
62+ const fullWidthClass = props.fullWidth ? 'full-width' : ''
63+
64+ return (
65+ <div className={`rel table ${fullWidthClass}`}>
66+ <div
67+ className={`fix full o-0 ${menuVisibility}`}
68+ onClick={this.close}
69+ />
70+
71+ <button
72+ className={`h-10 mp-0 bg-white outline-blue sans ${props.className} ${fullWidthClass}`}
73+ onClick={this.toggle}
74+ disabled={props.disabled}>
75+ <div className={'flex'}>
76+ <div className={`ph-4 flex align-center b-2 br-0 b-solid h-10 ${selectedClasses} ${fullWidthClass}`}>
77+ <div className={'text-400 mr-2'}>{props.title}</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>
3281 </div>
33− <div className={'white bg-blue s-10 flex-center-all text-sm'}>{'▼'}</div>
34− </div>
35− </button>
82+ </button>
3683
37− <div className={`abs flex-column bg-white t-12 l-0 w-100 ${menuVisibility}`}>
38− <div className={'pv-1 b-solid b-gray-50 b-2 bb-0'} />
84+ <div className={`abs flex-column bg-white t-12 l-0 w-100 z-1 ${menuVisibility}`}>
85+ <div className={'pv-1 b-solid b-gray-50 b-2 bb-0'} />
3986
40− { props.children }
87+ { optionElems }
4188
42− <div className={'pv-1 b-solid b-gray-50 b-2 bt-0'} />
43− </div>
89+ <div className={'pv-1 b-solid b-gray-50 b-2 bt-0'} />
90+ </div>
4491
45− </div>
46− )
92+ </div>
93+ )
94+ }
4795}
4896
4997InnerLabelDropdown.propTypes = {
5098 disabled: PropTypes.bool,
51− isOpen: PropTypes.bool,
52− handleToggle: PropTypes.func,
53− handleClose: PropTypes.func,
5499 className: PropTypes.string,
55100 title: PropTypes.string,
56− children: PropTypes.node,
57101 style: PropTypes.object,
58102 currentSelectionTitle: PropTypes.string,
103+ children: PropTypes.node,
59104};
60105
61−
62106InnerLabelDropdown.defaultProps = {
63− isOpen: false,
107+ disabled: false,
64108 className: '',
65109 title: '',
66− currentSelectionTitle: '',
67− handleToggle: () => {},
68− handleClose: () => {},
69− disabled: false,
70110 style: {},
111+ currentSelectionTitle: '',
71112};
72113
73114export default InnerLabelDropdown
src/bridge/style/extend.css+4
@@ -481,3 +481,7 @@ code {
481481.full-width {
482482 width: 100%;
483483}
484+
485+.z-1 {
486+ z-index: 1
487+}
src/bridge/views/Network.js+43−98
@@ -1,11 +1,7 @@
11import Maybe from 'folktale/maybe'
22import React from 'react'
33import { Button } from '../components/Base'
4−import {
5− DropdownItem,
6− InnerLabelDropdown,
7− DropdownDivider,
8−} from '../components/Base'
4+import { InnerLabelDropdown } from '../components/Base'
95import { Row, Col, H1, P } from '../components/Base'
106import * as azimuth from 'azimuth-js'
117import Web3 from 'web3'
@@ -19,21 +15,9 @@ class Network extends React.Component {
1915 constructor(props) {
2016 super(props)
2117
22− this.state = {
23− dropdownOpen: false
24− };
25−
26− this.toggle = this.toggle.bind(this);
27− this.close = this.close.bind(this);
2818 this.handleNetworkChange = this.handleNetworkChange.bind(this);
2919 }
3020
31− toggle() {
32− this.setState((state, _) => ({
33− dropdownOpen: !state.dropdownOpen
34− }))
35− }
36−
3721 handleNetworkChange(network) {
3822 const { setNetworkType, setNetwork } = this.props
3923
@@ -99,97 +83,58 @@ class Network extends React.Component {
9983 }
10084 }
10185
102− selectClose(f) {
103− f()
104− this.setState({ dropdownOpen: false })
105− }
106−
107−
108− close () {
109− this.setState({ dropdownOpen: false })
86+ getNetworkOptions() {
87+ return [{
88+ title: 'Main Network (default)',
89+ value: NETWORK_NAMES.MAINNET
90+ }, {
91+ title: 'Local Node',
92+ value: NETWORK_NAMES.LOCAL
93+ }, {
94+ title: 'Ropsten',
95+ value: NETWORK_NAMES.ROPSTEN
96+ }, {
97+ type: 'divider'
98+ }, {
99+ title: 'Offline',
100+ value: NETWORK_NAMES.OFFLINE
101+ }, ]
110102 }
111103
112104 render() {
113− const { dropdownOpen } = this.state
114105 const { networkType, pushRoute } = this.props
106+ const networkOptions = this.getNetworkOptions()
115107
116108 return (
117109 <Row>
118110 <Col>
119111 <H1>{ 'Select Network' }</H1>
120112
121−
122− <P>
123− {
124− "Please select the Ethereum node you'd like to send " +
125− "transactions to. For highly valuable keys, please select " +
126− "offline mode."
127− }
128− </P>
129−
130−
131− <InnerLabelDropdown
132− className={'mt-6'}
133− handleToggle={this.toggle}
134− handleClose={this.close}
135− isOpen={dropdownOpen}
136− title={'Node:'}
137− 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>
183−
184− <Button
185− className={'mt-10'}
186− onClick={ () => pushRoute(ROUTE_NAMES.WALLET) }
187− >
188− { 'Continue →' }
189− </Button>
190−
191− </Col>
192− </Row>
113+ <P>
114+ {
115+ "Please select the Ethereum node you'd like to send " +
116+ "transactions to. For highly valuable keys, please select " +
117+ "offline mode."
118+ }
119+ </P>
120+
121+ <InnerLabelDropdown
122+ className={'mt-6'}
123+ title={'Node:'}
124+ handleUpdate={this.handleNetworkChange}
125+ options={networkOptions}
126+ currentSelectionTitle={renderNetworkType(networkType)}>
127+ </InnerLabelDropdown>
128+
129+ <Button
130+ className={'mt-10'}
131+ onClick={ () => pushRoute(ROUTE_NAMES.WALLET) }
132+ >
133+ { 'Continue →' }
134+ </Button>
135+
136+ </Col>
137+ </Row>
193138 )
194139 }
195140}