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