git.iko.soy/bridge
on 062509b help sign in
bridge/src/indigo-react/components/ToggleInput.js
67 lines 1.4 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 className,
16 //
17 disabled = false,
19 ...rest
20}) {
21 const {
22 input,
23 meta: { submitting, submitSucceeded },
24 } = useField(name, { type: 'checkbox' });
26 disabled = disabled || submitting || submitSucceeded;
28 return (
29 <Flex
30 className={className}
31 row
32 align="center"
33 style={{
34 ...(disabled && {
35 pointerEvents: 'none',
36 cursor: 'not-allowed',
37 }),
38 }}>
39 {/* we totally hide the checkbox itself */}
40 <Flex.Item
41 as="input"
42 {...rest}
43 className={cn('super-hidden')}
44 id={name}
45 name={name}
46 {...input}
47 />
48 {/* and then display a prettier one in its stead */}
49 <Flex.Item
50 flex
51 as="label"
52 className={cn('f6 pv2 lh-tall us-none flex-row align-center', {
53 pointer: !disabled,
54 })}
55 htmlFor={name}>
56 <LinkButton
57 disabled={disabled}
58 className={cn('f5', {
59 black: !input.checked,
60 [inverseColor]: input.checked,
61 })}>
62 {input.checked ? inverseLabel : label}
63 </LinkButton>
64 </Flex.Item>
65 </Flex>
66 );