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