@mrii/react-table-builder
Version:
library to easily build tables using MUI grid
177 lines (173 loc) • 6.84 kB
JavaScript
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var material = require('@mui/material');
var DateRangePicker = require('@mui/lab/DateRangePicker');
var react = require('react');
var index = require('../../hooks/use-debounce/index.js');
const INPUT_WIDTH = 202;
const TextFieldDebounced = /*#__PURE__*/ react.memo(/*#__PURE__*/ react.forwardRef(({ onChangeDebounced , value: initialValue , debounceDelay =700 , ...props }, ref)=>{
const [value, setValue] = react.useState(initialValue);
const debouncedValue = index.useDebounce(value, debounceDelay);
const onChange = react.useCallback(({ target: { value: v } })=>setValue(v), []);
react.useEffect(()=>{
onChangeDebounced?.(debouncedValue);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
debouncedValue
]);
return /*#__PURE__*/ jsxRuntime.jsx(material.TextField, {
ref: ref,
value: value,
onChange: onChange,
...props
});
}));
const FilterField = /*#__PURE__*/ react.memo(function FilterField(props) {
const { onChange , value , label } = props;
switch(props.type){
case 'string':
case 'number':
return /*#__PURE__*/ jsxRuntime.jsx(TextFieldDebounced, {
value: value,
onChangeDebounced: onChange,
label: label,
type: props.type === 'number' ? 'number' : 'text',
sx: {
width: INPUT_WIDTH,
maxWidth: '100%'
},
inputProps: {
style: {
height: 'auto'
}
}
});
case 'singleSelect':
return /*#__PURE__*/ jsxRuntime.jsxs(TextFieldDebounced, {
value: value,
onChangeDebounced: onChange,
label: label,
sx: {
width: INPUT_WIDTH,
maxWidth: '100%'
},
inputProps: {
style: {
height: 'auto'
}
},
select: true,
debounceDelay: 0,
children: [
/*#__PURE__*/ jsxRuntime.jsx(material.MenuItem, {
value: undefined,
children: /*#__PURE__*/ jsxRuntime.jsx("em", {
children: /*#__PURE__*/ jsxRuntime.jsx("b", {
children: "None"
})
})
}),
props.items.map((el, i)=>// eslint-disable-next-line react/no-array-index-key
/*#__PURE__*/ jsxRuntime.jsx(material.MenuItem, {
value: el.value,
children: el.label
}, i))
]
});
case 'date':
return /*#__PURE__*/ jsxRuntime.jsx(DateRangePicker, {
value: value,
onChange: onChange,
renderInput: (startProps, endProps)=>/*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [
/*#__PURE__*/ jsxRuntime.jsx(material.TextField, {
...startProps,
label: `${label} - Start`,
sx: {
width: INPUT_WIDTH,
maxWidth: '100%'
},
inputProps: {
style: {
height: 'auto'
},
...startProps.inputProps
}
}),
/*#__PURE__*/ jsxRuntime.jsx(material.Box, {
sx: {
mx: 2
},
children: " to "
}),
/*#__PURE__*/ jsxRuntime.jsx(material.TextField, {
...endProps,
label: `${label} - End`,
sx: {
width: INPUT_WIDTH,
maxWidth: '100%'
},
inputProps: {
style: {
height: 'auto'
},
...startProps.inputProps
}
})
]
})
});
case 'boolean':
return /*#__PURE__*/ jsxRuntime.jsxs(TextFieldDebounced, {
value: value,
onChangeDebounced: (v)=>onChange(v === 'true'),
label: label,
sx: {
width: INPUT_WIDTH,
maxWidth: '100%'
},
inputProps: {
style: {
height: 'auto'
}
},
select: true,
debounceDelay: 0,
children: [
/*#__PURE__*/ jsxRuntime.jsx(material.MenuItem, {
value: undefined,
children: /*#__PURE__*/ jsxRuntime.jsx("em", {
children: /*#__PURE__*/ jsxRuntime.jsx("b", {
children: "None"
})
})
}),
/*#__PURE__*/ jsxRuntime.jsx(material.MenuItem, {
value: "true",
children: "True"
}),
/*#__PURE__*/ jsxRuntime.jsx(material.MenuItem, {
value: "false",
children: "False"
})
]
});
default:
return /*#__PURE__*/ jsxRuntime.jsx(TextFieldDebounced, {
value: value,
onChangeDebounced: onChange,
label: label,
sx: {
width: INPUT_WIDTH,
maxWidth: '100%'
},
inputProps: {
style: {
height: 'auto'
}
}
});
}
});
exports.FilterField = FilterField;
//# sourceMappingURL=index.js.map