phx-react
Version:
PHX REACT
109 lines • 8.53 kB
JavaScript
import { __assign, __spreadArray } from "tslib";
import { XMarkIcon } from '@heroicons/react/24/solid';
import React, { useEffect, useRef, useState } from 'react';
import { PHXCheckbox } from '../Checkbox';
export 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;
var _e = useState(false), isFocused = _e[0], setIsFocused = _e[1];
var _f = useState(defaultValue || []), selectedItems = _f[0], setSelectedItems = _f[1];
var _g = 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 = useRef(null);
var handleChange = function (data) {
if (onChange) {
onChange(data);
}
};
var handleItemClick = function (item) {
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(__spreadArray(__spreadArray([], selectedItems, true), [item], false));
setSelectedItems(__spreadArray(__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 {
setSelectedItems(options);
handleChange(options);
}
};
useEffect(function () {
var handleClickOutside = function (event) {
var _a;
if (wrapperRef.current && !((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
setIsFocused(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return function () {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [wrapperRef]);
useEffect(function () {
setOptions(listOptions);
}, [listOptions]);
useEffect(function () {
if (defaultValue) {
setSelectedItems(defaultValue);
}
}, [defaultValue]);
return (React.createElement("div", { className: className, id: id },
label && React.createElement("label", { className: 'mb-1 block text-xs font-normal text-gray-700' }, label),
React.createElement("div", { ref: wrapperRef, className: 'relative w-full bg-gray-100 rounded-lg' },
React.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.createElement("div", { className: 'ml-2 mt-2 flex flex-wrap items-center gap-2' }, selectedItems.map(function (item) { return (React.createElement("div", { key: item.name + item.id, className: 'flex items-center whitespace-nowrap rounded-xl bg-gray-200' },
React.createElement("p", { className: "pl-2 text-xs text-gray-700 ".concat(disabled ? 'py-[2px] pr-2' : 'pr-[2px]') }, item.name),
!disabled && (React.createElement("button", { className: 'rounded-xl p-[3px] hover:cursor-pointer hover:bg-gray-300', onClick: function () { return handleRemoveItem(item); }, type: 'button' },
React.createElement(XMarkIcon, { className: 'h-4 w-4' }))))); }))),
React.createElement("input", { 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.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: __assign({ height: optionHeight }, (selectFieldPosition === 'top' && {
top: -optionHeight - 10
})) },
React.createElement("div", { key: 'selectAllCheckBox', className: 'relative mb-1 rounded-lg px-2 py-[1.5px] hover:bg-gray-200' },
React.createElement(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.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.createElement("div", { key: item.id, className: 'relative mb-1 rounded-lg px-2 py-[1.5px] hover:bg-gray-200' },
React.createElement(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.createElement("button", { className: 'absolute inset-0 cursor-pointer', onClick: function () { return handleItemClick(item); }, type: 'button' })));
}))) : (React.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: __assign({}, (selectFieldPosition === 'top' && { top: -90 })) },
React.createElement("div", { className: 'mt-3 h-[50px] text-center' },
React.createElement("div", null,
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: 'mt-[2px] text-sm text-gray-700' }, "Kh\u00F4ng c\u00F3 d\u1EEF li\u1EC7u"))))))));
};
//# sourceMappingURL=Combobox.js.map