@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
84 lines (83 loc) • 5.65 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FilterValueInput = FilterValueInput;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const material_1 = require("@mui/material");
const DatePicker_1 = require("@mui/x-date-pickers/DatePicker");
const moment_1 = __importDefault(require("moment"));
const column_helpers_1 = require("../../utils/column-helpers");
const AdapterMoment_1 = require("@mui/x-date-pickers/AdapterMoment");
const x_date_pickers_1 = require("@mui/x-date-pickers");
function FilterValueInput(props) {
const { filter, column, onValueChange, formControlProps, textFieldProps, selectProps, datePickerProps, containerSx, ...otherProps } = props;
const columnType = (0, column_helpers_1.getColumnType)(column);
const customComponent = (0, column_helpers_1.getCustomFilterComponent)(column);
const options = (0, column_helpers_1.getColumnOptions)(column);
const operator = filter.operator;
// If custom component is provided, use it
if (customComponent) {
const CustomComponent = customComponent;
return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: containerSx, children: (0, jsx_runtime_1.jsx)(CustomComponent, { value: filter.value, onChange: onValueChange, filter: filter, column: column, ...otherProps }) }));
}
// Boolean type - Yes/No select
if (columnType === 'boolean') {
return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { size: "small", sx: {
flex: 1,
minWidth: 120,
...containerSx,
}, ...formControlProps, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Value" }), (0, jsx_runtime_1.jsxs)(material_1.Select, { value: filter.value || 'any', label: "Value", onChange: (e) => onValueChange(e.target.value), ...selectProps, children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: 'any', children: "Any" }, 'any'), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: 'true', children: "True" }, 'true'), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: 'false', children: "False" }, 'false')] })] }));
}
// Select type with options
if (options && options.length > 0) {
// Multi-select for 'in' operator
if (operator === 'in') {
const currentValue = Array.isArray(filter.value) ? filter.value : [];
return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { size: "small", sx: {
flex: 1,
minWidth: 120,
...containerSx,
}, ...formControlProps, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Values" }), (0, jsx_runtime_1.jsx)(material_1.Select, { multiple: true, value: currentValue, label: "Values", onChange: (e) => onValueChange(e.target.value), renderValue: (selected) => selected.join(', '), ...selectProps, children: options.map(option => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { value: option.value, children: [(0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: currentValue.includes(option.value) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: option.label })] }, String(option.value)))) })] }));
}
// Single select for other operators
return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { size: "small", sx: {
flex: 1,
minWidth: 120,
...containerSx,
}, ...formControlProps, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Value" }), (0, jsx_runtime_1.jsx)(material_1.Select, { value: filter.value, label: "Value", onChange: (e) => onValueChange(e.target.value), ...selectProps, children: options.map(option => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: option.value, children: option.label }, String(option.value)))) })] }));
}
// Date type
if (columnType === 'date') {
// Only single date picker, no 'between' support
return ((0, jsx_runtime_1.jsx)(x_date_pickers_1.LocalizationProvider, { dateAdapter: AdapterMoment_1.AdapterMoment, children: (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, { value: filter.value ? (0, moment_1.default)(filter.value) : null, onChange: (e) => onValueChange(e === null || e === void 0 ? void 0 : e.toDate()), slotProps: {
textField: {
size: 'small',
label: 'Value',
sx: {
flex: 1,
minWidth: 120,
...containerSx,
},
...textFieldProps,
},
}, ...datePickerProps }) }));
}
// Number type
if (columnType === 'number') {
// Only single number input, no 'between' support
return ((0, jsx_runtime_1.jsx)(material_1.TextField, { size: "small", label: "Value", value: filter.value, onChange: (e) => onValueChange(e.target.value), type: "number", sx: {
flex: 1,
minWidth: 120,
...containerSx,
}, ...textFieldProps }));
}
// Default: text input
return ((0, jsx_runtime_1.jsx)(material_1.TextField, { size: "small", label: "Value", value: filter.value, onChange: (e) => onValueChange(e.target.value), sx: {
flex: 1,
minWidth: 120,
...containerSx,
}, ...textFieldProps }));
}