LukeParke/form
1
0
Fork 0
mirror of https://github.com/LukeHagar/form.git synced 2025-12-06 04:19:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: form.Provider

Browse Source
This commit is contained in:
Tanner Linsley
2023-05-04 16:05:36 -07:00
parent 07ddd2c2d6
commit ca8f244b5e
3 changed files with 140 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

259
examples/react/simple/src/index.tsx
View File

@@ -1,6 +1,6 @@
import React from "react";
import ReactDOM from "react-dom/client";
import { FieldApi, createFormFactory, useField } from "@tanstack/react-form";
import { FieldApi, createFormFactory } from "@tanstack/react-form";
type Person = {
firstName: string;
@@ -41,137 +41,148 @@ export default function App() {
},
});
const [count, setCount] = React.useState(0);
return (
<div>
<button onClick={() => setCount((prev) => prev + 1)}>{count}</button>
<h1>Simple Form Example</h1>
{/* A pre-bound form component */}
<form {...form.getFormProps()}>
<div>
{/* A type-safe and pre-bound field component*/}
<form.Field
name="firstName"
validate={(value) => !value && "A first name is required"}
validateAsyncOn="change"
validateAsyncDebounceMs={500}
validateAsync={async (value) => {
await new Promise((resolve) => setTimeout(resolve, 1000));
return (
value.includes("error") && 'No "error" allowed in first name'
);
}}
children={(field) => (
// Avoid hasty abstractions. Render props are great!
<>
<input {...field.getInputProps()} />
<FieldInfo field={field} />
</>
)}
/>
</div>
<div>
<form.Field
name="lastName"
children={(field) => (
<>
<input {...field.getInputProps()} />
<FieldInfo field={field} />
</>
)}
/>
</div>
<div>
<form.Field
name="hobbies"
mode="array"
children={(hobbiesField) => (
<div>
Hobbies
<div
style={{
paddingLeft: "1rem",
display: "flex",
flexDirection: "column",
gap: "1rem",
}}
>
{!hobbiesField.state.value.length
? "No hobbies found."
: hobbiesField.state.value.map((_, i) => (
<div
key={i}
style={{
borderLeft: "2px solid gray",
paddingLeft: ".5rem",
}}
>
<hobbiesField.Field
index={i}
name="name"
children={(field) => {
return (
<div>
<label htmlFor={field.name}>Name:</label>
<input
name={field.name}
{...field.getInputProps()}
/>
<button
type="button"
onClick={() => hobbiesField.removeValue(i)}
>
X
</button>
<FieldInfo field={field} />
</div>
);
<form.Provider>
<form {...form.getFormProps()}>
<div>
{/* A type-safe and pre-bound field component*/}
<form.Field
name="firstName"
validateOn="change"
validate={(value) => !value && "A first name is required"}
validateAsyncOn="change"
validateAsyncDebounceMs={500}
validateAsync={async (value) => {
await new Promise((resolve) => setTimeout(resolve, 1000));
return (
value.includes("error") && 'No "error" allowed in first name'
);
}}
children={(field) => {
// Avoid hasty abstractions. Render props are great!
return (
<>
<input placeholder="uncontrolled" />
<input {...field.getInputProps()} />
<FieldInfo field={field} />
</>
);
}}
/>
</div>
<div>
<form.Field
name="lastName"
children={(field) => (
<>
<input {...field.getInputProps()} />
<FieldInfo field={field} />
</>
)}
/>
</div>
<div>
<form.Field
name="hobbies"
mode="array"
children={(hobbiesField) => (
<div>
Hobbies
<div
style={{
paddingLeft: "1rem",
display: "flex",
flexDirection: "column",
gap: "1rem",
}}
>
{!hobbiesField.state.value.length
? "No hobbies found."
: hobbiesField.state.value.map((_, i) => (
<div
key={i}
style={{
borderLeft: "2px solid gray",
paddingLeft: ".5rem",
}}
/>
<hobbiesField.Field
index={i}
name="description"
children={(field) => {
return (
<div>
<label htmlFor={field.name}>
Description:
</label>
<input
name={field.name}
{...field.getInputProps()}
/>
<FieldInfo field={field} />
</div>
);
}}
/>
</div>
))}
>
<hobbiesField.Field
index={i}
name="name"
children={(field) => {
return (
<div>
<label htmlFor={field.name}>Name:</label>
<input
name={field.name}
{...field.getInputProps()}
/>
<button
type="button"
onClick={() =>
hobbiesField.removeValue(i)
}
>
X
</button>
<FieldInfo field={field} />
</div>
);
}}
/>
<hobbiesField.Field
index={i}
name="description"
children={(field) => {
return (
<div>
<label htmlFor={field.name}>
Description:
</label>
<input
name={field.name}
{...field.getInputProps()}
/>
<FieldInfo field={field} />
</div>
);
}}
/>
</div>
))}
</div>
<button
type="button"
onClick={() =>
hobbiesField.pushValue({
name: "",
description: "",
yearsOfExperience: 0,
})
}
>
Add hobby
</button>
</div>
<button
type="button"
onClick={() =>
hobbiesField.pushValue({
name: "",
description: "",
yearsOfExperience: 0,
})
}
>
Add hobby
</button>
</div>
)}
/>
</div>
<form.Subscribe
selector={(state) => [state.canSubmit, state.isSubmitting]}
children={([canSubmit, isSubmitting]) => (
<button type="submit" disabled={!canSubmit}>
{isSubmitting ? "..." : "Submit"}
</button>
)}
/>
</div>
<form.Subscribe
selector={(state) => [state.canSubmit, state.isSubmitting]}
children={([canSubmit, isSubmitting]) => (
<button type="submit" disabled={!canSubmit}>
{isSubmitting ? "..." : "Submit"}
</button>
)}
/>
</form.Form>
</form>
</form.Provider>
</div>
);
}

1
packages/react-form/src/useField.tsx
View File

@@ -129,6 +129,7 @@ export function Field<TData, TFormData>({
children: (fieldApi: FieldApi<TData, TFormData>) => any
} & UseFieldOptions<TData, TFormData>) {
const fieldApi = useField(fieldOptions as any)
return (
<formContext.Provider
value={{ formApi: fieldApi.form, parentFieldName: fieldApi.name }}

4
packages/react-form/src/useForm.tsx
View File

@@ -15,6 +15,7 @@ declare module '@tanstack/form-core' {
// eslint-disable-next-line no-shadow
interface FormApi<TFormData> {
Provider: (props: { children: any }) => any
getFormProps: () => FormProps
Field: FieldComponent<TFormData, TFormData>
useField: UseField<TFormData>
@@ -40,6 +41,9 @@ export function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {
// @ts-ignore
const api = new FormApi<TData>(opts)
api.Provider = (props) => (
<formContext.Provider {...props} value={{ formApi: api }} />
)
api.getFormProps = () => {
return {
onSubmit: formApi.handleSubmit,