git.iko.soy/bridge
on 82b5914 help sign in
bridge/src/indigo-react/components/CheckboxInput.js
79 lines 1.4 kB history raw
1import React from 'react';
2import cn from 'classnames';
4import Flex from './Flex';
6// TODO: make this look like screens
7export default function CheckboxInput({
8 // visuals
9 name,
10 label,
11 className,
13 // callbacks
14 onValue,
15 onEnter,
17 // state from hook
18 focused,
19 pass,
20 visiblyPassed,
21 error,
22 data,
23 bind,
24 autoFocus,
25 disabled,
27 // ignored
28 initialValue,
29 validators,
30 transformers,
32 // extra
33 ...rest
34}) {
35 return (
36 <Flex
37 className={className}
38 row
39 align="center"
40 style={{
41 ...(disabled && {
42 pointerEvents: 'none',
43 cursor: 'not-allowed',
44 }),
45 }}>
46 <Flex.Item
47 as="input"
48 {...rest}
49 className={cn(
50 'b b1 p3 outline-none',
51 {
52 'bg-white': !disabled,
53 'bg-gray1': disabled,
54 },
55 {
56 gray4: !focused,
57 black: focused,
58 },
59 {
60 'b-green3': visiblyPassed,
61 'b-black': focused && !visiblyPassed,
62 'b-yellow3': !focused && error,
63 'b-gray3': !focused && !error && !visiblyPassed,
64 }
65 )}
66 id={name}
67 name={name}
68 {...bind}
69 />
70 <Flex.Item
71 as="label"
72 className="f6 ph3 lh-tall us-none"
73 htmlFor={name}
74 flex>
75 {label}
76 </Flex.Item>
77 </Flex>
78 );