range components

react-openapi/components/FilterBar.tsx

@@ -11,7 +11,7 @@ import {
 import DoneIcon from "@mui/icons-material/Done";
 import FilterListIcon from "@mui/icons-material/FilterList";
 import { ResourceField, ResourceMode } from "../types/config";
-import { FilterBarComponents } from "../types/overrides";
+import { FilterBarComponents, FieldComponents } from "../types/overrides";
 import { getFieldOptions, resolveTemplate } from "../utils/options";
 
 export function FilterAutocomplete({
@@ -158,36 +158,22 @@ function renderFilterInput(
   value: any,
   onChange: (key: string, val: any) => void,
   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 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 (
+    return <RangeComponent name={fieldName} field={field} value={rangeVal} onChange={(val: any) => onChange("value", val)} />;
-      <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>
-    );
   }
 
   if (filterType === "date-range") {
+    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 }) || {};
-    return (
+    return <RangeComponent name={fieldName} field={field} value={rangeVal} onChange={(val: any) => onChange("value", val)} />;
-      <Box sx={{ display: "flex", gap: 1 }}>
-        <TextField type="datetime-local" placeholder="From" size="small" value={rangeVal.start ?? ""}
-          onChange={(e) => onChange("start", e.target.value || undefined)} InputLabelProps={{ shrink: true }} sx={{ width: 170 }} />
-        <TextField type="datetime-local" placeholder="To" size="small" value={rangeVal.end ?? ""}
-          onChange={(e) => onChange("end", e.target.value || undefined)} InputLabelProps={{ shrink: true }} sx={{ width: 170 }} />
-      </Box>
-    );
   }
 
   const selected = Array.isArray(value) ? value : [];
@@ -211,6 +197,7 @@ export interface FilterBarProps {
   onApply: (values: Record<string, any>) => void;
   onClear: () => void;
   components?: FilterBarComponents;
+  fieldComponents?: FieldComponents;
 }
 
 export default function FilterBar({
@@ -221,6 +208,7 @@ export default function FilterBar({
   onApply,
   onClear,
   components: filterComponents,
+  fieldComponents,
 }: FilterBarProps) {
   const [open, setOpen] = React.useState(false);
   const [draft, setDraft] = React.useState<Record<string, any>>(() => ({ ...appliedValues }));
@@ -298,7 +286,7 @@ export default function FilterBar({
                     {field.label}
                   </Box>
                   {renderFilterInput(fieldName, field, options, raw, (key, val) =>
-                    updateDraft(fieldName, key, val), filterComponents
+                    updateDraft(fieldName, key, val), filterComponents, fieldComponents
                   )}
                 </Box>
               );

react-openapi/components/ResourceView.tsx

@@ -184,6 +184,7 @@ export default function ResourceView({ config, onNavigateToResource, fieldCompon
               appliedValues={appliedFilters}
               onApply={setAppliedFilters}
               onClear={() => setAppliedFilters({})}
+              fieldComponents={components}
             />
           )}
           <EnhancedTable

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/DefaultFieldComponents.ts

@@ -8,6 +8,8 @@ import EnumField from './EnumField';
 import RelationField from './RelationField';
 import ImageUploadField from './ImageUploadField';
 import FallbackField from './FallbackField';
+import DateRangeField from './DateRangeField';
+import NumberRangeField from './NumberRangeField';
 
 const WrappedImageUploadField = (props: FieldComponentProps) =>
   React.createElement(ImageUploadField, {
@@ -33,4 +35,6 @@ export const defaultFieldComponents: FieldComponents = {
   image: WrappedImageUploadField,
   relation: RelationField,
   default: FallbackField,
+  dateRange: DateRangeField,
+  numberRange: NumberRangeField,
 };

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,10 @@ 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>;
 };
 
 export interface CellRendererProps {

src/ReportSnapshots.tsx

@@ -4,7 +4,6 @@ import {
   Container,
   Paper,
   Typography,
-  TextField,
   Button,
   IconButton,
   CircularProgress,
@@ -15,8 +14,6 @@ import {
   DialogContent,
   DialogContentText,
   DialogActions,
-  Switch,
-  FormControlLabel,
   Chip,
 } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
@@ -125,22 +122,17 @@ export default function ReportSnapshots() {
         </Typography>
 
         <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
-          {ignoreSelfField && components?.FormField ? (
+          {ignoreSelfField && components?.FormField && (
             <components.FormField
               name="ignore_self"
               field={ignoreSelfField}
               value={ignoreSelf}
               onChange={(val: boolean) => setIgnoreSelf(val)}
             />
-          ) : (
-            <FormControlLabel
-              control={<Switch checked={ignoreSelf} onChange={(e) => setIgnoreSelf(e.target.checked)} />}
-              label="Ignore self-transfers"
-            />
           )}
 
           <Box sx={{ display: "flex", gap: 2 }}>
-            {startDateField && components?.datetime ? (
+            {startDateField && components?.datetime && (
               <Box sx={{ flex: 1 }}>
                 <components.datetime
                   name="start_date"
@@ -149,18 +141,8 @@ export default function ReportSnapshots() {
                   onChange={(val: string) => setStartDate(val)}
                 />
               </Box>
-            ) : (
-              <TextField
-                label="Start Date"
-                type="datetime-local"
-                value={startDate}
-                onChange={(e) => setStartDate(e.target.value)}
-                size="small"
-                InputLabelProps={{ shrink: true }}
-                sx={{ flex: 1 }}
-              />
             )}
-            {endDateField && components?.datetime ? (
+            {endDateField && components?.datetime && (
               <Box sx={{ flex: 1 }}>
                 <components.datetime
                   name="end_date"
@@ -169,21 +151,11 @@ export default function ReportSnapshots() {
                   onChange={(val: string) => setEndDate(val)}
                 />
               </Box>
-            ) : (
-              <TextField
-                label="End Date"
-                type="datetime-local"
-                value={endDate}
-                onChange={(e) => setEndDate(e.target.value)}
-                size="small"
-                InputLabelProps={{ shrink: true }}
-                sx={{ flex: 1 }}
-              />
             )}
           </Box>
 
           <Box sx={{ display: "flex", gap: 2 }}>
-            {minAmountField && components?.FormField ? (
+            {minAmountField && components?.FormField && (
               <Box sx={{ flex: 1 }}>
                 <components.FormField
                   name="min_amount"
@@ -192,17 +164,8 @@ export default function ReportSnapshots() {
                   onChange={(val: string) => setMinAmount(val)}
                 />
               </Box>
-            ) : (
-              <TextField
-                label="Min Amount"
-                type="number"
-                value={minAmount}
-                onChange={(e) => setMinAmount(e.target.value)}
-                size="small"
-                sx={{ flex: 1 }}
-              />
             )}
-            {maxAmountField && components?.FormField ? (
+            {maxAmountField && components?.FormField && (
               <Box sx={{ flex: 1 }}>
                 <components.FormField
                   name="max_amount"
@@ -211,15 +174,6 @@ export default function ReportSnapshots() {
                   onChange={(val: string) => setMaxAmount(val)}
                 />
               </Box>
-            ) : (
-              <TextField
-                label="Max Amount"
-                type="number"
-                value={maxAmount}
-                onChange={(e) => setMaxAmount(e.target.value)}
-                size="small"
-                sx={{ flex: 1 }}
-              />
             )}
           </Box>
 

src/openapi-config.ts

@@ -57,12 +57,12 @@ export const configuration: Record<string, ResourceOverride> = {
       format: {
         path: 'source.format',
       },
-      account: {
+      // account: {
-        refers: 'accounts',
+      //   refers: 'accounts',
-      },
+      // },
-      tags: {
+      // tags: {
-        refers: 'tags',
+      //   refers: 'tags',
-      },
+      // },
     },
   },
   accounts: {