Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | 1x 1x 1x 2x 1x 1x | /* eslint-disable max-lines-per-function, no-ternary */
import {
Control,
DisplayValue,
Input,
Label,
Option,
Options,
Triangle,
Wrapper
} from "./styled"
import { ForwardedRef, forwardRef } from "react"
import { ComponentProps } from "."
const Select = forwardRef(
(
{
className,
defaultValue,
displayValue,
isControlled,
isLabelShrunk,
isOpen,
label,
name,
onBlur,
onChange,
onToggleIsOpen,
options,
value,
wrapperRef
}: ComponentProps,
ref: ForwardedRef<HTMLInputElement>
) => (
<Wrapper
className={className}
onBlur={onBlur}
ref={wrapperRef}
tabIndex={-1}
>
<Control onClick={onToggleIsOpen}>
<Label $isShrunk={isLabelShrunk} id={`${name}-label`}>
{label}
</Label>
<DisplayValue
$isSelected={Boolean((!isControlled && defaultValue) || value)}
>
{displayValue}
</DisplayValue>
<Triangle $isOpen={isOpen} />
</Control>
{isOpen ? (
<Options
aria-labelledby={`${name}-label`}
id={`${name}-listbox`}
role="listbox"
>
{options.map((option, index) => (
<Option
aria-selected={
(!isControlled && option.value === defaultValue) ||
option.value === value
}
id={`${name}-listbox-${index}`}
key={option.value}
onClick={onChange(option.value)}
role="option"
>
{option.label}
</Option>
))}
</Options>
) : null}
<Input
defaultValue={defaultValue}
name={name}
ref={ref}
value={value === null ? undefined : value}
/>
</Wrapper>
)
)
Select.displayName = "Select"
export default Select
|