@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
118 lines (117 loc) • 5.74 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
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 react_1 = __importStar(require("react"));
const data_table_context_1 = require("../../contexts/data-table-context");
const slot_helpers_1 = require("../../utils/slot-helpers");
function TableSearchControl(props = {}) {
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;
// Extract slot-specific props with enhanced merging
const searchIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'searchIcon');
const clearIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'clearIcon');
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) {
// If search is visible or has text, hide it and clear
setSearchVisible(false);
table.setGlobalFilter('');
}
else {
// Show search input
setSearchVisible(true);
}
};
const handleSearchClear = () => {
table.setGlobalFilter('');
if (searchInputRef.current) {
searchInputRef.current.focus();
}
};
const handleSearchBlur = () => {
// Only auto-hide if search is empty
if (searchVisible && !hasSearch) {
setSearchVisible(false);
}
};
(0, react_1.useEffect)(() => {
if (searchVisible && searchInputRef.current) {
// Add a delay to ensure the Collapse animation completes
const timer = setTimeout(() => {
var _a;
(_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
}, 200);
return () => clearTimeout(timer);
}
return undefined;
}, [searchVisible]);
// Merge all props for maximum flexibility
const mergedSearchIconProps = (0, slot_helpers_1.mergeSlotProps)({
size: 'small',
onClick: handleSearchToggle,
color: hasSearch ? 'primary' : 'default',
sx: { flexShrink: 0 },
}, searchIconSlotProps, props.searchIconProps || {});
const mergedClearIconProps = (0, slot_helpers_1.mergeSlotProps)({
size: 'small',
onClick: handleSearchClear,
}, clearIconSlotProps, props.clearIconProps || {});
const mergedInputProps = (0, slot_helpers_1.mergeSlotProps)({
inputRef: searchInputRef,
size: 'small',
placeholder: props.placeholder || 'Search...',
value: globalFilter,
onChange: handleChange,
onBlur: handleSearchBlur,
autoFocus: props.autoFocus,
sx: { minWidth: 200 },
}, props.inputProps || {});
return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
display: 'flex',
alignItems: 'center',
...props.containerSx,
}, children: [!(searchVisible || hasSearch) && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Search", ...props.tooltipProps, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { ...mergedSearchIconProps, children: (0, jsx_runtime_1.jsx)(SearchIconSlot, { ...searchIconSlotProps }) }) })), (0, jsx_runtime_1.jsx)(material_1.Collapse, { in: searchVisible || hasSearch, orientation: "horizontal", timeout: 200, children: (0, jsx_runtime_1.jsx)(material_1.OutlinedInput, { ...mergedInputProps, endAdornment: hasSearch ? ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { ...mergedClearIconProps, children: (0, jsx_runtime_1.jsx)(ClearIconSlot, { ...clearIconSlotProps }) }) })) : null }) })] }));
}