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