wip: render custom control based on schema matching

src/components/Dropdown.tsx

@@ -0,0 +1,51 @@
+import { useEffect, useState } from 'react';
+
+import { ControlProps, EnumOption, JsonSchema7 } from '@jsonforms/core';
+import { MaterialEnumControl } from '@jsonforms/material-renderers';
+import { withJsonFormsControlProps } from '@jsonforms/react';
+
+import {
+  DynamicDropdownCustomControl,
+  ShadedTopoJsonCustomControl,
+} from './JsonFormsDemo';
+
+interface CustomControlSchema extends JsonSchema7 {
+  'forms.nby.one/custom-control':
+    | ShadedTopoJsonCustomControl
+    | DynamicDropdownCustomControl;
+}
+
+export const Dropdown = withJsonFormsControlProps(function D({
+  ...props
+}: ControlProps) {
+  const [options, setOptions] = useState<EnumOption[] | null>(null);
+
+  const schema = props.schema as CustomControlSchema;
+
+  const conn = schema['forms.nby.one/custom-control'].data.sourceConnection;
+
+  useEffect(() => {
+    setTimeout(() => {
+      console.log(conn);
+      setOptions(enums);
+    }, 5000);
+  }, []);
+
+  if (!options) return <div>Loading...</div>;
+  return <MaterialEnumControl {...props} options={options ?? []} />;
+});
+
+const enums: EnumOption[] = [
+  {
+    value: 'a',
+    label: 'Option A',
+  },
+  {
+    value: 'b',
+    label: 'Option B',
+  },
+  {
+    value: 'c',
+    label: 'Option C',
+  },
+];

src/components/JsonFormsDemo.tsx

@@ -1,16 +1,15 @@
-import { useMemo, useState } from 'react';
+import { useMemo, useState } from "react";
 
-import {
-  materialCells,
-  materialRenderers,
-} from '@jsonforms/material-renderers';
-import { JsonForms } from '@jsonforms/react';
-import Button from '@mui/material/Button';
-import Grid from '@mui/material/Grid';
-import Typography from '@mui/material/Typography';
+import { JsonSchema7, rankWith, schemaMatches, Tester } from "@jsonforms/core";
+import { materialCells, materialRenderers } from "@jsonforms/material-renderers";
+import { JsonForms } from "@jsonforms/react";
+import Button from "@mui/material/Button";
+import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
 
-import { useQueryState } from '../queryState';
-import { SchemaInput } from './SchemaInput';
+import { useQueryState } from "../queryState";
+import { Dropdown } from "./Dropdown";
+import { SchemaInput } from "./SchemaInput";
 
 const classes = {
   container: {
@@ -38,6 +37,52 @@ const classes = {
   },
 };
 
+export interface DynamicDropdownCustomControl {
+  type: 'dynamic-dropdown';
+  data: {
+    sourceConnection: string;
+  };
+}
+
+export interface ShadedTopoJsonCustomControl {
+  type: 'shaded-topojson';
+  topojson: {
+    sourceConnection: string;
+  };
+  data: {
+    sourceConnection: string;
+  };
+}
+
+interface CustomControlSchema extends JsonSchema7 {
+  'forms.nby.one/custom-control':
+    | ShadedTopoJsonCustomControl
+    | DynamicDropdownCustomControl;
+}
+
+function isNbyCustomControl(schema: object): schema is CustomControlSchema {
+  return Object.hasOwn(schema, 'forms.nby.one/custom-control');
+}
+
+const isTopoJsonControl: Tester = schemaMatches(schema => {
+  return (
+    isNbyCustomControl(schema) &&
+    schema['forms.nby.one/custom-control'].type === 'shaded-topojson'
+  );
+});
+
+const renderers = [
+  ...materialRenderers,
+  {
+    tester: rankWith(3, schemaMatches(isNbyCustomControl)),
+    renderer: Dropdown,
+  },
+  {
+    tester: rankWith(4, isTopoJsonControl),
+    renderer: Dropdown,
+  },
+];
+
 const initialData = {};
 
 export function JsonFormsDemo() {
@@ -103,7 +148,7 @@ export function JsonFormsDemo() {
             schema={schemaObject}
             uischema={uiSchemaObject}
             data={data}
-            renderers={materialRenderers}
+            renderers={renderers}
             cells={materialCells}
             onChange={({ data }) => setData(data)}
           />