use input registry for fieldsets

wq · Nov 2, 2023 · 5544bc2 · 5544bc2
1 parent bc636a1
commit 5544bc2
Show file tree

Hide file tree

Showing 22 changed files with 64 additions and 39 deletions.
diff --git a/packages/material-native/src/components/IconButton.js b/packages/material-native/src/components/IconButton.js
@@ -18,7 +18,7 @@ export default function IconButton({ icon, onClick, onPress, color, ...rest }) {
         <PaperIconButton
             icon={Icon}
             onPress={onPress}
-            color={color}
+            iconColor={color}
             {...rest}
         />
     );

diff --git a/packages/material-native/src/components/index.js b/packages/material-native/src/components/index.js
@@ -47,10 +47,6 @@ import TablePagination from "./TablePagination.js";
 
 import FormRoot from "./FormRoot.js";
 import FormError from "./FormError.js";
-import Fieldset from "./Fieldset.js";
-import FlatFieldset from "./FlatFieldset.js";
-import FieldsetArray from "./FieldsetArray.js";
-import FileArray from "./FileArray.js";
 import CancelButton from "./CancelButton.js";
 import SubmitButton from "./SubmitButton.js";
 import IconSubmitButton from "./IconSubmitButton.js";
@@ -121,10 +117,6 @@ export {
 export {
     FormRoot,
     FormError,
-    Fieldset,
-    FlatFieldset,
-    FieldsetArray,
-    FileArray,
     CancelButton,
     SubmitButton,
     IconSubmitButton,

diff --git a/...aterial-native/src/components/Fieldset.js → ...es/material-native/src/inputs/Fieldset.js b/...aterial-native/src/components/Fieldset.js → ...es/material-native/src/inputs/Fieldset.js
diff --git a/...al-native/src/components/FieldsetArray.js → ...terial-native/src/inputs/FieldsetArray.js b/...al-native/src/components/FieldsetArray.js → ...terial-native/src/inputs/FieldsetArray.js
diff --git a/...terial-native/src/components/FileArray.js → ...s/material-native/src/inputs/FileArray.js b/...terial-native/src/components/FileArray.js → ...s/material-native/src/inputs/FileArray.js
diff --git a/...ial-native/src/components/FlatFieldset.js → ...aterial-native/src/inputs/FlatFieldset.js b/...ial-native/src/components/FlatFieldset.js → ...aterial-native/src/inputs/FlatFieldset.js
diff --git a/packages/material-native/src/inputs/index.js b/packages/material-native/src/inputs/index.js
@@ -8,6 +8,10 @@ import Radio from "./Radio.js";
 import Toggle from "./Toggle.js";
 import Hidden from "./Hidden.js";
 import HelperText from "./HelperText.js";
+import Fieldset from "./Fieldset.js";
+import FlatFieldset from "./FlatFieldset.js";
+import FieldsetArray from "./FieldsetArray.js";
+import FileArray from "./FileArray.js";
 
 const Date = DateTime;
 const Time = DateTime;
@@ -27,4 +31,8 @@ export {
     Toggle,
     Hidden,
     HelperText,
+    Fieldset,
+    FlatFieldset,
+    FieldsetArray,
+    FileArray,
 };
diff --git a/packages/material-web/src/components/index.js b/packages/material-web/src/components/index.js
@@ -46,10 +46,6 @@ import TablePagination from "./TablePagination.js";
 
 import FormRoot from "./FormRoot.js";
 import FormError from "./FormError.js";
-import Fieldset from "./Fieldset.js";
-import FlatFieldset from "./FlatFieldset.js";
-import FieldsetArray from "./FieldsetArray.js";
-import FileArray from "./FileArray.js";
 import CancelButton from "./CancelButton.js";
 import SubmitButton from "./SubmitButton.js";
 import IconSubmitButton from "./IconSubmitButton.js";
@@ -119,10 +115,6 @@ export {
 export {
     FormRoot,
     FormError,
-    Fieldset,
-    FlatFieldset,
-    FieldsetArray,
-    FileArray,
     CancelButton,
     SubmitButton,
     IconSubmitButton,

diff --git a/...s/material-web/src/components/Fieldset.js → packages/material-web/src/inputs/Fieldset.js b/...s/material-web/src/components/Fieldset.js → packages/material-web/src/inputs/Fieldset.js
diff --git a/...erial-web/src/components/FieldsetArray.js → .../material-web/src/inputs/FieldsetArray.js b/...erial-web/src/components/FieldsetArray.js → .../material-web/src/inputs/FieldsetArray.js
diff --git a/.../material-web/src/components/FileArray.js → ...ages/material-web/src/inputs/FileArray.js b/.../material-web/src/components/FileArray.js → ...ages/material-web/src/inputs/FileArray.js
diff --git a/...terial-web/src/components/FlatFieldset.js → ...s/material-web/src/inputs/FlatFieldset.js b/...terial-web/src/components/FlatFieldset.js → ...s/material-web/src/inputs/FlatFieldset.js
diff --git a/packages/material-web/src/inputs/index.js b/packages/material-web/src/inputs/index.js
@@ -8,6 +8,10 @@ import Radio from "./Radio.js";
 import Toggle from "./Toggle.js";
 import Hidden from "./Hidden.js";
 import HelperText from "./HelperText.js";
+import Fieldset from "./Fieldset.js";
+import FlatFieldset from "./FlatFieldset.js";
+import FieldsetArray from "./FieldsetArray.js";
+import FileArray from "./FileArray.js";
 
 const Date = DateTime;
 const Time = DateTime;
@@ -27,4 +31,8 @@ export {
     Toggle,
     Hidden,
     HelperText,
+    Fieldset,
+    FlatFieldset,
+    FieldsetArray,
+    FileArray,
 };
diff --git a/packages/react/src/components/AutoSubform.js b/packages/react/src/components/AutoSubform.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { useComponents } from "../hooks.js";
+import { useComponents, useInputComponents } from "../hooks.js";
 import PropTypes from "prop-types";
 import { pascalCase } from "pascal-case";
 
@@ -11,6 +11,7 @@ export default function AutoSubform({
     ...rest
 }) {
     const components = useComponents(),
+        inputs = useInputComponents(),
         { AutoInput } = components,
         componentName = rest.control && rest.control.appearance;
 
@@ -20,17 +21,28 @@ export default function AutoSubform({
         Fieldset = component;
     } else if (componentName) {
         // Defined in XLSForm config
-        Fieldset = components[componentName];
+        Fieldset = inputs[componentName];
         if (!Fieldset) {
             // eslint-disable-next-line
             Fieldset = ({ children, ...rest }) => {
-                const { Text, Fieldset } = components;
+                const { Text } = components,
+                    { Fieldset } = inputs,
+                    name = pascalCase(componentName);
                 return (
                     <Fieldset {...rest}>
                         <Text>
-                            Unknown fieldset type &quot;{componentName}&quot;.
-                            Perhaps you need to define components.
-                            {pascalCase(componentName)} in a plugin?
+                            Unknown fieldset type &quot;{componentName}&quot;.{" "}
+                            {components[componentName] ? (
+                                <>
+                                    Move or copy components.{name} to inputs.
+                                    {name}?
+                                </>
+                            ) : (
+                                <>
+                                    Perhaps you need to define inputs.{name} in
+                                    a plugin?
+                                </>
+                            )}
                         </Text>
                         {children}
                     </Fieldset>
@@ -39,7 +51,7 @@ export default function AutoSubform({
         }
     } else {
         // Default (or global default override)
-        Fieldset = components.Fieldset;
+        Fieldset = inputs.Fieldset;
     }
 
     const prefix = name ? `${name}.` : "";

diff --git a/packages/react/src/components/AutoSubformArray.js b/packages/react/src/components/AutoSubformArray.js
@@ -1,29 +1,42 @@
 import React, { useCallback } from "react";
-import { useComponents } from "../hooks.js";
+import { useComponents, useInputComponents } from "../hooks.js";
 import { FieldArray, getIn } from "formik";
 import PropTypes from "prop-types";
 import { initData } from "./AutoForm.js";
 import { pascalCase } from "pascal-case";
 
 export default function AutoSubformArray({ name, label, subform, ...rest }) {
     const components = useComponents(),
+        inputs = useInputComponents(),
         { AutoSubform } = components,
         componentName = rest.control && rest.control.appearance;
 
     let FieldsetArray;
     if (componentName) {
         // Defined in XLSForm config
-        FieldsetArray = components[componentName];
+        FieldsetArray = inputs[componentName];
         if (!FieldsetArray) {
             // eslint-disable-next-line
             FieldsetArray = ({ children, ...rest }) => {
-                const { Text, FieldsetArray } = components;
+                const { Text } = components,
+                    { FieldsetArray } = inputs,
+                    name = pascalCase(componentName);
                 return (
                     <FieldsetArray {...rest}>
                         <Text>
                             Unknown fieldset array type &quot;{componentName}
-                            &quot;. Perhaps you need to define components.
-                            {pascalCase(componentName)} in a plugin?
+                            &quot;.{" "}
+                            {components[componentName] ? (
+                                <>
+                                    Move or copy components.{name} to inputs.
+                                    {name}?
+                                </>
+                            ) : (
+                                <>
+                                    Perhaps you need to define inputs.{name} in
+                                    a plugin?
+                                </>
+                            )}
                         </Text>
                         {children}
                     </FieldsetArray>

diff --git a/packages/react/src/components/index.js b/packages/react/src/components/index.js
@@ -58,10 +58,6 @@ import FileLink from "./FileLink.js";
 import Form from "./Form.js";
 import FormRoot from "./FormRoot.js";
 import FormError from "./FormError.js";
-import Fieldset from "./Fieldset.js";
-import FlatFieldset from "./FlatFieldset.js";
-import FieldsetArray from "./FieldsetArray.js";
-import FileArray from "./FileArray.js";
 import CancelButton from "./CancelButton.js";
 import SubmitButton from "./SubmitButton.js";
 import IconSubmitButton from "./IconSubmitButton.js";
@@ -144,10 +140,6 @@ export {
     Form,
     FormRoot,
     FormError,
-    Fieldset,
-    FlatFieldset,
-    FieldsetArray,
-    FileArray,
     CancelButton,
     SubmitButton,
     IconSubmitButton,

diff --git a/packages/react/src/components/Fieldset.js → packages/react/src/inputs/Fieldset.js b/packages/react/src/components/Fieldset.js → packages/react/src/inputs/Fieldset.js
diff --git a/...ges/react/src/components/FieldsetArray.js → packages/react/src/inputs/FieldsetArray.js b/...ges/react/src/components/FieldsetArray.js → packages/react/src/inputs/FieldsetArray.js
diff --git a/packages/react/src/components/FileArray.js → packages/react/src/inputs/FileArray.js b/packages/react/src/components/FileArray.js → packages/react/src/inputs/FileArray.js
diff --git a/...ages/react/src/components/FlatFieldset.js → packages/react/src/inputs/FlatFieldset.js b/...ages/react/src/components/FlatFieldset.js → packages/react/src/inputs/FlatFieldset.js
diff --git a/packages/react/src/inputs/index.js b/packages/react/src/inputs/index.js
@@ -9,6 +9,10 @@ import Radio from "./Radio.js";
 import Toggle from "./Toggle.js";
 import Hidden from "./Hidden.js";
 import HelperText from "./HelperText.js";
+import Fieldset from "./Fieldset.js";
+import FlatFieldset from "./FlatFieldset.js";
+import FieldsetArray from "./FieldsetArray.js";
+import FileArray from "./FileArray.js";
 
 const Date = DateTime;
 const Time = DateTime;
@@ -29,4 +33,8 @@ export {
     Toggle,
     Hidden,
     HelperText,
+    Fieldset,
+    FlatFieldset,
+    FieldsetArray,
+    FileArray,
 };
diff --git a/wq/app/static/app/.sha256 b/wq/app/static/app/.sha256
@@ -2,5 +2,5 @@ c637d052aaddf8b0ad878819ee30facb74a3ba34cbed310a0fd1834fc02f46a2  css/mapbox-gl-
 731181d400d65a8b09d842f55b70bc4dc11010b15b8549e2c65a69d233fbdd2e  css/maplibre-gl.css
 cfb20121bd733aa6795e9f2f180c327d561c51cff783196f1eaa01ba42701bec  css/wq.css
 a222d0281caeab67157dc947f83971d219156060bd98a529c035de4cec92a8f5  js/maplibre-gl.js
-20b9c39e875a459dbd51a64048b1ffc30bdfaf5d85c56642c7d482196a04b09b  js/wq.dev.js'
-5e5423df021cd04213803587252eb34b69c115d02685e82138c9286692ebe5db  js/wq.js'
+14274809fd19c22705911b81ade398846cd089765697a221ad88c96ae77fd742  js/wq.dev.js'
+cff29bf7493670ebfcdd5590b9eaa0733f6f8e39954269b91658fd67ad9c016a  js/wq.js'