aport-tools 4.4.2 → 4.4.4
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 +107 -3
- package/dist/forms/Stepper.d.ts +41 -0
- package/dist/index.esm.js +46 -15
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +45 -14
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,24 +1,128 @@
|
|
|
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;
|
|
8
45
|
}
|
|
9
46
|
export declare const useFormContext: () => FormContextProps;
|
|
10
47
|
interface StepperProps {
|
|
48
|
+
/**
|
|
49
|
+
* Labels for each step (optional). If provided, these labels will display below each step indicator.
|
|
50
|
+
* Example: ['Step 1', 'Step 2', 'Step 3']
|
|
51
|
+
*/
|
|
11
52
|
steps?: string[];
|
|
53
|
+
/**
|
|
54
|
+
* Current step index (e.g., 0 for step 1, 1 for step 2).
|
|
55
|
+
* Determines the active step and progress display.
|
|
56
|
+
*/
|
|
57
|
+
currentStep: number;
|
|
58
|
+
/**
|
|
59
|
+
* Enables or disables the ability to click on a step to navigate to it.
|
|
60
|
+
* Default is `false`.
|
|
61
|
+
*/
|
|
12
62
|
presseable?: boolean;
|
|
63
|
+
/**
|
|
64
|
+
* Callback function that gets triggered when a step is clicked.
|
|
65
|
+
* Passes the index of the clicked step as an argument.
|
|
66
|
+
* Example: (stepIndex) => console.log(`Step ${stepIndex} clicked!`)
|
|
67
|
+
*/
|
|
13
68
|
onPress?: (stepIndex: number) => void;
|
|
14
|
-
|
|
69
|
+
/**
|
|
70
|
+
* Determines the shape of the step indicator.
|
|
71
|
+
* Options:
|
|
72
|
+
* - `'circular'` (default)
|
|
73
|
+
* - `'square'`
|
|
74
|
+
*/
|
|
75
|
+
stepStyle?: "circular" | "square";
|
|
76
|
+
/**
|
|
77
|
+
* Total number of steps in the stepper.
|
|
78
|
+
* Must be greater than or equal to 1.
|
|
79
|
+
*/
|
|
15
80
|
totalSteps: number;
|
|
81
|
+
/**
|
|
82
|
+
* Type of content displayed inside the step indicator.
|
|
83
|
+
* Options:
|
|
84
|
+
* - `'number'` (default): Displays the step index (e.g., 1, 2, 3).
|
|
85
|
+
* - `'icon'`: Displays a custom icon (requires the `icon` prop).
|
|
86
|
+
* - `'empty'`: Displays no content inside the step indicator.
|
|
87
|
+
*/
|
|
16
88
|
stepType?: "number" | "icon" | "empty";
|
|
89
|
+
/**
|
|
90
|
+
* Custom icon(s) to display inside step indicators when `stepType` is set to `'icon'`.
|
|
91
|
+
* Accepts:
|
|
92
|
+
* - A single icon for all steps (ReactNode or string URI).
|
|
93
|
+
* - An array of icons (ReactNode[] or string[]), one for each step.
|
|
94
|
+
* Example: ['https://example.com/icon1.png', 'https://example.com/icon2.png']
|
|
95
|
+
*/
|
|
17
96
|
icon?: React.ReactNode | React.ReactNode[];
|
|
18
97
|
}
|
|
19
98
|
interface FormProps {
|
|
20
|
-
|
|
99
|
+
/**
|
|
100
|
+
* The children elements to render inside the form.
|
|
101
|
+
* Typically this will be form fields or custom form components.
|
|
102
|
+
* This prop is required and must be passed as ReactNode(s).
|
|
103
|
+
*/
|
|
104
|
+
children: React.ReactNode;
|
|
105
|
+
/**
|
|
106
|
+
* The callback function to handle form submission.
|
|
107
|
+
* It receives the form values as an object (`values`) and must return a promise
|
|
108
|
+
* that resolves to an object containing errors for the form fields.
|
|
109
|
+
* Example:
|
|
110
|
+
* ```ts
|
|
111
|
+
* const onSubmit = async (values: Record<string, any>) => {
|
|
112
|
+
* // handle the submission and return errors if any
|
|
113
|
+
* return { fieldName: ['Error message'] };
|
|
114
|
+
* }
|
|
115
|
+
* ```
|
|
116
|
+
* The return value should be an object where the keys are form field names
|
|
117
|
+
* and the values are arrays of error messages for those fields.
|
|
118
|
+
*/
|
|
21
119
|
onSubmit: (values: Record<string, any>) => Promise<Record<string, string[]>>;
|
|
120
|
+
/**
|
|
121
|
+
* Optional stepper configuration for the form.
|
|
122
|
+
* If provided, it will integrate a stepper component to display form steps.
|
|
123
|
+
* This is an optional prop, so the form can be used without it.
|
|
124
|
+
* The `StepperProps` interface will define the expected props for the stepper.
|
|
125
|
+
*/
|
|
22
126
|
stepper?: StepperProps;
|
|
23
127
|
}
|
|
24
128
|
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,6 +1,6 @@
|
|
|
1
|
-
/*! aport-tools v4.4.
|
|
1
|
+
/*! aport-tools v4.4.4 | ISC */
|
|
2
2
|
import React, { useContext, useState, createContext, useCallback, useMemo } from 'react';
|
|
3
|
-
import { StyleSheet, Text as Text$1, Animated, View, TouchableOpacity, TextInput, Modal, Pressable, FlatList, Keyboard, Platform,
|
|
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';
|
|
5
5
|
import * as ImagePicker from 'expo-image-picker';
|
|
6
6
|
|
|
@@ -212,17 +212,50 @@ var Stepper = function Stepper(_a) {
|
|
|
212
212
|
switch (stepType) {
|
|
213
213
|
case "icon":
|
|
214
214
|
if (Array.isArray(icon)) {
|
|
215
|
-
|
|
215
|
+
var stepIcon = icon[index];
|
|
216
|
+
if (typeof stepIcon === "string") {
|
|
217
|
+
return /*#__PURE__*/React.createElement(Image, {
|
|
218
|
+
source: {
|
|
219
|
+
uri: stepIcon
|
|
220
|
+
},
|
|
221
|
+
style: {
|
|
222
|
+
width: 24,
|
|
223
|
+
height: 24
|
|
224
|
+
},
|
|
225
|
+
resizeMode: "contain"
|
|
226
|
+
});
|
|
227
|
+
} else {
|
|
228
|
+
console.error("Invalid icon value for step ".concat(index, ". Expected a string URI."));
|
|
229
|
+
return null;
|
|
230
|
+
}
|
|
216
231
|
}
|
|
217
|
-
|
|
218
|
-
|
|
232
|
+
if (typeof icon === "string") {
|
|
233
|
+
return /*#__PURE__*/React.createElement(Image, {
|
|
234
|
+
source: {
|
|
235
|
+
uri: icon
|
|
236
|
+
},
|
|
237
|
+
style: {
|
|
238
|
+
width: 24,
|
|
239
|
+
height: 24
|
|
240
|
+
},
|
|
241
|
+
resizeMode: "contain"
|
|
242
|
+
});
|
|
243
|
+
}
|
|
244
|
+
console.error("Icon prop must be a string or an array of strings.");
|
|
245
|
+
return null;
|
|
219
246
|
case "empty":
|
|
220
247
|
return null;
|
|
221
|
-
// Render nothing inside the step circle
|
|
222
248
|
case "number":
|
|
223
249
|
default:
|
|
224
|
-
return
|
|
225
|
-
|
|
250
|
+
return /*#__PURE__*/React.createElement(Text, {
|
|
251
|
+
b: true,
|
|
252
|
+
typeFont: "primary",
|
|
253
|
+
style: [currentStep >= index ? {
|
|
254
|
+
color: colors.textButton.hex
|
|
255
|
+
} : {
|
|
256
|
+
color: colors.text.hex
|
|
257
|
+
}]
|
|
258
|
+
}, index + 1);
|
|
226
259
|
}
|
|
227
260
|
};
|
|
228
261
|
return /*#__PURE__*/React.createElement(View, {
|
|
@@ -241,10 +274,8 @@ var Stepper = function Stepper(_a) {
|
|
|
241
274
|
return _onPress && _onPress(index);
|
|
242
275
|
}
|
|
243
276
|
}, /*#__PURE__*/React.createElement(View, {
|
|
244
|
-
style: [styles$9.step, stepStyle === "square" && styles$9.squareStep,
|
|
245
|
-
backgroundColor: colors.primary.hex
|
|
246
|
-
}, {
|
|
247
|
-
backgroundColor: colors.body.hex
|
|
277
|
+
style: [styles$9.step, stepStyle === "square" && styles$9.squareStep, {
|
|
278
|
+
backgroundColor: currentStep >= index ? colors.primary.hex : colors.body.hex
|
|
248
279
|
}]
|
|
249
280
|
}, renderStepContent(index)), steps && /*#__PURE__*/React.createElement(Text, {
|
|
250
281
|
style: styles$9.stepText
|
|
@@ -254,7 +285,8 @@ var Stepper = function Stepper(_a) {
|
|
|
254
285
|
style: styles$9.separatorBackground
|
|
255
286
|
}), /*#__PURE__*/React.createElement(Animated.View, {
|
|
256
287
|
style: [styles$9.separatorProgress, {
|
|
257
|
-
width: getSeparatorWidth(index)
|
|
288
|
+
width: getSeparatorWidth(index),
|
|
289
|
+
backgroundColor: colors.primary.hex
|
|
258
290
|
}]
|
|
259
291
|
}))));
|
|
260
292
|
}));
|
|
@@ -307,7 +339,6 @@ var styles$9 = StyleSheet.create({
|
|
|
307
339
|
separatorProgress: {
|
|
308
340
|
position: "absolute",
|
|
309
341
|
height: "100%",
|
|
310
|
-
backgroundColor: "#3498db",
|
|
311
342
|
borderRadius: 2
|
|
312
343
|
}
|
|
313
344
|
});
|
|
@@ -367,7 +398,7 @@ var Form = function Form(_a) {
|
|
|
367
398
|
}
|
|
368
399
|
}, stepper && (/*#__PURE__*/React.createElement(Stepper, {
|
|
369
400
|
steps: stepper.steps,
|
|
370
|
-
currentStep: stepper.
|
|
401
|
+
currentStep: stepper.currentStep,
|
|
371
402
|
presseable: stepper.presseable,
|
|
372
403
|
onPress: stepper.onPress,
|
|
373
404
|
totalSteps: stepper.totalSteps,
|