phx-react
Version:
PHX REACT
122 lines • 8.62 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXSelectBox = void 0;
const tslib_1 = require("tslib");
const react_1 = require("@headlessui/react");
const solid_1 = require("@heroicons/react/24/solid");
const react_2 = tslib_1.__importStar(require("react"));
const Input_1 = require("../Input");
const ErrorMessage_1 = tslib_1.__importDefault(require("../../commons/ErrorMessage"));
function classNames(...classes) {
return classes.filter(Boolean).join(' ');
}
const PHXSelectBox = (props) => {
const { data, defaultValue, disabled = false, error, errorMessageCustom, errorType, label, onChange, onToggle, origin = 'bottom', placeholder, register, } = props;
const [query, setQuery] = (0, react_2.useState)('');
const comboBtn = (0, react_2.useRef)(null);
const inputRef = (0, react_2.useRef)(null);
const [inputWidth, setInputWidth] = (0, react_2.useState)(null);
const [selectedPerson, setSelectedPerson] = (0, react_2.useState)(defaultValue ? defaultValue : null);
// Theo dõi thay đổi kích thước của input
(0, react_2.useEffect)(() => {
const updateWidth = () => {
if (inputRef.current) {
// Sử dụng getBoundingClientRect để lấy chiều rộng chính xác
const width = inputRef.current.getBoundingClientRect().width;
setInputWidth(width);
}
};
updateWidth(); // Cập nhật ngay lần đầu
const observer = new ResizeObserver(() => {
updateWidth();
});
if (inputRef.current) {
observer.observe(inputRef.current);
}
return () => {
if (inputRef.current) {
observer.unobserve(inputRef.current);
}
};
}, []);
const filteredPeople = query === '' ? data : data.filter((person) => person.value.toLowerCase().includes(query.toLowerCase()));
const handlerClickInput = () => {
var _a;
(_a = comboBtn.current) === null || _a === void 0 ? void 0 : _a.click();
};
const onChangeValue = (value) => {
if (!value)
return;
setSelectedPerson(value);
onChange(value);
};
const message = (type) => {
let errorMessage = '';
switch (type) {
case 'required-field':
errorMessage = 'Vui lòng nhập thông tin';
break;
case 'validate-input-field':
errorMessage = 'Vui lòng nhập thông tin hợp lệ (độ dài 1 - 60 kí tự)';
break;
case 'duplicate-field':
errorMessage = 'Thông tin đã tồn tại';
break;
case 'validate-phone-number':
errorMessage = 'Số điện thoại chưa hợp lệ';
break;
case 'validate-input-email':
errorMessage = 'Định dạng email chưa đúng, vui lòng nhập lại';
break;
case 'custom-message':
errorMessage = errorMessageCustom;
break;
default:
break;
}
return errorMessage;
};
const errorCheck = error && errorType && !selectedPerson;
const onChangeSelectBox = (event) => {
setQuery(event.target.value);
};
const OpenStateWatcher = ({ onToggleCombobox, open }) => {
(0, react_2.useEffect)(() => {
if (onToggleCombobox) {
onToggleCombobox(open);
}
if (!open) {
setQuery('');
}
}, [open]);
return react_2.default.createElement(react_2.default.Fragment, null);
};
return (react_2.default.createElement(react_2.default.Fragment, null,
react_2.default.createElement(react_1.Combobox, { as: 'div', onChange: onChangeValue, value: selectedPerson }, ({ open }) => (react_2.default.createElement(react_2.default.Fragment, null,
react_2.default.createElement(OpenStateWatcher, { onToggleCombobox: onToggle, open: open }),
react_2.default.createElement(react_1.Combobox.Label, { className: 'mb-1 flex text-xs font-normal text-gray-700' }, label),
react_2.default.createElement("div", { className: 'relative' },
disabled ? (react_2.default.createElement(Input_1.PHXInput, { disabled: disabled, value: (selectedPerson === null || selectedPerson === void 0 ? void 0 : selectedPerson.value) || '' })) : (react_2.default.createElement(react_1.Combobox.Input, { autoComplete: 'off', className: classNames('block w-full rounded-lg border-[0.5px] border-gray-500 px-3 py-1.5 text-xs font-normal shadow-sm hover:bg-gray-50 focus:border-gray-500 focus:bg-gray-50 focus:outline-none focus:outline-offset-1 focus:outline-indigo-500 focus:ring-transparent', errorCheck ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : ''), ...register, ref: inputRef, displayValue: (person) => person === null || person === void 0 ? void 0 : person.value, onChange: (event) => onChangeSelectBox(event), onClick: () => handlerClickInput(), placeholder: placeholder })),
react_2.default.createElement(react_1.Combobox.Button, { ref: comboBtn, className: 'hidden' },
react_2.default.createElement(solid_1.ChevronUpDownIcon, { "aria-hidden": 'true', className: 'h-5 w-5 text-gray-400' })),
filteredPeople.length > 0 ? (react_2.default.createElement(react_1.Combobox.Options, { className: classNames('absolute z-10 mt-2 max-h-60 overflow-auto rounded-lg bg-white px-2 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm', origin === 'top' ? 'bottom-10' : ''), style: {
width: inputWidth ? `${inputWidth}px` : '100%',
left: 0,
boxSizing: 'border-box',
} }, filteredPeople.map((person) => (react_2.default.createElement(react_1.Combobox.Option, { key: person.id, className: ({ active }) => classNames('relative mb-1 cursor-pointer select-none rounded-lg py-2 pl-3 pr-9', person.id === (selectedPerson === null || selectedPerson === void 0 ? void 0 : selectedPerson.id) ? 'bg-zinc-200' : 'text-gray-900', active ? 'bg-zinc-100' : 'text-gray-900'), value: person }, ({ active }) => (react_2.default.createElement(react_2.default.Fragment, null,
react_2.default.createElement("span", { className: classNames('block truncate text-xs', person.id === (selectedPerson === null || selectedPerson === void 0 ? void 0 : selectedPerson.id) && 'font-semibold') }, person.value),
person.id === (selectedPerson === null || selectedPerson === void 0 ? void 0 : selectedPerson.id) && (react_2.default.createElement("span", { className: classNames('absolute inset-y-0 right-0 flex items-center pr-4', active ? 'text-gray-900' : 'text-indigo-600') },
react_2.default.createElement(solid_1.CheckIcon, { "aria-hidden": 'true', className: 'h-4 w-4' })))))))))) : (react_2.default.createElement(react_1.Combobox.Options, { className: classNames('absolute z-10 mt-2 max-h-60 overflow-auto rounded-lg bg-white px-2 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm', origin === 'top' ? 'bottom-10' : ''), style: {
width: inputWidth ? `${inputWidth}px` : '100%',
left: 0,
boxSizing: 'border-box',
} },
react_2.default.createElement(react_1.Combobox.Option, { className: 'mb-1 cursor-pointer select-none rounded-lg py-2 pl-3 pr-9', value: '' },
react_2.default.createElement("div", { className: 'flex flex-col items-center justify-center' },
react_2.default.createElement("svg", { className: 'mx-auto h-4 w-4 text-gray-700', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
react_2.default.createElement("path", { d: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z', strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: '2' })),
react_2.default.createElement("h3", { className: 'pt-[2px] text-sm text-gray-700' }, "Kh\u00F4ng c\u00F3 d\u1EEF li\u1EC7u"))))))))),
errorCheck ? react_2.default.createElement(ErrorMessage_1.default, { message: message(errorType) }) : null));
};
exports.PHXSelectBox = PHXSelectBox;
//# sourceMappingURL=SelectBox.js.map