phx-react
Version:
PHX REACT
39 lines • 3.74 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const react_2 = require("@headlessui/react");
const solid_1 = require("@heroicons/react/24/solid");
const types_1 = require("../types");
const Loading_1 = require("../Loading");
function Search({ isSearch, handleSearch, searchValue, setSearchValue, setIsSearch, search, isHideSearch, setIsHideSearch, type, }) {
(0, react_1.useEffect)(() => {
if ((search === null || search === void 0 ? void 0 : search.enable) && isHideSearch && !search.loading) {
setIsSearch(false);
setIsHideSearch(false);
}
}, [isHideSearch, search === null || search === void 0 ? void 0 : search.loading]);
return (react_1.default.createElement("div", { className: 'border-b' },
react_1.default.createElement("div", { className: (0, types_1.classNames)('relative flex h-9 w-full items-center px-4', type === 'in-card' ? 'bg-gray-50' : 'bg-white') },
react_1.default.createElement("div", { className: (0, types_1.classNames)('flex w-full items-center justify-end transition-opacity duration-300', isSearch ? 'pointer-events-none opacity-0' : 'opacity-100') },
react_1.default.createElement("button", { className: 'flex rounded-lg bg-white px-2 py-1 text-xs font-normal text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 active:bg-gray-200', onClick: () => setIsSearch(true), type: 'button' },
react_1.default.createElement(solid_1.MagnifyingGlassIcon, { className: 'h-4 w-4' }))),
react_1.default.createElement(react_2.Transition, { as: react_1.Fragment, enter: 'transition-all duration-500 overflow-hidden', enterFrom: 'transform scale-95 opacity-0 h-0', enterTo: 'transform scale-100 opacity-100 h-full', leaveFrom: 'transform scale-100 opacity-100 h-full', leaveTo: 'transform scale-95 opacity-0 h-0', show: isSearch },
react_1.default.createElement("div", { className: 'absolute inset-0 z-10 flex items-center bg-inherit px-5' },
react_1.default.createElement("div", { className: 'flex w-full items-center gap-2' },
react_1.default.createElement("div", { className: 'relative flex-1' },
react_1.default.createElement("input", { autoFocus: true, className: 'block w-full rounded-lg border-transparent bg-transparent bg-white py-1 text-xs hover:border hover:border-gray-500 focus:border-indigo-800 focus:bg-white focus:ring-indigo-800', id: 'search-value', name: 'search-value', onChange: handleSearch, placeholder: 'T\u00ECm ki\u1EBFm', type: 'text', value: searchValue })),
react_1.default.createElement("div", { className: 'flex w-8 justify-center' }, (search === null || search === void 0 ? void 0 : search.loading) && react_1.default.createElement(Loading_1.PHXSpinner, null)),
react_1.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: () => {
if (searchValue) {
setIsHideSearch(true);
search === null || search === void 0 ? void 0 : search.setLoading(true);
setSearchValue('');
}
else {
setIsSearch(false);
}
}, type: 'button' }, "Cancel")))))));
}
exports.default = Search;
//# sourceMappingURL=Search.js.map