phx-react
Version:
PHX REACT
88 lines • 7.33 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.PHXSelectBox = void 0;
var tslib_1 = require("tslib");
var react_1 = require("@headlessui/react");
var solid_1 = require("@heroicons/react/24/solid");
var react_2 = tslib_1.__importStar(require("react"));
var Input_1 = require("../Input");
var ErrorMessage_1 = tslib_1.__importDefault(require("../../commons/ErrorMessage"));
function classNames() {
var classes = [];
for (var _i = 0; _i < arguments.length; _i++) {
classes[_i] = arguments[_i];
}
return classes.filter(Boolean).join(' ');
}
var PHXSelectBox = function (props) {
var data = props.data, defaultValue = props.defaultValue, error = props.error, errorMessageCustom = props.errorMessageCustom, errorType = props.errorType, label = props.label, onChange = props.onChange, placeholder = props.placeholder, register = props.register, _a = props.disabled, disabled = _a === void 0 ? false : _a;
var _b = (0, react_2.useState)(''), query = _b[0], setQuery = _b[1];
var comboBtn = (0, react_2.useRef)(null);
var _c = (0, react_2.useState)(defaultValue ? defaultValue : null), selectedPerson = _c[0], setSelectedPerson = _c[1];
var filteredPeople = query === '' ? data : data.filter(function (person) { return person.value.toLowerCase().includes(query.toLowerCase()); });
var handlerClickInput = function () {
var _a;
(_a = comboBtn.current) === null || _a === void 0 ? void 0 : _a.click();
};
var onChangeValue = function (value) {
if (!value)
return;
setSelectedPerson(value);
onChange(value);
};
var message = function (type) {
var 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;
};
var errorCheck = error && errorType && !selectedPerson;
var onChangeSelectBox = function (event) {
setQuery(event.target.value);
};
return (react_2["default"].createElement(react_2["default"].Fragment, null,
react_2["default"].createElement(react_1.Combobox, { as: 'div', onChange: onChangeValue, value: selectedPerson },
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", null,
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, tslib_1.__assign({ 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, { displayValue: function (person) { return person === null || person === void 0 ? void 0 : person.value; }, onChange: function (event) { return onChangeSelectBox(event); }, onClick: function () { return 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: 'absolute z-10 mt-2 max-h-60 w-fit 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' }, filteredPeople.map(function (person) { return (react_2["default"].createElement(react_1.Combobox.Option, { key: person.id, className: function (_a) {
var active = _a.active;
return 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 }, function (_a) {
var active = _a.active;
return (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: 'absolute z-10 mt-2 max-h-60 w-fit 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' },
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