This video is available to students only
Finalizing the bulk editor
Polishing off the bulk editor with a custom value editor
Now we'll enhance our bulk editor by designing another custom ValueEditor component.
New ValueEditor#
Create a new file in the client/src/ folder called ValueEditorForBulkEdit.tsx. This component will return the appropriate value editor based on the selected field and operator.
1
import { format, isValid, parse } from "date-fns";
2
import ReactDatePicker from "react-datepicker";
3
import "react-datepicker/dist/react-datepicker.css";
4
import {5
ValueEditor as DefaultValueEditor,
6
ValueEditorProps,7
} from "react-querybuilder";
8
9
const ValueEditorForBulkEdit = (props: ValueEditorProps) => {
10
const { field, fieldData, operator, value, handleOnChange } = props;
11
12
if (field === "date" || field === "order_date" || field === "ship_date") {
13
if (operator === "extendBy") {
14
return (15
<input
16
type="number"
17
onChange={(e) => handleOnChange(e.target.value)}
18
value={value || ""}
19
/>20
);
21
}
22
return (23
<div style={{ display: "inline-block" }}>
24
<ReactDatePicker
25
onChange={(d: Date) => {
26
handleOnChange(isValid(d) ? format(d, "yyyy-MM-dd") : null);
27
}}
28
value={value || ""}
29
selected={value ? parse(value, "yyyy-MM-dd", new Date()) : new Date()}
30
/>31
</div>
32
);
33
} else if (fieldData.inputType === "number") {
34
return (35
<input
36
type="number"
37
onChange={(e) => handleOnChange(e.target.value)}
38
value={value || ""}
39
/>40
);
41
}
42
43
return <DefaultValueEditor {props} />;
44
};
45
46
export default ValueEditorForBulkEdit;
Query builder configuration#
This page is a preview of Building Advanced Admin Reporting in React