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