git.iko.soy/bridge
on 21d1c95 help sign in
bridge/src/indigo-react/components/SelectInput.js
132 lines 3.5 kB history raw
1import React, { useCallback, useRef, useState } from 'react';
2import cn from 'classnames';
4import Flex from './Flex';
5import { ErrorText } from './Typography';
6import useOnClickOutside from 'indigo-react/lib/useOnClickOutside';
7import AccessoryIcon from './AccessoryIcon';
8import { useField } from 'react-final-form';
10// NOTE: if we really care about accessibility, we should pull in a dependency
11export default function SelectInput({
12 name,
13 label,
14 placeholder,
15 className,
16 mono = false,
17 options = [],
18 disabled,
19}) {
20 const {
21 input,
22 meta: { active, error, submitting, touched, valid },
23 } = useField(name, {
24 type: 'select',
25 });
27 disabled = disabled || submitting;
29 const [isOpen, setIsOpen] = useState(false);
30 const ref = useRef();
32 // close select on outside clicks
33 useOnClickOutside(ref, useCallback(() => setIsOpen(false), [setIsOpen]));
35 const toggleOpen = useCallback(() => {
36 input.onFocus();
37 setIsOpen(isOpen => !isOpen);
38 }, [input]);
40 const onChange = value => {
41 // construct a pseudo event that sets the value correctly
42 input.onChange({ target: { value } });
43 input.onBlur();
44 setIsOpen(false);
45 };
47 console.log(input);
48 const text = options.find(o => o.value === input.value).text;
50 return (
51 <Flex
52 ref={ref}
53 className={cn(className, 'mb1 us-none')}
54 col
55 style={{
56 ...(disabled && {
57 pointerEvents: 'none',
58 cursor: 'not-allowed',
59 }),
60 }}>
61 <Flex.Item as="label" className="f6 lh-tall" htmlFor={name}>
62 {label}
63 </Flex.Item>
64 <Flex.Item as={Flex} row className="rel clickable" onClick={toggleOpen}>
65 <Flex.Item
66 flex
67 className={cn(
68 'b b1 p3 outline-none',
69 { mono },
70 {
71 'bg-white': !disabled,
72 'bg-gray1': disabled,
73 },
74 {
75 gray4: isOpen,
76 black: !isOpen,
77 },
78 {
79 'b-green3': valid,
80 'b-black': !valid && active,
81 'b-yellow3': !valid && !active && touched && error,
82 'b-gray2': !valid && !active && !touched && !error,
83 }
84 )}
85 id={name}
86 name={name}>
87 {isOpen ? placeholder : text}
88 </Flex.Item>
89 <div
90 className="abs"
91 style={{
92 top: 0,
93 right: 0,
94 height: '100%',
95 width: '44px',
96 overflow: 'hidden',
97 }}>
98 <AccessoryIcon className="gray4">{isOpen ? '▲' : '▼'}</AccessoryIcon>
99 </div>
100 {isOpen && (
101 <Flex
102 col
103 className="abs bg-white b-black b1 z10"
104 style={{
105 top: 'calc(100% + 4px)',
106 left: 0,
107 right: 0,
108 overflow: 'auto',
109 maxHeight: '30vh',
110 }}>
111 {options.map(option => (
112 <Flex.Item
113 key={option.value}
114 className="pv2 ph3 hover-bg-grey3"
115 onClick={e => {
116 e.stopPropagation();
117 onChange(option.value);
118 }}>
119 {option.text}
120 </Flex.Item>
121 ))}
122 </Flex>
123 )}
124 </Flex.Item>
125 {touched && !active && error && (
126 <Flex.Item as={ErrorText} className="mv1">
127 {error}
128 </Flex.Item>
129 )}
130 </Flex>
131 );