6156b72 · bridge · git.iko.soy

src/form/Inputs.js+1−52

compare with master

unifiedsplit

@@ -1,6 +1,5 @@

1import React from 'react';

2−import { Input, AccessoryIcon, Flex } from 'indigo-react';

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

3−import cn from 'classnames';

4import { useField } from 'react-final-form';

3import { useField } from 'react-final-form';

5

4

6import {

5import {

@@ -197,53 +196,3 @@ export function EmailInput({ ...rest }) {

197 />

196 />

198 );

197 );

199}

198}

200−

201−export const ColorInput = ({

202− name,

203− colors,

204− disabled = false,

205− label,

206− className,

207−}) => {

208− const { input } = useField(name, { subscription: { value: true } });

209−

210− const isWhite = c => c === '#FFFFFF';

211−

212− // disabled = disabled || submitting || submitSucceeded;

213− return (

214− <Flex col className={cn(className, 'flex-wrap mb1')}>

215− <Flex.Item

216− as="label"

217− className={cn('f6 lh-tall', {

218− black: !disabled,

219− gray4: disabled,

220− })}

221− htmlFor={name}>

222− {label}

223− </Flex.Item>

224− <div className="flex flex-wrap">

225− {colors.map(c => (

226− <button

227− type="button"

228− key={c}

229− className={cn('m0 p0 h7 w7 p2 flex flex-center', {

230− 'b b-black': isWhite(c),

231− })}

232− style={{ backgroundColor: c }}

233− onClick={() => input.onChange(c)}>

234− {c === input.value ? (

235− <div

236− className={cn(

237− { 'bg-black': isWhite(c), 'bg-white': !isWhite(c) },

238− 'w2 h2 r-full'

239− )}

240− />

241− ) : (

242− <div />

243− )}

244− </button>

245− ))}

246− </div>

247− </Flex>

248− );

249−};

src/form/SubmitButton.js+1−3

@@ -14,7 +14,6 @@ export default function SubmitButton({

14 handleSubmit,

15 ...rest

16}) {

17− const form = useFormState();

18 const {

17 const {

19 valid,

18 valid,

20 validating,

19 validating,

@@ -24,8 +23,7 @@ export default function SubmitButton({

24 dirtySinceLastSubmit,

23 dirtySinceLastSubmit,

25 submitErrors,

24 submitErrors,

26 submitSucceeded,

25 submitSucceeded,

27− } = form;

26+ } = useFormState();

28− console.log(form);

29

27

30 const onlyWarningInSubmitErrors = onlyHasWarning(submitErrors);

28 const onlyWarningInSubmitErrors = onlyHasWarning(submitErrors);

31

29

src/indigo-react/components/ColorInput.jsnew file+49

@@ -0,0 +1,49 @@

1+import React from 'react';

2+import { useField } from 'react-final-form';

3+import cn from 'classnames';

4+import Flex from './Flex';

5+

6+const ColorInput = ({ name, colors, disabled = false, label, className }) => {

7+ const { input } = useField(name, { subscription: { value: true } });

8+

9+ const isWhite = c => c.toUpperCase() === '#FFFFFF';

10+

11+ return (

12+ <Flex col className={cn(className, 'flex-wrap mb1')}>

13+ <Flex.Item

14+ as="label"

15+ className={cn('f6 lh-tall', {

16+ black: !disabled,

17+ gray4: disabled,

18+ })}

19+ htmlFor={name}>

20+ {label}

21+ </Flex.Item>

22+ <div className="flex flex-wrap">

23+ {colors.map(c => (

24+ <button

25+ type="button"

26+ key={c}

27+ className={cn('m0 p0 h7 w7 p2 flex flex-center', {

28+ 'b b-black': isWhite(c),

29+ })}

30+ style={{ backgroundColor: c }}

31+ onClick={() => input.onChange(c)}>

32+ {c === input.value ? (

33+ <div

34+ className={cn(

35+ { 'bg-black': isWhite(c), 'bg-white': !isWhite(c) },

36+ 'w2 h2 r-full'

37+ )}

38+ />

39+ ) : (

40+ <div />

41+ )}

42+ </button>

43+ ))}

44+ </div>

45+ </Flex>

46+ );

47+};

48+

49+export default ColorInput;

src/indigo-react/index.js+1

@@ -9,5 +9,6 @@ export { default as AccessoryIcon } from './components/AccessoryIcon';

9export { default as Button } from './components/Button';

10export { default as IconButton } from './components/IconButton';

11export { default as LinkButton } from './components/LinkButton';

12+export { default as ColorInput } from './components/ColorInput';

12

13

13export * from './components/Typography';

14export * from './components/Typography';

src/views/SigilGenerator.js+2−2

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

1import React, { useRef, useCallback } from 'react';

2−import { Grid, Flex } from 'indigo-react';

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

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

4import { FORM_ERROR } from 'final-form';

5import { colors } from 'indigo-tokens';

@@ -17,7 +17,7 @@ import { composeValidator, buildNumberValidator } from 'form/validators';

17import BridgeForm from 'form/BridgeForm';

18import FormError from 'form/FormError';

19import SubmitButton from 'form/SubmitButton';

20−import { NumberInput, ColorInput } from 'form/Inputs';

20+import { NumberInput } from 'form/Inputs';

21

22const BG_COLORS = [

23 colors.black,