e082c49 · bridge · git.iko.soy

src/components/Accordion.jsnew file+47

compare with master

unifiedsplit

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

1+import React from 'react';

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

3+

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({

42 );

43 })}

44 </Grid.Item>

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

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

46 </Grid>

47 );

48}

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

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

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

2

3−import Tabs from 'components/Tabs';

3+import Accordion from 'components/Accordion';

4+

4import PrivateKey from './PrivateKey';

5import PrivateKey from './PrivateKey';

5import Keystore from './Keystore';

6import Keystore from './Keystore';

6

7

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

20];

21];

21

22

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

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

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

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

24

25

25 return (

26 return (

26− <Tabs

27+ <Accordion

27 className={className}

28 className={className}

28 views={VIEWS}

29 views={VIEWS}

29 options={OPTIONS}

30 options={OPTIONS}

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

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

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

2

3−import Tabs from 'components/Tabs';

3+import Accordion from 'components/Accordion';

4+

4import Ledger from './Ledger';

5import Ledger from './Ledger';

5import Trezor from './Trezor';

6import Trezor from './Trezor';

6

7

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

20];

21];

21

22

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

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

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

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

24

25

25 return (

26 return (

26− <Tabs

27+ <Accordion

27 className={className}

28 className={className}

28 views={VIEWS}

29 views={VIEWS}

29 options={OPTIONS}

30 options={OPTIONS}

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

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

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

2+import cn from 'classnames';

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

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

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

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

4

5

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

67 ]);

68 ]);

68

69

69 return (

70 return (

70− <Grid className={className}>

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

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

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

72

73

73 {useAdvanced && (

74 {useAdvanced && (

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

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

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

2+import cn from 'classnames';

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

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

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

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

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

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

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

165 ]);

166 ]);

166

167

167 return (

168 return (

168− <Grid className={className}>

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

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

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

170

171

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

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