aport-tools 4.3.6 → 4.4.0
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 +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
|