git.iko.soy/bridge
on 6b3335e help sign in
bridge/src/indigo-react/components/CheckboxInput.js
71 lines 1.7 kB history raw
1import React from 'react';
2import cn from 'classnames';
4import Flex from './Flex';
5import { useField } from 'react-final-form';
7export default function CheckboxInput({
8 // visuals
9 name,
10 label,
11 className,
13 disabled,
14}) {
15 const {
16 input,
17 meta: { submitting },
18 } = useField(name);
20 disabled = disabled || submitting;
22 return (
23 <Flex
24 row
25 align="center"
26 className={cn(className, 'mv2', {
27 black: !disabled,
28 gray4: disabled,
29 })}
30 style={{
31 ...(disabled && {
32 pointerEvents: 'none',
33 cursor: 'not-allowed',
34 }),
35 }}>
36 {/* we totally hide the checkbox itself */}
37 <Flex.Item
38 as="input"
39 type="checkbox"
40 className="super-hidden"
41 id={name}
42 {...input}
43 // TODO: this seems hacky... final-form should have a standard way to do this
44 checked={input.value}
45 onClick={e => input.onChange(!input.value)}
46 />
47 {/* and then display a prettier one in its stead */}
48 <Flex.Item
49 flex
50 as="label"
51 className="f6 mr3 lh-tall us-none clickable flex-row align-center"
52 htmlFor={name}>
53 <Flex
54 justify="center"
55 align="center"
56 className={cn('b1 p1 mr3', {
57 'bg-gray1': disabled,
58 'bg-black white b-black': !disabled && input.value,
59 'bg-white black b-black': !disabled && !input.value,
60 })}
61 style={{
62 height: '14px',
63 width: '14px',
64 }}>
65 {input.value && '✓'}
66 </Flex>
67 {label}
68 </Flex.Item>
69 </Flex>
70 );