phx-react
Version:
PHX REACT
144 lines • 10.4 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.PHXCombobox = void 0;
var tslib_1 = require("tslib");
var solid_1 = require("@heroicons/react/24/solid");
var react_1 = tslib_1.__importStar(require("react"));
var Checkbox_1 = require("../Checkbox");
var ErrorMessage_1 = tslib_1.__importDefault(require("../../commons/ErrorMessage"));
var PHXCombobox = function (_a) {
var className = _a.className, defaultValue = _a.defaultValue, _b = _a.disabled, disabled = _b === void 0 ? false : _b, error = _a.error, id = _a.id, label = _a.label, listOptions = _a.listOptions, onChange = _a.onChange, _c = _a.optionHeight, optionHeight = _c === void 0 ? 300 : _c, placeholder = _a.placeholder, _d = _a.selectFieldPosition, selectFieldPosition = _d === void 0 ? 'bottom' : _d, errorType = _a.errorType, errorMessageCustom = _a.errorMessageCustom, helpText = _a.helpText;
var message = function (type) {
var errorMessage = '';
switch (type) {
case 'required-field':
errorMessage = 'Vui lòng chọn thông tin';
break;
case 'duplicate-field':
errorMessage = 'Thông tin đã tồn tại';
break;
case 'custom-message':
errorMessage = errorMessageCustom;
break;
default:
break;
}
return errorMessage;
};
var inputRef = (0, react_1.useRef)(null);
var _e = (0, react_1.useState)(false), isFocused = _e[0], setIsFocused = _e[1];
var _f = (0, react_1.useState)(defaultValue || []), selectedItems = _f[0], setSelectedItems = _f[1];
var _g = (0, react_1.useState)(listOptions || []), options = _g[0], setOptions = _g[1];
var checkedAll = (listOptions === null || listOptions === void 0 ? void 0 : listOptions.length) === (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length);
var wrapperRef = (0, react_1.useRef)(null);
var handleChange = function (data) {
if (onChange) {
onChange(data);
}
};
function clearInput() {
if (inputRef.current) {
inputRef.current.value = '';
}
}
var handleItemClick = function (item) {
clearInput();
var isSelected = selectedItems.some(function (selectedItem) { return selectedItem.id === item.id; });
if (isSelected) {
var newSelectedItem = selectedItems.filter(function (selectedItem) { return selectedItem.id !== item.id; });
setSelectedItems(newSelectedItem);
handleChange(newSelectedItem);
return;
}
handleChange(tslib_1.__spreadArray(tslib_1.__spreadArray([], selectedItems, true), [item], false));
setSelectedItems(tslib_1.__spreadArray(tslib_1.__spreadArray([], selectedItems, true), [item], false));
};
var handleRemoveItem = function (item) {
var newSelectedItems = selectedItems.filter(function (selectedItem) { return selectedItem.id !== item.id; });
setSelectedItems(newSelectedItems);
handleChange(newSelectedItems);
};
var handleChangeInput = function (value) {
if (value === '') {
setOptions(listOptions);
}
else {
var filteredOptions = listOptions.filter(function (option) {
return option.name.toLowerCase().includes(value.toLowerCase());
});
setOptions(filteredOptions);
}
};
var handleCheckAll = function () {
if (checkedAll) {
setSelectedItems([]);
handleChange([]);
}
else {
clearInput();
setSelectedItems(options);
handleChange(options);
}
};
(0, react_1.useEffect)(function () {
var handleClickOutside = function (event) {
var _a;
if (wrapperRef.current && !((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
setOptions(listOptions);
setIsFocused(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return function () {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [wrapperRef, listOptions]);
(0, react_1.useEffect)(function () {
setOptions(listOptions);
}, [listOptions]);
(0, react_1.useEffect)(function () {
if (defaultValue) {
setSelectedItems(defaultValue);
}
}, [defaultValue]);
return (react_1["default"].createElement("div", { className: className, id: id },
label && react_1["default"].createElement("label", { className: 'block mb-1 text-xs font-normal text-gray-700' }, label),
react_1["default"].createElement("div", { ref: wrapperRef, className: 'relative w-full bg-gray-100 rounded-lg' },
react_1["default"].createElement("div", { className: "".concat(error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '', "\n ").concat(!disabled ? 'hover:bg-gray-50' : '', "\n block w-full space-y-1 rounded-lg border border-gray-500 bg-white text-sm shadow-sm focus:border-gray-500 focus:bg-gray-50 focus:outline-none focus:outline-offset-1 focus:outline-indigo-500 focus:ring-transparent ") },
selectedItems.length > 0 && options.length > 0 && !checkedAll && listOptions.length > 0 && (react_1["default"].createElement("div", { className: 'flex flex-wrap items-center gap-2 mx-2 mt-2' }, selectedItems.map(function (item) { return (react_1["default"].createElement("div", { key: item.name + item.id, className: 'flex items-center bg-gray-200 rounded-xl' },
react_1["default"].createElement("p", { style: {
wordBreak: 'break-word'
}, className: "pl-2 text-xs text-gray-700 text-wrap ".concat(disabled ? 'py-[2px] pr-2' : 'pr-[2px]') }, item.name),
!disabled && (react_1["default"].createElement("button", { className: 'rounded-xl p-[3px] hover:cursor-pointer hover:bg-gray-300', onClick: function () { return handleRemoveItem(item); }, type: 'button' },
react_1["default"].createElement(solid_1.XMarkIcon, { className: 'w-4 h-4' }))))); }))),
react_1["default"].createElement("input", { ref: inputRef, className: 'w-full rounded-lg border-none border-transparent py-[0.4rem] pl-3 text-xs outline-none focus:border-none focus:border-transparent focus:ring-0', disabled: disabled, id: 'main', tabIndex: -1, onChange: function (e) { return handleChangeInput(e.target.value); }, onFocus: function () { return setIsFocused(true); }, placeholder: selectedItems.length === (listOptions === null || listOptions === void 0 ? void 0 : listOptions.length) && selectedItems.length > 0 ? 'Tất cả' : placeholder })),
options.length > 0 ? (react_1["default"].createElement("div", {
// eslint-disable-next-line prettier/prettier
className: "absolute z-50 mt-2 w-full overflow-y-auto rounded-lg bg-white p-2 shadow-xl border ".concat(!isFocused ? 'hidden' : ''), style: tslib_1.__assign({ maxHeight: optionHeight }, (selectFieldPosition === 'top' && {
top: -optionHeight - 10
})) },
react_1["default"].createElement("div", { key: 'selectAllCheckBox', className: 'relative mb-1 rounded-lg px-2 py-[1.5px] hover:bg-gray-200' },
react_1["default"].createElement(Checkbox_1.PHXCheckbox, { checked: checkedAll, className: 'mb-1 rounded-lg px-2 py-[1.5px] hover:bg-gray-200', id: "checkbox_".concat(Math.floor(Math.random() * 1000000) + 1), onClick: function () {
handleCheckAll();
}, title: 'T\u1EA5t c\u1EA3' }),
react_1["default"].createElement("button", { className: 'absolute inset-0 cursor-pointer', onClick: function () {
handleCheckAll();
}, type: 'button' })), options === null || options === void 0 ? void 0 :
options.map(function (item) {
var randomNum = Math.floor(Math.random() * 1000000) + 1;
return (react_1["default"].createElement("div", { key: item.id, className: 'relative mb-1 rounded-lg px-2 py-[1.5px] hover:bg-gray-200' },
react_1["default"].createElement(Checkbox_1.PHXCheckbox, { checked: selectedItems.some(function (selectedItem) { return selectedItem.id === item.id; }), className: 'mb-1 rounded-lg px-2 py-[1.5px] hover:bg-gray-200', id: "checkbox_".concat(randomNum), onClick: function () { return handleItemClick(item); }, title: item.name }),
react_1["default"].createElement("button", { className: 'absolute inset-0 cursor-pointer', onClick: function () { return handleItemClick(item); }, type: 'button' })));
}))) : (react_1["default"].createElement("div", {
// eslint-disable-next-line prettier/prettier
className: "absolute z-50 mt-2 w-full overflow-y-auto rounded-lg bg-white p-2 shadow-xl ".concat(!isFocused ? 'hidden' : ''), style: tslib_1.__assign({}, (selectFieldPosition === 'top' && { top: -90 })) },
react_1["default"].createElement("div", { className: 'mt-3 h-[50px] text-center' },
react_1["default"].createElement("div", null,
react_1["default"].createElement("svg", { className: 'w-4 h-4 mx-auto text-gray-700', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
react_1["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_1["default"].createElement("h3", { className: 'mt-[2px] text-sm text-gray-700' }, "Kh\u00F4ng c\u00F3 d\u1EEF li\u1EC7u")))))),
helpText ? react_1["default"].createElement("div", { className: 'mt-1 text-xs text-gray-500' }, helpText) : null,
error && errorType ? react_1["default"].createElement(ErrorMessage_1["default"], { message: message(errorType) }) : null));
};
exports.PHXCombobox = PHXCombobox;
//# sourceMappingURL=Combobox.js.map