git.iko.soy/bridge
on 6bf0691 help sign in
bridge/src/form/ColorInput.jsx
50 lines 1.4 kB history raw
1import React from 'react';
2import { useField } from 'react-final-form';
3import cn from 'classnames';
4import { Flex } from 'indigo-react';
6const ColorInput = ({ name, colors, disabled = false, label, className }) => {
7 const { input } = useField(name, { subscription: { value: true } });
9 const isWhite = c => c.toUpperCase() === '#FFFFFF';
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 <Flex.Item as={Flex} wrap>
23 {colors.map(c => (
24 <Flex.Item
25 as="button"
26 type="button"
27 key={c}
28 className={cn('m0 p0 h7 w7 p2 flex flex-center', {
29 'b b-black': isWhite(c),
30 })}
31 style={{ backgroundColor: c }}
32 onClick={() => input.onChange(c)}>
33 {c === input.value ? (
34 <div
35 className={cn(
36 { 'bg-black': isWhite(c), 'bg-white': !isWhite(c) },
37 'w2 h2 r-full'
38 )}
39 />
40 ) : (
41 <div />
42 )}
43 </Flex.Item>
44 ))}
45 </Flex.Item>
46 </Flex>
47 );
48};
50export default ColorInput;