phx-react
Version:
PHX REACT
36 lines • 3.44 kB
JavaScript
import React, { Fragment, useEffect } from 'react';
import { Transition } from '@headlessui/react';
import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
import { classNames } from '../types';
import { PHXSpinner } from '../Loading';
function Search({ isSearch, handleSearch, searchValue, setSearchValue, setIsSearch, search, isHideSearch, setIsHideSearch, type, }) {
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.createElement("div", { className: 'border-b' },
React.createElement("div", { className: classNames('relative flex h-9 w-full items-center px-4', type === 'in-card' ? 'bg-gray-50' : 'bg-white') },
React.createElement("div", { className: classNames('flex w-full items-center justify-end transition-opacity duration-300', isSearch ? 'pointer-events-none opacity-0' : 'opacity-100') },
React.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.createElement(MagnifyingGlassIcon, { className: 'h-4 w-4' }))),
React.createElement(Transition, { as: 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.createElement("div", { className: 'absolute inset-0 z-10 flex items-center bg-inherit px-5' },
React.createElement("div", { className: 'flex w-full items-center gap-2' },
React.createElement("div", { className: 'relative flex-1' },
React.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.createElement("div", { className: 'flex w-8 justify-center' }, (search === null || search === void 0 ? void 0 : search.loading) && React.createElement(PHXSpinner, 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: () => {
if (searchValue) {
setIsHideSearch(true);
search === null || search === void 0 ? void 0 : search.setLoading(true);
setSearchValue('');
}
else {
setIsSearch(false);
}
}, type: 'button' }, "Cancel")))))));
}
export default Search;
//# sourceMappingURL=Search.js.map