range components

react-openapi/components/FilterBar.tsx

@@ -13,6 +13,8 @@ import FilterListIcon from "@mui/icons-material/FilterList";
 import { ResourceField, ResourceMode } from "../types/config";
 import { FilterBarComponents, FieldComponents } from "../types/overrides";
 import { getFieldOptions, resolveTemplate } from "../utils/options";
+import DateRangeField from './fields/DateRangeField';
+import NumberRangeField from './fields/NumberRangeField';
 
 export function FilterAutocomplete({
   options,
@@ -160,56 +162,22 @@ function renderFilterInput(
   components?: FilterBarComponents,
   fieldComponents?: FieldComponents,
 ) {
-  const CustomInput = components?.filterInputs?.[fieldName];
-  if (CustomInput) {
-    return <CustomInput field={field} value={value} onChange={(val) => onChange("value", val)} options={options} />;
-  }
-
   const filterType = field.filterType;
 
   if (filterType === "number-range") {
-    const NumberComponent = fieldComponents?.number;
-    if (NumberComponent) {
+    const RangeComponent = fieldComponents?.numberRange;
+    if (!RangeComponent) throw new Error(`Number range component not found for field ${fieldName}`);
+
     const rangeVal = (value as { min?: string; max?: string }) || {};
-      return (
-        <Box sx={{ display: "flex", gap: 1 }}>
-          <NumberComponent name={`${fieldName}_min`} field={field} value={rangeVal.min ?? ""} onChange={(val: any) => onChange("min", val === "" ? undefined : val)} />
-          <NumberComponent name={`${fieldName}_max`} field={field} value={rangeVal.max ?? ""} onChange={(val: any) => onChange("max", val === "" ? undefined : val)} />
-        </Box>
-      );
-    }
-    const rangeVal = (value as { min?: string; max?: string }) || {};
-    return (
-      <Box sx={{ display: "flex", gap: 1 }}>
-        <TextField type="number" placeholder="Min" size="small" value={rangeVal.min ?? ""}
-          onChange={(e) => onChange("min", e.target.value || undefined)} sx={{ width: 100 }} />
-        <TextField type="number" placeholder="Max" size="small" value={rangeVal.max ?? ""}
-          onChange={(e) => onChange("max", e.target.value || undefined)} sx={{ width: 100 }} />
-      </Box>
-    );
+    return <RangeComponent name={fieldName} field={field} value={rangeVal} onChange={(val: any) => onChange("value", val)} />;
   }
 
   if (filterType === "date-range") {
-    const DateComponent = fieldComponents?.date;
-    if (DateComponent) {
+    const RangeComponent = fieldComponents?.dateRange;
+    if (!RangeComponent) throw new Error(`Number range component not found for field ${fieldName}`);
+
     const rangeVal = (value as { start?: string; end?: string }) || {};
-      const dateField = { ...field, type: 'date' as const };
-      return (
-        <Box sx={{ display: "flex", gap: 1 }}>
-          <DateComponent name={`${fieldName}_start`} field={dateField} value={rangeVal.start ?? ""} onChange={(val: string) => onChange("start", val || undefined)} />
-          <DateComponent name={`${fieldName}_end`} field={dateField} value={rangeVal.end ?? ""} onChange={(val: string) => onChange("end", val || undefined)} />
-        </Box>
-      );
-    }
-    const rangeVal = (value as { start?: string; end?: string }) || {};
-    return (
-      <Box sx={{ display: "flex", gap: 1 }}>
-        <TextField type="date" placeholder="From" size="small" value={rangeVal.start ?? ""}
-          onChange={(e) => onChange("start", e.target.value || undefined)} InputLabelProps={{ shrink: true }} sx={{ width: 170 }} />
-        <TextField type="date" placeholder="To" size="small" value={rangeVal.end ?? ""}
-          onChange={(e) => onChange("end", e.target.value || undefined)} InputLabelProps={{ shrink: true }} sx={{ width: 170 }} />
-      </Box>
-    );
+    return <RangeComponent name={fieldName} field={field} value={rangeVal} onChange={(val: any) => onChange("value", val)} />;
   }
 
   const selected = Array.isArray(value) ? value : [];

react-openapi/components/fields/DateRangeField.tsx

@@ -0,0 +1,30 @@
+import { Box, TextField as MuiTextField } from '@mui/material';
+import { FieldComponentProps } from '../../types/overrides';
+
+export default function DateRangeField({ value, onChange, disabled }: FieldComponentProps) {
+  const rangeVal = (value as { start?: string; end?: string }) || {};
+  return (
+    <Box sx={{ display: "flex", gap: 1 }}>
+      <MuiTextField
+        type="date"
+        placeholder="From"
+        size="small"
+        value={rangeVal.start ?? ""}
+        onChange={(e) => onChange({ ...rangeVal, start: e.target.value || undefined })}
+        InputLabelProps={{ shrink: true }}
+        sx={{ width: 170 }}
+        disabled={disabled}
+      />
+      <MuiTextField
+        type="date"
+        placeholder="To"
+        size="small"
+        value={rangeVal.end ?? ""}
+        onChange={(e) => onChange({ ...rangeVal, end: e.target.value || undefined })}
+        InputLabelProps={{ shrink: true }}
+        sx={{ width: 170 }}
+        disabled={disabled}
+      />
+    </Box>
+  );
+}

react-openapi/components/fields/NumberRangeField.tsx

@@ -0,0 +1,28 @@
+import { Box, TextField as MuiTextField } from '@mui/material';
+import { FieldComponentProps } from '../../types/overrides';
+
+export default function NumberRangeField({ value, onChange, disabled }: FieldComponentProps) {
+  const rangeVal = (value as { min?: string; max?: string }) || {};
+  return (
+    <Box sx={{ display: "flex", gap: 1 }}>
+      <MuiTextField
+        type="number"
+        placeholder="Min"
+        size="small"
+        value={rangeVal.min ?? ""}
+        onChange={(e) => onChange({ ...rangeVal, min: e.target.value || undefined })}
+        sx={{ width: 100 }}
+        disabled={disabled}
+      />
+      <MuiTextField
+        type="number"
+        placeholder="Max"
+        size="small"
+        value={rangeVal.max ?? ""}
+        onChange={(e) => onChange({ ...rangeVal, max: e.target.value || undefined })}
+        sx={{ width: 100 }}
+        disabled={disabled}
+      />
+    </Box>
+  );
+}

react-openapi/components/fields/index.ts

@@ -8,5 +8,7 @@ export { default as EnumField } from './EnumField';
 export { default as RelationField } from './RelationField';
 export { default as ObjectField } from './ObjectField';
 export { default as FallbackField } from './FallbackField';
+export { default as DateRangeField } from './DateRangeField';
+export { default as NumberRangeField } from './NumberRangeField';
 export { defaultFieldComponents } from './DefaultFieldComponents';
 export type { ObjectFieldProps } from './ObjectField';

react-openapi/types/overrides.ts

@@ -52,6 +52,8 @@ export type FieldComponents = Partial<Record<FieldType, FieldComponent>> & {
   relation?: FieldComponent;
   image?: FieldComponent;
   default?: FieldComponent;
+  dateRange?: FieldComponent;
+  numberRange?: FieldComponent;
   FormField?: React.ComponentType<any>;
   GenericForm?: React.ComponentType<any>;
 };