@saas-ui/forms 2.5.1 → 2.5.3
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +19 -0
- package/dist/index.d.mts +30 -26
- package/dist/index.d.ts +30 -26
- package/dist/index.js +163 -160
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +85 -82
- package/dist/index.mjs.map +1 -1
- package/dist/yup/index.d.mts +30 -26
- package/dist/yup/index.d.ts +30 -26
- package/dist/yup/index.js.map +1 -1
- package/dist/yup/index.mjs.map +1 -1
- package/dist/zod/index.d.mts +30 -26
- package/dist/zod/index.d.ts +30 -26
- package/package.json +2 -2
- package/src/base-field.tsx +1 -1
- package/src/create-field.tsx +1 -1
- package/src/create-form.tsx +7 -1
- package/src/create-step-form.tsx +10 -1
- package/src/default-fields.tsx +1 -2
- package/src/field.tsx +2 -1
- package/src/fields-context.tsx +8 -8
- package/src/form-context.tsx +1 -1
- package/src/types.ts +14 -12
package/dist/zod/index.d.ts
CHANGED
@@ -207,58 +207,62 @@ declare const StepForm: (<TSteps extends {
|
|
207
207
|
}[] ? any : object) : object : object : never : never : object) : object : object : never : never : object) : object : object : never : never : object) : object : object : never : never : object) : object : object : never : never : object) : object : object : never : never : object) : object : object : never : never : object) : object : object : never : never : object) : object : object : never : never : object) : object : object : never : never : object) : object : object, TContext extends object = object>(props: Omit<dist.UseStepFormProps<TSteps, TFieldValues, TContext>, "children" | "fields"> & {
|
208
208
|
children?: react.ReactNode | ((props: dist.StepFormRenderContext<TSteps, TFieldValues, TContext, ({
|
209
209
|
type?: "number" | undefined;
|
210
|
-
} & Omit<Omit<
|
210
|
+
} & Omit<Omit<src.BaseFieldProps<react_hook_form.FieldValues, string>, keyof dist.NumberInputFieldProps> & dist.NumberInputFieldProps, keyof dist.BaseFieldProps<TFieldValues_1, TName>> & dist.BaseFieldProps<TFieldValues, react_hook_form.Path<TFieldValues>> & object) | ({
|
211
211
|
type?: "select" | undefined;
|
212
|
-
} & Omit<Omit<
|
212
|
+
} & Omit<Omit<src.BaseFieldProps<react_hook_form.FieldValues, string>, keyof dist.SelectFieldProps> & dist.SelectFieldProps, keyof dist.BaseFieldProps<TFieldValues_1, TName>> & dist.BaseFieldProps<TFieldValues, react_hook_form.Path<TFieldValues>> & object) | ({
|
213
213
|
type?: "textarea" | undefined;
|
214
|
-
} & Omit<Omit<
|
214
|
+
} & Omit<Omit<src.BaseFieldProps<react_hook_form.FieldValues, string>, keyof dist.TextareaFieldProps> & dist.TextareaFieldProps, keyof dist.BaseFieldProps<TFieldValues_1, TName>> & dist.BaseFieldProps<TFieldValues, react_hook_form.Path<TFieldValues>> & object) | ({
|
215
|
+
type?: "time" | undefined;
|
216
|
+
} & Omit<Omit<src.BaseFieldProps<react_hook_form.FieldValues, string>, keyof dist.InputFieldProps> & dist.InputFieldProps, keyof dist.BaseFieldProps<TFieldValues_1, TName>> & dist.BaseFieldProps<TFieldValues, react_hook_form.Path<TFieldValues>> & object) | ({
|
215
217
|
type?: "switch" | undefined;
|
216
|
-
} & Omit<Omit<
|
218
|
+
} & Omit<Omit<src.BaseFieldProps<react_hook_form.FieldValues, string>, keyof dist.SwitchFieldProps> & dist.SwitchFieldProps, keyof dist.BaseFieldProps<TFieldValues_1, TName>> & dist.BaseFieldProps<TFieldValues, react_hook_form.Path<TFieldValues>> & object) | ({
|
217
219
|
type?: "text" | undefined;
|
218
|
-
} & Omit<Omit<
|
220
|
+
} & Omit<Omit<src.BaseFieldProps<react_hook_form.FieldValues, string>, keyof dist.InputFieldProps> & dist.InputFieldProps, keyof dist.BaseFieldProps<TFieldValues_1, TName>> & dist.BaseFieldProps<TFieldValues, react_hook_form.Path<TFieldValues>> & object) | ({
|
219
221
|
type?: "checkbox" | undefined;
|
220
|
-
} & Omit<Omit<
|
222
|
+
} & Omit<Omit<src.BaseFieldProps<react_hook_form.FieldValues, string>, keyof _chakra_ui_checkbox.CheckboxProps> & _chakra_ui_checkbox.CheckboxProps, keyof dist.BaseFieldProps<TFieldValues_1, TName>> & dist.BaseFieldProps<TFieldValues, react_hook_form.Path<TFieldValues>> & object) | ({
|
221
223
|
type?: "radio" | undefined;
|
222
|
-
} & Omit<Omit<
|
224
|
+
} & Omit<Omit<src.BaseFieldProps<react_hook_form.FieldValues, string>, keyof dist.RadioInputProps> & dist.RadioInputProps, keyof dist.BaseFieldProps<TFieldValues_1, TName>> & dist.BaseFieldProps<TFieldValues, react_hook_form.Path<TFieldValues>> & object) | ({
|
223
225
|
type?: "url" | undefined;
|
224
|
-
} & Omit<Omit<
|
226
|
+
} & Omit<Omit<src.BaseFieldProps<react_hook_form.FieldValues, string>, keyof dist.InputFieldProps> & dist.InputFieldProps, keyof dist.BaseFieldProps<TFieldValues_1, TName>> & dist.BaseFieldProps<TFieldValues, react_hook_form.Path<TFieldValues>> & object) | ({
|
225
227
|
type?: "email" | undefined;
|
226
|
-
} & Omit<Omit<
|
228
|
+
} & Omit<Omit<src.BaseFieldProps<react_hook_form.FieldValues, string>, keyof dist.InputFieldProps> & dist.InputFieldProps, keyof dist.BaseFieldProps<TFieldValues_1, TName>> & dist.BaseFieldProps<TFieldValues, react_hook_form.Path<TFieldValues>> & object) | ({
|
227
229
|
type?: "phone" | undefined;
|
228
|
-
} & Omit<Omit<
|
230
|
+
} & Omit<Omit<src.BaseFieldProps<react_hook_form.FieldValues, string>, keyof dist.InputFieldProps> & dist.InputFieldProps, keyof dist.BaseFieldProps<TFieldValues_1, TName>> & dist.BaseFieldProps<TFieldValues, react_hook_form.Path<TFieldValues>> & object) | ({
|
229
231
|
type?: "password" | undefined;
|
230
|
-
} & Omit<Omit<
|
232
|
+
} & Omit<Omit<src.BaseFieldProps<react_hook_form.FieldValues, string>, keyof dist.PasswordInputProps> & dist.PasswordInputProps, keyof dist.BaseFieldProps<TFieldValues_1, TName>> & dist.BaseFieldProps<TFieldValues, react_hook_form.Path<TFieldValues>> & object) | ({
|
231
233
|
type?: "pin" | undefined;
|
232
|
-
} & Omit<Omit<
|
234
|
+
} & Omit<Omit<src.BaseFieldProps<react_hook_form.FieldValues, string>, keyof dist.PinFieldProps> & dist.PinFieldProps, keyof dist.BaseFieldProps<TFieldValues_1, TName>> & dist.BaseFieldProps<TFieldValues, react_hook_form.Path<TFieldValues>> & object) | ({
|
233
235
|
type?: "native-select" | undefined;
|
234
|
-
} & Omit<Omit<
|
236
|
+
} & Omit<Omit<src.BaseFieldProps<react_hook_form.FieldValues, string>, keyof dist.NativeSelectProps> & dist.NativeSelectProps, keyof dist.BaseFieldProps<TFieldValues_1, TName>> & dist.BaseFieldProps<TFieldValues, react_hook_form.Path<TFieldValues>> & object)>) => react.ReactNode);
|
235
237
|
fields?: ({ [K in react_hook_form.Path<TFieldValues> | (react_hook_form.Path<TFieldValues> extends infer T_20 ? T_20 extends react_hook_form.Path<TFieldValues> ? T_20 extends string ? (string extends T_20 ? (T_20 & string)[] : T_20 extends infer T_21 ? T_21 extends T_20 ? T_21 extends "" ? [] : T_21 extends `${infer T_22}.${infer U}` ? [T_22, ...string extends U ? U[] : U extends "" ? [] : U extends `${infer T_22}.${infer U}` ? [T_22, ...string extends U ? U[] : U extends "" ? [] : U extends `${infer T_22}.${infer U}` ? [T_22, ...string extends U ? U[] : U extends "" ? [] : U extends `${infer T_22}.${infer U}` ? [T_22, ...string extends U ? U[] : U extends "" ? [] : U extends `${infer T_22}.${infer U}` ? [T_22, ...string extends U ? U[] : U extends "" ? [] : U extends `${infer T_22}.${infer U}` ? [T_22, ...string extends U ? U[] : U extends "" ? [] : U extends `${infer T_22}.${infer U}` ? [T_22, ...string extends U ? U[] : U extends "" ? [] : U extends `${infer T_22}.${infer U}` ? [T_22, ...string extends U ? U[] : U extends "" ? [] : U extends `${infer T_22}.${infer U}` ? [T_22, ...string extends U ? U[] : U extends "" ? [] : U extends `${infer T_22}.${infer U}` ? [T_22, ...string extends U ? U[] : U extends "" ? [] : U extends `${infer T_22}.${infer U}` ? [T_22, ...any] : [U]] : [U]] : [U]] : [U]] : [U]] : [U]] : [U]] : [U]] : [U]] : [U]] : [T_21] : never : never) extends infer T_23 ? T_23 extends (string extends T_20 ? (T_20 & string)[] : T_20 extends infer T_34 ? T_34 extends T_20 ? T_34 extends "" ? [] : T_34 extends `${infer T_22}.${infer U}` ? [T_22, ...string extends U ? U[] : U extends "" ? [] : U extends `${infer T_22}.${infer U}` ? [T_22, ...string extends U ? U[] : U extends "" ? [] : U extends `${infer T_22}.${infer U}` ? [T_22, ...string extends U ? U[] : U extends "" ? [] : U extends `${infer T_22}.${infer U}` ? [T_22, ...string extends U ? U[] : U extends "" ? [] : U extends `${infer T_22}.${infer U}` ? [T_22, ...string extends U ? U[] : U extends "" ? [] : U extends `${infer T_22}.${infer U}` ? [T_22, ...string extends U ? U[] : U extends "" ? [] : U extends `${infer T_22}.${infer U}` ? [T_22, ...string extends U ? U[] : U extends "" ? [] : U extends `${infer T_22}.${infer U}` ? [T_22, ...string extends U ? U[] : U extends "" ? [] : U extends `${infer T_22}.${infer U}` ? [T_22, ...string extends U ? U[] : U extends "" ? [] : U extends `${infer T_22}.${infer U}` ? [T_22, ...string extends U ? U[] : U extends "" ? [] : U extends `${infer T_22}.${infer U}` ? [T_22, ...any] : [U]] : [U]] : [U]] : [U]] : [U]] : [U]] : [U]] : [U]] : [U]] : [U]] : [T_34] : never : never) ? T_23 extends [infer U_1, ...infer R] ? U_1 extends string ? `${U_1 extends `${number}` ? "$" : U_1}${R[0] extends string ? "." : ""}${R extends string[] ? R extends infer T_24 ? T_24 extends R ? T_24 extends [infer U_1, ...infer R] ? U_1 extends string ? `${U_1 extends `${number}` ? "$" : U_1}${R[0] extends string ? "." : ""}${R extends string[] ? R extends infer T_25 ? T_25 extends R ? T_25 extends [infer U_1, ...infer R] ? U_1 extends string ? `${U_1 extends `${number}` ? "$" : U_1}${R[0] extends string ? "." : ""}${R extends string[] ? R extends infer T_26 ? T_26 extends R ? T_26 extends [infer U_1, ...infer R] ? U_1 extends string ? `${U_1 extends `${number}` ? "$" : U_1}${R[0] extends string ? "." : ""}${R extends string[] ? R extends infer T_27 ? T_27 extends R ? T_27 extends [infer U_1, ...infer R] ? U_1 extends string ? `${U_1 extends `${number}` ? "$" : U_1}${R[0] extends string ? "." : ""}${R extends string[] ? R extends infer T_28 ? T_28 extends R ? T_28 extends [infer U_1, ...infer R] ? U_1 extends string ? `${U_1 extends `${number}` ? "$" : U_1}${R[0] extends string ? "." : ""}${R extends string[] ? R extends infer T_29 ? T_29 extends R ? T_29 extends [infer U_1, ...infer R] ? U_1 extends string ? `${U_1 extends `${number}` ? "$" : U_1}${R[0] extends string ? "." : ""}${R extends string[] ? R extends infer T_30 ? T_30 extends R ? T_30 extends [infer U_1, ...infer R] ? U_1 extends string ? `${U_1 extends `${number}` ? "$" : U_1}${R[0] extends string ? "." : ""}${R extends string[] ? R extends infer T_31 ? T_31 extends R ? T_31 extends [infer U_1, ...infer R] ? U_1 extends string ? `${U_1 extends `${number}` ? "$" : U_1}${R[0] extends string ? "." : ""}${R extends string[] ? R extends infer T_32 ? T_32 extends R ? T_32 extends [infer U_1, ...infer R] ? U_1 extends string ? `${U_1 extends `${number}` ? "$" : U_1}${R[0] extends string ? "." : ""}${R extends string[] ? R extends infer T_33 ? T_33 extends R ? T_33 extends [infer U_1, ...infer R] ? U_1 extends string ? `${U_1 extends `${number}` ? "$" : U_1}${R[0] extends string ? "." : ""}${R extends string[] ? any : ""}` : "" : "" : never : never : ""}` : "" : "" : never : never : ""}` : "" : "" : never : never : ""}` : "" : "" : never : never : ""}` : "" : "" : never : never : ""}` : "" : "" : never : never : ""}` : "" : "" : never : never : ""}` : "" : "" : never : never : ""}` : "" : "" : never : never : ""}` : "" : "" : never : never : ""}` : "" : "" : never : never : never : never : never)]?: (({
|
236
238
|
type?: "number" | undefined;
|
237
|
-
} & Omit<Omit<Omit<
|
239
|
+
} & Omit<Omit<Omit<src.BaseFieldProps<react_hook_form.FieldValues, string>, keyof dist.NumberInputFieldProps> & dist.NumberInputFieldProps, keyof dist.BaseFieldProps<TFieldValues_2, TName_1>> & dist.BaseFieldProps<TFieldValues, react_hook_form.Path<TFieldValues>>, "name">) | ({
|
238
240
|
type?: "select" | undefined;
|
239
|
-
} & Omit<Omit<Omit<
|
241
|
+
} & Omit<Omit<Omit<src.BaseFieldProps<react_hook_form.FieldValues, string>, keyof dist.SelectFieldProps> & dist.SelectFieldProps, keyof dist.BaseFieldProps<TFieldValues_2, TName_1>> & dist.BaseFieldProps<TFieldValues, react_hook_form.Path<TFieldValues>>, "name">) | ({
|
240
242
|
type?: "textarea" | undefined;
|
241
|
-
} & Omit<Omit<Omit<
|
243
|
+
} & Omit<Omit<Omit<src.BaseFieldProps<react_hook_form.FieldValues, string>, keyof dist.TextareaFieldProps> & dist.TextareaFieldProps, keyof dist.BaseFieldProps<TFieldValues_2, TName_1>> & dist.BaseFieldProps<TFieldValues, react_hook_form.Path<TFieldValues>>, "name">) | ({
|
244
|
+
type?: "time" | undefined;
|
245
|
+
} & Omit<Omit<Omit<src.BaseFieldProps<react_hook_form.FieldValues, string>, keyof dist.InputFieldProps> & dist.InputFieldProps, keyof dist.BaseFieldProps<TFieldValues_2, TName_1>> & dist.BaseFieldProps<TFieldValues, react_hook_form.Path<TFieldValues>>, "name">) | ({
|
242
246
|
type?: "switch" | undefined;
|
243
|
-
} & Omit<Omit<Omit<
|
247
|
+
} & Omit<Omit<Omit<src.BaseFieldProps<react_hook_form.FieldValues, string>, keyof dist.SwitchFieldProps> & dist.SwitchFieldProps, keyof dist.BaseFieldProps<TFieldValues_2, TName_1>> & dist.BaseFieldProps<TFieldValues, react_hook_form.Path<TFieldValues>>, "name">) | ({
|
244
248
|
type?: "text" | undefined;
|
245
|
-
} & Omit<Omit<Omit<
|
249
|
+
} & Omit<Omit<Omit<src.BaseFieldProps<react_hook_form.FieldValues, string>, keyof dist.InputFieldProps> & dist.InputFieldProps, keyof dist.BaseFieldProps<TFieldValues_2, TName_1>> & dist.BaseFieldProps<TFieldValues, react_hook_form.Path<TFieldValues>>, "name">) | ({
|
246
250
|
type?: "checkbox" | undefined;
|
247
|
-
} & Omit<Omit<Omit<
|
251
|
+
} & Omit<Omit<Omit<src.BaseFieldProps<react_hook_form.FieldValues, string>, keyof _chakra_ui_checkbox.CheckboxProps> & _chakra_ui_checkbox.CheckboxProps, keyof dist.BaseFieldProps<TFieldValues_2, TName_1>> & dist.BaseFieldProps<TFieldValues, react_hook_form.Path<TFieldValues>>, "name">) | ({
|
248
252
|
type?: "radio" | undefined;
|
249
|
-
} & Omit<Omit<Omit<
|
253
|
+
} & Omit<Omit<Omit<src.BaseFieldProps<react_hook_form.FieldValues, string>, keyof dist.RadioInputProps> & dist.RadioInputProps, keyof dist.BaseFieldProps<TFieldValues_2, TName_1>> & dist.BaseFieldProps<TFieldValues, react_hook_form.Path<TFieldValues>>, "name">) | ({
|
250
254
|
type?: "url" | undefined;
|
251
|
-
} & Omit<Omit<Omit<
|
255
|
+
} & Omit<Omit<Omit<src.BaseFieldProps<react_hook_form.FieldValues, string>, keyof dist.InputFieldProps> & dist.InputFieldProps, keyof dist.BaseFieldProps<TFieldValues_2, TName_1>> & dist.BaseFieldProps<TFieldValues, react_hook_form.Path<TFieldValues>>, "name">) | ({
|
252
256
|
type?: "email" | undefined;
|
253
|
-
} & Omit<Omit<Omit<
|
257
|
+
} & Omit<Omit<Omit<src.BaseFieldProps<react_hook_form.FieldValues, string>, keyof dist.InputFieldProps> & dist.InputFieldProps, keyof dist.BaseFieldProps<TFieldValues_2, TName_1>> & dist.BaseFieldProps<TFieldValues, react_hook_form.Path<TFieldValues>>, "name">) | ({
|
254
258
|
type?: "phone" | undefined;
|
255
|
-
} & Omit<Omit<Omit<
|
259
|
+
} & Omit<Omit<Omit<src.BaseFieldProps<react_hook_form.FieldValues, string>, keyof dist.InputFieldProps> & dist.InputFieldProps, keyof dist.BaseFieldProps<TFieldValues_2, TName_1>> & dist.BaseFieldProps<TFieldValues, react_hook_form.Path<TFieldValues>>, "name">) | ({
|
256
260
|
type?: "password" | undefined;
|
257
|
-
} & Omit<Omit<Omit<
|
261
|
+
} & Omit<Omit<Omit<src.BaseFieldProps<react_hook_form.FieldValues, string>, keyof dist.PasswordInputProps> & dist.PasswordInputProps, keyof dist.BaseFieldProps<TFieldValues_2, TName_1>> & dist.BaseFieldProps<TFieldValues, react_hook_form.Path<TFieldValues>>, "name">) | ({
|
258
262
|
type?: "pin" | undefined;
|
259
|
-
} & Omit<Omit<Omit<
|
263
|
+
} & Omit<Omit<Omit<src.BaseFieldProps<react_hook_form.FieldValues, string>, keyof dist.PinFieldProps> & dist.PinFieldProps, keyof dist.BaseFieldProps<TFieldValues_2, TName_1>> & dist.BaseFieldProps<TFieldValues, react_hook_form.Path<TFieldValues>>, "name">) | ({
|
260
264
|
type?: "native-select" | undefined;
|
261
|
-
} & Omit<Omit<Omit<
|
265
|
+
} & Omit<Omit<Omit<src.BaseFieldProps<react_hook_form.FieldValues, string>, keyof dist.NativeSelectProps> & dist.NativeSelectProps, keyof dist.BaseFieldProps<TFieldValues_2, TName_1>> & dist.BaseFieldProps<TFieldValues, react_hook_form.Path<TFieldValues>>, "name">)) | ({
|
262
266
|
type?: "object" | undefined;
|
263
267
|
} & Omit<dist.ObjectFieldProps<TFieldValues, react_hook_form.Path<TFieldValues>>, "name" | "children">) | ({
|
264
268
|
type?: "array" | undefined;
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@saas-ui/forms",
|
3
|
-
"version": "2.5.
|
3
|
+
"version": "2.5.3",
|
4
4
|
"description": "Fully functional forms for Chakra UI.",
|
5
5
|
"source": "src/index.ts",
|
6
6
|
"exports": {
|
@@ -104,7 +104,7 @@
|
|
104
104
|
"@chakra-ui/react-utils": "^2.0.12",
|
105
105
|
"@chakra-ui/utils": "^2.0.15",
|
106
106
|
"@hookform/resolvers": "^3.3.4",
|
107
|
-
"@saas-ui/core": "2.4.
|
107
|
+
"@saas-ui/core": "2.4.4",
|
108
108
|
"react-hook-form": "^7.50.1"
|
109
109
|
},
|
110
110
|
"peerDependencies": {
|
package/src/base-field.tsx
CHANGED
@@ -13,7 +13,7 @@ import { splitProps } from '@saas-ui/core'
|
|
13
13
|
|
14
14
|
import { useFormContext } from './form-context'
|
15
15
|
|
16
|
-
import { BaseFieldProps } from './types'
|
16
|
+
import type { BaseFieldProps } from './types'
|
17
17
|
|
18
18
|
const getError = (name: string, formState: FormState<{ [x: string]: any }>) => {
|
19
19
|
return get(formState.errors, name)
|
package/src/create-field.tsx
CHANGED
@@ -4,7 +4,7 @@ import { Controller } from 'react-hook-form'
|
|
4
4
|
import { forwardRef, useMergeRefs } from '@chakra-ui/react'
|
5
5
|
import { callAllHandlers } from '@chakra-ui/utils'
|
6
6
|
|
7
|
-
import { splitProps } from '@saas-ui/core
|
7
|
+
import { splitProps } from '@saas-ui/core'
|
8
8
|
|
9
9
|
import { BaseFieldProps, FieldProps, GetBaseField } from './types'
|
10
10
|
import { BaseField } from './base-field'
|
package/src/create-form.tsx
CHANGED
@@ -6,6 +6,7 @@ import { Form, FieldValues, FormProps, GetResolver } from './form'
|
|
6
6
|
import { GetBaseField, WithFields } from './types'
|
7
7
|
import { objectFieldResolver } from './field-resolver'
|
8
8
|
import { GetFieldResolver } from './field-resolver'
|
9
|
+
import { defaultFieldTypes } from './default-fields'
|
9
10
|
|
10
11
|
export interface CreateFormProps<
|
11
12
|
FieldDefs,
|
@@ -72,8 +73,13 @@ export function createForm<
|
|
72
73
|
...rest
|
73
74
|
} = props
|
74
75
|
|
76
|
+
const fieldsContext = {
|
77
|
+
fields: { ...defaultFieldTypes, ...fields },
|
78
|
+
getBaseField,
|
79
|
+
}
|
80
|
+
|
75
81
|
return (
|
76
|
-
<FieldsProvider value={
|
82
|
+
<FieldsProvider value={fieldsContext}>
|
77
83
|
<Form
|
78
84
|
ref={ref}
|
79
85
|
resolver={resolverProp ?? resolver?.(props.schema)}
|
package/src/create-step-form.tsx
CHANGED
@@ -8,6 +8,7 @@ import {
|
|
8
8
|
FieldsProvider,
|
9
9
|
GetFieldResolver,
|
10
10
|
ObjectField,
|
11
|
+
defaultFieldTypes,
|
11
12
|
} from './'
|
12
13
|
import { Form } from './form'
|
13
14
|
import { Field } from './field'
|
@@ -82,10 +83,18 @@ export function createStepForm<
|
|
82
83
|
|
83
84
|
const context = useMemo(() => ctx, [ctx])
|
84
85
|
|
86
|
+
const fieldsContext = {
|
87
|
+
fields: {
|
88
|
+
...defaultFieldTypes,
|
89
|
+
...fields,
|
90
|
+
},
|
91
|
+
getBaseField,
|
92
|
+
}
|
93
|
+
|
85
94
|
return (
|
86
95
|
<StepperProvider value={context}>
|
87
96
|
<StepFormProvider value={context}>
|
88
|
-
<FieldsProvider value={
|
97
|
+
<FieldsProvider value={fieldsContext}>
|
89
98
|
<Form ref={ref} {...rest} {...getFormProps()}>
|
90
99
|
{runIfFn(children, {
|
91
100
|
...stepper,
|
package/src/default-fields.tsx
CHANGED
@@ -31,11 +31,9 @@ import {
|
|
31
31
|
NativeSelectProps,
|
32
32
|
SelectButtonProps,
|
33
33
|
SelectListProps,
|
34
|
-
SelectOption,
|
35
34
|
} from './select'
|
36
35
|
|
37
36
|
import { createField } from './create-field'
|
38
|
-
import { FieldOption, FieldOptions } from './types'
|
39
37
|
|
40
38
|
export interface InputFieldProps extends InputProps {
|
41
39
|
type?: string
|
@@ -173,6 +171,7 @@ export const defaultFieldTypes = {
|
|
173
171
|
email: InputField,
|
174
172
|
url: InputField,
|
175
173
|
phone: InputField,
|
174
|
+
time: InputField,
|
176
175
|
number: NumberInputField,
|
177
176
|
password: PasswordInputField,
|
178
177
|
textarea: TextareaField,
|
package/src/field.tsx
CHANGED
@@ -5,6 +5,7 @@ import { FocusableElement } from '@chakra-ui/utils'
|
|
5
5
|
import { useField } from './fields-context'
|
6
6
|
import { FieldProps } from './types'
|
7
7
|
import { useFieldProps } from './form-context'
|
8
|
+
import { InputField } from './default-fields'
|
8
9
|
|
9
10
|
export interface Option {
|
10
11
|
value: string
|
@@ -36,7 +37,7 @@ export const Field = React.forwardRef(
|
|
36
37
|
) => {
|
37
38
|
const { type = defaultInputType, name } = props
|
38
39
|
const overrides = useFieldProps(name)
|
39
|
-
const InputComponent = useField(overrides?.type || type)
|
40
|
+
const InputComponent = useField(overrides?.type || type, InputField)
|
40
41
|
|
41
42
|
return <InputComponent ref={ref} {...props} {...overrides} />
|
42
43
|
}
|
package/src/fields-context.tsx
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import { defaultFieldTypes, InputField } from './default-fields'
|
3
|
-
import { GetBaseField } from './types'
|
3
|
+
import type { GetBaseField } from './types'
|
4
4
|
|
5
5
|
export interface FieldsContextValue {
|
6
6
|
fields: Record<string, React.FC<any>>
|
@@ -10,14 +10,11 @@ export interface FieldsContextValue {
|
|
10
10
|
const FieldsContext = React.createContext<FieldsContextValue | null>(null)
|
11
11
|
|
12
12
|
export const FieldsProvider: React.FC<{
|
13
|
-
value:
|
13
|
+
value: FieldsContextValue
|
14
14
|
children: React.ReactNode
|
15
15
|
}> = (props) => {
|
16
|
-
const fields = { ...defaultFieldTypes, ...props.value.fields }
|
17
16
|
return (
|
18
|
-
<FieldsContext.Provider
|
19
|
-
value={{ fields, getBaseField: props.value.getBaseField }}
|
20
|
-
>
|
17
|
+
<FieldsContext.Provider value={props.value}>
|
21
18
|
{props.children}
|
22
19
|
</FieldsContext.Provider>
|
23
20
|
)
|
@@ -27,7 +24,10 @@ export const useFieldsContext = () => {
|
|
27
24
|
return React.useContext(FieldsContext)
|
28
25
|
}
|
29
26
|
|
30
|
-
export const useField = (
|
27
|
+
export const useField = (
|
28
|
+
type: string,
|
29
|
+
fallback: React.FC<any>
|
30
|
+
): React.FC<any> => {
|
31
31
|
const context = React.useContext(FieldsContext)
|
32
|
-
return context?.fields?.[type] ||
|
32
|
+
return context?.fields?.[type] || fallback
|
33
33
|
}
|
package/src/form-context.tsx
CHANGED
@@ -6,7 +6,7 @@ import {
|
|
6
6
|
FieldValues,
|
7
7
|
} from 'react-hook-form'
|
8
8
|
import { FieldResolver } from './field-resolver'
|
9
|
-
import { BaseFieldProps
|
9
|
+
import type { BaseFieldProps } from './types'
|
10
10
|
|
11
11
|
export type FormContextValue<
|
12
12
|
TFieldValues extends FieldValues = FieldValues,
|
package/src/types.ts
CHANGED
@@ -1,13 +1,13 @@
|
|
1
|
-
import { FormControlProps } from '@chakra-ui/react'
|
2
|
-
import { MaybeRenderProp } from '@chakra-ui/react-utils'
|
3
|
-
import { FieldPath, FieldValues, RegisterOptions } from 'react-hook-form'
|
4
|
-
import { DefaultFields } from './default-fields'
|
5
|
-
import { FormProps, FormRenderContext } from './form'
|
6
|
-
import { SubmitButtonProps } from './submit-button'
|
7
|
-
import { ObjectFieldProps } from './object-field'
|
8
|
-
import { ArrayFieldProps } from './array-field'
|
9
|
-
import { StepFormRenderContext, UseStepFormProps } from './use-step-form'
|
10
|
-
import { StepsOptions } from './step-form'
|
1
|
+
import type { FormControlProps } from '@chakra-ui/react'
|
2
|
+
import type { MaybeRenderProp } from '@chakra-ui/react-utils'
|
3
|
+
import type { FieldPath, FieldValues, RegisterOptions } from 'react-hook-form'
|
4
|
+
import type { DefaultFields } from './default-fields'
|
5
|
+
import type { FormProps, FormRenderContext } from './form'
|
6
|
+
import type { SubmitButtonProps } from './submit-button'
|
7
|
+
import type { ObjectFieldProps } from './object-field'
|
8
|
+
import type { ArrayFieldProps } from './array-field'
|
9
|
+
import type { StepFormRenderContext, UseStepFormProps } from './use-step-form'
|
10
|
+
import type { StepsOptions } from './step-form'
|
11
11
|
|
12
12
|
export type FieldOption = { label?: string; value: string }
|
13
13
|
export type FieldOptions<TOption extends FieldOption = FieldOption> =
|
@@ -101,8 +101,10 @@ export type MergeFieldProps<
|
|
101
101
|
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
|
102
102
|
> = ValueOf<{
|
103
103
|
[K in keyof FieldDefs]: FieldDefs[K] extends React.FC<infer Props>
|
104
|
-
? { type?: K } & ShallowMerge<
|
105
|
-
|
104
|
+
? { type?: K } & ShallowMerge<
|
105
|
+
Props,
|
106
|
+
BaseFieldProps<TFieldValues, TName>
|
107
|
+
> & { [key in keyof TExtraFieldProps]: TExtraFieldProps[key] }
|
106
108
|
: never
|
107
109
|
}>
|
108
110
|
|