phx-react
Version:
PHX REACT
84 lines • 6.77 kB
JavaScript
import { __assign } from "tslib";
import { Combobox } from '@headlessui/react';
import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/24/solid';
import React, { useRef, useState } from 'react';
import { PHXInput } from '../Input';
import ErrorMessage from '../../commons/ErrorMessage';
function classNames() {
var classes = [];
for (var _i = 0; _i < arguments.length; _i++) {
classes[_i] = arguments[_i];
}
return classes.filter(Boolean).join(' ');
}
export 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 = useState(''), query = _b[0], setQuery = _b[1];
var comboBtn = useRef(null);
var _c = 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.createElement(React.Fragment, null,
React.createElement(Combobox, { as: 'div', onChange: onChangeValue, value: selectedPerson },
React.createElement(Combobox.Label, { className: 'mb-1 flex text-xs font-normal text-gray-700' }, label),
React.createElement("div", null,
disabled ? (React.createElement(PHXInput, { disabled: disabled, value: (selectedPerson === null || selectedPerson === void 0 ? void 0 : selectedPerson.value) || '' })) : (React.createElement(Combobox.Input, __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.createElement(Combobox.Button, { ref: comboBtn, className: 'hidden' },
React.createElement(ChevronUpDownIcon, { "aria-hidden": 'true', className: 'h-5 w-5 text-gray-400' })),
filteredPeople.length > 0 ? (React.createElement(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.createElement(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.createElement(React.Fragment, null,
React.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.createElement("span", { className: classNames('absolute inset-y-0 right-0 flex items-center pr-4', active ? 'text-gray-900' : 'text-indigo-600') },
React.createElement(CheckIcon, { "aria-hidden": 'true', className: 'h-4 w-4' })))));
})); }))) : (React.createElement(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.createElement(Combobox.Option, { className: 'mb-1 cursor-pointer select-none rounded-lg py-2 pl-3 pr-9', value: '' },
React.createElement("div", { className: 'flex flex-col items-center justify-center' },
React.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.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.createElement("h3", { className: 'pt-[2px] text-sm text-gray-700' }, "Kh\u00F4ng c\u00F3 d\u1EEF li\u1EC7u"))))))),
errorCheck ? React.createElement(ErrorMessage, { message: message(errorType) }) : null));
};
//# sourceMappingURL=SelectBox.js.map