Skip to content

Commit 0c46d08

Browse files
sheppardsheppard
committed
split provider from AutoForm, root from container
1 parent 04a7aa5 commit 0c46d08

18 files changed

Lines changed: 179 additions & 111 deletions

File tree

‎packages/form-common/src/components/AutoFormBase.js‎

Lines changed: 32 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from "react";
1+
import React, { Fragment } from "react";
22
import { useField } from "formik";
33
import { useComponents, withWQ, createFallbackComponent } from "@wq/react";
44
import AutoInput from "./AutoInput.js";
@@ -17,6 +17,7 @@ const AutoFormBaseDefaults = {
1717
},
1818
AutoFormBaseFallback = {
1919
components: {
20+
FormContainer: Fragment,
2021
FormError() {
2122
const [, { error }] = useField("__other__");
2223
if (!error) {
@@ -52,6 +53,7 @@ function AutoFormBase({
5253
...rest
5354
}) {
5455
const {
56+
FormContainer,
5557
AutoInput,
5658
Form,
5759
FormError,
@@ -68,28 +70,35 @@ function AutoFormBase({
6870
}
6971

7072
return (
71-
<Form
72-
action={action}
73-
method={method}
74-
validate={(data) => validate(data, form)}
75-
onSubmit={onSubmit}
76-
submitOptions={submitOptions}
77-
data={formData}
78-
error={error}
79-
{...rest}
80-
>
81-
{children}
82-
{(form || []).map(({ name, children: subform, ...rest }) => (
83-
<AutoInput key={name} name={name} subform={subform} {...rest} />
84-
))}
85-
<FormError />
86-
{(cancel || !hideSubmit) && (
87-
<HorizontalView>
88-
{cancel ? <CancelButton to={cancel} /> : <View />}
89-
{hideSubmit ? <View /> : <SubmitButton />}
90-
</HorizontalView>
91-
)}
92-
</Form>
73+
<FormContainer>
74+
<Form
75+
action={action}
76+
method={method}
77+
validate={(data) => validate(data, form)}
78+
onSubmit={onSubmit}
79+
submitOptions={submitOptions}
80+
data={formData}
81+
error={error}
82+
{...rest}
83+
>
84+
{children}
85+
{(form || []).map(({ name, children: subform, ...rest }) => (
86+
<AutoInput
87+
key={name}
88+
name={name}
89+
subform={subform}
90+
{...rest}
91+
/>
92+
))}
93+
<FormError />
94+
{(cancel || !hideSubmit) && (
95+
<HorizontalView>
96+
{cancel ? <CancelButton to={cancel} /> : <View />}
97+
{hideSubmit ? <View /> : <SubmitButton />}
98+
</HorizontalView>
99+
)}
100+
</Form>
101+
</FormContainer>
93102
);
94103
}
95104

‎packages/form-native/src/AutoForm.js‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
11
import React from "react";
2-
import { withWQ } from "@wq/react";
3-
import { AutoFormBase, AutoInput, Form, CancelButton } from "@wq/form-common";
4-
import * as components from "./components/index.js";
2+
import { AutoFormBase } from "@wq/form-common";
3+
import FormProvider from "./FormProvider.js";
54

6-
const AutoFormDefaults = {
7-
components: { ...components, AutoForm, AutoInput, Form, CancelButton },
8-
};
9-
10-
function AutoForm(props) {
11-
if (!props.action && !props.onSubmit && !props.form) {
12-
return props.children || null;
13-
}
14-
return <AutoFormBase {...props} />;
5+
export default function AutoForm(props) {
6+
return (
7+
<FormProvider>
8+
<AutoFormBase {...props} />
9+
</FormProvider>
10+
);
1511
}
16-
17-
export default withWQ(AutoForm, { defaults: AutoFormDefaults });

‎packages/form-native/src/FormProvider.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Fragment } from "react";
2+
import { withWQ } from "@wq/react";
3+
import {
4+
AutoFormBase as AutoForm,
5+
AutoInput,
6+
Form,
7+
CancelButton,
8+
} from "@wq/form-common";
9+
import * as components from "./components/index.js";
10+
11+
const FormProviderDefaults = {
12+
components: { ...components, AutoForm, AutoInput, Form, CancelButton },
13+
};
14+
15+
export default withWQ(Fragment, {
16+
name: "FormProvider",
17+
defaults: FormProviderDefaults,
18+
});

‎packages/form-native/src/__tests__/index.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { AutoForm } from "../index.js";
1+
import { AutoForm, FormProvider } from "../index.js";
22

33
test("it loads", () => {
4-
expect(AutoForm.displayName).toBe("AutoForm:wq");
4+
expect(AutoForm.name).toBe("AutoForm");
5+
expect(FormProvider.displayName).toBe("FormProvider:wq");
56
});

‎packages/form-native/src/components/DeleteForm.js‎

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
createFallbackComponents,
77
} from "@wq/react";
88
import { Form } from "@wq/form-common";
9+
import FormContainer from "./FormContainer.js";
910
import SubmitButton from "./SubmitButton.js";
1011
import Alert from "react-native";
1112
import PropTypes from "prop-types";
@@ -18,14 +19,16 @@ const DeleteFormFallback = {
1819
CONFIRM_DELETE_CANCEL: "Cancel",
1920
},
2021
components: {
22+
FormContainer,
2123
Form,
2224
SubmitButton,
2325
...createFallbackComponents(["View", "HorizontalView"], "@wq/material"),
2426
},
2527
};
2628

2729
function DeleteForm({ action, onSubmit, submitOptions }) {
28-
const { Form, SubmitButton, View, HorizontalView } = useComponents(),
30+
const { FormContainer, Form, SubmitButton, View, HorizontalView } =
31+
useComponents(),
2932
confirmDelete = useMessage("CONFIRM_DELETE"),
3033
confirmDeleteTitle = useMessage("CONFIRM_DELETE_TITLE"),
3134
confirmDeleteOk = useMessage("CONFIRM_DELETE_OK"),
@@ -66,19 +69,25 @@ function DeleteForm({ action, onSubmit, submitOptions }) {
6669
}
6770

6871
return (
69-
<Form
70-
action={action}
71-
method="DELETE"
72-
onSubmit={confirmSubmit}
73-
submitOptions={submitOptions}
74-
>
75-
<HorizontalView>
76-
<View />
77-
<SubmitButton icon="delete" variant="text" color="secondary">
78-
Delete
79-
</SubmitButton>
80-
</HorizontalView>
81-
</Form>
72+
<FormContainer>
73+
<Form
74+
action={action}
75+
method="DELETE"
76+
onSubmit={confirmSubmit}
77+
submitOptions={submitOptions}
78+
>
79+
<HorizontalView>
80+
<View />
81+
<SubmitButton
82+
icon="delete"
83+
variant="text"
84+
color="secondary"
85+
>
86+
Delete
87+
</SubmitButton>
88+
</HorizontalView>
89+
</Form>
90+
</FormContainer>
8291
);
8392
}
8493

‎packages/form-native/src/components/FormContainer.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { Fragment } from "react";
2+
import { withWQ } from "@wq/react";
3+
4+
export default withWQ(Fragment, "FormContainer");

‎packages/form-native/src/components/FormRoot.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
import { Fragment } from "react";
22
import { withWQ } from "@wq/react";
33

4-
export default withWQ(Fragment, "FormRoot");
4+
export default withWQ(Fragment, "FormContainer");

‎packages/form-native/src/components/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import FormContainer from "./FormContainer.js";
12
import FormRoot from "./FormRoot.js";
23
import FormError from "./FormError.js";
34
import Input from "./Input.js";
@@ -25,6 +26,7 @@ const Time = DateTime;
2526
const dateTime = DateTime;
2627

2728
export {
29+
FormContainer,
2830
FormRoot,
2931
FormError,
3032
Input,

‎packages/form-native/src/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
import AutoForm from "./AutoForm.js";
2-
export { AutoForm };
2+
import FormProvider from "./FormProvider.js";
3+
export { AutoForm, FormProvider };
34
export * from "./components/index.js";

‎packages/form-web/src/AutoForm.js‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
11
import React from "react";
2-
import { withWQ } from "@wq/react";
3-
import { AutoFormBase, AutoInput, Form, CancelButton } from "@wq/form-common";
4-
import * as components from "./components/index.js";
2+
import { AutoFormBase } from "@wq/form-common";
3+
import FormProvider from "./FormProvider.js";
54

6-
const AutoFormDefaults = {
7-
components: { ...components, AutoForm, AutoInput, Form, CancelButton },
8-
};
9-
10-
function AutoForm(props) {
11-
if (!props.action && !props.onSubmit && !props.form) {
12-
return props.children || null;
13-
}
14-
return <AutoFormBase {...props} />;
5+
export default function AutoForm(props) {
6+
return (
7+
<FormProvider>
8+
<AutoFormBase {...props} />
9+
</FormProvider>
10+
);
1511
}
16-
17-
export default withWQ(AutoForm, { defaults: AutoFormDefaults });

0 commit comments

Comments
 (0)