git.iko.soy/bridge
on e5e005a help sign in
bridge/src/indigo-react/components/ToggleInput.jsx
70 lines 1.5 kB history raw
1import React from 'react';
2import cn from 'classnames';
4import Flex from './Flex';
5import LinkButton from './LinkButton';
6import { useField } from 'react-final-form';
8export default function ToggleInput({
9 // visuals
10 name,
11 label,
12 inverseLabel,
13 inverseColor = 'black',
14 small = false,
15 className,
17 //
18 disabled = false,
20 ...rest
21}) {
22 const {
23 input,
24 meta: { submitting, submitSucceeded },
25 } = useField(name, { type: 'checkbox' });
27 disabled = disabled || submitting || submitSucceeded;
29 return (
30 <Flex
31 className={className}
32 row
33 align="center"
34 style={{
35 ...(disabled && {
36 pointerEvents: 'none',
37 cursor: 'not-allowed',
38 }),
39 }}>
40 {/* we totally hide the checkbox itself */}
41 <Flex.Item
42 as="input"
43 {...rest}
44 className={cn('super-hidden')}
45 id={name}
46 name={name}
47 {...input}
48 />
49 {/* and then display a prettier one in its stead */}
50 <Flex.Item
51 flex
52 as="label"
53 className={cn('f6 pv2 lh-tall us-none flex-row align-center', {
54 pointer: !disabled,
55 })}
56 htmlFor={name}>
57 <LinkButton
58 disabled={disabled}
59 className={cn({
60 f5: !small,
61 f6: small,
62 black: !input.checked,
63 [inverseColor]: input.checked,
64 })}>
65 {input.checked ? inverseLabel : label}
66 </LinkButton>
67 </Flex.Item>
68 </Flex>
69 );