phx-react
Version:
PHX REACT
79 lines • 4.56 kB
JavaScript
import { Transition } from '@headlessui/react';
import React, { Fragment, useEffect, useState } from 'react';
import { classNames } from '../../types';
import { PHXSpinner } from '../../Loading';
import PHXUseDebounce from '../../Func/useDebounce';
import { applyUrlQuery } from '../utils';
import { PHXUseDirectLink } from '../../../hooks/direct-link';
function Search({ isSearch, paginationChange, search, setCurrentPage, setIsSearch, setOffset, type, tableKey, configUrlApply, }) {
const directLink = PHXUseDirectLink();
const [searchValue, setSearchValue] = useState('');
const debouncedSearch = PHXUseDebounce(searchValue, 300);
const applyUrl = (search) => {
var _a, _b;
if (!configUrlApply)
return;
if (!search) {
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 {
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' },
]);
}
};
useEffect(() => {
if (configUrlApply) {
const { searchParams } = configUrlApply;
const searchQuery = applyUrlQuery.get(searchParams, `search-${tableKey}`) || '';
if (search.onChange && searchQuery) {
search.onChange(searchQuery);
setIsSearch(true);
setSearchValue(searchQuery);
}
}
}, []);
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) {
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.createElement(Transition, { as: 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.createElement("div", { className: 'min-w-full' }, isSearch && (React.createElement("div", { className: 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.createElement("div", { className: 'relative mr-2 w-11/12' },
React.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.createElement("div", { className: 'flex w-14 justify-center pt-1' }, search.loading ? React.createElement(PHXSpinner, null) : null),
React.createElement("div", null,
React.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")))))));
}
export default Search;
//# sourceMappingURL=Search.js.map