@wq/form-web 3.0.0-alpha.1 → 3.0.0-alpha.3

package/AutoForm.js

@@ -1,24 +1,12 @@
 import React from "react";
-import { withWQ } from "@wq/react";
-import { AutoFormBase, AutoInput, Form, CancelButton } from "@wq/form-common";
-import * as components from "./components/index.js";
-const AutoFormDefaults = {
-    components: {
-        ...components,
-        AutoForm,
-        AutoInput,
-        Form,
-        CancelButton,
-    },
-};
-function AutoForm(props) {
-    if (!props.action && !props.onSubmit && !props.form) {
-        return props.children || null;
-    }
-    return /*#__PURE__*/ React.createElement(AutoFormBase, {
-        ...props,
-    });
+import { AutoFormBase } from "@wq/form-common";
+import FormProvider from "./FormProvider.js";
+export default function AutoForm(props) {
+    return /*#__PURE__*/ React.createElement(
+        FormProvider,
+        null,
+        /*#__PURE__*/ React.createElement(AutoFormBase, {
+            ...props,
+        }),
+    );
 }
-export default withWQ(AutoForm, {
-    defaults: AutoFormDefaults,
-});

package/FormProvider.js

@@ -0,0 +1,22 @@
+import { Fragment } from "react";
+import { withWQ } from "@wq/react";
+import {
+    AutoFormBase as AutoForm,
+    AutoInput,
+    Form,
+    CancelButton,
+} from "@wq/form-common";
+import * as components from "./components/index.js";
+const FormProviderDefaults = {
+    components: {
+        ...components,
+        AutoForm,
+        AutoInput,
+        Form,
+        CancelButton,
+    },
+};
+export default withWQ(Fragment, {
+    name: "FormProvider",
+    defaults: FormProviderDefaults,
+});

package/components/DeleteForm.js

@@ -6,6 +6,7 @@ import {
     createFallbackComponents,
 } from "@wq/react";
 import { Form } from "@wq/form-common";
+import FormContainer from "./FormContainer.js";
 import SubmitButton from "./SubmitButton.js";
 import PropTypes from "prop-types";
 const DeleteFormFallback = {
@@ -13,13 +14,15 @@ const DeleteFormFallback = {
         CONFIRM_DELETE: "Are you sure you want to delete this record?",
     },
     components: {
+        FormContainer,
         Form,
         SubmitButton,
         ...createFallbackComponents(["View", "HorizontalView"], "@wq/material"),
     },
 };
 function DeleteForm({ action, onSubmit, submitOptions }) {
-    const { Form, SubmitButton, View, HorizontalView } = useComponents(),
+    const { FormContainer, Form, SubmitButton, View, HorizontalView } =
+            useComponents(),
         message = useMessage("CONFIRM_DELETE");
     function confirmSubmit(options) {
         if (window.confirm(message)) {
@@ -31,25 +34,29 @@ function DeleteForm({ action, onSubmit, submitOptions }) {
         }
     }
     return /*#__PURE__*/ React.createElement(
-        Form,
-        {
-            action: action,
-            method: "DELETE",
-            onSubmit: confirmSubmit,
-            submitOptions: submitOptions,
-        },
+        FormContainer,
+        null,
         /*#__PURE__*/ React.createElement(
-            HorizontalView,
-            null,
-            /*#__PURE__*/ React.createElement(View, null),
+            Form,
+            {
+                action: action,
+                method: "DELETE",
+                onSubmit: confirmSubmit,
+                submitOptions: submitOptions,
+            },
             /*#__PURE__*/ React.createElement(
-                SubmitButton,
-                {
-                    icon: "delete",
-                    variant: "text",
-                    color: "secondary",
-                },
-                "Delete",
+                HorizontalView,
+                null,
+                /*#__PURE__*/ React.createElement(View, null),
+                /*#__PURE__*/ React.createElement(
+                    SubmitButton,
+                    {
+                        icon: "delete",
+                        variant: "text",
+                        color: "secondary",
+                    },
+                    "Delete",
+                ),
             ),
         ),
     );

package/components/FormContainer.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { withWQ } from "@wq/react";
+import PropTypes from "prop-types";
+function FormContainer({ children }) {
+    return /*#__PURE__*/ React.createElement(
+        "div",
+        {
+            style: {
+                flex: 1,
+                display: "flex",
+                justifyContent: "center",
+            },
+        },
+        /*#__PURE__*/ React.createElement(
+            "div",
+            {
+                style: {
+                    width: "100%",
+                    maxWidth: "70em",
+                    padding: "1em",
+                    boxSizing: "border-box",
+                },
+            },
+            children,
+        ),
+    );
+}
+FormContainer.propTypes = {
+    children: PropTypes.node,
+};
+export default withWQ(FormContainer);

package/components/FormRoot.js

@@ -1,32 +1,3 @@
-import React from "react";
 import { withWQ } from "@wq/react";
 import { Form } from "formik";
-import PropTypes from "prop-types";
-function FormRoot({ children }) {
-    return /*#__PURE__*/ React.createElement(
-        "div",
-        {
-            style: {
-                flex: 1,
-                display: "flex",
-                justifyContent: "center",
-            },
-        },
-        /*#__PURE__*/ React.createElement(
-            Form,
-            {
-                style: {
-                    width: "100%",
-                    maxWidth: "70em",
-                    padding: "1em",
-                    boxSizing: "border-box",
-                },
-            },
-            children,
-        ),
-    );
-}
-FormRoot.propTypes = {
-    children: PropTypes.node,
-};
-export default withWQ(FormRoot);
+export default withWQ(Form, "FormRoot");

package/components/index.js

@@ -1,3 +1,4 @@
+import FormContainer from "./FormContainer.js";
 import FormRoot from "./FormRoot.js";
 import FormError from "./FormError.js";
 import Input from "./Input.js";
@@ -23,6 +24,7 @@ const Date = DateTime;
 const Time = DateTime;
 const dateTime = DateTime;
 export {
+    FormContainer,
     FormRoot,
     FormError,
     Input,

package/index.js

@@ -1,3 +1,4 @@
 import AutoForm from "./AutoForm.js";
-export { AutoForm };
+import FormProvider from "./FormProvider.js";
+export { AutoForm, FormProvider };
 export * from "./components/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wq/form-web",
-    "version": "3.0.0-alpha.1",
+    "version": "3.0.0-alpha.3",
     "description": "Web bindings for @wq/form",
     "type": "module",
     "main": "index.js",
@@ -29,7 +29,7 @@
     },
     "homepage": "https://form.wq.io/@wq/form-web",
     "dependencies": {
-        "@wq/form-common": "^3.0.0-alpha.2",
+        "@wq/form-common": "^3.0.0-alpha.4",
         "@wq/react": "^3.0.0-alpha.0"
     },
     "peerDependencies": {

package/src/AutoForm.js

@@ -1,17 +1,11 @@
 import React from "react";
-import { withWQ } from "@wq/react";
-import { AutoFormBase, AutoInput, Form, CancelButton } from "@wq/form-common";
-import * as components from "./components/index.js";
+import { AutoFormBase } from "@wq/form-common";
+import FormProvider from "./FormProvider.js";
 
-const AutoFormDefaults = {
-    components: { ...components, AutoForm, AutoInput, Form, CancelButton },
-};
-
-function AutoForm(props) {
-    if (!props.action && !props.onSubmit && !props.form) {
-        return props.children || null;
-    }
-    return <AutoFormBase {...props} />;
+export default function AutoForm(props) {
+    return (
+        <FormProvider>
+            <AutoFormBase {...props} />
+        </FormProvider>
+    );
 }
-
-export default withWQ(AutoForm, { defaults: AutoFormDefaults });

package/src/FormProvider.js

@@ -0,0 +1,18 @@
+import { Fragment } from "react";
+import { withWQ } from "@wq/react";
+import {
+    AutoFormBase as AutoForm,
+    AutoInput,
+    Form,
+    CancelButton,
+} from "@wq/form-common";
+import * as components from "./components/index.js";
+
+const FormProviderDefaults = {
+    components: { ...components, AutoForm, AutoInput, Form, CancelButton },
+};
+
+export default withWQ(Fragment, {
+    name: "FormProvider",
+    defaults: FormProviderDefaults,
+});

package/src/components/DeleteForm.js

@@ -6,6 +6,7 @@ import {
     createFallbackComponents,
 } from "@wq/react";
 import { Form } from "@wq/form-common";
+import FormContainer from "./FormContainer.js";
 import SubmitButton from "./SubmitButton.js";
 import PropTypes from "prop-types";
 
@@ -14,6 +15,7 @@ const DeleteFormFallback = {
         CONFIRM_DELETE: "Are you sure you want to delete this record?",
     },
     components: {
+        FormContainer,
         Form,
         SubmitButton,
         ...createFallbackComponents(["View", "HorizontalView"], "@wq/material"),
@@ -21,7 +23,8 @@ const DeleteFormFallback = {
 };
 
 function DeleteForm({ action, onSubmit, submitOptions }) {
-    const { Form, SubmitButton, View, HorizontalView } = useComponents(),
+    const { FormContainer, Form, SubmitButton, View, HorizontalView } =
+            useComponents(),
         message = useMessage("CONFIRM_DELETE");
 
     function confirmSubmit(options) {
@@ -35,19 +38,25 @@ function DeleteForm({ action, onSubmit, submitOptions }) {
     }
 
     return (
-        <Form
-            action={action}
-            method="DELETE"
-            onSubmit={confirmSubmit}
-            submitOptions={submitOptions}
-        >
-            <HorizontalView>
-                <View />
-                <SubmitButton icon="delete" variant="text" color="secondary">
-                    Delete
-                </SubmitButton>
-            </HorizontalView>
-        </Form>
+        <FormContainer>
+            <Form
+                action={action}
+                method="DELETE"
+                onSubmit={confirmSubmit}
+                submitOptions={submitOptions}
+            >
+                <HorizontalView>
+                    <View />
+                    <SubmitButton
+                        icon="delete"
+                        variant="text"
+                        color="secondary"
+                    >
+                        Delete
+                    </SubmitButton>
+                </HorizontalView>
+            </Form>
+        </FormContainer>
     );
 }
 

package/src/components/FormContainer.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { withWQ } from "@wq/react";
+import PropTypes from "prop-types";
+
+function FormContainer({ children }) {
+    return (
+        <div style={{ flex: 1, display: "flex", justifyContent: "center" }}>
+            <div
+                style={{
+                    width: "100%",
+                    maxWidth: "70em",
+                    padding: "1em",
+                    boxSizing: "border-box",
+                }}
+            >
+                {children}
+            </div>
+        </div>
+    );
+}
+
+FormContainer.propTypes = {
+    children: PropTypes.node,
+};
+
+export default withWQ(FormContainer);

package/src/components/FormRoot.js

@@ -1,27 +1,4 @@
-import React from "react";
 import { withWQ } from "@wq/react";
 import { Form } from "formik";
-import PropTypes from "prop-types";
 
-function FormRoot({ children }) {
-    return (
-        <div style={{ flex: 1, display: "flex", justifyContent: "center" }}>
-            <Form
-                style={{
-                    width: "100%",
-                    maxWidth: "70em",
-                    padding: "1em",
-                    boxSizing: "border-box",
-                }}
-            >
-                {children}
-            </Form>
-        </div>
-    );
-}
-
-FormRoot.propTypes = {
-    children: PropTypes.node,
-};
-
-export default withWQ(FormRoot);
+export default withWQ(Form, "FormRoot");

package/src/components/index.js

@@ -1,3 +1,4 @@
+import FormContainer from "./FormContainer.js";
 import FormRoot from "./FormRoot.js";
 import FormError from "./FormError.js";
 import Input from "./Input.js";
@@ -25,6 +26,7 @@ const Time = DateTime;
 const dateTime = DateTime;
 
 export {
+    FormContainer,
     FormRoot,
     FormError,
     Input,

package/src/index.js

@@ -1,3 +1,4 @@
 import AutoForm from "./AutoForm.js";
-export { AutoForm };
+import FormProvider from "./FormProvider.js";
+export { AutoForm, FormProvider };
 export * from "./components/index.js";