git.iko.soy/bridge
on 21d1c95 help sign in
bridge/src/indigo-react/components/CheckboxInput.js
62 lines 1.4 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, { type: 'checkbox' });
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 as="input" className="super-hidden" id={name} {...input} />
38 {/* and then display a prettier one in its stead */}
39 <Flex.Item
40 flex
41 as="label"
42 className="f6 mr3 lh-tall us-none clickable flex-row align-center"
43 htmlFor={name}>
44 <Flex
45 justify="center"
46 align="center"
47 className={cn('b1 p1 mr3', {
48 'bg-gray1': disabled,
49 'bg-black white b-black': !disabled && input.value,
50 'bg-white black b-black': !disabled && !input.value,
51 })}
52 style={{
53 height: '14px',
54 width: '14px',
55 }}>
56 {input.value && '✓'}
57 </Flex>
58 {label}
59 </Flex.Item>
60 </Flex>
61 );