git.iko.soy/bridge
on 537ff5b help sign in
bridge/src/indigo-react/components/CheckboxInput.js
80 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 hintError,
23 data,
24 bind,
25 autoFocus,
26 disabled,
28 // ignored
29 initialValue,
30 validators,
31 transformers,
33 // extra
34 ...rest
35}) {
36 return (
37 <Flex
38 className={className}
39 row
40 align="center"
41 style={{
42 ...(disabled && {
43 pointerEvents: 'none',
44 cursor: 'not-allowed',
45 }),
46 }}>
47 <Flex.Item
48 as="input"
49 {...rest}
50 className={cn(
51 'b b1 p3 outline-none',
52 {
53 'bg-white': !disabled,
54 'bg-gray1': disabled,
55 },
56 {
57 gray4: !focused,
58 black: focused,
59 },
60 {
61 'b-green3': visiblyPassed,
62 'b-black': focused && !visiblyPassed,
63 'b-yellow3': !focused && hintError,
64 'b-gray3': !focused && !hintError && !visiblyPassed,
65 }
66 )}
67 id={name}
68 name={name}
69 {...bind}
70 />
71 <Flex.Item
72 as="label"
73 className="f6 ph3 lh-tall us-none"
74 htmlFor={name}
75 flex>
76 {label}
77 </Flex.Item>
78 </Flex>
79 );