git.iko.soy/bridge
on 97280b6 help sign in
bridge/src/indigo-react/components/ColorInput.js
49 lines 1.3 kB history raw
1import React from 'react';
2import { useField } from 'react-final-form';
3import cn from 'classnames';
4import Flex from './Flex';
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 <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};
49export default ColorInput;