aport-tools 4.4.3 → 4.4.5
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/dist/forms/FormContext.d.ts +108 -3
- package/dist/forms/Stepper.d.ts +41 -0
- package/dist/index.esm.js +56 -14
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +56 -14
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
@@ -1,24 +1,129 @@
|
|
1
|
-
import React
|
1
|
+
import React from 'react';
|
2
2
|
interface FormContextProps {
|
3
|
+
/**
|
4
|
+
* Stores the current form values as an object.
|
5
|
+
* Each key is a form field name and each value is the current value of that field.
|
6
|
+
* Example:
|
7
|
+
* ```ts
|
8
|
+
* formValues = { name: "John", email: "john@example.com" };
|
9
|
+
* ```
|
10
|
+
*/
|
3
11
|
formValues: Record<string, any>;
|
12
|
+
/**
|
13
|
+
* A function to update a specific form field value.
|
14
|
+
* It takes the `name` of the form field and the new `value` to be set.
|
15
|
+
* Example usage:
|
16
|
+
* ```ts
|
17
|
+
* setFormValue('email', 'newemail@example.com');
|
18
|
+
* ```
|
19
|
+
*/
|
4
20
|
setFormValue: (name: string, value: any) => void;
|
21
|
+
/**
|
22
|
+
* Stores the current form errors as an object.
|
23
|
+
* Each key is a form field name and the value is an array of error messages for that field.
|
24
|
+
* Example:
|
25
|
+
* ```ts
|
26
|
+
* errors = { email: ['Email is required', 'Invalid email format'] };
|
27
|
+
* ```
|
28
|
+
*/
|
5
29
|
errors: Record<string, string[]>;
|
30
|
+
/**
|
31
|
+
* A function to update the errors for all form fields.
|
32
|
+
* It takes an object where each key is a form field name and the value is an array of error messages for that field.
|
33
|
+
* Example usage:
|
34
|
+
* ```ts
|
35
|
+
* setErrors({ email: ['Email is required', 'Invalid email format'] });
|
36
|
+
* ```
|
37
|
+
*/
|
6
38
|
setErrors: (errors: Record<string, string[]>) => void;
|
39
|
+
/**
|
40
|
+
* A function to trigger the form submission.
|
41
|
+
* It will invoke the `onSubmit` handler and handle form validation errors.
|
42
|
+
* Typically, this function would call `onSubmit` and handle errors by updating the `errors` state.
|
43
|
+
*/
|
7
44
|
handleSubmit: () => void;
|
45
|
+
handleFormSubmit: (formValues: Record<string, any>) => Promise<Record<string, string[]>>;
|
8
46
|
}
|
9
47
|
export declare const useFormContext: () => FormContextProps;
|
10
48
|
interface StepperProps {
|
49
|
+
/**
|
50
|
+
* Labels for each step (optional). If provided, these labels will display below each step indicator.
|
51
|
+
* Example: ['Step 1', 'Step 2', 'Step 3']
|
52
|
+
*/
|
11
53
|
steps?: string[];
|
54
|
+
/**
|
55
|
+
* Current step index (e.g., 0 for step 1, 1 for step 2).
|
56
|
+
* Determines the active step and progress display.
|
57
|
+
*/
|
58
|
+
currentStep: number;
|
59
|
+
/**
|
60
|
+
* Enables or disables the ability to click on a step to navigate to it.
|
61
|
+
* Default is `false`.
|
62
|
+
*/
|
12
63
|
presseable?: boolean;
|
64
|
+
/**
|
65
|
+
* Callback function that gets triggered when a step is clicked.
|
66
|
+
* Passes the index of the clicked step as an argument.
|
67
|
+
* Example: (stepIndex) => console.log(`Step ${stepIndex} clicked!`)
|
68
|
+
*/
|
13
69
|
onPress?: (stepIndex: number) => void;
|
14
|
-
|
70
|
+
/**
|
71
|
+
* Determines the shape of the step indicator.
|
72
|
+
* Options:
|
73
|
+
* - `'circular'` (default)
|
74
|
+
* - `'square'`
|
75
|
+
*/
|
76
|
+
stepStyle?: "circular" | "square";
|
77
|
+
/**
|
78
|
+
* Total number of steps in the stepper.
|
79
|
+
* Must be greater than or equal to 1.
|
80
|
+
*/
|
15
81
|
totalSteps: number;
|
82
|
+
/**
|
83
|
+
* Type of content displayed inside the step indicator.
|
84
|
+
* Options:
|
85
|
+
* - `'number'` (default): Displays the step index (e.g., 1, 2, 3).
|
86
|
+
* - `'icon'`: Displays a custom icon (requires the `icon` prop).
|
87
|
+
* - `'empty'`: Displays no content inside the step indicator.
|
88
|
+
*/
|
16
89
|
stepType?: "number" | "icon" | "empty";
|
90
|
+
/**
|
91
|
+
* Custom icon(s) to display inside step indicators when `stepType` is set to `'icon'`.
|
92
|
+
* Accepts:
|
93
|
+
* - A single icon for all steps (ReactNode or string URI).
|
94
|
+
* - An array of icons (ReactNode[] or string[]), one for each step.
|
95
|
+
* Example: ['https://example.com/icon1.png', 'https://example.com/icon2.png']
|
96
|
+
*/
|
17
97
|
icon?: React.ReactNode | React.ReactNode[];
|
18
98
|
}
|
19
99
|
interface FormProps {
|
20
|
-
|
100
|
+
/**
|
101
|
+
* The children elements to render inside the form.
|
102
|
+
* Typically this will be form fields or custom form components.
|
103
|
+
* This prop is required and must be passed as ReactNode(s).
|
104
|
+
*/
|
105
|
+
children: React.ReactNode;
|
106
|
+
/**
|
107
|
+
* The callback function to handle form submission.
|
108
|
+
* It receives the form values as an object (`values`) and must return a promise
|
109
|
+
* that resolves to an object containing errors for the form fields.
|
110
|
+
* Example:
|
111
|
+
* ```ts
|
112
|
+
* const onSubmit = async (values: Record<string, any>) => {
|
113
|
+
* // handle the submission and return errors if any
|
114
|
+
* return { fieldName: ['Error message'] };
|
115
|
+
* }
|
116
|
+
* ```
|
117
|
+
* The return value should be an object where the keys are form field names
|
118
|
+
* and the values are arrays of error messages for those fields.
|
119
|
+
*/
|
21
120
|
onSubmit: (values: Record<string, any>) => Promise<Record<string, string[]>>;
|
121
|
+
/**
|
122
|
+
* Optional stepper configuration for the form.
|
123
|
+
* If provided, it will integrate a stepper component to display form steps.
|
124
|
+
* This is an optional prop, so the form can be used without it.
|
125
|
+
* The `StepperProps` interface will define the expected props for the stepper.
|
126
|
+
*/
|
22
127
|
stepper?: StepperProps;
|
23
128
|
}
|
24
129
|
export declare const Form: React.FC<FormProps>;
|
package/dist/forms/Stepper.d.ts
CHANGED
@@ -1,12 +1,53 @@
|
|
1
1
|
import React from "react";
|
2
2
|
interface StepperProps {
|
3
|
+
/**
|
4
|
+
* Labels for each step (optional). If provided, these labels will display below each step indicator.
|
5
|
+
* Example: ['Step 1', 'Step 2', 'Step 3']
|
6
|
+
*/
|
3
7
|
steps?: string[];
|
8
|
+
/**
|
9
|
+
* Current step index (e.g., 0 for step 1, 1 for step 2).
|
10
|
+
* Determines the active step and progress display.
|
11
|
+
*/
|
4
12
|
currentStep: number;
|
13
|
+
/**
|
14
|
+
* Enables or disables the ability to click on a step to navigate to it.
|
15
|
+
* Default is `false`.
|
16
|
+
*/
|
5
17
|
presseable?: boolean;
|
18
|
+
/**
|
19
|
+
* Callback function that gets triggered when a step is clicked.
|
20
|
+
* Passes the index of the clicked step as an argument.
|
21
|
+
* Example: (stepIndex) => console.log(`Step ${stepIndex} clicked!`)
|
22
|
+
*/
|
6
23
|
onPress?: (stepIndex: number) => void;
|
24
|
+
/**
|
25
|
+
* Determines the shape of the step indicator.
|
26
|
+
* Options:
|
27
|
+
* - `'circular'` (default)
|
28
|
+
* - `'square'`
|
29
|
+
*/
|
7
30
|
stepStyle?: "circular" | "square";
|
31
|
+
/**
|
32
|
+
* Total number of steps in the stepper.
|
33
|
+
* Must be greater than or equal to 1.
|
34
|
+
*/
|
8
35
|
totalSteps: number;
|
36
|
+
/**
|
37
|
+
* Type of content displayed inside the step indicator.
|
38
|
+
* Options:
|
39
|
+
* - `'number'` (default): Displays the step index (e.g., 1, 2, 3).
|
40
|
+
* - `'icon'`: Displays a custom icon (requires the `icon` prop).
|
41
|
+
* - `'empty'`: Displays no content inside the step indicator.
|
42
|
+
*/
|
9
43
|
stepType?: "number" | "icon" | "empty";
|
44
|
+
/**
|
45
|
+
* Custom icon(s) to display inside step indicators when `stepType` is set to `'icon'`.
|
46
|
+
* Accepts:
|
47
|
+
* - A single icon for all steps (ReactNode or string URI).
|
48
|
+
* - An array of icons (ReactNode[] or string[]), one for each step.
|
49
|
+
* Example: ['https://example.com/icon1.png', 'https://example.com/icon2.png']
|
50
|
+
*/
|
10
51
|
icon?: React.ReactNode | React.ReactNode[];
|
11
52
|
}
|
12
53
|
declare const Stepper: React.FC<StepperProps>;
|
package/dist/index.esm.js
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
/*! aport-tools v4.4.
|
1
|
+
/*! aport-tools v4.4.5 | ISC */
|
2
2
|
import React, { useContext, useState, createContext, useCallback, useMemo } from 'react';
|
3
3
|
import { StyleSheet, Text as Text$1, Animated, View, TouchableOpacity, Image, TextInput, Modal, Pressable, FlatList, Keyboard, Platform, Alert, ActivityIndicator } from 'react-native';
|
4
4
|
import { ThemeContext } from 'aport-themes';
|
@@ -175,7 +175,7 @@ var Stepper = function Stepper(_a) {
|
|
175
175
|
currentStep = _a.currentStep,
|
176
176
|
_b = _a.presseable,
|
177
177
|
presseable = _b === void 0 ? false : _b,
|
178
|
-
|
178
|
+
onPress = _a.onPress,
|
179
179
|
_c = _a.stepStyle,
|
180
180
|
stepStyle = _c === void 0 ? "circular" : _c,
|
181
181
|
totalSteps = _a.totalSteps,
|
@@ -185,6 +185,30 @@ var Stepper = function Stepper(_a) {
|
|
185
185
|
var progressAnim = React.useRef(new Animated.Value(0)).current;
|
186
186
|
var theme = useContext(ThemeContext).theme;
|
187
187
|
var colors = theme.colors;
|
188
|
+
var _e = useFormContext(),
|
189
|
+
formValues = _e.formValues,
|
190
|
+
handleFormSubmit = _e.handleFormSubmit;
|
191
|
+
var handleStepPress = function handleStepPress(stepIndex) {
|
192
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
193
|
+
var errors;
|
194
|
+
return __generator(this, function (_a) {
|
195
|
+
switch (_a.label) {
|
196
|
+
case 0:
|
197
|
+
if (!presseable || stepIndex === currentStep) return [2 /*return*/];
|
198
|
+
return [4 /*yield*/, handleFormSubmit(formValues)];
|
199
|
+
case 1:
|
200
|
+
errors = _a.sent();
|
201
|
+
if (Object.keys(errors).length > 0) {
|
202
|
+
console.log("Validation failed. Cannot proceed to step", stepIndex);
|
203
|
+
return [2 /*return*/]; // Prevent step change
|
204
|
+
}
|
205
|
+
// Proceed to change step
|
206
|
+
onPress === null || onPress === void 0 ? void 0 : onPress(stepIndex);
|
207
|
+
return [2 /*return*/];
|
208
|
+
}
|
209
|
+
});
|
210
|
+
});
|
211
|
+
};
|
188
212
|
React.useEffect(function () {
|
189
213
|
Animated.timing(progressAnim, {
|
190
214
|
toValue: currentStep,
|
@@ -248,10 +272,13 @@ var Stepper = function Stepper(_a) {
|
|
248
272
|
case "number":
|
249
273
|
default:
|
250
274
|
return /*#__PURE__*/React.createElement(Text, {
|
251
|
-
|
252
|
-
|
253
|
-
|
254
|
-
|
275
|
+
b: true,
|
276
|
+
typeFont: "primary",
|
277
|
+
style: [currentStep >= index ? {
|
278
|
+
color: colors.textButton.hex
|
279
|
+
} : {
|
280
|
+
color: colors.text.hex
|
281
|
+
}]
|
255
282
|
}, index + 1);
|
256
283
|
}
|
257
284
|
};
|
@@ -268,13 +295,11 @@ var Stepper = function Stepper(_a) {
|
|
268
295
|
}],
|
269
296
|
disabled: !presseable,
|
270
297
|
onPress: function onPress() {
|
271
|
-
return
|
298
|
+
return handleStepPress(index);
|
272
299
|
}
|
273
300
|
}, /*#__PURE__*/React.createElement(View, {
|
274
|
-
style: [styles$9.step, stepStyle === "square" && styles$9.squareStep,
|
275
|
-
backgroundColor: colors.primary.hex
|
276
|
-
}, {
|
277
|
-
backgroundColor: colors.body.hex
|
301
|
+
style: [styles$9.step, stepStyle === "square" && styles$9.squareStep, {
|
302
|
+
backgroundColor: currentStep >= index ? colors.primary.hex : colors.body.hex
|
278
303
|
}]
|
279
304
|
}, renderStepContent(index)), steps && /*#__PURE__*/React.createElement(Text, {
|
280
305
|
style: styles$9.stepText
|
@@ -387,22 +412,39 @@ var Form = function Form(_a) {
|
|
387
412
|
});
|
388
413
|
});
|
389
414
|
};
|
415
|
+
var handleFormSubmit = function handleFormSubmit(formValues) {
|
416
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
417
|
+
var validationErrors;
|
418
|
+
return __generator(this, function (_a) {
|
419
|
+
switch (_a.label) {
|
420
|
+
case 0:
|
421
|
+
return [4 /*yield*/, onSubmit(formValues)];
|
422
|
+
case 1:
|
423
|
+
validationErrors = _a.sent();
|
424
|
+
setErrors(validationErrors);
|
425
|
+
return [2 /*return*/, validationErrors];
|
426
|
+
}
|
427
|
+
});
|
428
|
+
});
|
429
|
+
};
|
390
430
|
return /*#__PURE__*/React.createElement(FormContext.Provider, {
|
391
431
|
value: {
|
392
432
|
formValues: formValues,
|
393
433
|
setFormValue: setFormValue,
|
394
434
|
errors: errors,
|
395
435
|
setErrors: setErrors,
|
396
|
-
handleSubmit: handleSubmit
|
436
|
+
handleSubmit: handleSubmit,
|
437
|
+
handleFormSubmit: handleFormSubmit
|
397
438
|
}
|
398
439
|
}, stepper && (/*#__PURE__*/React.createElement(Stepper, {
|
399
440
|
steps: stepper.steps,
|
400
|
-
currentStep: stepper.
|
441
|
+
currentStep: stepper.currentStep,
|
401
442
|
presseable: stepper.presseable,
|
402
443
|
onPress: stepper.onPress,
|
403
444
|
totalSteps: stepper.totalSteps,
|
404
445
|
stepType: stepper.stepType,
|
405
|
-
icon: stepper.icon
|
446
|
+
icon: stepper.icon,
|
447
|
+
stepStyle: stepper.stepStyle
|
406
448
|
})), children);
|
407
449
|
};
|
408
450
|
|