aport-tools 4.4.4 → 4.4.6
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/forms/FormContext.d.ts +1 -0
- package/dist/index.esm.js +54 -6
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +54 -6
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
@@ -42,6 +42,7 @@ interface FormContextProps {
|
|
42
42
|
* Typically, this function would call `onSubmit` and handle errors by updating the `errors` state.
|
43
43
|
*/
|
44
44
|
handleSubmit: () => void;
|
45
|
+
handleFormSubmit: (formValues: Record<string, any>) => Promise<Record<string, string[]>>;
|
45
46
|
}
|
46
47
|
export declare const useFormContext: () => FormContextProps;
|
47
48
|
interface StepperProps {
|
package/dist/index.esm.js
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
/*! aport-tools v4.4.
|
1
|
+
/*! aport-tools v4.4.6 | 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,37 @@ 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 _f = useState(false),
|
192
|
+
errorBack = _f[0],
|
193
|
+
seterrorBack = _f[1];
|
194
|
+
var handleStepPress = function handleStepPress(stepIndex) {
|
195
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
196
|
+
var errors;
|
197
|
+
return __generator(this, function (_a) {
|
198
|
+
switch (_a.label) {
|
199
|
+
case 0:
|
200
|
+
if (!presseable || stepIndex === currentStep) return [2 /*return*/];
|
201
|
+
if (!(stepIndex > currentStep)) return [3 /*break*/, 2];
|
202
|
+
return [4 /*yield*/, handleFormSubmit(formValues)];
|
203
|
+
case 1:
|
204
|
+
errors = _a.sent();
|
205
|
+
if (Object.keys(errors).length > 0) {
|
206
|
+
console.log("Validation failed. Cannot proceed to step", stepIndex);
|
207
|
+
seterrorBack(true);
|
208
|
+
return [2 /*return*/]; // Prevent step change
|
209
|
+
}
|
210
|
+
_a.label = 2;
|
211
|
+
case 2:
|
212
|
+
// Proceed to change step
|
213
|
+
onPress === null || onPress === void 0 ? void 0 : onPress(stepIndex);
|
214
|
+
return [2 /*return*/];
|
215
|
+
}
|
216
|
+
});
|
217
|
+
});
|
218
|
+
};
|
188
219
|
React.useEffect(function () {
|
189
220
|
Animated.timing(progressAnim, {
|
190
221
|
toValue: currentStep,
|
@@ -271,11 +302,11 @@ var Stepper = function Stepper(_a) {
|
|
271
302
|
}],
|
272
303
|
disabled: !presseable,
|
273
304
|
onPress: function onPress() {
|
274
|
-
return
|
305
|
+
return handleStepPress(index);
|
275
306
|
}
|
276
307
|
}, /*#__PURE__*/React.createElement(View, {
|
277
308
|
style: [styles$9.step, stepStyle === "square" && styles$9.squareStep, {
|
278
|
-
backgroundColor: currentStep >= index ? colors.primary.hex : colors.body.hex
|
309
|
+
backgroundColor: !errorBack ? currentStep >= index ? colors.primary.hex : colors.body.hex : colors.error.hex
|
279
310
|
}]
|
280
311
|
}, renderStepContent(index)), steps && /*#__PURE__*/React.createElement(Text, {
|
281
312
|
style: styles$9.stepText
|
@@ -388,13 +419,29 @@ var Form = function Form(_a) {
|
|
388
419
|
});
|
389
420
|
});
|
390
421
|
};
|
422
|
+
var handleFormSubmit = function handleFormSubmit(formValues) {
|
423
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
424
|
+
var validationErrors;
|
425
|
+
return __generator(this, function (_a) {
|
426
|
+
switch (_a.label) {
|
427
|
+
case 0:
|
428
|
+
return [4 /*yield*/, onSubmit(formValues)];
|
429
|
+
case 1:
|
430
|
+
validationErrors = _a.sent();
|
431
|
+
setErrors(validationErrors);
|
432
|
+
return [2 /*return*/, validationErrors];
|
433
|
+
}
|
434
|
+
});
|
435
|
+
});
|
436
|
+
};
|
391
437
|
return /*#__PURE__*/React.createElement(FormContext.Provider, {
|
392
438
|
value: {
|
393
439
|
formValues: formValues,
|
394
440
|
setFormValue: setFormValue,
|
395
441
|
errors: errors,
|
396
442
|
setErrors: setErrors,
|
397
|
-
handleSubmit: handleSubmit
|
443
|
+
handleSubmit: handleSubmit,
|
444
|
+
handleFormSubmit: handleFormSubmit
|
398
445
|
}
|
399
446
|
}, stepper && (/*#__PURE__*/React.createElement(Stepper, {
|
400
447
|
steps: stepper.steps,
|
@@ -403,7 +450,8 @@ var Form = function Form(_a) {
|
|
403
450
|
onPress: stepper.onPress,
|
404
451
|
totalSteps: stepper.totalSteps,
|
405
452
|
stepType: stepper.stepType,
|
406
|
-
icon: stepper.icon
|
453
|
+
icon: stepper.icon,
|
454
|
+
stepStyle: stepper.stepStyle
|
407
455
|
})), children);
|
408
456
|
};
|
409
457
|
|