git.iko.soy/bridge
on 6e83c10 help sign in
bridge/src/indigo-react/components/ToggleInput.js
69 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 visiblyPassed,
21 error,
22 hintError,
23 data,
24 bind,
25 autoFocus,
26 disabled,
28 // ignored
29 initialValue,
30 validators,
31 transformers,
33 ...rest
34}) {
35 return (
36 <Flex
37 className={cn(className)}
38 row
39 align="center"
40 style={{
41 ...(disabled && {
42 pointerEvents: 'none',
43 cursor: 'not-allowed',
44 }),
45 }}>
46 {/* we totally hide the checkbox itself */}
47 <Flex.Item
48 as="input"
49 {...rest}
50 className={cn('super-hidden')}
51 id={name}
52 name={name}
53 {...bind}
54 />
55 {/* and then display a prettier one in its stead */}
56 <Flex.Item
57 flex
58 as="label"
59 className={cn('f6 pv2 lh-tall us-none flex-row align-center', {
60 clickable: !disabled,
61 })}
62 htmlFor={name}>
63 <LinkButton disabled={disabled} className="f5">
64 {bind.checked ? inverseLabel : label}
65 </LinkButton>
66 </Flex.Item>
67 </Flex>
68 );