@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.
- package/package.json +4 -4
- 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.
|
|
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.
|
|
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.
|
|
38
|
+
"@faasjs/browser": "5.0.0-beta.3"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@faasjs/browser": "5.0.0-beta.
|
|
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 };
|