@faasjs/react 5.0.0-beta.1 → 5.0.0-beta.3

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.
Files changed (2) hide show
  1. package/package.json +4 -4
  2. package/dist/index.d.cts +0 -629
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@faasjs/react",
3
- "version": "5.0.0-beta.1",
3
+ "version": "5.0.0-beta.3",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -9,7 +9,7 @@
9
9
  "exports": {
10
10
  ".": {
11
11
  "import": {
12
- "types": "./dist/index.d.mts",
12
+ "types": "./dist/index.d.ts",
13
13
  "default": "./dist/index.mjs"
14
14
  },
15
15
  "require": {
@@ -35,10 +35,10 @@
35
35
  "dist"
36
36
  ],
37
37
  "peerDependencies": {
38
- "@faasjs/browser": "5.0.0-beta.1"
38
+ "@faasjs/browser": "5.0.0-beta.3"
39
39
  },
40
40
  "devDependencies": {
41
- "@faasjs/browser": "5.0.0-beta.1",
41
+ "@faasjs/browser": "5.0.0-beta.3",
42
42
  "@types/react": "*",
43
43
  "react": "*"
44
44
  },
package/dist/index.d.cts DELETED
@@ -1,629 +0,0 @@
1
- import { FaasAction, FaasData, FaasParams } from '@faasjs/types';
2
- export { FaasAction, FaasData, FaasParams } from '@faasjs/types';
3
- import { Response, BaseUrl, ResponseError, Options, FaasBrowserClient } from '@faasjs/browser';
4
- export { Options, Response, ResponseError, ResponseHeaders } from '@faasjs/browser';
5
- import * as react from 'react';
6
- import { ReactNode, Dispatch, SetStateAction, RefObject, JSX, ReactElement, Component, ComponentType, ComponentProps, JSXElementConstructor } from 'react';
7
- import * as react_jsx_runtime from 'react/jsx-runtime';
8
-
9
- /**
10
- * Returns a constant value that is created by the given function.
11
- */
12
- declare function useConstant<T>(fn: () => T): T;
13
- declare namespace useConstant {
14
- var whyDidYouRender: boolean;
15
- }
16
-
17
- /**
18
- * Compares two values for deep equality.
19
- *
20
- * This function checks if two values are deeply equal by comparing their types and contents.
21
- * It handles various data types including primitives, arrays, dates, regular expressions, functions,
22
- * maps, sets, and promises.
23
- *
24
- * @param a - The first value to compare.
25
- * @param b - The second value to compare.
26
- * @returns `true` if the values are deeply equal, `false` otherwise.
27
- */
28
- declare function equal(a: any, b: any): boolean;
29
- /**
30
- * Custom hook that memoizes a value using deep equality comparison.
31
- *
32
- * @param value - The value to be memoized.
33
- * @returns The memoized value.
34
- */
35
- declare function useEqualMemoize(value: any): any;
36
- /**
37
- * Custom hook that works like `useEffect` but uses deep comparison on dependencies.
38
- *
39
- * @param callback - The effect callback function to run.
40
- * @param dependencies - The list of dependencies for the effect.
41
- * @returns The result of the `useEffect` hook with memoized dependencies.
42
- */
43
- declare function useEqualEffect(callback: React.EffectCallback, dependencies: any[]): void;
44
- /**
45
- * Custom hook that works like `useMemo` but uses deep comparison on dependencies.
46
- *
47
- * @param callback - The callback function to run.
48
- * @param dependencies - The list of dependencies.
49
- * @returns The result of the `useMemo` hook with memoized dependencies.
50
- */
51
- declare function useEqualMemo<T>(callback: () => T, dependencies: any[]): T;
52
- /**
53
- * Custom hook that works like `useCallback` but uses deep comparison on dependencies.
54
- *
55
- * @param callback - The callback function to run.
56
- * @param dependencies - The list of dependencies.
57
- * @returns The result of the `useCallback` hook with memoized dependencies.
58
- */
59
- declare function useEqualCallback<T extends (...args: any[]) => any>(callback: T, dependencies: any[]): T;
60
-
61
- /**
62
- * Creates a splitting context with the given default value.
63
- *
64
- * @param defaultValue The default value of the splitting context.
65
- *
66
- * @example
67
- * ```tsx
68
- * const { Provider, use } = createSplittingContext<{
69
- * value: number
70
- * setValue: React.Dispatch<React.SetStateAction<number>>
71
- * }>({
72
- * value: 0,
73
- * setValue: null,
74
- * })
75
- *
76
- * function ReaderComponent() {
77
- * const { value } = use()
78
- *
79
- * return <div>{value}</div>
80
- * }
81
- *
82
- * function WriterComponent() {
83
- * const { setValue } = use()
84
- *
85
- * return (
86
- * <button type='button' onClick={() => setValue((p: number) => p + 1)}>
87
- * Change
88
- * </button>
89
- * )
90
- * }
91
- *
92
- * function App() {
93
- * const [value, setValue] = useState(0)
94
- *
95
- * return (
96
- * <Provider value={{ value, setValue }}>
97
- * <ReaderComponent />
98
- * <WriterComponent />
99
- * </Provider>
100
- * )
101
- * }
102
- * ```
103
- */
104
- declare function createSplittingContext<T extends Record<string, any>>(defaultValue: {
105
- [K in keyof T]: Partial<T[K]> | null;
106
- } | (keyof T)[]): {
107
- /**
108
- * The provider component of the splitting context.
109
- *
110
- * @see https://faasjs.com/doc/react/functions/createSplittingContext.html#provider
111
- *
112
- * @example
113
- * ```tsx
114
- * function App() {
115
- * const [value, setValue] = useState(0)
116
- *
117
- * return (
118
- * <Provider value={{ value, setValue }}>
119
- * <ReaderComponent />
120
- * <WriterComponent />
121
- * </Provider>
122
- * )
123
- * }
124
- * ```
125
- */
126
- Provider<NewT extends T = T>(props: {
127
- value?: Partial<NewT>;
128
- children: ReactNode;
129
- /**
130
- * Whether to use memoization for the children.
131
- *
132
- * @default false
133
- *
134
- * `true`: memoize the children without dependencies.
135
- * `any[]`: memoize the children with specific dependencies.
136
- */
137
- memo?: true | any[];
138
- /**
139
- * 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.
140
- *
141
- * @example
142
- * ```tsx
143
- * <Provider
144
- * initializeStates={{
145
- * value: 0,
146
- * }}
147
- * >
148
- * // Children will have access to: value, setValue
149
- * </Provider>
150
- */
151
- initializeStates?: Partial<NewT>;
152
- }): ReactNode;
153
- /**
154
- * The hook to use the splitting context.
155
- *
156
- * @see https://faasjs.com/doc/react/functions/createSplittingContext.html#use
157
- *
158
- * @example
159
- * ```tsx
160
- * function ChildComponent() {
161
- * const { value, setValue } = use()
162
- *
163
- * return <div>{value}<button onClick={() => setValue(1)}>change value</button></div>
164
- * }
165
- * ```
166
- */
167
- use: <NewT extends T = T>() => Readonly<NewT>;
168
- };
169
-
170
- type SetPrefix<S extends string | number | symbol> = S extends string ? S extends `${infer First}${infer Rest}` ? `set${Capitalize<First>}${Rest}` : never : never;
171
- type StateSetters<T> = {
172
- [K in keyof T as SetPrefix<K>]: Dispatch<SetStateAction<T[K]>>;
173
- };
174
- type StatesWithSetters<T> = T & StateSetters<T>;
175
- /**
176
- * A hook that initializes and splits state variables and their corresponding setters.
177
- *
178
- * @template T - A generic type that extends a record with string keys and any values.
179
- * @param {T} initialStates - An object containing the initial states.
180
- *
181
- * @example
182
- * ```tsx
183
- * function Counter() {
184
- * const { count, setCount, name, setName } = useSplittingState({ count: 0, name: 'John' });
185
- *
186
- * return <>{name}: {count}</>
187
- * }
188
- * ```
189
- */
190
- declare function useSplittingState<T extends Record<string, unknown>>(initialStates: T): StatesWithSetters<T>;
191
-
192
- /**
193
- * Hook to store the previous value of a state or prop.
194
- *
195
- * @template T - The type of the value.
196
- * @param {T} value - The current value to be stored.
197
- * @returns {T | undefined} - The previous value, or undefined if there is no previous value.
198
- */
199
- declare function usePrevious<T = any>(value: T): T | undefined;
200
-
201
- /**
202
- * Custom hook that returns a stateful value and a ref to that value.
203
- *
204
- * @template T - The type of the value.
205
- * @param {T} initialValue - The initial value of the state.
206
- * @returns {[T, (value: T) => void, RefObject<T>]} - The stateful value, a function to set the value, and a ref to the value.
207
- *
208
- * @example
209
- * ```tsx
210
- * import { useStateRef } from '@faasjs/react'
211
- *
212
- * function MyComponent() {
213
- * const [value, setValue, ref] = useStateRef(0)
214
- *
215
- * return (
216
- * <div>
217
- * <p>Value: {value}</p>
218
- * <button onClick={() => setValue(value + 1)}>Increment</button>
219
- * <button onClick={() => console.log(ref.current)}>Submit</button>
220
- * </div>
221
- * )
222
- */
223
- declare function useStateRef<T = any>(initialValue?: T): [T, Dispatch<SetStateAction<T>>, RefObject<T>];
224
-
225
- /**
226
- * Injects FaasData props.
227
- */
228
- type FaasDataInjection<PathOrData extends FaasAction = any> = {
229
- action: PathOrData | string;
230
- params: Record<string, any>;
231
- loading: boolean;
232
- reloadTimes: number;
233
- data: FaasData<PathOrData>;
234
- error: any;
235
- promise: Promise<Response<FaasData<PathOrData>>>;
236
- /**
237
- * Reloads data with new or existing parameters.
238
- *
239
- * **Note**: It will sets skip to false before loading data.
240
- */
241
- reload(params?: Record<string, any>): Promise<Response<PathOrData>>;
242
- setData: React.Dispatch<React.SetStateAction<FaasData<PathOrData>>>;
243
- setLoading: React.Dispatch<React.SetStateAction<boolean>>;
244
- setPromise: React.Dispatch<React.SetStateAction<Promise<Response<FaasData<PathOrData>>>>>;
245
- setError: React.Dispatch<React.SetStateAction<any>>;
246
- };
247
- type FaasDataWrapperProps<PathOrData extends FaasAction> = {
248
- render?(args: FaasDataInjection<PathOrData>): JSX.Element | JSX.Element[];
249
- children?: React.ReactElement<Partial<FaasDataInjection<PathOrData>>>;
250
- fallback?: JSX.Element | false;
251
- action: PathOrData | string;
252
- params?: FaasParams<PathOrData>;
253
- onDataChange?(args: FaasDataInjection<PathOrData>): void;
254
- /** use custom data, should work with setData */
255
- data?: FaasData<PathOrData>;
256
- /** use custom setData, should work with data */
257
- setData?: React.Dispatch<React.SetStateAction<FaasData<PathOrData>>>;
258
- baseUrl?: BaseUrl;
259
- };
260
- declare function FaasDataWrapper<PathOrData extends FaasAction>(props: FaasDataWrapperProps<PathOrData>): JSX.Element;
261
- declare namespace FaasDataWrapper {
262
- var displayName: string;
263
- var whyDidYouRender: boolean;
264
- }
265
- /**
266
- * HOC to wrap a component with FaasDataWrapper
267
- *
268
- * @example
269
- * ```tsx
270
- * const MyComponent = withFaasData(({ data }) => <div>{data.name}</div>, { action: 'test', params: { a: 1 } })
271
- * ```
272
- */
273
- declare function withFaasData<PathOrData extends FaasAction, TComponentProps extends Required<FaasDataInjection<PathOrData>> = Required<FaasDataInjection<PathOrData>>>(Component: React.FC<TComponentProps & Record<string, any>>, faasProps: FaasDataWrapperProps<PathOrData>): React.FC<Omit<TComponentProps, keyof FaasDataInjection<PathOrData>> & Record<string, any>>;
274
-
275
- type useFaasOptions<PathOrData extends FaasAction> = {
276
- params?: FaasParams<PathOrData>;
277
- data?: FaasData<PathOrData>;
278
- setData?: React.Dispatch<React.SetStateAction<FaasData<PathOrData>>>;
279
- /**
280
- * If skip is true, the request will not be sent.
281
- *
282
- * However, you can still use reload to send the request.
283
- */
284
- skip?: boolean | ((params: FaasParams<PathOrData>) => boolean);
285
- /** Send the last request after milliseconds */
286
- debounce?: number;
287
- baseUrl?: BaseUrl;
288
- };
289
- /**
290
- * Request faas server with React hook
291
- *
292
- * @param action {string} action name
293
- * @param defaultParams {object} initial action params
294
- * @returns {FaasDataInjection<any>}
295
- *
296
- * @example
297
- * ```tsx
298
- * function Post ({ id }) {
299
- * const { data } = useFaas<{ title: string }>('post/get', { id })
300
- * return <h1>{data.title}</h1>
301
- * }
302
- * ```
303
- */
304
- declare function useFaas<PathOrData extends FaasAction>(action: PathOrData | string, defaultParams: FaasParams<PathOrData>, options?: useFaasOptions<PathOrData>): FaasDataInjection<PathOrData>;
305
- declare namespace useFaas {
306
- var whyDidYouRender: boolean;
307
- }
308
-
309
- type OnError = (action: string, params: Record<string, any>) => (res: ResponseError) => Promise<void>;
310
- type FaasReactClientOptions = {
311
- /** @default `/` */
312
- baseUrl?: BaseUrl;
313
- options?: Options;
314
- /**
315
- * @example
316
- * ```ts
317
- * onError: (action, params) => async (res) => {
318
- * console.error(action, params, res)
319
- * }
320
- * ```
321
- */
322
- onError?: OnError;
323
- };
324
- type FaasReactClientInstance = {
325
- id: string;
326
- faas: <PathOrData extends FaasAction>(action: PathOrData | string, params: FaasParams<PathOrData>, options?: Options) => Promise<Response<FaasData<PathOrData>>>;
327
- useFaas: <PathOrData extends FaasAction>(action: PathOrData | string, defaultParams: FaasParams<PathOrData>, options?: useFaasOptions<PathOrData>) => FaasDataInjection<PathOrData>;
328
- FaasDataWrapper<PathOrData extends FaasAction>(props: FaasDataWrapperProps<PathOrData>): JSX.Element;
329
- onError: OnError;
330
- browserClient: FaasBrowserClient;
331
- };
332
- /**
333
- * Before use faas, you should initialize a FaasReactClient.
334
- *
335
- * @param props.baseUrl {string} The baseUrl of your faas server
336
- * @param props.options {Options} The options of client
337
- * @returns {FaasReactClientInstance}
338
- *
339
- * @example
340
- * ```ts
341
- * const client = FaasReactClient({
342
- * baseUrl: 'localhost:8080/api/'
343
- * })
344
- * ```
345
- */
346
- declare function FaasReactClient({ baseUrl, options, onError }?: FaasReactClientOptions): FaasReactClientInstance;
347
- /**
348
- * Get FaasReactClient instance
349
- *
350
- * @param host {string} empty string for default host
351
- * @returns {FaasReactClientInstance}
352
- *
353
- * @example
354
- * ```ts
355
- * getClient()
356
- * // or
357
- * getClient('another-host')
358
- * ```
359
- */
360
- declare function getClient(host?: string): FaasReactClientInstance;
361
-
362
- /**
363
- * Request faas server
364
- *
365
- * @param action {string} action name
366
- * @param params {object} action params
367
- * @returns {Promise<Response<any>>}
368
- *
369
- * @example
370
- * ```ts
371
- * faas<{ title: string }>('post/get', { id: 1 }).then(res => {
372
- * console.log(res.data.title)
373
- * })
374
- * ```
375
- */
376
- declare function faas<PathOrData extends FaasAction>(action: PathOrData | string, params: FaasParams<PathOrData>, options?: Options): Promise<Response<FaasData<PathOrData>>>;
377
-
378
- interface ErrorBoundaryProps {
379
- children?: ReactNode;
380
- onError?: (error: Error | null, info: any) => void;
381
- errorChildren?: ReactElement<ErrorChildrenProps>;
382
- }
383
- type ErrorChildrenProps = {
384
- error?: Error;
385
- info?: any;
386
- errorMessage?: string;
387
- errorDescription?: string;
388
- };
389
- declare class ErrorBoundary extends Component<ErrorBoundaryProps, {
390
- error?: Error;
391
- info?: {
392
- componentStack?: string;
393
- };
394
- }> {
395
- static displayName: string;
396
- static whyDidYouRender: boolean;
397
- constructor(props: ErrorBoundaryProps);
398
- componentDidCatch(error: Error | null, info: any): void;
399
- render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode>> | react_jsx_runtime.JSX.Element;
400
- }
401
-
402
- type OptionalWrapperProps<TWrapper extends ComponentType<{
403
- children: ReactNode;
404
- }> = any> = {
405
- condition: boolean;
406
- Wrapper: TWrapper;
407
- wrapperProps?: ComponentProps<TWrapper>;
408
- children: ReactNode;
409
- };
410
- /**
411
- * A wrapper component that conditionally wraps its children with a provided wrapper component.
412
- *
413
- * @example
414
- * ```tsx
415
- * import { OptionalWrapper } from '@faasjs/react'
416
- *
417
- * const Wrapper = ({ children }: { children: React.ReactNode }) => (
418
- * <div className='wrapper'>{children}</div>
419
- * )
420
- *
421
- * const App = () => (
422
- * <OptionalWrapper condition={true} Wrapper={Wrapper}>
423
- * <span>Test</span>
424
- * </OptionalWrapper>
425
- * )
426
- * ```
427
- */
428
- declare const OptionalWrapper: React.FC<OptionalWrapperProps> & {
429
- whyDidYouRender: boolean;
430
- };
431
-
432
- /**
433
- * Props for the FormButtonElement component.
434
- *
435
- * @property {React.ReactNode} [children] - The content to be displayed inside the button.
436
- * @property {boolean} disabled - Indicates whether the button is disabled.
437
- * @property {() => Promise<void>} submit - A function to be called when the button is clicked, which returns a promise.
438
- */
439
- type FormButtonElementProps = {
440
- children?: React.ReactNode;
441
- submitting: boolean;
442
- submit: () => Promise<void>;
443
- };
444
-
445
- /**
446
- * Props for the Form Input Element component.
447
- *
448
- * @property {string} name - The name of the input element.
449
- * @property {any} value - The current value of the input element.
450
- * @property {(value: any) => void} onChange - Callback function to handle changes to the input value.
451
- */
452
- type FormInputElementProps = {
453
- name: string;
454
- value: any;
455
- onChange: (value: any) => void;
456
- };
457
-
458
- /**
459
- * Props for the FormLabelElement component.
460
- *
461
- * @typedef {Object} FormLabelElementProps
462
- * @property {string} name - The name of the form element.
463
- * @property {ReactNode} [title] - Optional title for the form element.
464
- * @property {ReactNode} [description] - Optional description for the form element.
465
- * @property {Error} [error] - Optional error associated with the form element.
466
- * @property {ReactNode} children - The child elements, typically an input element.
467
- */
468
- type FormLabelElementProps = {
469
- name: string;
470
- title?: ReactNode;
471
- description?: ReactNode;
472
- error?: Error;
473
- /** as Input element */
474
- children: ReactNode;
475
- };
476
-
477
- /**
478
- * Represents the types of form elements used in the form.
479
- *
480
- * @typedef {Object} FormElementTypes
481
- * @property {ComponentType<FormLabelElementProps>} Label - The component type for the form label element.
482
- * @property {ComponentType<FormInputElementProps>} Input - The component type for the form input element.
483
- * @property {ComponentType<FormButtonElementProps>} Button - The component type for the form button element.
484
- */
485
- type FormElementTypes = {
486
- Label: ComponentType<FormLabelElementProps>;
487
- Input: ComponentType<FormInputElementProps>;
488
- Button: ComponentType<FormButtonElementProps>;
489
- };
490
- declare const FormDefaultElements: FormElementTypes;
491
-
492
- declare const FormDefaultLang: {
493
- submit: string;
494
- required: string;
495
- string: string;
496
- number: string;
497
- };
498
- type FormLang = typeof FormDefaultLang;
499
-
500
- /**
501
- * A type representing a form validation rule.
502
- *
503
- * @template Options - The type of the options that can be passed to the rule.
504
- *
505
- * @param value - The value to be validated.
506
- * @param options - Optional. Additional options that can be used in the validation.
507
- * @param lang - Optional. The language settings that can be used in the validation.
508
- *
509
- * @returns A promise that resolves if the validation is successful, or rejects with an error if the validation fails.
510
- *
511
- * @example
512
- * ```ts
513
- * async function required(value: any, options: boolean, lang?: FormLang) {
514
- * if (value === null || value === undefined || value === '' || Number.isNaN(value))
515
- * throw Error(lang?.required)
516
- * }
517
- * ```
518
- */
519
- type FormRule<Options = any> = (value: any, options?: Options, lang?: FormLang) => Promise<void>;
520
- type InferRuleOption<T> = T extends (value: any, options: infer O, lang?: FormLang) => Promise<void> ? O : never;
521
- /**
522
- * A type representing a set of form validation rules.
523
- *
524
- * @typedef {Record<string, FormRule>} FormRules
525
- *
526
- * Each key in the record represents the name of a form field, and the corresponding value is a `FormRule` object that defines the validation rules for that field.
527
- */
528
- type FormRules = Record<string, FormRule>;
529
- type InferFormRulesOptions<T> = {
530
- [K in keyof T]: InferRuleOption<T[K]>;
531
- };
532
- /**
533
- * Default validation rules for a form.
534
- *
535
- * @constant
536
- * @type {FormRules}
537
- */
538
- declare const FormDefaultRules: FormRules;
539
- type FormDefaultRulesOptions = InferFormRulesOptions<typeof FormDefaultRules>;
540
- declare function validValues(rules: FormRules, items: FormItemProps[], values: Record<string, any>, lang: FormLang): Promise<Record<string, Error>>;
541
-
542
- type InferFormInputProps<T extends ComponentType<FormInputElementProps> | JSXElementConstructor<any>> = T extends ComponentType<FormInputElementProps> ? Omit<ComponentProps<T>, 'name' | 'value' | 'onChange'> : Omit<ComponentProps<T>, 'name' | 'value'>;
543
- type FormInputProps<FormElements extends FormElementTypes = FormElementTypes> = {
544
- Input?: ComponentType<FormInputElementProps>;
545
- props?: InferFormInputProps<FormElements['Input']>;
546
- };
547
-
548
- type FormItemName = string;
549
- type FormItemProps<FormElements extends FormElementTypes = FormElementTypes, FormRulesOptions extends Record<string, any> = FormDefaultRulesOptions> = {
550
- name: FormItemName;
551
- label?: Omit<FormLabelElementProps, 'name' | 'children'> & {
552
- Label?: ComponentType<FormLabelElementProps>;
553
- };
554
- input?: FormInputProps<FormElements>;
555
- rules?: FormRulesOptions;
556
- };
557
- declare function FormItem(props: FormItemProps): react_jsx_runtime.JSX.Element;
558
- declare namespace FormItem {
559
- var displayName: string;
560
- var whyDidYouRender: boolean;
561
- }
562
-
563
- type FormProps<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes, Rules extends FormRules = typeof FormDefaultRules> = {
564
- items: FormItemProps<FormElements, InferFormRulesOptions<Rules>>[];
565
- onSubmit?: (values: Values) => Promise<void>;
566
- Elements?: Partial<FormElements>;
567
- lang?: Partial<FormLang>;
568
- defaultValues?: Values;
569
- rules?: typeof FormDefaultRules & Rules;
570
- };
571
- /**
572
- * FormContainer component is a wrapper that provides context and state management for form elements.
573
- * It initializes form states such as values, errors, submitting status, elements, language, and rules.
574
- *
575
- * @template Values - The type of form values, defaults to Record<string, any>.
576
- * @template FormElements - The type of form elements, defaults to FormElementTypes.
577
- * @template Rules - The type of form rules, defaults to FormDefaultRules.
578
- *
579
- * @param {FormProps<Values, FormElements, Rules>} props - The properties for the FormContainer component.
580
- * @param {Values} props.defaultValues - The default values for the form fields.
581
- * @param {FormElements} props.Elements - The form elements to be used in the form.
582
- * @param {Rules} props.rules - The validation rules for the form fields.
583
- * @param {FormLang} props.lang - The language settings for the form.
584
- * @param {Partial<FormContextProps>} props - Additional properties for the form context.
585
- *
586
- * @returns {JSX.Element} The FormContainer component.
587
- *
588
- * @example
589
- * ```tsx
590
- * import { Form } from '@faasjs/react'
591
- *
592
- * function MyForm() {
593
- * return <Form
594
- * items={[
595
- * { name: 'name' },
596
- * ]}
597
- * />
598
- * }
599
- * ```
600
- */
601
- declare function FormContainer<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes, Rules extends FormRules = typeof FormDefaultRules>({ defaultValues, Elements, rules, lang, items, ...props }: FormProps<Values, FormElements, Rules>): react_jsx_runtime.JSX.Element;
602
- declare namespace FormContainer {
603
- var displayName: string;
604
- var whyDidYouRender: boolean;
605
- }
606
-
607
- type FormContextProps<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes, Rules extends FormRules = typeof FormDefaultRules> = {
608
- items: FormItemProps<FormElements, InferFormRulesOptions<Rules>>[];
609
- onSubmit: (values: Values) => Promise<void>;
610
- Elements: FormElementTypes;
611
- lang: FormLang;
612
- rules: typeof FormDefaultRules & Rules;
613
- submitting: boolean;
614
- setSubmitting: Dispatch<SetStateAction<boolean>>;
615
- values: Values;
616
- setValues: Dispatch<SetStateAction<Values>>;
617
- errors: Record<string, Error>;
618
- setErrors: Dispatch<SetStateAction<Record<string, Error>>>;
619
- valuesRef: RefObject<Values>;
620
- };
621
- declare const FormContextProvider: <NewT extends FormContextProps<Record<string, any>, FormElementTypes, FormRules> = FormContextProps<Record<string, any>, FormElementTypes, FormRules>>(props: {
622
- value?: Partial<NewT>;
623
- children: react.ReactNode;
624
- memo?: true | any[];
625
- initializeStates?: Partial<NewT>;
626
- }) => react.ReactNode;
627
- declare const useFormContext: <NewT extends FormContextProps<Record<string, any>, FormElementTypes, FormRules> = FormContextProps<Record<string, any>, FormElementTypes, FormRules>>() => Readonly<NewT>;
628
-
629
- 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, useStateRef, validValues, withFaasData };