git.iko.soy/bridge
on af19266 help sign in
bridge/src/indigo-react/components/CheckboxInput.js
79 lines 1.5 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={cn(className, 'mv2')}
39 row
40 align="center"
41 style={{
42 ...(disabled && {
43 pointerEvents: 'none',
44 cursor: 'not-allowed',
45 }),
46 }}>
47 {/* we totally hide the checkbox itself */}
48 <Flex.Item
49 as="input"
50 {...rest}
51 className={cn('super-hidden')}
52 id={name}
53 name={name}
54 {...bind}
55 />
56 {/* and then display a prettier one in its stead */}
57 <Flex.Item
58 flex
59 as="label"
60 className="f6 mr3 lh-tall us-none clickable flex-row align-center"
61 htmlFor={name}>
62 <Flex
63 justify="center"
64 align="center"
65 className={cn('b-black b1 p1 mr3', {
66 'bg-black white': data,
67 'bg-white black': !data,
68 })}
69 style={{
70 height: '14px',
71 width: '14px',
72 }}>
73 {data && '✓'}
74 </Flex>
75 {label}
76 </Flex.Item>
77 </Flex>
78 );