git.iko.soy/bridge
on 5cc7169 help sign in
bridge/src/indigo-react/components/CheckboxInput.js
72 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,
12 style,
13 inline = false,
14 white = false,
16 disabled,
17}) {
18 const {
19 input,
20 meta: { submitting, submitSucceeded },
21 } = useField(name, { type: 'checkbox' });
23 disabled = disabled || submitting || submitSucceeded;
25 return (
26 <Flex
27 row
28 align="center"
29 className={cn(className, {
30 mv2: !inline,
31 black: !disabled,
32 gray4: disabled,
33 })}
34 style={{
35 ...(disabled && {
36 pointerEvents: 'none',
37 cursor: 'not-allowed',
38 }),
39 }}>
40 {/* we totally hide the checkbox itself */}
41 <Flex.Item as="input" className="super-hidden" id={name} {...input} />
42 {/* and then display a prettier one in its stead */}
43 <Flex.Item
44 flex
45 as="label"
46 className={cn(
47 { mr3: !inline },
48 'f6 lh-tall us-none pointer flex-row align-center'
49 )}
50 htmlFor={name}>
51 <Flex
52 justify="center"
53 align="center"
54 className={cn('b1 p1', {
55 mr3: !inline,
56 mr1: inline,
57 'bg-gray1': disabled,
58 'bg-black white b-black': !disabled && (input.checked || white),
59 'bg-white black b-black': !disabled && !input.checked,
60 })}
61 style={{
62 height: '14px',
63 width: '14px',
64 ...style,
65 }}>
66 {input.checked && '✓'}
67 </Flex>
68 {label}
69 </Flex.Item>
70 </Flex>
71 );