phx-react
Version:
PHX REACT
82 lines • 4.91 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = require("@headlessui/react");
const react_2 = tslib_1.__importStar(require("react"));
const types_1 = require("../../types");
const Loading_1 = require("../../Loading");
const useDebounce_1 = tslib_1.__importDefault(require("../../Func/useDebounce"));
const utils_1 = require("../utils");
const direct_link_1 = require("../../../hooks/direct-link");
function Search({ isSearch, paginationChange, search, setCurrentPage, setIsSearch, setOffset, type, tableKey, configUrlApply, }) {
const directLink = (0, direct_link_1.PHXUseDirectLink)();
const [searchValue, setSearchValue] = (0, react_2.useState)('');
const debouncedSearch = (0, useDebounce_1.default)(searchValue, 300);
const applyUrl = (search) => {
var _a, _b;
if (!configUrlApply)
return;
if (!search) {
utils_1.applyUrlQuery.multipleMethod(((_a = configUrlApply === null || configUrlApply === void 0 ? void 0 : configUrlApply.router) === null || _a === void 0 ? void 0 : _a.push) || directLink, configUrlApply.searchParams, [
{ key: `search-${tableKey}`, value: '', method: 'delete' },
{ key: `pagi-${tableKey}`, value: '1', method: 'set' },
]);
}
else {
utils_1.applyUrlQuery.set(((_b = configUrlApply === null || configUrlApply === void 0 ? void 0 : configUrlApply.router) === null || _b === void 0 ? void 0 : _b.push) || directLink, configUrlApply.searchParams, [
{ key: `search-${tableKey}`, value: search },
{ key: `pagi-${tableKey}`, value: '1' },
]);
}
};
(0, react_2.useEffect)(() => {
if (configUrlApply) {
const { searchParams } = configUrlApply;
const searchQuery = utils_1.applyUrlQuery.get(searchParams, `search-${tableKey}`) || '';
if (search.onChange && searchQuery) {
search.onChange(searchQuery);
setIsSearch(true);
setSearchValue(searchQuery);
}
}
}, []);
(0, react_2.useEffect)(() => {
if (search.onChange && isSearch) {
applyUrl(searchValue);
search.onChange(debouncedSearch);
setCurrentPage(1);
setOffset(0);
if (paginationChange) {
paginationChange(1);
}
}
}, [debouncedSearch]);
const handleSearch = (event) => {
setSearchValue(event.target.value);
};
const cancelSearch = () => {
var _a;
if (search.onChange && !!searchValue) {
search.onChange('');
}
setIsSearch(false);
setSearchValue('');
setCurrentPage(1);
setOffset(0);
if (configUrlApply) {
utils_1.applyUrlQuery.multipleMethod(((_a = configUrlApply === null || configUrlApply === void 0 ? void 0 : configUrlApply.router) === null || _a === void 0 ? void 0 : _a.push) || directLink, configUrlApply.searchParams, [
{ key: `search-${tableKey}`, value: '', method: 'delete' },
{ key: `pagi-${tableKey}`, value: '1', method: 'set' },
]);
}
};
return (react_2.default.createElement(react_1.Transition, { as: react_2.Fragment, enter: 'transition-[max-height,opacity] duration-300 ease-out overflow-hidden', enterFrom: 'max-h-0 opacity-0', enterTo: 'max-h-20 opacity-100', show: isSearch },
react_2.default.createElement("div", { className: 'min-w-full' }, isSearch && (react_2.default.createElement("div", { className: (0, types_1.classNames)('flex flex-row items-center justify-center rounded-tl-lg rounded-tr-lg ring-opacity-5', type === 'in-card' ? 'bg-gray-50' : 'bg-white') },
react_2.default.createElement("div", { className: 'relative mr-2 w-11/12' },
react_2.default.createElement("input", { autoFocus: true, className: 'block w-full rounded-lg border-transparent bg-transparent bg-white py-1 text-xs text-gray-700 hover:border hover:border-gray-500 focus:border-indigo-800 focus:bg-white focus:ring-indigo-800', id: 'search-value', name: 'search-value', onChange: (event) => handleSearch(event), placeholder: 'T\u00ECm ki\u1EBFm', type: 'text', value: searchValue })),
react_2.default.createElement("div", { className: 'flex w-14 justify-center pt-1' }, search.loading ? react_2.default.createElement(Loading_1.PHXSpinner, null) : null),
react_2.default.createElement("div", null,
react_2.default.createElement("button", { className: 'inline-flex items-center rounded-lg border-gray-300 px-2 py-1 text-xs font-medium text-gray-700 hover:bg-gray-200', onClick: () => cancelSearch(), type: 'button' }, "Cancel")))))));
}
exports.default = Search;
//# sourceMappingURL=Search.js.map