@brizy/ui
Version:
React elements in Brizy style
32 lines (31 loc) • 1.99 kB
JavaScript
import React, { useCallback, useState } from "react";
import { classNames } from "../classNamesFn";
import { ClickOutside } from "../ClickOutside";
import { BRZ_PREFIX } from "../constants";
import { SelectOption } from "./SelectOption";
import { useTranslation } from "../utils/localization/useTranslation";
const selectExceptions = [".brz-ui-editable-select2__button"];
export const Select = ({ value, onChange, choices, placeholder }) => {
var _a;
const [opened, setOpened] = useState(false);
const { t } = useTranslation();
const className = classNames()("editable-select2", {
"editable-select2__opened": opened,
});
const _onChange = useCallback((v) => {
var _a;
const selectedTitle = (_a = choices.find(item => item.value === v)) === null || _a === void 0 ? void 0 : _a.title;
if (selectedTitle) {
onChange(selectedTitle);
}
setOpened(false);
}, [choices, onChange]);
const handleOptionsClickOutside = () => setOpened(false);
const handleButtonClick = () => setOpened(open => !open);
return (React.createElement("div", { className: className },
React.createElement("button", { className: `${BRZ_PREFIX}-editable-select2__button`, onClick: handleButtonClick },
React.createElement("span", { className: `${BRZ_PREFIX}-editable-select2-value` }, (_a = value !== null && value !== void 0 ? value : placeholder) !== null && _a !== void 0 ? _a : t("Select one")),
React.createElement("span", { className: `${BRZ_PREFIX}-editable-select2--arrow` })),
React.createElement(ClickOutside, { onClickOutside: handleOptionsClickOutside, exceptions: selectExceptions },
React.createElement("ul", { className: `${BRZ_PREFIX}-editable-select2__dropdown`, role: "listbox" }, choices.map(item => (React.createElement(SelectOption, { key: item.value, value: item.value, title: item.title, onChange: _onChange, active: item.title === value })))))));
};