git.iko.soy/bridge
on 271c697 help sign in
bridge/src/indigo-react/components/ToggleInput.js
71 lines 1.3 kB history raw
1import React from 'react';
2import cn from 'classnames';
4import Flex from './Flex';
5import LinkButton from './LinkButton';
7export default function ToggleInput({
8 // visuals
9 name,
10 label,
11 inverseLabel,
12 className,
14 // callbacks
15 onEnter,
17 // state from hook
18 focused,
19 pass,
20 syncPass,
21 visiblyPassed,
22 error,
23 hintError,
24 data,
25 bind,
26 autoFocus,
27 disabled,
28 touched,
30 // ignored
31 initialValue,
32 validators,
33 transformers,
35 ...rest
36}) {
37 return (
38 <Flex
39 className={cn(className)}
40 row
41 align="center"
42 style={{
43 ...(disabled && {
44 pointerEvents: 'none',
45 cursor: 'not-allowed',
46 }),
47 }}>
48 {/* we totally hide the checkbox itself */}
49 <Flex.Item
50 as="input"
51 {...rest}
52 className={cn('super-hidden')}
53 id={name}
54 name={name}
55 {...bind}
56 />
57 {/* and then display a prettier one in its stead */}
58 <Flex.Item
59 flex
60 as="label"
61 className={cn('f6 pv2 lh-tall us-none flex-row align-center', {
62 clickable: !disabled,
63 })}
64 htmlFor={name}>
65 <LinkButton disabled={disabled} className="f5">
66 {bind.checked ? inverseLabel : label}
67 </LinkButton>
68 </Flex.Item>
69 </Flex>
70 );