feat: support filtering

formwerkjs · Feb 22, 2025 · 9524c53 · 9524c53
1 parent 4f3b55d
commit 9524c53
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/packages/devtools/src/helpers.ts b/packages/devtools/src/helpers.ts
@@ -201,14 +201,22 @@ export function getFieldNodeTags(field: DevtoolsField, valid: boolean) {
   ].filter(Boolean) as InspectorNodeTag[];
 }
 
-export function mapFormForDevtoolsInspector(form: DevtoolsForm): CustomInspectorNode {
+export function mapFormForDevtoolsInspector(form: DevtoolsForm, filter?: string): CustomInspectorNode {
   const { textColor, bgColor } = getValidityColors(form.isValid());
   const formState = formToState(form);
 
   const formTreeNodes = {};
-  form.fields?.forEach(state => {
-    setInPath(formTreeNodes, toValue(state.getPath() ?? ''), mapFieldForDevtoolsInspector(state, form));
-  });
+  Array.from(form.fields?.values() ?? [])
+    .filter(f => {
+      if (!filter) {
+        return true;
+      }
+
+      return f.getName()?.toLowerCase().includes(filter.toLowerCase()) ?? false;
+    })
+    .forEach(state => {
+      setInPath(formTreeNodes, toValue(state.getPath() ?? ''), mapFieldForDevtoolsInspector(state, form));
+    });
 
   const { children } = buildFormTree(formTreeNodes);
 

diff --git a/packages/devtools/src/init.ts b/packages/devtools/src/init.ts
@@ -101,10 +101,16 @@ async function installDevtoolsPlugin(app: App) {
             }
 
             const forms = getAllForms();
-            const fields = getRootFields();
+            const fields = getRootFields().filter(f => {
+              if (!payload.filter) {
+                return true;
+              }
+
+              return f.getName()?.toLowerCase().includes(payload.filter.toLowerCase()) ?? false;
+            });
 
             payload.rootNodes = [
-              ...forms.map(mapFormForDevtoolsInspector),
+              ...forms.map(form => mapFormForDevtoolsInspector(form, payload.filter)),
               ...fields.map(field => mapFieldForDevtoolsInspector(field)),
             ];
           });