bdc5c92 · bridge · git.iko.soy

src/components/InputSigil.js+9−11

compare with master

unifiedsplit

@@ -1,19 +1,18 @@

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

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

3−import * as ob from 'urbit-ob';

4

3

5import MaybeSigil from './MaybeSigil';

4import MaybeSigil from './MaybeSigil';

6

5

7−const selectColorway = (pass, fail, focused) => {

6+const selectColorway = (valid, error, active) => {

8− if (pass) {

7+ if (valid) {

9 return ['#2AA779', '#FFFFFF'];

8 return ['#2AA779', '#FFFFFF'];

10 }

9 }

11

10

12− if (focused) {

11+ if (active) {

13 return ['#4330FC', '#FFFFFF'];

12 return ['#4330FC', '#FFFFFF'];

14 }

13 }

15

14

16− if (fail) {

15+ if (error) {

17 return ['#F8C134', '#FFFFFF'];

16 return ['#F8C134', '#FFFFFF'];

18 }

17 }

19

18

@@ -24,25 +23,24 @@ export default function InputSigil({

24 className,

23 className,

25 patp,

24 patp,

26 size,

25 size,

27− pass,

26+ valid,

28 error,

27 error,

29− focused,

28+ active,

30 ...rest

29 ...rest

31}) {

30}) {

32 const [lastValidPatp, setLastValidPatp] = useState(patp);

31 const [lastValidPatp, setLastValidPatp] = useState(patp);

33

32

34 useEffect(() => {

33 useEffect(() => {

35− if (ob.isValidPatp(patp)) {

34+ if (valid) {

36 setLastValidPatp(patp);

35 setLastValidPatp(patp);

37 }

36 }

38− }, [patp]);

37+ }, [patp, valid]);

39

38

40 return (

39 return (

41 <MaybeSigil

40 <MaybeSigil

42 patp={Just(lastValidPatp)}

41 patp={Just(lastValidPatp)}

43 size={size}

42 size={size}

44− colors={selectColorway(pass, error, focused)}

43+ colors={selectColorway(valid, error, active)}

45− margin={0}

46 {...rest}

44 {...rest}

47 />

45 />

48 );

46 );

src/components/MaybeSigil.js+1−1

@@ -14,7 +14,7 @@ export default function MaybeSigil({ className, patp, size, ...rest }) {

14 });

15

16 return validPatp ? (

17− <Sigil patp={validPatp} size={size} margin={0} {...rest} />

17+ <Sigil patp={validPatp} size={size} {...rest} />

18 ) : (

19 <AspectRatio aspectRatio={1} />

20 );

src/components/Passport.js+1−2

@@ -75,7 +75,7 @@ function Passport({ point, className, ticket = null, address = Nothing() }) {

75 return (

76 <Grid gap={4} className={cn('bg-black r8 p7', className)}>

77 <Grid.Item cols={[1, 4]}>

78− <MaybeSigil patp={name} size={64} margin={0} />

78+ <MaybeSigil patp={name} size={64} />

79 </Grid.Item>

80 <Grid.Item as={Flex} cols={[4, 13]} col justify="between">

81 <Flex.Item className="mono white f5">{visualName}</Flex.Item>

@@ -141,7 +141,6 @@ Passport.Mini = function MiniPassport({ point, className, inverted, ...rest }) {

141 <Sigil

142 patp={name}

143 size={64}

144− margin={0}

145 colors={inverted ? INVERTED_COLORWAY : undefined}

144 colors={inverted ? INVERTED_COLORWAY : undefined}

146 />

145 />

147 </Grid.Item>

146 </Grid.Item>

src/form/Inputs.js+2−3

@@ -97,10 +97,9 @@ export function PointInput({ name, size = 4, ...rest }) {

97 <InputSigil

98 patp={value}

99 size={44}

100− margin={8}

101− pass={valid}

100+ valid={valid}

102− focused={active}

103 error={error}

101 error={error}

102+ active={active}

104 />

103 />

105 ) : null

104 ) : null

106 }

105 }