git.iko.soy/bridge
on 0c3b295 help sign in
bridge/src/indigo-react/components/CheckboxInput.js
80 lines 1.5 kB history raw
1import React from 'react';
2import cn from 'classnames';
4import Flex from './Flex';
5import AspectRatio from 'components/AspectRatio';
7// TODO: make this look like screens
8export default function CheckboxInput({
9 // visuals
10 name,
11 label,
12 className,
14 // callbacks
15 onValue,
16 onEnter,
18 // state from hook
19 focused,
20 pass,
21 visiblyPassed,
22 error,
23 hintError,
24 data,
25 bind,
26 autoFocus,
27 disabled,
29 // ignored
30 initialValue,
31 validators,
32 transformers,
34 // extra
35 ...rest
36}) {
37 return (
38 <Flex
39 className={cn(className, 'mv2')}
40 row
41 align="center"
42 style={{
43 ...(disabled && {
44 pointerEvents: 'none',
45 cursor: 'not-allowed',
46 }),
47 }}>
48 {/* we totally hide the checkbox itself */}
49 <Flex.Item
50 as="input"
51 {...rest}
52 className={cn('super-hidden')}
53 id={name}
54 name={name}
55 {...bind}
56 />
57 {/* and then display a prettier one in its stead */}
58 <Flex.Item
59 flex
60 as="label"
61 className="f6 mr3 lh-tall us-none clickable flex-row align-center"
62 htmlFor={name}>
63 <Flex
64 justify="center"
65 align="center"
66 className={cn('b-black b1 p1 mr3', {
67 'bg-black white': data,
68 'bg-white black': !data,
69 })}
70 style={{
71 height: '14px',
72 width: '14px',
73 }}>
74 {data && '✓'}
75 </Flex>
76 {label}
77 </Flex.Item>
78 </Flex>
79 );