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