e082c49 · bridge · git.iko.soy

git.iko.soy/bridge

feat: convert hardware and advanced tabs to accordions

commite082c49a60b4b8d8f2be807c30216599b7a1f99a authorMatt Condon (shrugs) <mattgcondon@gmail.com> dateTue 23 Jul 2019, 16:58 (7 years ago) parent1b8c8df

6 files changed+60−9

compare with master

unifiedsplit

src/components/Accordion.js+47 src/components/Tabs.js+1−1 src/views/Login/Advanced.js+4−3 src/views/Login/Hardware.js+4−3 src/views/Login/Mnemonic.js+2−1 src/views/Login/Ticket.js+2−1

src/components/Accordion.jsnew file+47

@@ -0,0 +1,47 @@

1+import React from 'react';

2+import { Grid, AccessoryIcon } from 'indigo-react';

4+export default function Accordion({

5+ views,

6+ options,

7+ currentTab,

8+ onTabChange,

9+ className,

10+ ...rest

11+}) {

12+ const Tab = views[currentTab];

13+

14+ return (

15+ <Grid className={className}>

16+ {options.map((option, i) => {

17+ const isActive = option.value === currentTab;

18+

19+ return (

20+ <React.Fragment key={option.value}>

21+ <Grid.Item

22+ full

23+ className="f5 pv3 rel clickable"

24+ onClick={() => onTabChange(isActive ? undefined : option.value)}>

25+ {option.text}

26+ <div

27+ className="abs"

28+ style={{

29+ top: 0,

30+ right: 0,

31+ height: '100%',

32+ width: '44px',

33+ overflow: 'hidden',

34+ }}>

35+ <AccessoryIcon className="black">

36+ {isActive ? '▲' : '▼'}

37+ </AccessoryIcon>

38+ </div>

39+ </Grid.Item>

40+ {isActive && <Grid.Item full as={Tab} />}

41+ <Grid.Divider />

42+ </React.Fragment>

43+ );

44+ })}

45+ </Grid>

46+ );

47+}

src/components/Tabs.js+1−1

@@ -42,7 +42,7 @@ export default function Tabs({

4242 );

4343 })}

4444 </Grid.Item>

45− <Grid.Item full as={Tab} className="mt6" {...rest} />

45+ <Grid.Item full as={Tab} {...rest} />

4646 </Grid>

4747 );

4848}

src/views/Login/Advanced.js+4−3

@@ -1,6 +1,7 @@

11import React, { useState } from 'react';

3−import Tabs from 'components/Tabs';

3+import Accordion from 'components/Accordion';

45import PrivateKey from './PrivateKey';

56import Keystore from './Keystore';

@@ -20,10 +21,10 @@ const OPTIONS = [

2021];

2122

2223export default function Advanced({ loginCompleted, className }) {

23− const [currentTab, setCurrentTab] = useState(NAMES.PRIVATE_KEY);

24+ const [currentTab, setCurrentTab] = useState(undefined);

2425

2526 return (

26− <Tabs

27+ <Accordion

2728 className={className}

2829 views={VIEWS}

2930 options={OPTIONS}

src/views/Login/Hardware.js+4−3

@@ -1,6 +1,7 @@

11import React, { useState } from 'react';

3−import Tabs from 'components/Tabs';

3+import Accordion from 'components/Accordion';

45import Ledger from './Ledger';

56import Trezor from './Trezor';

@@ -20,10 +21,10 @@ const OPTIONS = [

2021];

2122

2223export default function Hardware({ loginCompleted, className }) {

23− const [currentTab, setCurrentTab] = useState(NAMES.LEDGER);

24+ const [currentTab, setCurrentTab] = useState(undefined);

2425

2526 return (

26− <Tabs

27+ <Accordion

2728 className={className}

2829 views={VIEWS}

2930 options={OPTIONS}

src/views/Login/Mnemonic.js+2−1

@@ -1,4 +1,5 @@

11import React, { useEffect } from 'react';

2+import cn from 'classnames';

23import { Just, Nothing } from 'folktale/maybe';

34import { Grid, Input, CheckboxInput } from 'indigo-react';

@@ -67,7 +68,7 @@ export default function Mnemonic({ className }) {

6768 ]);

6869

6970 return (

70− <Grid className={className}>

71+ <Grid className={cn('mt4', className)}>

7172 <Grid.Item full as={Input} {...mnemonicInput} />

7273

7374 {useAdvanced && (

src/views/Login/Ticket.js+2−1

@@ -1,4 +1,5 @@

11import { Just, Nothing } from 'folktale/maybe';

2+import cn from 'classnames';

23import React, { useCallback, useState, useEffect } from 'react';

34import * as azimuth from 'azimuth-js';

45import * as ob from 'urbit-ob';

@@ -165,7 +166,7 @@ export default function Ticket({ className }) {

165166 ]);

166167

167168 return (

168− <Grid className={className}>

169+ <Grid className={cn('mt4', className)}>

169170 <Grid.Item full as={Input} {...pointInput} />

170171

171172 {!isUsingShards && <Grid.Item full as={Input} {...ticketInput} />}