@wq/form-native 3.0.0-alpha.0 → 3.0.0-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wq/form-native",
-    "version": "3.0.0-alpha.0",
+    "version": "3.0.0-alpha.2",
     "description": "React Native and Expo bindings for @wq/material",
     "type": "module",
     "main": "src/index.js",
@@ -28,7 +28,7 @@
     },
     "homepage": "https://form.wq.io/@wq/form-native",
     "dependencies": {
-        "@wq/form-common": "^3.0.0-alpha.0",
+        "@wq/form-common": "^3.0.0-alpha.3",
         "@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 Alert from "react-native";
 import PropTypes from "prop-types";
@@ -18,68 +19,82 @@ const DeleteFormFallback = {
         CONFIRM_DELETE_CANCEL: "Cancel",
     },
     components: {
+        FormContainer,
         Form,
         SubmitButton,
         ...createFallbackComponents(["View", "HorizontalView"], "@wq/material"),
     },
 };
 
-function DeleteForm({ action }) {
-    const { Form, SubmitButton, View, HorizontalView } = useComponents(),
+function DeleteForm({ action, onSubmit, submitOptions }) {
+    const { FormContainer, Form, SubmitButton, View, HorizontalView } =
+            useComponents(),
         confirmDelete = useMessage("CONFIRM_DELETE"),
         confirmDeleteTitle = useMessage("CONFIRM_DELETE_TITLE"),
         confirmDeleteOk = useMessage("CONFIRM_DELETE_OK"),
         confirmDeleteCancel = useMessage("CONFIRM_DELETE_CANCEL");
 
-    async function confirmSubmit() {
-        return new Promise((resolve) => {
-            Alert.alert(
-                confirmDeleteTitle,
-                confirmDelete,
-                [
-                    {
-                        text: confirmDeleteCancel,
-                        onPress() {
-                            resolve(false);
-                        },
-                        style: "cancel",
-                    },
-                    {
-                        text: confirmDeleteOk,
-                        onPress() {
-                            resolve(true);
-                        },
-                        style: "destructive",
+    async function confirmSubmit(options) {
+        Alert.alert(
+            confirmDeleteTitle,
+            confirmDelete,
+            [
+                {
+                    text: confirmDeleteCancel,
+                    onPress() {
+                        // noop
                     },
-                ],
+                    style: "cancel",
+                },
                 {
-                    onDismiss() {
-                        resolve(false);
+                    text: confirmDeleteOk,
+                    onPress() {
+                        if (onSubmit) {
+                            onSubmit(options);
+                        } else {
+                            console.error(
+                                "No onSubmit handler provided to DeleteForm",
+                            );
+                        }
                     },
+                    style: "destructive",
+                },
+            ],
+            {
+                onDismiss() {
+                    // noop
                 },
-            );
-        });
+            },
+        );
     }
 
     return (
-        <Form
-            action={action}
-            method="DELETE"
-            backgroundSync={false}
-            onSubmit={confirmSubmit}
-        >
-            <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>
     );
 }
 
 DeleteForm.propTypes = {
     action: PropTypes.string,
+    onSubmit: PropTypes.func.isRequired,
+    submitOptions: PropTypes.object,
 };
 
 export default withWQ(DeleteForm, { fallback: DeleteFormFallback });

package/src/components/FormContainer.js

@@ -0,0 +1,4 @@
+import { Fragment } from "react";
+import { withWQ } from "@wq/react";
+
+export default withWQ(Fragment, "FormContainer");

package/src/components/FormRoot.js

@@ -1,4 +1,4 @@
 import { Fragment } from "react";
 import { withWQ } from "@wq/react";
 
-export default withWQ(Fragment, "FormRoot");
+export default withWQ(Fragment, "FormContainer");

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";