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