@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
62 lines (61 loc) • 3.95 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TableSearchControl = TableSearchControl;
const jsx_runtime_1 = require("react/jsx-runtime");
const icons_material_1 = require("@mui/icons-material");
const material_1 = require("@mui/material");
const material_2 = require("@mui/material");
const material_3 = require("@mui/material");
const material_4 = require("@mui/material");
const material_5 = require("@mui/material");
const react_1 = require("react");
const data_table_context_1 = require("../../contexts/data-table-context");
const slot_helpers_1 = require("../../utils/slot-helpers");
function TableSearchControl() {
const { table, slots, slotProps } = (0, data_table_context_1.useDataTableContext)();
const [searchVisible, setSearchVisible] = (0, react_1.useState)(false);
const searchInputRef = (0, react_1.useRef)(null);
const globalFilter = table.getState().globalFilter || '';
const hasSearch = globalFilter.length > 0;
const SearchIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'searchIcon', icons_material_1.Search);
const ClearIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'clearIcon', icons_material_1.Clear);
const handleChange = (0, react_1.useCallback)((e) => {
table.setGlobalFilter(e.target.value);
}, [table]);
const handleSearchToggle = () => {
if (searchVisible || hasSearch) {
setSearchVisible(false);
table.setGlobalFilter('');
}
else {
setSearchVisible(true);
}
};
const handleSearchClear = () => {
table.setGlobalFilter('');
if (searchInputRef.current) {
searchInputRef.current.focus();
}
};
const handleSearchBlur = () => {
if (searchVisible && !hasSearch) {
setSearchVisible(false);
}
};
(0, react_1.useEffect)(() => {
if (searchVisible && searchInputRef.current) {
const timer = setTimeout(() => {
var _a;
(_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
}, 200);
return () => clearTimeout(timer);
}
return undefined;
}, [searchVisible]);
return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
display: 'flex',
alignItems: 'center',
}, children: [!(searchVisible || hasSearch) && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Search", children: (0, jsx_runtime_1.jsx)(material_2.IconButton, { size: "small", onClick: handleSearchToggle, color: hasSearch ? 'primary' : 'default', sx: {
flexShrink: 0,
}, children: (0, jsx_runtime_1.jsx)(SearchIconSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.searchIcon)) }) })), (0, jsx_runtime_1.jsx)(material_3.Collapse, { in: searchVisible || hasSearch, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(material_4.OutlinedInput, { inputRef: searchInputRef, placeholder: "Search...", value: globalFilter, onChange: handleChange, size: "small", onBlur: handleSearchBlur, sx: { minWidth: 200 }, endAdornment: hasSearch ? ((0, jsx_runtime_1.jsx)(material_5.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Clear search", children: (0, jsx_runtime_1.jsx)(material_2.IconButton, { size: "small", onClick: handleSearchClear, edge: "end", children: (0, jsx_runtime_1.jsx)(ClearIconSlot, Object.assign({ size: "small" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.clearIcon)) }) }) })) : null, startAdornment: searchVisible || hasSearch ? ((0, jsx_runtime_1.jsx)(material_5.InputAdornment, { position: "start", children: (0, jsx_runtime_1.jsx)(SearchIconSlot, Object.assign({ size: "small" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.searchIcon)) })) : null }) })] }));
}