git.iko.soy/bridge
on 363a711 help sign in
bridge/src/indigo-react/components/CheckboxInput.js
81 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 visiblyPassed,
19 error,
20 hintError,
21 data,
22 bind,
23 autoFocus,
24 disabled,
26 // ignored
27 initialValue,
28 validators,
29 transformers,
31 // extra
32 ...rest
33}) {
34 return (
35 <Flex
36 row
37 align="center"
38 className={cn(className, 'mv2', {
39 black: !disabled,
40 gray4: disabled,
41 })}
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('b1 p1 mr3', {
67 'bg-gray1': disabled,
68 'bg-black white b-black': !disabled && data,
69 'bg-white black b-black': !disabled && !data,
70 })}
71 style={{
72 height: '14px',
73 width: '14px',
74 }}>
75 {data && '✓'}
76 </Flex>
77 {label}
78 </Flex.Item>
79 </Flex>
80 );