diff --git a/packages/base/FilterBuilder/components/FilterBuilder.tsx b/packages/base/FilterBuilder/components/FilterBuilder.tsx index 8c4d151..1c2b8e1 100644 --- a/packages/base/FilterBuilder/components/FilterBuilder.tsx +++ b/packages/base/FilterBuilder/components/FilterBuilder.tsx @@ -5,11 +5,11 @@ import FilterRoot from "./FilterRoot"; import { ExternalBuilderProps, FieldDef } from "../types" -export type FilterBuilderProps = ExternalBuilderProps & { - schema: FieldDef[] +export type FilterBuilderProps = ExternalBuilderProps & { + schema: FieldDef[] } -const FilterBuilder = (props: FilterBuilderProps) => { +const FilterBuilder = (props: FilterBuilderProps) => { return ( diff --git a/packages/base/FilterBuilder/components/FilterInputs.tsx b/packages/base/FilterBuilder/components/FilterInputs.tsx index e25ef47..b75c4df 100644 --- a/packages/base/FilterBuilder/components/FilterInputs.tsx +++ b/packages/base/FilterBuilder/components/FilterInputs.tsx @@ -1,7 +1,7 @@ import React, { Fragment, useMemo } from "react" import { useRecoilValue } from "recoil"; import { Autocomplete, FormControl, Grid, InputLabel, MenuItem, Select, TextField } from "@mui/material"; -import { DatePicker, DateTimePicker, LocalizationProvider } from "@mui/lab"; +import { DatePicker, DateTimePicker, LocalizationProvider } from "@mui/x-date-pickers"; import { CollectionFieldDef, CollectionOperation, FieldDef, Operation } from "../types"; @@ -25,7 +25,7 @@ type FilterInputsProps = { onCollectionFieldChange: (field: string, oldField: string | undefined, currentOp: Operation, newField: string | undefined) => void, } -const FilterInputs = React.memo(({ +const FilterInputs = ({ clauseId, field, onFieldChange, @@ -49,7 +49,7 @@ const FilterInputs = React.memo(({ return null; } - let f: FieldDef; + let f: FieldDef; if (field) { f = schema.find(c => c.field === field) ?? schema[0]; } else { @@ -61,7 +61,7 @@ const FilterInputs = React.memo(({ } let filterField = field; - let colField: CollectionFieldDef | undefined; + let colField: CollectionFieldDef | undefined; let type = f.filterType ?? f.type; let options = f.valueOptions; let ops = f.filterOperators ?? allOperators; @@ -266,7 +266,7 @@ const FilterInputs = React.memo(({ {...builderProps.textFieldProps} {...fieldDef.textFieldProps} value={value ?? ""} - onChange={(e) => onValueChange(fieldDef.type === "number" ? parseFloat(e.target.value) : e.target.value)} + onChange={(e: React.ChangeEvent) => onValueChange(fieldDef.type === "number" ? parseFloat(e.target.value) : e.target.value)} type={fieldDef.type === "number" ? "number" : "text"} /> } @@ -276,6 +276,6 @@ const FilterInputs = React.memo(({ } ) -}); +}; -export default FilterInputs; +export default React.memo(FilterInputs); diff --git a/packages/base/FilterBuilder/components/FilterRoot.tsx b/packages/base/FilterBuilder/components/FilterRoot.tsx index 85984f5..a272723 100644 --- a/packages/base/FilterBuilder/components/FilterRoot.tsx +++ b/packages/base/FilterBuilder/components/FilterRoot.tsx @@ -14,11 +14,11 @@ import { useMountEffect } from "../../hooks"; import { ConditionClause, SerialisedGroup, QueryStringCollection } from "../types"; import { deserialise } from "../utils"; -type FilterRootProps = { - props: FilterBuilderProps +type FilterRootProps = { + props: FilterBuilderProps } -const FilterRoot = ({ props }: FilterRootProps) => { +const FilterRoot = ({ props }: FilterRootProps) => { const setClauses = useSetRecoilState(clauseState); const setProps = useSetRecoilState(propsState); const setSchema = useSetRecoilState(schemaState); @@ -176,7 +176,7 @@ const FilterRoot = ({ props }: FilterRootProps) => { props.searchMenuItems &&