@faasjs/react 3.7.0-beta.1 → 3.7.0-beta.10
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/README.md +16 -1
- package/dist/index.d.mts +120 -29
- package/dist/index.d.ts +120 -29
- package/dist/index.js +200 -91
- package/dist/index.mjs +197 -93
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -34,7 +34,7 @@ React plugin for FaasJS.
|
|
|
34
34
|
## Install
|
|
35
35
|
|
|
36
36
|
```sh
|
|
37
|
-
npm install @faasjs/react
|
|
37
|
+
npm install @faasjs/react react
|
|
38
38
|
```
|
|
39
39
|
|
|
40
40
|
## Functions
|
|
@@ -46,6 +46,7 @@ npm install @faasjs/react
|
|
|
46
46
|
- [FaasReactClient](functions/FaasReactClient.md)
|
|
47
47
|
- [Form](functions/Form.md)
|
|
48
48
|
- [FormContextProvider](functions/FormContextProvider.md)
|
|
49
|
+
- [FormItem](functions/FormItem.md)
|
|
49
50
|
- [getClient](functions/getClient.md)
|
|
50
51
|
- [OptionalWrapper](functions/OptionalWrapper.md)
|
|
51
52
|
- [useConstant](functions/useConstant.md)
|
|
@@ -55,7 +56,9 @@ npm install @faasjs/react
|
|
|
55
56
|
- [useEqualMemoize](functions/useEqualMemoize.md)
|
|
56
57
|
- [useFaas](functions/useFaas.md)
|
|
57
58
|
- [useFormContext](functions/useFormContext.md)
|
|
59
|
+
- [usePrevious](functions/usePrevious.md)
|
|
58
60
|
- [useSplittingState](functions/useSplittingState.md)
|
|
61
|
+
- [validValues](functions/validValues.md)
|
|
59
62
|
- [withFaasData](functions/withFaasData.md)
|
|
60
63
|
|
|
61
64
|
## Classes
|
|
@@ -78,9 +81,19 @@ npm install @faasjs/react
|
|
|
78
81
|
- [FaasParams](type-aliases/FaasParams.md)
|
|
79
82
|
- [FaasReactClientInstance](type-aliases/FaasReactClientInstance.md)
|
|
80
83
|
- [FaasReactClientOptions](type-aliases/FaasReactClientOptions.md)
|
|
84
|
+
- [FormButtonElementProps](type-aliases/FormButtonElementProps.md)
|
|
81
85
|
- [FormContextProps](type-aliases/FormContextProps.md)
|
|
86
|
+
- [FormDefaultRulesOptions](type-aliases/FormDefaultRulesOptions.md)
|
|
82
87
|
- [FormElementTypes](type-aliases/FormElementTypes.md)
|
|
88
|
+
- [FormInputElementProps](type-aliases/FormInputElementProps.md)
|
|
89
|
+
- [FormItemName](type-aliases/FormItemName.md)
|
|
90
|
+
- [FormItemProps](type-aliases/FormItemProps.md)
|
|
91
|
+
- [FormLabelElementProps](type-aliases/FormLabelElementProps.md)
|
|
92
|
+
- [FormLang](type-aliases/FormLang.md)
|
|
83
93
|
- [FormProps](type-aliases/FormProps.md)
|
|
94
|
+
- [FormRule](type-aliases/FormRule.md)
|
|
95
|
+
- [FormRules](type-aliases/FormRules.md)
|
|
96
|
+
- [InferFormRulesOptions](type-aliases/InferFormRulesOptions.md)
|
|
84
97
|
- [OnError](type-aliases/OnError.md)
|
|
85
98
|
- [OptionalWrapperProps](type-aliases/OptionalWrapperProps.md)
|
|
86
99
|
- [Options](type-aliases/Options.md)
|
|
@@ -90,3 +103,5 @@ npm install @faasjs/react
|
|
|
90
103
|
## Variables
|
|
91
104
|
|
|
92
105
|
- [FormDefaultElements](variables/FormDefaultElements.md)
|
|
106
|
+
- [FormDefaultLang](variables/FormDefaultLang.md)
|
|
107
|
+
- [FormDefaultRules](variables/FormDefaultRules.md)
|
package/dist/index.d.mts
CHANGED
|
@@ -3,7 +3,7 @@ export { FaasAction, FaasData, FaasParams } from '@faasjs/types';
|
|
|
3
3
|
import { Response, BaseUrl, ResponseError, Options, FaasBrowserClient } from '@faasjs/browser';
|
|
4
4
|
export { Options, Response, ResponseError, ResponseHeaders } from '@faasjs/browser';
|
|
5
5
|
import * as react from 'react';
|
|
6
|
-
import { ReactNode, Dispatch, SetStateAction, ReactElement, Component, ComponentType, ComponentProps } from 'react';
|
|
6
|
+
import { ReactNode, Dispatch, SetStateAction, ReactElement, Component, ComponentType, ComponentProps, JSXElementConstructor } from 'react';
|
|
7
7
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
8
8
|
|
|
9
9
|
/**
|
|
@@ -57,6 +57,14 @@ declare function useEqualMemo<T>(callback: () => T, dependencies: any[]): T;
|
|
|
57
57
|
* @returns The result of the `useCallback` hook with memoized dependencies.
|
|
58
58
|
*/
|
|
59
59
|
declare function useEqualCallback<T extends (...args: any[]) => any>(callback: T, dependencies: any[]): T;
|
|
60
|
+
/**
|
|
61
|
+
* Hook to store the previous value of a state or prop.
|
|
62
|
+
*
|
|
63
|
+
* @template T - The type of the value.
|
|
64
|
+
* @param {T} value - The current value to be stored.
|
|
65
|
+
* @returns {T | undefined} - The previous value, or undefined if there is no previous value.
|
|
66
|
+
*/
|
|
67
|
+
declare function usePrevious<T>(value: T): T | undefined;
|
|
60
68
|
|
|
61
69
|
/**
|
|
62
70
|
* Creates a splitting context with the given default value.
|
|
@@ -124,7 +132,7 @@ declare function createSplittingContext<T extends Record<string, any>>(defaultVa
|
|
|
124
132
|
* ```
|
|
125
133
|
*/
|
|
126
134
|
Provider<NewT extends T = T>(props: {
|
|
127
|
-
value?: NewT
|
|
135
|
+
value?: Partial<NewT>;
|
|
128
136
|
children: ReactNode;
|
|
129
137
|
/**
|
|
130
138
|
* Whether to use memoization for the children.
|
|
@@ -135,6 +143,20 @@ declare function createSplittingContext<T extends Record<string, any>>(defaultVa
|
|
|
135
143
|
* `any[]`: memoize the children with specific dependencies.
|
|
136
144
|
*/
|
|
137
145
|
memo?: true | any[];
|
|
146
|
+
/**
|
|
147
|
+
* An object containing initial values that will be automatically converted into state variables using {@link useSplittingState} hook. Each property will create both a state value and its setter following the pattern: value/setValue.
|
|
148
|
+
*
|
|
149
|
+
* @example
|
|
150
|
+
* ```tsx
|
|
151
|
+
* <Provider
|
|
152
|
+
* initializeStates={{
|
|
153
|
+
* value: 0,
|
|
154
|
+
* }}
|
|
155
|
+
* >
|
|
156
|
+
* // Children will have access to: value, setValue
|
|
157
|
+
* </Provider>
|
|
158
|
+
*/
|
|
159
|
+
initializeStates?: Partial<NewT>;
|
|
138
160
|
}): ReactNode;
|
|
139
161
|
/**
|
|
140
162
|
* The hook to use the splitting context.
|
|
@@ -153,7 +175,7 @@ declare function createSplittingContext<T extends Record<string, any>>(defaultVa
|
|
|
153
175
|
use: <NewT extends T = T>() => Readonly<NewT>;
|
|
154
176
|
};
|
|
155
177
|
|
|
156
|
-
type SetPrefix<S extends string | number | symbol> = S extends string ?
|
|
178
|
+
type SetPrefix<S extends string | number | symbol> = S extends string ? S extends `${infer First}${infer Rest}` ? `set${Capitalize<First>}${Rest}` : never : never;
|
|
157
179
|
type StateSetters<T> = {
|
|
158
180
|
[K in keyof T as SetPrefix<K>]: Dispatch<SetStateAction<T[K]>>;
|
|
159
181
|
};
|
|
@@ -212,6 +234,7 @@ type FaasDataWrapperProps<PathOrData extends FaasAction> = {
|
|
|
212
234
|
};
|
|
213
235
|
declare function FaasDataWrapper<PathOrData extends FaasAction>(props: FaasDataWrapperProps<PathOrData>): JSX.Element;
|
|
214
236
|
declare namespace FaasDataWrapper {
|
|
237
|
+
var displayName: string;
|
|
215
238
|
var whyDidYouRender: boolean;
|
|
216
239
|
}
|
|
217
240
|
/**
|
|
@@ -263,6 +286,14 @@ type FaasReactClientOptions = {
|
|
|
263
286
|
/** @default `/` */
|
|
264
287
|
baseUrl?: BaseUrl;
|
|
265
288
|
options?: Options;
|
|
289
|
+
/**
|
|
290
|
+
* @example
|
|
291
|
+
* ```ts
|
|
292
|
+
* onError: (action, params) => async (res) => {
|
|
293
|
+
* console.error(action, params, res)
|
|
294
|
+
* }
|
|
295
|
+
* ```
|
|
296
|
+
*/
|
|
266
297
|
onError?: OnError;
|
|
267
298
|
};
|
|
268
299
|
type FaasReactClientInstance = {
|
|
@@ -336,6 +367,7 @@ declare class ErrorBoundary extends Component<ErrorBoundaryProps, {
|
|
|
336
367
|
componentStack?: string;
|
|
337
368
|
};
|
|
338
369
|
}> {
|
|
370
|
+
static displayName: string;
|
|
339
371
|
static whyDidYouRender: boolean;
|
|
340
372
|
constructor(props: ErrorBoundaryProps);
|
|
341
373
|
componentDidCatch(error: Error | null, info: any): void;
|
|
@@ -372,9 +404,10 @@ declare const OptionalWrapper: React.FC<OptionalWrapperProps> & {
|
|
|
372
404
|
whyDidYouRender: boolean;
|
|
373
405
|
};
|
|
374
406
|
|
|
375
|
-
type
|
|
376
|
-
|
|
377
|
-
|
|
407
|
+
type FormButtonElementProps = {
|
|
408
|
+
children?: React.ReactNode;
|
|
409
|
+
disabled: boolean;
|
|
410
|
+
submit: () => Promise<void>;
|
|
378
411
|
};
|
|
379
412
|
|
|
380
413
|
type FormInputElementProps = {
|
|
@@ -385,20 +418,11 @@ type FormInputElementProps = {
|
|
|
385
418
|
|
|
386
419
|
type FormLabelElementProps = {
|
|
387
420
|
name: string;
|
|
388
|
-
rules?: FormRules;
|
|
389
421
|
title?: ReactNode;
|
|
390
422
|
description?: ReactNode;
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
props?: FormInputElementProps;
|
|
395
|
-
};
|
|
396
|
-
};
|
|
397
|
-
|
|
398
|
-
type FormButtonElementProps = {
|
|
399
|
-
children?: React.ReactNode;
|
|
400
|
-
disabled?: boolean;
|
|
401
|
-
onClick?: () => void;
|
|
423
|
+
error?: Error;
|
|
424
|
+
/** as Input element */
|
|
425
|
+
children: ReactNode;
|
|
402
426
|
};
|
|
403
427
|
|
|
404
428
|
type FormElementTypes = {
|
|
@@ -408,28 +432,95 @@ type FormElementTypes = {
|
|
|
408
432
|
};
|
|
409
433
|
declare const FormDefaultElements: FormElementTypes;
|
|
410
434
|
|
|
411
|
-
|
|
412
|
-
|
|
435
|
+
declare const FormDefaultLang: {
|
|
436
|
+
submit: string;
|
|
437
|
+
required: string;
|
|
438
|
+
string: string;
|
|
439
|
+
number: string;
|
|
440
|
+
};
|
|
441
|
+
type FormLang = typeof FormDefaultLang;
|
|
442
|
+
|
|
443
|
+
type FormRule<Options = any> = (value: any, options?: Options, lang?: FormLang) => Promise<void>;
|
|
444
|
+
type InferRuleOption<T> = T extends (value: any, options: infer O, lang?: FormLang) => Promise<void> ? O : never;
|
|
445
|
+
type FormRules = Record<string, FormRule>;
|
|
446
|
+
type InferFormRulesOptions<T> = {
|
|
447
|
+
[K in keyof T]: InferRuleOption<T[K]>;
|
|
448
|
+
};
|
|
449
|
+
declare const FormDefaultRules: FormRules;
|
|
450
|
+
type FormDefaultRulesOptions = InferFormRulesOptions<typeof FormDefaultRules>;
|
|
451
|
+
declare function validValues(rules: FormRules, items: FormItemProps[], values: Record<string, any>, lang: FormLang): Promise<Record<string, Error>>;
|
|
452
|
+
|
|
453
|
+
type InferFormInputProps<T extends ComponentType<FormInputElementProps> | JSXElementConstructor<any>> = T extends ComponentType<FormInputElementProps> ? Omit<ComponentProps<T>, 'name' | 'value' | 'onChange'> : Omit<ComponentProps<T>, 'name' | 'value'>;
|
|
454
|
+
type FormInputProps<FormElements extends FormElementTypes = FormElementTypes> = {
|
|
455
|
+
Input?: ComponentType<FormInputElementProps>;
|
|
456
|
+
props?: InferFormInputProps<FormElements['Input']>;
|
|
457
|
+
};
|
|
458
|
+
|
|
459
|
+
type FormItemName = string;
|
|
460
|
+
type FormItemProps<FormElements extends FormElementTypes = FormElementTypes, FormRulesOptions extends Record<string, any> = FormDefaultRulesOptions> = {
|
|
461
|
+
name: FormItemName;
|
|
462
|
+
label?: Omit<FormLabelElementProps, 'name' | 'children'> & {
|
|
463
|
+
Label?: ComponentType<FormLabelElementProps>;
|
|
464
|
+
};
|
|
465
|
+
input?: FormInputProps<FormElements>;
|
|
466
|
+
rules?: FormRulesOptions;
|
|
467
|
+
};
|
|
468
|
+
declare function FormItem(props: FormItemProps): react_jsx_runtime.JSX.Element;
|
|
469
|
+
declare namespace FormItem {
|
|
470
|
+
var displayName: string;
|
|
471
|
+
var whyDidYouRender: boolean;
|
|
472
|
+
}
|
|
473
|
+
|
|
474
|
+
type FormProps<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes, Rules extends FormRules = typeof FormDefaultRules> = {
|
|
475
|
+
items: FormItemProps<FormElements, InferFormRulesOptions<Rules>>[];
|
|
413
476
|
onSubmit?: (values: Values) => Promise<void>;
|
|
414
|
-
|
|
477
|
+
Elements?: Partial<FormElements>;
|
|
478
|
+
lang?: Partial<FormLang>;
|
|
415
479
|
defaultValues?: Values;
|
|
480
|
+
rules?: typeof FormDefaultRules & Rules;
|
|
416
481
|
};
|
|
417
|
-
|
|
482
|
+
/**
|
|
483
|
+
* FormContainer component is a wrapper that provides context and state management for form elements.
|
|
484
|
+
* It initializes form states such as values, errors, submitting status, elements, language, and rules.
|
|
485
|
+
*
|
|
486
|
+
* @template Values - The type of form values, defaults to Record<string, any>.
|
|
487
|
+
* @template FormElements - The type of form elements, defaults to FormElementTypes.
|
|
488
|
+
* @template Rules - The type of form rules, defaults to FormDefaultRules.
|
|
489
|
+
*
|
|
490
|
+
* @param {FormProps<Values, FormElements, Rules>} props - The properties for the FormContainer component.
|
|
491
|
+
* @param {Values} props.defaultValues - The default values for the form fields.
|
|
492
|
+
* @param {FormElements} props.Elements - The form elements to be used in the form.
|
|
493
|
+
* @param {Rules} props.rules - The validation rules for the form fields.
|
|
494
|
+
* @param {FormLang} props.lang - The language settings for the form.
|
|
495
|
+
* @param {Partial<FormContextProps>} props - Additional properties for the form context.
|
|
496
|
+
*
|
|
497
|
+
* @returns {JSX.Element} The FormContainer component.
|
|
498
|
+
*/
|
|
499
|
+
declare function FormContainer<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes, Rules extends FormRules = typeof FormDefaultRules>({ defaultValues, Elements, rules, lang, ...props }: FormProps<Values, FormElements, Rules>): react_jsx_runtime.JSX.Element;
|
|
500
|
+
declare namespace FormContainer {
|
|
501
|
+
var displayName: string;
|
|
502
|
+
var whyDidYouRender: boolean;
|
|
503
|
+
}
|
|
418
504
|
|
|
419
|
-
type FormContextProps<Values extends Record<string, any> = Record<string, any
|
|
505
|
+
type FormContextProps<Values extends Record<string, any> = Record<string, any>, Rules extends FormRules = typeof FormDefaultRules> = {
|
|
420
506
|
items: FormLabelElementProps[];
|
|
421
507
|
onSubmit: (values: Values) => Promise<void>;
|
|
422
508
|
Elements: FormElementTypes;
|
|
509
|
+
lang: FormLang;
|
|
510
|
+
rules: typeof FormDefaultRules & Rules;
|
|
423
511
|
submitting: boolean;
|
|
424
|
-
setSubmitting:
|
|
512
|
+
setSubmitting: Dispatch<SetStateAction<boolean>>;
|
|
425
513
|
values: Values;
|
|
426
|
-
setValues:
|
|
514
|
+
setValues: Dispatch<SetStateAction<Values>>;
|
|
515
|
+
errors: Record<string, Error>;
|
|
516
|
+
setErrors: Dispatch<SetStateAction<Record<string, Error>>>;
|
|
427
517
|
};
|
|
428
|
-
declare const FormContextProvider: <NewT extends FormContextProps<Record<string, any
|
|
429
|
-
value?: NewT
|
|
518
|
+
declare const FormContextProvider: <NewT extends FormContextProps<Record<string, any>, FormRules> = FormContextProps<Record<string, any>, FormRules>>(props: {
|
|
519
|
+
value?: Partial<NewT>;
|
|
430
520
|
children: react.ReactNode;
|
|
431
521
|
memo?: true | any[];
|
|
522
|
+
initializeStates?: Partial<NewT>;
|
|
432
523
|
}) => react.ReactNode;
|
|
433
|
-
declare const useFormContext: <NewT extends FormContextProps<Record<string, any
|
|
524
|
+
declare const useFormContext: <NewT extends FormContextProps<Record<string, any>, FormRules> = FormContextProps<Record<string, any>, FormRules>>() => Readonly<NewT>;
|
|
434
525
|
|
|
435
|
-
export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, FormContainer as Form, type FormContextProps, FormContextProvider, FormDefaultElements, type FormElementTypes, type FormProps, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useFormContext, useSplittingState, withFaasData };
|
|
526
|
+
export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, FormContainer as Form, type FormButtonElementProps, type FormContextProps, FormContextProvider, FormDefaultElements, FormDefaultLang, FormDefaultRules, type FormDefaultRulesOptions, type FormElementTypes, type FormInputElementProps, FormItem, type FormItemName, type FormItemProps, type FormLabelElementProps, type FormLang, type FormProps, type FormRule, type FormRules, type InferFormRulesOptions, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useFormContext, usePrevious, useSplittingState, validValues, withFaasData };
|
package/dist/index.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ export { FaasAction, FaasData, FaasParams } from '@faasjs/types';
|
|
|
3
3
|
import { Response, BaseUrl, ResponseError, Options, FaasBrowserClient } from '@faasjs/browser';
|
|
4
4
|
export { Options, Response, ResponseError, ResponseHeaders } from '@faasjs/browser';
|
|
5
5
|
import * as react from 'react';
|
|
6
|
-
import { ReactNode, Dispatch, SetStateAction, ReactElement, Component, ComponentType, ComponentProps } from 'react';
|
|
6
|
+
import { ReactNode, Dispatch, SetStateAction, ReactElement, Component, ComponentType, ComponentProps, JSXElementConstructor } from 'react';
|
|
7
7
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
8
8
|
|
|
9
9
|
/**
|
|
@@ -57,6 +57,14 @@ declare function useEqualMemo<T>(callback: () => T, dependencies: any[]): T;
|
|
|
57
57
|
* @returns The result of the `useCallback` hook with memoized dependencies.
|
|
58
58
|
*/
|
|
59
59
|
declare function useEqualCallback<T extends (...args: any[]) => any>(callback: T, dependencies: any[]): T;
|
|
60
|
+
/**
|
|
61
|
+
* Hook to store the previous value of a state or prop.
|
|
62
|
+
*
|
|
63
|
+
* @template T - The type of the value.
|
|
64
|
+
* @param {T} value - The current value to be stored.
|
|
65
|
+
* @returns {T | undefined} - The previous value, or undefined if there is no previous value.
|
|
66
|
+
*/
|
|
67
|
+
declare function usePrevious<T>(value: T): T | undefined;
|
|
60
68
|
|
|
61
69
|
/**
|
|
62
70
|
* Creates a splitting context with the given default value.
|
|
@@ -124,7 +132,7 @@ declare function createSplittingContext<T extends Record<string, any>>(defaultVa
|
|
|
124
132
|
* ```
|
|
125
133
|
*/
|
|
126
134
|
Provider<NewT extends T = T>(props: {
|
|
127
|
-
value?: NewT
|
|
135
|
+
value?: Partial<NewT>;
|
|
128
136
|
children: ReactNode;
|
|
129
137
|
/**
|
|
130
138
|
* Whether to use memoization for the children.
|
|
@@ -135,6 +143,20 @@ declare function createSplittingContext<T extends Record<string, any>>(defaultVa
|
|
|
135
143
|
* `any[]`: memoize the children with specific dependencies.
|
|
136
144
|
*/
|
|
137
145
|
memo?: true | any[];
|
|
146
|
+
/**
|
|
147
|
+
* An object containing initial values that will be automatically converted into state variables using {@link useSplittingState} hook. Each property will create both a state value and its setter following the pattern: value/setValue.
|
|
148
|
+
*
|
|
149
|
+
* @example
|
|
150
|
+
* ```tsx
|
|
151
|
+
* <Provider
|
|
152
|
+
* initializeStates={{
|
|
153
|
+
* value: 0,
|
|
154
|
+
* }}
|
|
155
|
+
* >
|
|
156
|
+
* // Children will have access to: value, setValue
|
|
157
|
+
* </Provider>
|
|
158
|
+
*/
|
|
159
|
+
initializeStates?: Partial<NewT>;
|
|
138
160
|
}): ReactNode;
|
|
139
161
|
/**
|
|
140
162
|
* The hook to use the splitting context.
|
|
@@ -153,7 +175,7 @@ declare function createSplittingContext<T extends Record<string, any>>(defaultVa
|
|
|
153
175
|
use: <NewT extends T = T>() => Readonly<NewT>;
|
|
154
176
|
};
|
|
155
177
|
|
|
156
|
-
type SetPrefix<S extends string | number | symbol> = S extends string ?
|
|
178
|
+
type SetPrefix<S extends string | number | symbol> = S extends string ? S extends `${infer First}${infer Rest}` ? `set${Capitalize<First>}${Rest}` : never : never;
|
|
157
179
|
type StateSetters<T> = {
|
|
158
180
|
[K in keyof T as SetPrefix<K>]: Dispatch<SetStateAction<T[K]>>;
|
|
159
181
|
};
|
|
@@ -212,6 +234,7 @@ type FaasDataWrapperProps<PathOrData extends FaasAction> = {
|
|
|
212
234
|
};
|
|
213
235
|
declare function FaasDataWrapper<PathOrData extends FaasAction>(props: FaasDataWrapperProps<PathOrData>): JSX.Element;
|
|
214
236
|
declare namespace FaasDataWrapper {
|
|
237
|
+
var displayName: string;
|
|
215
238
|
var whyDidYouRender: boolean;
|
|
216
239
|
}
|
|
217
240
|
/**
|
|
@@ -263,6 +286,14 @@ type FaasReactClientOptions = {
|
|
|
263
286
|
/** @default `/` */
|
|
264
287
|
baseUrl?: BaseUrl;
|
|
265
288
|
options?: Options;
|
|
289
|
+
/**
|
|
290
|
+
* @example
|
|
291
|
+
* ```ts
|
|
292
|
+
* onError: (action, params) => async (res) => {
|
|
293
|
+
* console.error(action, params, res)
|
|
294
|
+
* }
|
|
295
|
+
* ```
|
|
296
|
+
*/
|
|
266
297
|
onError?: OnError;
|
|
267
298
|
};
|
|
268
299
|
type FaasReactClientInstance = {
|
|
@@ -336,6 +367,7 @@ declare class ErrorBoundary extends Component<ErrorBoundaryProps, {
|
|
|
336
367
|
componentStack?: string;
|
|
337
368
|
};
|
|
338
369
|
}> {
|
|
370
|
+
static displayName: string;
|
|
339
371
|
static whyDidYouRender: boolean;
|
|
340
372
|
constructor(props: ErrorBoundaryProps);
|
|
341
373
|
componentDidCatch(error: Error | null, info: any): void;
|
|
@@ -372,9 +404,10 @@ declare const OptionalWrapper: React.FC<OptionalWrapperProps> & {
|
|
|
372
404
|
whyDidYouRender: boolean;
|
|
373
405
|
};
|
|
374
406
|
|
|
375
|
-
type
|
|
376
|
-
|
|
377
|
-
|
|
407
|
+
type FormButtonElementProps = {
|
|
408
|
+
children?: React.ReactNode;
|
|
409
|
+
disabled: boolean;
|
|
410
|
+
submit: () => Promise<void>;
|
|
378
411
|
};
|
|
379
412
|
|
|
380
413
|
type FormInputElementProps = {
|
|
@@ -385,20 +418,11 @@ type FormInputElementProps = {
|
|
|
385
418
|
|
|
386
419
|
type FormLabelElementProps = {
|
|
387
420
|
name: string;
|
|
388
|
-
rules?: FormRules;
|
|
389
421
|
title?: ReactNode;
|
|
390
422
|
description?: ReactNode;
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
props?: FormInputElementProps;
|
|
395
|
-
};
|
|
396
|
-
};
|
|
397
|
-
|
|
398
|
-
type FormButtonElementProps = {
|
|
399
|
-
children?: React.ReactNode;
|
|
400
|
-
disabled?: boolean;
|
|
401
|
-
onClick?: () => void;
|
|
423
|
+
error?: Error;
|
|
424
|
+
/** as Input element */
|
|
425
|
+
children: ReactNode;
|
|
402
426
|
};
|
|
403
427
|
|
|
404
428
|
type FormElementTypes = {
|
|
@@ -408,28 +432,95 @@ type FormElementTypes = {
|
|
|
408
432
|
};
|
|
409
433
|
declare const FormDefaultElements: FormElementTypes;
|
|
410
434
|
|
|
411
|
-
|
|
412
|
-
|
|
435
|
+
declare const FormDefaultLang: {
|
|
436
|
+
submit: string;
|
|
437
|
+
required: string;
|
|
438
|
+
string: string;
|
|
439
|
+
number: string;
|
|
440
|
+
};
|
|
441
|
+
type FormLang = typeof FormDefaultLang;
|
|
442
|
+
|
|
443
|
+
type FormRule<Options = any> = (value: any, options?: Options, lang?: FormLang) => Promise<void>;
|
|
444
|
+
type InferRuleOption<T> = T extends (value: any, options: infer O, lang?: FormLang) => Promise<void> ? O : never;
|
|
445
|
+
type FormRules = Record<string, FormRule>;
|
|
446
|
+
type InferFormRulesOptions<T> = {
|
|
447
|
+
[K in keyof T]: InferRuleOption<T[K]>;
|
|
448
|
+
};
|
|
449
|
+
declare const FormDefaultRules: FormRules;
|
|
450
|
+
type FormDefaultRulesOptions = InferFormRulesOptions<typeof FormDefaultRules>;
|
|
451
|
+
declare function validValues(rules: FormRules, items: FormItemProps[], values: Record<string, any>, lang: FormLang): Promise<Record<string, Error>>;
|
|
452
|
+
|
|
453
|
+
type InferFormInputProps<T extends ComponentType<FormInputElementProps> | JSXElementConstructor<any>> = T extends ComponentType<FormInputElementProps> ? Omit<ComponentProps<T>, 'name' | 'value' | 'onChange'> : Omit<ComponentProps<T>, 'name' | 'value'>;
|
|
454
|
+
type FormInputProps<FormElements extends FormElementTypes = FormElementTypes> = {
|
|
455
|
+
Input?: ComponentType<FormInputElementProps>;
|
|
456
|
+
props?: InferFormInputProps<FormElements['Input']>;
|
|
457
|
+
};
|
|
458
|
+
|
|
459
|
+
type FormItemName = string;
|
|
460
|
+
type FormItemProps<FormElements extends FormElementTypes = FormElementTypes, FormRulesOptions extends Record<string, any> = FormDefaultRulesOptions> = {
|
|
461
|
+
name: FormItemName;
|
|
462
|
+
label?: Omit<FormLabelElementProps, 'name' | 'children'> & {
|
|
463
|
+
Label?: ComponentType<FormLabelElementProps>;
|
|
464
|
+
};
|
|
465
|
+
input?: FormInputProps<FormElements>;
|
|
466
|
+
rules?: FormRulesOptions;
|
|
467
|
+
};
|
|
468
|
+
declare function FormItem(props: FormItemProps): react_jsx_runtime.JSX.Element;
|
|
469
|
+
declare namespace FormItem {
|
|
470
|
+
var displayName: string;
|
|
471
|
+
var whyDidYouRender: boolean;
|
|
472
|
+
}
|
|
473
|
+
|
|
474
|
+
type FormProps<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes, Rules extends FormRules = typeof FormDefaultRules> = {
|
|
475
|
+
items: FormItemProps<FormElements, InferFormRulesOptions<Rules>>[];
|
|
413
476
|
onSubmit?: (values: Values) => Promise<void>;
|
|
414
|
-
|
|
477
|
+
Elements?: Partial<FormElements>;
|
|
478
|
+
lang?: Partial<FormLang>;
|
|
415
479
|
defaultValues?: Values;
|
|
480
|
+
rules?: typeof FormDefaultRules & Rules;
|
|
416
481
|
};
|
|
417
|
-
|
|
482
|
+
/**
|
|
483
|
+
* FormContainer component is a wrapper that provides context and state management for form elements.
|
|
484
|
+
* It initializes form states such as values, errors, submitting status, elements, language, and rules.
|
|
485
|
+
*
|
|
486
|
+
* @template Values - The type of form values, defaults to Record<string, any>.
|
|
487
|
+
* @template FormElements - The type of form elements, defaults to FormElementTypes.
|
|
488
|
+
* @template Rules - The type of form rules, defaults to FormDefaultRules.
|
|
489
|
+
*
|
|
490
|
+
* @param {FormProps<Values, FormElements, Rules>} props - The properties for the FormContainer component.
|
|
491
|
+
* @param {Values} props.defaultValues - The default values for the form fields.
|
|
492
|
+
* @param {FormElements} props.Elements - The form elements to be used in the form.
|
|
493
|
+
* @param {Rules} props.rules - The validation rules for the form fields.
|
|
494
|
+
* @param {FormLang} props.lang - The language settings for the form.
|
|
495
|
+
* @param {Partial<FormContextProps>} props - Additional properties for the form context.
|
|
496
|
+
*
|
|
497
|
+
* @returns {JSX.Element} The FormContainer component.
|
|
498
|
+
*/
|
|
499
|
+
declare function FormContainer<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes, Rules extends FormRules = typeof FormDefaultRules>({ defaultValues, Elements, rules, lang, ...props }: FormProps<Values, FormElements, Rules>): react_jsx_runtime.JSX.Element;
|
|
500
|
+
declare namespace FormContainer {
|
|
501
|
+
var displayName: string;
|
|
502
|
+
var whyDidYouRender: boolean;
|
|
503
|
+
}
|
|
418
504
|
|
|
419
|
-
type FormContextProps<Values extends Record<string, any> = Record<string, any
|
|
505
|
+
type FormContextProps<Values extends Record<string, any> = Record<string, any>, Rules extends FormRules = typeof FormDefaultRules> = {
|
|
420
506
|
items: FormLabelElementProps[];
|
|
421
507
|
onSubmit: (values: Values) => Promise<void>;
|
|
422
508
|
Elements: FormElementTypes;
|
|
509
|
+
lang: FormLang;
|
|
510
|
+
rules: typeof FormDefaultRules & Rules;
|
|
423
511
|
submitting: boolean;
|
|
424
|
-
setSubmitting:
|
|
512
|
+
setSubmitting: Dispatch<SetStateAction<boolean>>;
|
|
425
513
|
values: Values;
|
|
426
|
-
setValues:
|
|
514
|
+
setValues: Dispatch<SetStateAction<Values>>;
|
|
515
|
+
errors: Record<string, Error>;
|
|
516
|
+
setErrors: Dispatch<SetStateAction<Record<string, Error>>>;
|
|
427
517
|
};
|
|
428
|
-
declare const FormContextProvider: <NewT extends FormContextProps<Record<string, any
|
|
429
|
-
value?: NewT
|
|
518
|
+
declare const FormContextProvider: <NewT extends FormContextProps<Record<string, any>, FormRules> = FormContextProps<Record<string, any>, FormRules>>(props: {
|
|
519
|
+
value?: Partial<NewT>;
|
|
430
520
|
children: react.ReactNode;
|
|
431
521
|
memo?: true | any[];
|
|
522
|
+
initializeStates?: Partial<NewT>;
|
|
432
523
|
}) => react.ReactNode;
|
|
433
|
-
declare const useFormContext: <NewT extends FormContextProps<Record<string, any
|
|
524
|
+
declare const useFormContext: <NewT extends FormContextProps<Record<string, any>, FormRules> = FormContextProps<Record<string, any>, FormRules>>() => Readonly<NewT>;
|
|
434
525
|
|
|
435
|
-
export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, FormContainer as Form, type FormContextProps, FormContextProvider, FormDefaultElements, type FormElementTypes, type FormProps, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useFormContext, useSplittingState, withFaasData };
|
|
526
|
+
export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, FormContainer as Form, type FormButtonElementProps, type FormContextProps, FormContextProvider, FormDefaultElements, FormDefaultLang, FormDefaultRules, type FormDefaultRulesOptions, type FormElementTypes, type FormInputElementProps, FormItem, type FormItemName, type FormItemProps, type FormLabelElementProps, type FormLang, type FormProps, type FormRule, type FormRules, type InferFormRulesOptions, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useFormContext, usePrevious, useSplittingState, validValues, withFaasData };
|