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 | 2x 2x 2x 2x 2x 2x 6x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 2x 6x 2x | import React from "react";
import { SelectProps } from "./Select.types";
import Input from "../Input/Input";
import { IconArrowDown } from "@tabler/icons-react";
import Menu from "../Menu/Menu";
import { MenuItemKeyProps } from "../MenuItem/MenuItem.types";
import MenuItem from "../MenuItem/MenuItem";
const Select = ({
label,
open = false,
options,
// multiSelect,
placeholder = "",
variant = "contained",
size = "medium",
width,
"data-testid": dataTestId,
"data-testid-input": dataTestIdInput,
"data-testid-menu": dataTestIdMenu,
color,
menuProps,
//Events
onClick,
...props
}: SelectProps) => {
const inputRef = React.useRef<HTMLInputElement>(null);
const [isOpen, setIsOpen] = React.useState(open);
const [inputValue, setInputValue] = React.useState<string | string[]>("");
const _handleSingleSelectOnClick = (
e: React.MouseEvent,
{ title, value }: MenuItemKeyProps
) => {
setIsOpen(false);
setInputValue(title);
onClick && onClick(e, { title, value });
};
const _onClick = (
e: React.MouseEvent,
{ title, value }: MenuItemKeyProps
) => {
// if (multiSelect) return _handleMultiSelectOnClick(e, { title, value });
return _handleSingleSelectOnClick(e, { title, value });
};
return (
<div data-testid={dataTestId}>
<Input
variant={variant}
placeholder={placeholder}
value={inputValue}
disableSearch
width={width}
containerRef={inputRef}
label={label}
size={size}
trailingIcon={<IconArrowDown />}
cursor="pointer"
color={color}
onClick={() => {
setIsOpen(!isOpen);
}}
data-testid-input={dataTestIdInput}
{...props}
/>
<Menu
variant={variant}
open={isOpen}
anchorElement={inputRef.current}
minWidth={`${inputRef.current?.offsetWidth}px`}
onClick={_onClick}
color={color}
data-testid={dataTestIdMenu}
style={menuProps?.style}
{...menuProps}
>
{options && options.map((option, index) => (
<MenuItem key={index} {...option} />
))}
</Menu>
</div>
);
};
export default Select;
|