@saas-ui/forms 3.0.0-alpha.1 → 3.0.0-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +8 -28
- package/dist/ajv/index.d.mts +0 -35
- package/dist/ajv/index.d.ts +0 -35
- package/dist/ajv/index.js +0 -57
- package/dist/ajv/index.js.map +0 -1
- package/dist/ajv/index.mjs +0 -30
- package/dist/ajv/index.mjs.map +0 -1
- package/src/array-field.tsx +0 -266
- package/src/auto-form.tsx +0 -71
- package/src/base-field.tsx +0 -69
- package/src/create-field.tsx +0 -171
- package/src/create-form.tsx +0 -100
- package/src/create-step-form.tsx +0 -118
- package/src/default-fields.tsx +0 -233
- package/src/display-field.tsx +0 -46
- package/src/display-if.tsx +0 -69
- package/src/field-resolver.ts +0 -66
- package/src/field.tsx +0 -44
- package/src/fields-context.tsx +0 -33
- package/src/fields.tsx +0 -93
- package/src/form-context.tsx +0 -80
- package/src/form-layout.tsx +0 -59
- package/src/form.tsx +0 -252
- package/src/index.ts +0 -310
- package/src/object-field.tsx +0 -58
- package/src/step-form.tsx +0 -191
- package/src/submit-button.tsx +0 -71
- package/src/types.ts +0 -242
- package/src/use-array-field.tsx +0 -158
- package/src/use-form.tsx +0 -24
- package/src/use-step-form.tsx +0 -201
- package/src/utils.ts +0 -35
- package/src/watch-field.tsx +0 -37
package/src/index.ts
DELETED
@@ -1,310 +0,0 @@
|
|
1
|
-
// Import and export Form and StepForm
|
2
|
-
import { createForm } from './create-form'
|
3
|
-
|
4
|
-
// import { createStepForm } from './create-step-form'
|
5
|
-
|
6
|
-
// Exporting from './display-field'
|
7
|
-
export { DisplayField } from './display-field'
|
8
|
-
export type { DisplayFieldProps } from './display-field'
|
9
|
-
export { FormValue } from './display-field'
|
10
|
-
|
11
|
-
// Exporting from './field'
|
12
|
-
export { Field } from './field'
|
13
|
-
export type { FieldRules } from './field'
|
14
|
-
|
15
|
-
// Exporting from './fields'
|
16
|
-
export { AutoFields } from './fields'
|
17
|
-
export type { FieldsProps } from './fields'
|
18
|
-
|
19
|
-
// Exporting from './fields-context'
|
20
|
-
export { FieldsProvider, useField } from './fields-context'
|
21
|
-
|
22
|
-
// Exporting from './layout'
|
23
|
-
export { FormLayout } from './form-layout'
|
24
|
-
export type { FormLayoutProps } from './form-layout'
|
25
|
-
|
26
|
-
// Exporting from './submit-button'
|
27
|
-
export { SubmitButton } from './submit-button'
|
28
|
-
export type { SubmitButtonProps } from './submit-button'
|
29
|
-
|
30
|
-
// Exporting from './array-field'
|
31
|
-
export {
|
32
|
-
ArrayField,
|
33
|
-
ArrayFieldAddButton,
|
34
|
-
ArrayFieldContainer,
|
35
|
-
ArrayFieldRemoveButton,
|
36
|
-
ArrayFieldRow,
|
37
|
-
ArrayFieldRowContainer,
|
38
|
-
ArrayFieldRowFields,
|
39
|
-
ArrayFieldRows,
|
40
|
-
} from './array-field'
|
41
|
-
|
42
|
-
export type {
|
43
|
-
ArrayFieldButtonProps,
|
44
|
-
ArrayFieldContainerProps,
|
45
|
-
ArrayFieldProps,
|
46
|
-
ArrayFieldRowFieldsProps,
|
47
|
-
ArrayFieldRowsProps,
|
48
|
-
} from './array-field'
|
49
|
-
|
50
|
-
// Exporting from './use-array-field'
|
51
|
-
export {
|
52
|
-
ArrayFieldProvider,
|
53
|
-
ArrayFieldRowProvider,
|
54
|
-
useArrayField,
|
55
|
-
useArrayFieldAddButton,
|
56
|
-
useArrayFieldContext,
|
57
|
-
useArrayFieldRemoveButton,
|
58
|
-
useArrayFieldRow,
|
59
|
-
useArrayFieldRowContext,
|
60
|
-
} from './use-array-field'
|
61
|
-
|
62
|
-
export type {
|
63
|
-
ArrayFieldOptions,
|
64
|
-
UseArrayFieldReturn,
|
65
|
-
UseArrayFieldRowProps,
|
66
|
-
UseArrayFieldRowReturn,
|
67
|
-
} from './use-array-field'
|
68
|
-
|
69
|
-
// Exporting from './object-field'
|
70
|
-
export { FormLegend, ObjectField } from './object-field'
|
71
|
-
export type { ObjectFieldProps } from './object-field'
|
72
|
-
|
73
|
-
// Exporting from './display-if'
|
74
|
-
export { DisplayIf } from './display-if'
|
75
|
-
export type { DisplayIfProps } from './display-if'
|
76
|
-
|
77
|
-
// Exporting from './step-form'
|
78
|
-
// export { FormStep, FormStepper, NextButton, PrevButton } from './step-form'
|
79
|
-
|
80
|
-
// export type {
|
81
|
-
// FormStepOptions,
|
82
|
-
// FormStepProps,
|
83
|
-
// FormStepperProps,
|
84
|
-
// NextButtonProps,
|
85
|
-
// StepFormProps,
|
86
|
-
// StepsOptions,
|
87
|
-
// } from './step-form'
|
88
|
-
|
89
|
-
// Exporting from './use-step-form'
|
90
|
-
// export {
|
91
|
-
// StepFormProvider,
|
92
|
-
// useFormStep,
|
93
|
-
// useStepForm,
|
94
|
-
// useStepFormContext,
|
95
|
-
// } from './use-step-form'
|
96
|
-
|
97
|
-
// export type {
|
98
|
-
// FormStepSubmitHandler,
|
99
|
-
// StepFormContext,
|
100
|
-
// StepFormRenderContext,
|
101
|
-
// StepState,
|
102
|
-
// UseFormStepProps,
|
103
|
-
// UseStepFormProps,
|
104
|
-
// UseStepFormReturn,
|
105
|
-
// } from './use-step-form'
|
106
|
-
|
107
|
-
// Exporting from './field-resolver'
|
108
|
-
export { objectFieldResolver } from './field-resolver'
|
109
|
-
export type {
|
110
|
-
FieldResolver,
|
111
|
-
GetFieldResolver,
|
112
|
-
ObjectSchema,
|
113
|
-
} from './field-resolver'
|
114
|
-
|
115
|
-
// Exporting from './watch-field'
|
116
|
-
export { WatchField } from './watch-field'
|
117
|
-
export type { WatchFieldProps } from './watch-field'
|
118
|
-
|
119
|
-
// Exporting BaseField from './base-field'
|
120
|
-
export { BaseField, useBaseField } from './base-field'
|
121
|
-
|
122
|
-
// Exporting from './default-fields'
|
123
|
-
export {
|
124
|
-
// CheckboxField,
|
125
|
-
InputField,
|
126
|
-
// NativeSelectField,
|
127
|
-
// NumberInputField,
|
128
|
-
// PasswordInputField,
|
129
|
-
// PinField,
|
130
|
-
// RadioField,
|
131
|
-
// SelectField,
|
132
|
-
// SwitchField,
|
133
|
-
TextareaField,
|
134
|
-
defaultFieldTypes,
|
135
|
-
} from './default-fields'
|
136
|
-
|
137
|
-
export type {
|
138
|
-
DefaultFields,
|
139
|
-
InputFieldProps,
|
140
|
-
// NumberInputFieldProps,
|
141
|
-
// PinFieldProps,
|
142
|
-
// SelectFieldProps,
|
143
|
-
// SwitchFieldProps,
|
144
|
-
TextareaFieldProps,
|
145
|
-
// CheckboxFieldProps,
|
146
|
-
// NativeSelectFieldProps,
|
147
|
-
// RadioFieldProps,
|
148
|
-
} from './default-fields'
|
149
|
-
|
150
|
-
// Exporting types from './types'
|
151
|
-
export type {
|
152
|
-
FieldProps,
|
153
|
-
WithFields,
|
154
|
-
BaseFieldProps,
|
155
|
-
FieldOptions,
|
156
|
-
DefaultFieldOverrides,
|
157
|
-
// WithStepFields,
|
158
|
-
GetBaseField,
|
159
|
-
} from './types'
|
160
|
-
|
161
|
-
// Exporting from './create-form'
|
162
|
-
export { createForm } from './create-form'
|
163
|
-
export type { CreateFormProps, FormType } from './create-form'
|
164
|
-
|
165
|
-
// Exporting from './create-field'
|
166
|
-
export { createField } from './create-field'
|
167
|
-
export type { CreateFieldOptions } from './create-field'
|
168
|
-
|
169
|
-
// Exporting from './form'
|
170
|
-
export { Form as BaseForm } from './form'
|
171
|
-
export type { FormProps, FormRenderContext, FormComponent } from './form'
|
172
|
-
|
173
|
-
// Exporting from './form-context'
|
174
|
-
export { FormProvider, useFormContext } from './form-context'
|
175
|
-
|
176
|
-
// export { createStepForm } from './create-step-form'
|
177
|
-
// export type { CreateStepFormProps } from './create-step-form'
|
178
|
-
|
179
|
-
/**
|
180
|
-
* Form component.
|
181
|
-
*
|
182
|
-
* @see Docs https://saas-ui.dev/docs/components/forms/form
|
183
|
-
*/
|
184
|
-
export const Form = createForm()
|
185
|
-
|
186
|
-
/**
|
187
|
-
* Multi-step form component.
|
188
|
-
*
|
189
|
-
* @see Docs https://saas-ui.dev/docs/components/forms/step-form
|
190
|
-
*/
|
191
|
-
// export const StepForm = createStepForm()
|
192
|
-
|
193
|
-
export type {
|
194
|
-
BatchFieldArrayUpdate,
|
195
|
-
ChangeHandler,
|
196
|
-
Control,
|
197
|
-
ControllerFieldState,
|
198
|
-
ControllerProps,
|
199
|
-
ControllerRenderProps,
|
200
|
-
CriteriaMode,
|
201
|
-
CustomElement,
|
202
|
-
DeepMap,
|
203
|
-
DeepPartial,
|
204
|
-
DeepPartialSkipArrayKey,
|
205
|
-
DefaultValues,
|
206
|
-
DelayCallback,
|
207
|
-
EmptyObject,
|
208
|
-
ErrorOption,
|
209
|
-
EventType,
|
210
|
-
Field as FieldDef,
|
211
|
-
FieldArray,
|
212
|
-
FieldArrayMethodProps,
|
213
|
-
FieldArrayWithId,
|
214
|
-
FieldElement,
|
215
|
-
FieldError,
|
216
|
-
FieldErrors,
|
217
|
-
FieldName,
|
218
|
-
FieldNamesMarkedBoolean,
|
219
|
-
FieldRefs,
|
220
|
-
FieldValue,
|
221
|
-
FieldValues,
|
222
|
-
FormProviderProps,
|
223
|
-
FormState,
|
224
|
-
FormStateProxy,
|
225
|
-
FormStateSubjectRef,
|
226
|
-
GetIsDirty,
|
227
|
-
InternalFieldErrors,
|
228
|
-
InternalFieldName,
|
229
|
-
InternalNameSet,
|
230
|
-
IsAny,
|
231
|
-
IsFlatObject,
|
232
|
-
KeepStateOptions,
|
233
|
-
LiteralUnion,
|
234
|
-
Message,
|
235
|
-
Mode,
|
236
|
-
MultipleFieldErrors,
|
237
|
-
Names,
|
238
|
-
NativeFieldValue,
|
239
|
-
NestedValue,
|
240
|
-
NonUndefined,
|
241
|
-
Noop,
|
242
|
-
Primitive,
|
243
|
-
ReadFormState,
|
244
|
-
Ref,
|
245
|
-
RefCallBack,
|
246
|
-
RegisterOptions,
|
247
|
-
Resolver,
|
248
|
-
ResolverError,
|
249
|
-
ResolverOptions,
|
250
|
-
ResolverResult,
|
251
|
-
ResolverSuccess,
|
252
|
-
SetFieldValue,
|
253
|
-
SetValueConfig,
|
254
|
-
Subjects,
|
255
|
-
SubmitErrorHandler,
|
256
|
-
SubmitHandler,
|
257
|
-
TriggerConfig,
|
258
|
-
UnpackNestedValue,
|
259
|
-
UseControllerProps,
|
260
|
-
UseControllerReturn,
|
261
|
-
UseFieldArrayProps,
|
262
|
-
UseFieldArrayReturn,
|
263
|
-
UseFormClearErrors,
|
264
|
-
UseFormGetValues,
|
265
|
-
UseFormHandleSubmit,
|
266
|
-
UseFormProps,
|
267
|
-
UseFormRegister,
|
268
|
-
UseFormRegisterReturn,
|
269
|
-
UseFormReset,
|
270
|
-
UseFormResetField,
|
271
|
-
UseFormReturn,
|
272
|
-
UseFormSetError,
|
273
|
-
UseFormSetFocus,
|
274
|
-
UseFormSetValue,
|
275
|
-
UseFormStateProps,
|
276
|
-
UseFormStateReturn,
|
277
|
-
UseFormTrigger,
|
278
|
-
UseFormUnregister,
|
279
|
-
UseFormWatch,
|
280
|
-
UseWatchProps,
|
281
|
-
Validate,
|
282
|
-
ValidateResult,
|
283
|
-
ValidationMode,
|
284
|
-
ValidationRule,
|
285
|
-
ValidationValue,
|
286
|
-
ValidationValueMessage,
|
287
|
-
WatchInternal,
|
288
|
-
WatchObserver,
|
289
|
-
ArrayPath,
|
290
|
-
BrowserNativeObject,
|
291
|
-
DeepRequired,
|
292
|
-
ExtractObjects,
|
293
|
-
FieldArrayPath,
|
294
|
-
FieldArrayPathValue,
|
295
|
-
FieldErrorsImpl,
|
296
|
-
FieldPath,
|
297
|
-
FieldPathByValue,
|
298
|
-
FieldPathValue,
|
299
|
-
FieldPathValues,
|
300
|
-
} from 'react-hook-form'
|
301
|
-
|
302
|
-
export {
|
303
|
-
appendErrors,
|
304
|
-
useController,
|
305
|
-
useFieldArray,
|
306
|
-
useForm,
|
307
|
-
useFormState,
|
308
|
-
useWatch,
|
309
|
-
Controller,
|
310
|
-
} from 'react-hook-form'
|
package/src/object-field.tsx
DELETED
@@ -1,58 +0,0 @@
|
|
1
|
-
import * as React from 'react'
|
2
|
-
|
3
|
-
import { Field as FieldPrimivite } from '@chakra-ui/react'
|
4
|
-
import { dataAttr } from '@saas-ui/core/utils'
|
5
|
-
import { FieldPath, FieldValues } from 'react-hook-form'
|
6
|
-
|
7
|
-
import { useFieldProps } from './form-context'
|
8
|
-
import { FormLayout, type FormLayoutOptions } from './form-layout'
|
9
|
-
import { BaseFieldProps } from './types'
|
10
|
-
import { mapNestedFields } from './utils'
|
11
|
-
|
12
|
-
export interface ObjectFieldProps<
|
13
|
-
TFieldValues extends FieldValues = FieldValues,
|
14
|
-
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
|
15
|
-
> extends Omit<BaseFieldProps, keyof FormLayoutOptions>,
|
16
|
-
FormLayoutOptions {
|
17
|
-
name: TName
|
18
|
-
children: React.ReactNode
|
19
|
-
}
|
20
|
-
|
21
|
-
export const FormLegend = (props: FieldPrimivite.LabelProps) => {
|
22
|
-
return <FieldPrimivite.Label as="legend" {...props} />
|
23
|
-
}
|
24
|
-
|
25
|
-
/**
|
26
|
-
* The object field component.
|
27
|
-
*
|
28
|
-
* @see Docs https://saas-ui.dev/docs/components/forms/object-field
|
29
|
-
*/
|
30
|
-
export const ObjectField: React.FC<ObjectFieldProps> = (props) => {
|
31
|
-
const {
|
32
|
-
name,
|
33
|
-
label,
|
34
|
-
hideLabel: hideLabelProp,
|
35
|
-
children,
|
36
|
-
columns: columnsProp,
|
37
|
-
gap: gapProp,
|
38
|
-
...fieldProps
|
39
|
-
} = props
|
40
|
-
|
41
|
-
const { hideLabel, columns, gap, ...overrides } = useFieldProps(name) as Omit<
|
42
|
-
ObjectFieldProps,
|
43
|
-
'name'
|
44
|
-
>
|
45
|
-
|
46
|
-
const hidden = hideLabelProp || hideLabel
|
47
|
-
|
48
|
-
return (
|
49
|
-
<FieldPrimivite.Root as="fieldset" {...fieldProps} {...overrides}>
|
50
|
-
<FormLegend data-hidden={dataAttr(hidden)}>{label}</FormLegend>
|
51
|
-
<FormLayout columns={columnsProp || columns} gridGap={gapProp || gap}>
|
52
|
-
{mapNestedFields(name, children)}
|
53
|
-
</FormLayout>
|
54
|
-
</FieldPrimivite.Root>
|
55
|
-
)
|
56
|
-
}
|
57
|
-
|
58
|
-
ObjectField.displayName = 'ObjectField'
|
package/src/step-form.tsx
DELETED
@@ -1,191 +0,0 @@
|
|
1
|
-
import * as React from 'react'
|
2
|
-
|
3
|
-
import {
|
4
|
-
Button,
|
5
|
-
ButtonProps,
|
6
|
-
HTMLChakraProps,
|
7
|
-
type StepsChangeDetails,
|
8
|
-
chakra,
|
9
|
-
} from '@chakra-ui/react'
|
10
|
-
import { useStepperContext } from '@saas-ui/core'
|
11
|
-
import { callAll, cx } from '@saas-ui/core/utils'
|
12
|
-
import { Steps } from '@saas-ui/react/steps'
|
13
|
-
import { FieldValues } from 'react-hook-form'
|
14
|
-
|
15
|
-
import { SubmitButton } from './submit-button'
|
16
|
-
import {
|
17
|
-
FormStepSubmitHandler,
|
18
|
-
UseStepFormProps,
|
19
|
-
useFormStep,
|
20
|
-
} from './use-step-form'
|
21
|
-
|
22
|
-
export type StepsOptions<TSchema, TName extends string = string> = {
|
23
|
-
/**
|
24
|
-
* The step name
|
25
|
-
*/
|
26
|
-
name: TName
|
27
|
-
/**
|
28
|
-
* Schema
|
29
|
-
*/
|
30
|
-
schema?: TSchema
|
31
|
-
}[]
|
32
|
-
|
33
|
-
export interface StepFormProps<
|
34
|
-
TSteps extends StepsOptions<any> = StepsOptions<any>,
|
35
|
-
TFieldValues extends FieldValues = FieldValues,
|
36
|
-
TContext extends object = object,
|
37
|
-
> extends UseStepFormProps<TSteps, TFieldValues, TContext> {}
|
38
|
-
|
39
|
-
export interface FormStepOptions<TName extends string = string> {
|
40
|
-
/**
|
41
|
-
* The step name
|
42
|
-
*/
|
43
|
-
name: TName
|
44
|
-
/**
|
45
|
-
* Schema
|
46
|
-
*/
|
47
|
-
schema?: any
|
48
|
-
/**
|
49
|
-
* Hook Form Resolver
|
50
|
-
*/
|
51
|
-
resolver?: any
|
52
|
-
}
|
53
|
-
|
54
|
-
export interface FormStepperProps extends Steps.RootProps {
|
55
|
-
// render?: Steps.['render']
|
56
|
-
}
|
57
|
-
|
58
|
-
/**
|
59
|
-
* Renders a stepper that displays progress above the form.
|
60
|
-
*
|
61
|
-
* @see Docs https://saas-ui.dev/docs/components/forms/step-form
|
62
|
-
*/
|
63
|
-
export const FormStepper = React.forwardRef<HTMLDivElement, FormStepperProps>(
|
64
|
-
(props, ref) => {
|
65
|
-
const { activeIndex, setIndex } = useStepperContext()
|
66
|
-
|
67
|
-
const {
|
68
|
-
children,
|
69
|
-
orientation,
|
70
|
-
variant,
|
71
|
-
colorScheme,
|
72
|
-
size,
|
73
|
-
onStepChange: onStepChangeProp,
|
74
|
-
...rest
|
75
|
-
} = props
|
76
|
-
|
77
|
-
const elements = React.Children.map(children, (child, index) => {
|
78
|
-
if (
|
79
|
-
React.isValidElement<FormStepProps>(child) &&
|
80
|
-
child?.type === FormStep
|
81
|
-
) {
|
82
|
-
const { isCompleted } = useFormStep(child.props) // Register this step
|
83
|
-
return (
|
84
|
-
<Steps.Item
|
85
|
-
index={index}
|
86
|
-
title={child.props.title}
|
87
|
-
data-completed={isCompleted}
|
88
|
-
{...rest}
|
89
|
-
>
|
90
|
-
{child.props.children}
|
91
|
-
</Steps.Item>
|
92
|
-
)
|
93
|
-
}
|
94
|
-
return child
|
95
|
-
})
|
96
|
-
|
97
|
-
const onChange = React.useCallback((details: StepsChangeDetails) => {
|
98
|
-
setIndex(details.step)
|
99
|
-
onStepChangeProp?.(details)
|
100
|
-
}, [])
|
101
|
-
|
102
|
-
return (
|
103
|
-
<Steps.Root
|
104
|
-
ref={ref}
|
105
|
-
orientation={orientation}
|
106
|
-
step={activeIndex}
|
107
|
-
variant={variant}
|
108
|
-
colorScheme={colorScheme}
|
109
|
-
size={size}
|
110
|
-
onStepChange={onChange}
|
111
|
-
>
|
112
|
-
{elements}
|
113
|
-
</Steps.Root>
|
114
|
-
)
|
115
|
-
},
|
116
|
-
)
|
117
|
-
|
118
|
-
export interface FormStepProps<TName extends string = string>
|
119
|
-
extends FormStepOptions<TName>,
|
120
|
-
Omit<HTMLChakraProps<'div'>, 'onSubmit'> {
|
121
|
-
onSubmit?: FormStepSubmitHandler
|
122
|
-
}
|
123
|
-
/**
|
124
|
-
* The form step containing fields for a specific step.
|
125
|
-
*
|
126
|
-
* @see Docs https://saas-ui.dev/docs/components/forms/step-form
|
127
|
-
*/
|
128
|
-
export const FormStep = <TName extends string = string>(
|
129
|
-
props: FormStepProps<TName>,
|
130
|
-
) => {
|
131
|
-
const { name, children, className, onSubmit, ...rest } = props
|
132
|
-
const step = useFormStep({ name, onSubmit })
|
133
|
-
|
134
|
-
const { isActive } = step
|
135
|
-
|
136
|
-
return isActive ? (
|
137
|
-
<chakra.div {...rest} className={cx('sui-form__step', className)}>
|
138
|
-
{children}
|
139
|
-
</chakra.div>
|
140
|
-
) : null
|
141
|
-
}
|
142
|
-
|
143
|
-
FormStep.displayName = 'FormStep'
|
144
|
-
|
145
|
-
/**
|
146
|
-
* A button that this opens the previous step when clicked. Disabled on the first step.
|
147
|
-
*
|
148
|
-
* @see Docs https://saas-ui.dev/docs/components/forms/step-form
|
149
|
-
*/
|
150
|
-
export const PrevButton: React.FC<ButtonProps> = (props) => {
|
151
|
-
const { isFirstStep, isCompleted, prevStep } = useStepperContext()
|
152
|
-
|
153
|
-
return (
|
154
|
-
<Button
|
155
|
-
disabled={isFirstStep || isCompleted}
|
156
|
-
children="Back"
|
157
|
-
{...props}
|
158
|
-
className={cx('sui-form__prev-button', props.className)}
|
159
|
-
onClick={callAll(props.onClick, prevStep)}
|
160
|
-
/>
|
161
|
-
)
|
162
|
-
}
|
163
|
-
|
164
|
-
PrevButton.displayName = 'PrevButton'
|
165
|
-
|
166
|
-
export interface NextButtonProps extends Omit<ButtonProps, 'children'> {
|
167
|
-
submitLabel?: string
|
168
|
-
label?: string
|
169
|
-
}
|
170
|
-
|
171
|
-
/**
|
172
|
-
* A button that submits the active step.
|
173
|
-
*
|
174
|
-
* @see Docs https://saas-ui.dev/docs/components/forms/step-form
|
175
|
-
*/
|
176
|
-
export const NextButton: React.FC<NextButtonProps> = (props) => {
|
177
|
-
const { label = 'Next', submitLabel = 'Complete', ...rest } = props
|
178
|
-
const { isLastStep, isCompleted } = useStepperContext()
|
179
|
-
|
180
|
-
return (
|
181
|
-
<SubmitButton
|
182
|
-
{...rest}
|
183
|
-
disabled={isCompleted}
|
184
|
-
className={cx('sui-form__next-button', props.className)}
|
185
|
-
>
|
186
|
-
{isLastStep || isCompleted ? submitLabel : label}
|
187
|
-
</SubmitButton>
|
188
|
-
)
|
189
|
-
}
|
190
|
-
|
191
|
-
NextButton.displayName = 'NextButton'
|
package/src/submit-button.tsx
DELETED
@@ -1,71 +0,0 @@
|
|
1
|
-
import { forwardRef } from 'react'
|
2
|
-
|
3
|
-
import { Button, ButtonProps } from '@saas-ui/react/button'
|
4
|
-
import { useFormContext } from 'react-hook-form'
|
5
|
-
|
6
|
-
import { useFieldProps } from './form-context.tsx'
|
7
|
-
|
8
|
-
export interface SubmitButtonProps extends ButtonProps {
|
9
|
-
/**
|
10
|
-
* Disable the submit button if the form is untouched.
|
11
|
-
*/
|
12
|
-
disableIfUntouched?: boolean
|
13
|
-
/**
|
14
|
-
* Disable the submit button if the form is invalid.
|
15
|
-
*/
|
16
|
-
disableIfInvalid?: boolean
|
17
|
-
}
|
18
|
-
|
19
|
-
/**
|
20
|
-
* A button with type submit and default color scheme primary and isLoading state when the form is submitting.
|
21
|
-
*
|
22
|
-
* @see Docs https://saas-ui.dev/docs/components/forms/form
|
23
|
-
*/
|
24
|
-
export const SubmitButton = forwardRef<HTMLButtonElement, SubmitButtonProps>(
|
25
|
-
(props, ref) => {
|
26
|
-
const {
|
27
|
-
variant = 'glass',
|
28
|
-
colorPalette = 'accent',
|
29
|
-
children = 'Submit',
|
30
|
-
disableIfUntouched: disableIfUntouchedProp = false,
|
31
|
-
disableIfInvalid: disableIfInvalidProp = false,
|
32
|
-
disabled: disabledProp,
|
33
|
-
loading,
|
34
|
-
...rest
|
35
|
-
} = props
|
36
|
-
const { formState } = useFormContext()
|
37
|
-
|
38
|
-
const field = useFieldProps('submit') as SubmitButtonProps
|
39
|
-
|
40
|
-
const {
|
41
|
-
disableIfUntouched: disableIfUntouchedOverride,
|
42
|
-
disableIfInvalid: disableIfInvalidOverride,
|
43
|
-
...fieldProps
|
44
|
-
} = field
|
45
|
-
|
46
|
-
const disableIfUntouched =
|
47
|
-
disableIfUntouchedOverride ?? disableIfUntouchedProp
|
48
|
-
const disableIfInvalid = disableIfInvalidOverride ?? disableIfInvalidProp
|
49
|
-
|
50
|
-
const isDisabled =
|
51
|
-
(disableIfUntouched && !formState.isDirty) ||
|
52
|
-
(disableIfInvalid && !formState.isValid) ||
|
53
|
-
disabledProp
|
54
|
-
|
55
|
-
return (
|
56
|
-
<Button
|
57
|
-
ref={ref}
|
58
|
-
variant={variant as any}
|
59
|
-
colorPalette={colorPalette}
|
60
|
-
type="submit"
|
61
|
-
loading={formState.isSubmitting || loading}
|
62
|
-
disabled={isDisabled}
|
63
|
-
children={children}
|
64
|
-
{...rest}
|
65
|
-
{...fieldProps}
|
66
|
-
/>
|
67
|
-
)
|
68
|
-
},
|
69
|
-
)
|
70
|
-
|
71
|
-
SubmitButton.displayName = 'SubmitButton'
|