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