git.iko.soy/bridge
on master help sign in
Refactoring tabbed view into dedicated component
054379eFang
src/bridge/components/Tabs.jsnew file+18
compare with master
unifiedsplit
@@ -0,0 +1,18 @@
1+import React from 'react';
2+import HorizontalSelector from './HorizontalSelector';
3+
4+export default function Tabs({
5+ tabViews,
6+ tabOptions,
7+ currentTab,
8+ onTabChange,
9+ ...rest
10+}) {
11+ const Component = tabViews[currentTab];
12+ return (
13+ <>
14+ <HorizontalSelector options={tabOptions} onChange={onTabChange} />
15+ <Component {...rest} />
16+ </>
17+ );
18+}
src/bridge/views/Login.js+14−23
@@ -3,7 +3,7 @@ import React from 'react';
3import * as azimuth from 'azimuth-js';
3import * as azimuth from 'azimuth-js';
4
4
5import { H1, Row, Col } from '../components/Base';
5import { H1, Row, Col } from '../components/Base';
6−import HorizontalSelector from '../components/HorizontalSelector';
6+import Tabs from '../components/Tabs';
7
7
8import Ticket from './Login/Ticket';
8import Ticket from './Login/Ticket';
9import Mnemonic from './Login/Mnemonic';
9import Mnemonic from './Login/Mnemonic';
@@ -89,34 +89,25 @@ class Login extends React.Component {
89 { title: 'Advanced', value: TABS.ADVANCED },
89 { title: 'Advanced', value: TABS.ADVANCED },
90 ];
90 ];
91
91
92− //TODO probably needs a dedicated component because styling
93− const tabs = (
92+ const tabViews = {
94− <HorizontalSelector
95− options={tabOptions}
96− onChange={this.handleTabChange}
97− />
98− );
99−
100− const login = (() => {
101− switch (this.state.currentTab) {
102− case TABS.TICKET:
93+ [TABS.TICKET]: Ticket,
103− return <Ticket loginCompleted={this.continue} />;
104− case TABS.MNEMONIC:
94+ [TABS.MNEMONIC]: Mnemonic,
105− return <Mnemonic loginCompleted={this.continue} />;
106− case TABS.ADVANCED:
95+ [TABS.ADVANCED]: Advanced,
107− return <Advanced loginCompleted={this.continue} />;
108− default:
109− throw new Error('weird tab ' + this.status.currentTab);
110− }
111− })();
96+ };
112
97
113 return (
98 return (
114 <Row>
99 <Row>
115 <Col>
100 <Col>
116 <H1>{'Login'}</H1>
101 <H1>{'Login'}</H1>
117
102
118− {tabs}
103+ <Tabs
119− {login}
104+ tabViews={tabViews}
105+ tabOptions={tabOptions}
106+ currentTab={this.state.currentTab}
107+ onTabChance={this.handleTabChange}
108+ //
109+ loginCompleted={this.continue}
110+ />
120 </Col>
111 </Col>
121 </Row>
112 </Row>
122 );
113 );