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