aport-tools 4.3.6 → 4.4.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/forms/FormContext.d.ts +7 -0
- package/dist/forms/Stepper.d.ts +9 -0
- package/dist/index.esm.js +70 -4
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +69 -3
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
@@ -7,9 +7,16 @@ interface FormContextProps {
|
|
7
7
|
handleSubmit: () => void;
|
8
8
|
}
|
9
9
|
export declare const useFormContext: () => FormContextProps;
|
10
|
+
interface StepperProps {
|
11
|
+
steps: string[];
|
12
|
+
presseable?: boolean;
|
13
|
+
onPress?: (stepIndex: number) => void;
|
14
|
+
step: number;
|
15
|
+
}
|
10
16
|
interface FormProps {
|
11
17
|
children: ReactNode;
|
12
18
|
onSubmit: (values: Record<string, any>) => Promise<Record<string, string[]>>;
|
19
|
+
stepper?: StepperProps;
|
13
20
|
}
|
14
21
|
export declare const Form: React.FC<FormProps>;
|
15
22
|
export {};
|
package/dist/index.esm.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
|
-
/*! aport-tools v4.
|
1
|
+
/*! aport-tools v4.4.0 | ISC */
|
2
2
|
import React, { useContext, useState, createContext, useCallback, useMemo } from 'react';
|
3
|
-
import { StyleSheet, Text as Text$1,
|
3
|
+
import { StyleSheet, View, TouchableOpacity, Text as Text$1, TextInput, Modal, Pressable, FlatList, Keyboard, Platform, Image, Alert, ActivityIndicator } from 'react-native';
|
4
4
|
import { ThemeContext } from 'aport-themes';
|
5
5
|
import * as ImagePicker from 'expo-image-picker';
|
6
6
|
|
@@ -97,6 +97,66 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
97
97
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
98
98
|
};
|
99
99
|
|
100
|
+
var Stepper = function Stepper(_a) {
|
101
|
+
var steps = _a.steps,
|
102
|
+
currentStep = _a.currentStep,
|
103
|
+
_b = _a.presseable,
|
104
|
+
presseable = _b === void 0 ? false : _b,
|
105
|
+
_onPress = _a.onPress;
|
106
|
+
return /*#__PURE__*/React.createElement(View, {
|
107
|
+
style: styles$9.container
|
108
|
+
}, steps.map(function (label, index) {
|
109
|
+
return /*#__PURE__*/React.createElement(TouchableOpacity, {
|
110
|
+
key: index,
|
111
|
+
style: [styles$9.stepContainer, index <= currentStep ? styles$9.activeStep : styles$9.inactiveStep],
|
112
|
+
disabled: !presseable,
|
113
|
+
onPress: function onPress() {
|
114
|
+
return _onPress && _onPress(index);
|
115
|
+
}
|
116
|
+
}, /*#__PURE__*/React.createElement(View, {
|
117
|
+
style: styles$9.stepCircle
|
118
|
+
}, /*#__PURE__*/React.createElement(Text$1, {
|
119
|
+
style: styles$9.stepLabel
|
120
|
+
}, index + 1)), /*#__PURE__*/React.createElement(Text$1, {
|
121
|
+
style: styles$9.stepText
|
122
|
+
}, label));
|
123
|
+
}));
|
124
|
+
};
|
125
|
+
var styles$9 = StyleSheet.create({
|
126
|
+
container: {
|
127
|
+
flexDirection: "row",
|
128
|
+
alignItems: "center",
|
129
|
+
justifyContent: "space-between",
|
130
|
+
marginBottom: 16
|
131
|
+
},
|
132
|
+
stepContainer: {
|
133
|
+
alignItems: "center",
|
134
|
+
flex: 1
|
135
|
+
},
|
136
|
+
stepCircle: {
|
137
|
+
width: 30,
|
138
|
+
height: 30,
|
139
|
+
borderRadius: 15,
|
140
|
+
alignItems: "center",
|
141
|
+
justifyContent: "center",
|
142
|
+
marginBottom: 4
|
143
|
+
},
|
144
|
+
activeStep: {
|
145
|
+
backgroundColor: "#3498db"
|
146
|
+
},
|
147
|
+
inactiveStep: {
|
148
|
+
backgroundColor: "#aaaaaa"
|
149
|
+
},
|
150
|
+
stepLabel: {
|
151
|
+
color: "#ffffff",
|
152
|
+
fontWeight: "bold"
|
153
|
+
},
|
154
|
+
stepText: {
|
155
|
+
fontSize: 12,
|
156
|
+
textAlign: "center"
|
157
|
+
}
|
158
|
+
});
|
159
|
+
|
100
160
|
// src/forms/FormContext.tsx
|
101
161
|
var FormContext = /*#__PURE__*/createContext(undefined);
|
102
162
|
var useFormContext = function useFormContext() {
|
@@ -108,7 +168,8 @@ var useFormContext = function useFormContext() {
|
|
108
168
|
};
|
109
169
|
var Form = function Form(_a) {
|
110
170
|
var children = _a.children,
|
111
|
-
onSubmit = _a.onSubmit
|
171
|
+
onSubmit = _a.onSubmit,
|
172
|
+
stepper = _a.stepper;
|
112
173
|
var _b = useState({}),
|
113
174
|
formValues = _b[0],
|
114
175
|
setFormValues = _b[1];
|
@@ -149,7 +210,12 @@ var Form = function Form(_a) {
|
|
149
210
|
setErrors: setErrors,
|
150
211
|
handleSubmit: handleSubmit
|
151
212
|
}
|
152
|
-
},
|
213
|
+
}, stepper && (/*#__PURE__*/React.createElement(Stepper, {
|
214
|
+
steps: stepper.steps,
|
215
|
+
currentStep: stepper.step,
|
216
|
+
presseable: stepper.presseable,
|
217
|
+
onPress: stepper.onPress
|
218
|
+
})), children);
|
153
219
|
};
|
154
220
|
|
155
221
|
// src/fonts/Text.tsx
|