@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
59 lines (58 loc) • 4.6 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.FilterValueInput = FilterValueInput;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const DatePicker_1 = require("@mui/x-date-pickers/DatePicker");
const moment_1 = tslib_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({ filter, column, onValueChange, }) {
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 (customComponent) {
const CustomComponent = customComponent;
return ((0, jsx_runtime_1.jsx)(CustomComponent, { value: filter.value, onChange: onValueChange, filter: filter, column: column }));
}
if (columnType === 'boolean') {
return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { size: "small", sx: {
flex: 1,
minWidth: 120,
}, 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), 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')] })] }));
}
if (columnType === 'select' && options.length > 0) {
if (operator === 'in' || operator === 'notIn') {
return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { size: "small", sx: { flex: 1, minWidth: 120 }, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Value" }), (0, jsx_runtime_1.jsx)(material_1.Select, { multiple: true, value: Array.isArray(filter.value) ? filter.value : [], label: "Value", onChange: (e) => onValueChange(e.target.value), renderValue: (selected) => selected.map(val => {
const opt = options.find(o => o.value === val);
return opt ? opt.label : val;
}).join(', '), 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: Array.isArray(filter.value) && filter.value.indexOf(option.value) > -1 }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: option.label })] }, String(option.value)))) })] }));
}
return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { size: "small", sx: { flex: 1, minWidth: 120 }, 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), children: options.map(option => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: option.value, children: option.label }, String(option.value)))) })] }));
}
if (columnType === 'date') {
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,
},
},
} }) }));
}
if (columnType === 'number') {
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,
} }));
}
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,
} }));
}