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