aport-tools 4.4.0 → 4.4.2
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 +4 -1
- package/dist/forms/Stepper.d.ts +5 -1
- package/dist/index.esm.js +178 -93
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +177 -92
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
/*! aport-tools v4.4.
|
1
|
+
/*! aport-tools v4.4.2 | ISC */
|
2
2
|
'use strict';
|
3
3
|
|
4
4
|
var React = require('react');
|
@@ -118,29 +118,166 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
118
118
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
119
119
|
};
|
120
120
|
|
121
|
+
// src/fonts/Text.tsx
|
122
|
+
/**
|
123
|
+
* A dynamic Text component that supports HTML-like formatting.
|
124
|
+
* Integrates with the Theme system for consistent styling.
|
125
|
+
*
|
126
|
+
* @param children - The content to be displayed inside the Text component.
|
127
|
+
* @param size - Size of the text. Defaults to 'medium'.
|
128
|
+
* @param b - If true, applies bold styling.
|
129
|
+
* @param i - If true, applies italic styling.
|
130
|
+
* @param type - Type of Text component. Defaults to 'text'.
|
131
|
+
* @param typeFont - Type of Font component. Defaults to 'body'.
|
132
|
+
* @param u - If true, applies underline styling.
|
133
|
+
* @param align - Paragraph alignment. Defaults to 'left'.
|
134
|
+
* @param h - Header level. Accepts 0 (none), 1, 2, or 3. Defaults to 0.
|
135
|
+
* @param style - Additional styles to apply.
|
136
|
+
*/
|
137
|
+
var Text = function Text(_a) {
|
138
|
+
var _b;
|
139
|
+
var children = _a.children,
|
140
|
+
_c = _a.size,
|
141
|
+
size = _c === void 0 ? 14 : _c,
|
142
|
+
_d = _a.b,
|
143
|
+
b = _d === void 0 ? false : _d,
|
144
|
+
_e = _a.i,
|
145
|
+
i = _e === void 0 ? false : _e,
|
146
|
+
_f = _a.u,
|
147
|
+
u = _f === void 0 ? false : _f,
|
148
|
+
_g = _a.align,
|
149
|
+
align = _g === void 0 ? 'left' : _g,
|
150
|
+
_h = _a.type,
|
151
|
+
type = _h === void 0 ? 'text' : _h,
|
152
|
+
_j = _a.typeFont,
|
153
|
+
typeFont = _j === void 0 ? 'body' : _j,
|
154
|
+
_k = _a.h,
|
155
|
+
h = _k === void 0 ? 0 : _k,
|
156
|
+
style = _a.style;
|
157
|
+
var theme = React.useContext(aportThemes.ThemeContext).theme;
|
158
|
+
var colors = theme.colors,
|
159
|
+
fonts = theme.fonts;
|
160
|
+
// Determine font family and size based on 'typeFont'
|
161
|
+
var fontSettings = fonts[typeFont] || fonts.body;
|
162
|
+
var fontFamily = fontSettings.fontFamily;
|
163
|
+
var fontSize = fontSettings.fontSize || size;
|
164
|
+
// Calculate header size based on 'h' prop
|
165
|
+
if (h === 1) fontSize = 32;else if (h === 2) fontSize = 24;else if (h === 3) fontSize = 18;
|
166
|
+
// Define font weight based on bold prop
|
167
|
+
var fontWeight = b ? '700' : fontSettings.fontWeight || '400';
|
168
|
+
// Define font style based on italic prop
|
169
|
+
var fontStyle = i ? 'italic' : 'normal';
|
170
|
+
// Define text decoration based on underline prop
|
171
|
+
var textDecorationLine = u ? 'underline' : 'none';
|
172
|
+
// Define text alignment
|
173
|
+
var textAlign = align;
|
174
|
+
// Map the 'type' prop to the correct color from the theme
|
175
|
+
var textColor = ((_b = colors[type]) === null || _b === void 0 ? void 0 : _b.hex) || colors.text.hex;
|
176
|
+
// Combine all styles
|
177
|
+
var textStyles = {
|
178
|
+
fontSize: fontSize,
|
179
|
+
fontWeight: fontWeight,
|
180
|
+
fontFamily: fontFamily,
|
181
|
+
fontStyle: fontStyle,
|
182
|
+
textDecorationLine: textDecorationLine,
|
183
|
+
textAlign: textAlign,
|
184
|
+
color: textColor
|
185
|
+
};
|
186
|
+
return /*#__PURE__*/React.createElement(reactNative.Text, {
|
187
|
+
style: [textStyles, style]
|
188
|
+
}, children);
|
189
|
+
};
|
190
|
+
reactNative.StyleSheet.create({
|
191
|
+
// Define any default styles if needed
|
192
|
+
});
|
193
|
+
|
121
194
|
var Stepper = function Stepper(_a) {
|
122
195
|
var steps = _a.steps,
|
123
196
|
currentStep = _a.currentStep,
|
124
197
|
_b = _a.presseable,
|
125
198
|
presseable = _b === void 0 ? false : _b,
|
126
|
-
_onPress = _a.onPress
|
199
|
+
_onPress = _a.onPress,
|
200
|
+
_c = _a.stepStyle,
|
201
|
+
stepStyle = _c === void 0 ? "circular" : _c,
|
202
|
+
totalSteps = _a.totalSteps,
|
203
|
+
_d = _a.stepType,
|
204
|
+
stepType = _d === void 0 ? "number" : _d,
|
205
|
+
icon = _a.icon;
|
206
|
+
var progressAnim = React.useRef(new reactNative.Animated.Value(0)).current;
|
207
|
+
var theme = React.useContext(aportThemes.ThemeContext).theme;
|
208
|
+
var colors = theme.colors;
|
209
|
+
React.useEffect(function () {
|
210
|
+
reactNative.Animated.timing(progressAnim, {
|
211
|
+
toValue: currentStep,
|
212
|
+
duration: 300,
|
213
|
+
useNativeDriver: false
|
214
|
+
}).start();
|
215
|
+
}, [currentStep]);
|
216
|
+
React.useEffect(function () {
|
217
|
+
if (stepType === "icon") {
|
218
|
+
if (!icon) {
|
219
|
+
console.error("Stepper: `icon` is required when stepType is 'icon'.");
|
220
|
+
} else if (Array.isArray(icon) && icon.length !== totalSteps) {
|
221
|
+
console.error("Stepper: Number of icons (".concat(icon.length, ") must match totalSteps (").concat(totalSteps, ")."));
|
222
|
+
}
|
223
|
+
}
|
224
|
+
}, [stepType, icon, totalSteps]);
|
225
|
+
var getSeparatorWidth = function getSeparatorWidth(index) {
|
226
|
+
if (currentStep > index && currentStep < index + 1) {
|
227
|
+
// Return the fractional percentage for odd steps
|
228
|
+
return "".concat(((currentStep - index) * 100).toFixed(0), "%");
|
229
|
+
}
|
230
|
+
return currentStep > index ? "100%" : "0%";
|
231
|
+
};
|
232
|
+
var renderStepContent = function renderStepContent(index) {
|
233
|
+
switch (stepType) {
|
234
|
+
case "icon":
|
235
|
+
if (Array.isArray(icon)) {
|
236
|
+
return icon[index]; // Render individual icon for each step
|
237
|
+
}
|
238
|
+
return icon;
|
239
|
+
// Render the same icon for all steps
|
240
|
+
case "empty":
|
241
|
+
return null;
|
242
|
+
// Render nothing inside the step circle
|
243
|
+
case "number":
|
244
|
+
default:
|
245
|
+
return index + 1;
|
246
|
+
// Default to rendering step numbers
|
247
|
+
}
|
248
|
+
};
|
127
249
|
return /*#__PURE__*/React.createElement(reactNative.View, {
|
128
250
|
style: styles$9.container
|
129
|
-
},
|
130
|
-
|
131
|
-
|
132
|
-
|
251
|
+
}, Array.from({
|
252
|
+
length: totalSteps
|
253
|
+
}, function (_, index) {
|
254
|
+
return /*#__PURE__*/React.createElement(React.Fragment, {
|
255
|
+
key: index
|
256
|
+
}, /*#__PURE__*/React.createElement(reactNative.TouchableOpacity, {
|
257
|
+
style: [styles$9.stepContainer, presseable && {
|
258
|
+
cursor: "pointer"
|
259
|
+
}],
|
133
260
|
disabled: !presseable,
|
134
261
|
onPress: function onPress() {
|
135
262
|
return _onPress && _onPress(index);
|
136
263
|
}
|
137
264
|
}, /*#__PURE__*/React.createElement(reactNative.View, {
|
138
|
-
style: styles$9.
|
139
|
-
|
140
|
-
|
141
|
-
|
265
|
+
style: [styles$9.step, stepStyle === "square" && styles$9.squareStep, currentStep >= index && {
|
266
|
+
backgroundColor: colors.primary.hex
|
267
|
+
}, {
|
268
|
+
backgroundColor: colors.body.hex
|
269
|
+
}]
|
270
|
+
}, renderStepContent(index)), steps && /*#__PURE__*/React.createElement(Text, {
|
142
271
|
style: styles$9.stepText
|
143
|
-
},
|
272
|
+
}, steps[index])), index < totalSteps - 1 && (/*#__PURE__*/React.createElement(reactNative.View, {
|
273
|
+
style: styles$9.separatorContainer
|
274
|
+
}, /*#__PURE__*/React.createElement(reactNative.View, {
|
275
|
+
style: styles$9.separatorBackground
|
276
|
+
}), /*#__PURE__*/React.createElement(reactNative.Animated.View, {
|
277
|
+
style: [styles$9.separatorProgress, {
|
278
|
+
width: getSeparatorWidth(index)
|
279
|
+
}]
|
280
|
+
}))));
|
144
281
|
}));
|
145
282
|
};
|
146
283
|
var styles$9 = reactNative.StyleSheet.create({
|
@@ -154,19 +291,17 @@ var styles$9 = reactNative.StyleSheet.create({
|
|
154
291
|
alignItems: "center",
|
155
292
|
flex: 1
|
156
293
|
},
|
157
|
-
|
294
|
+
step: {
|
158
295
|
width: 30,
|
159
296
|
height: 30,
|
160
297
|
borderRadius: 15,
|
298
|
+
// Default to circular
|
161
299
|
alignItems: "center",
|
162
300
|
justifyContent: "center",
|
163
301
|
marginBottom: 4
|
164
302
|
},
|
165
|
-
|
166
|
-
|
167
|
-
},
|
168
|
-
inactiveStep: {
|
169
|
-
backgroundColor: "#aaaaaa"
|
303
|
+
squareStep: {
|
304
|
+
borderRadius: 5 // Square shape
|
170
305
|
},
|
171
306
|
stepLabel: {
|
172
307
|
color: "#ffffff",
|
@@ -174,7 +309,27 @@ var styles$9 = reactNative.StyleSheet.create({
|
|
174
309
|
},
|
175
310
|
stepText: {
|
176
311
|
fontSize: 12,
|
177
|
-
textAlign: "center"
|
312
|
+
textAlign: "center",
|
313
|
+
marginTop: 4
|
314
|
+
},
|
315
|
+
separatorContainer: {
|
316
|
+
flex: 1,
|
317
|
+
height: 4,
|
318
|
+
marginHorizontal: 8,
|
319
|
+
position: "relative"
|
320
|
+
},
|
321
|
+
separatorBackground: {
|
322
|
+
position: "absolute",
|
323
|
+
width: "100%",
|
324
|
+
height: "100%",
|
325
|
+
backgroundColor: "#aaaaaa",
|
326
|
+
borderRadius: 2
|
327
|
+
},
|
328
|
+
separatorProgress: {
|
329
|
+
position: "absolute",
|
330
|
+
height: "100%",
|
331
|
+
backgroundColor: "#3498db",
|
332
|
+
borderRadius: 2
|
178
333
|
}
|
179
334
|
});
|
180
335
|
|
@@ -235,83 +390,13 @@ var Form = function Form(_a) {
|
|
235
390
|
steps: stepper.steps,
|
236
391
|
currentStep: stepper.step,
|
237
392
|
presseable: stepper.presseable,
|
238
|
-
onPress: stepper.onPress
|
393
|
+
onPress: stepper.onPress,
|
394
|
+
totalSteps: stepper.totalSteps,
|
395
|
+
stepType: stepper.stepType,
|
396
|
+
icon: stepper.icon
|
239
397
|
})), children);
|
240
398
|
};
|
241
399
|
|
242
|
-
// src/fonts/Text.tsx
|
243
|
-
/**
|
244
|
-
* A dynamic Text component that supports HTML-like formatting.
|
245
|
-
* Integrates with the Theme system for consistent styling.
|
246
|
-
*
|
247
|
-
* @param children - The content to be displayed inside the Text component.
|
248
|
-
* @param size - Size of the text. Defaults to 'medium'.
|
249
|
-
* @param b - If true, applies bold styling.
|
250
|
-
* @param i - If true, applies italic styling.
|
251
|
-
* @param type - Type of Text component. Defaults to 'text'.
|
252
|
-
* @param typeFont - Type of Font component. Defaults to 'body'.
|
253
|
-
* @param u - If true, applies underline styling.
|
254
|
-
* @param align - Paragraph alignment. Defaults to 'left'.
|
255
|
-
* @param h - Header level. Accepts 0 (none), 1, 2, or 3. Defaults to 0.
|
256
|
-
* @param style - Additional styles to apply.
|
257
|
-
*/
|
258
|
-
var Text = function Text(_a) {
|
259
|
-
var _b;
|
260
|
-
var children = _a.children,
|
261
|
-
_c = _a.size,
|
262
|
-
size = _c === void 0 ? 14 : _c,
|
263
|
-
_d = _a.b,
|
264
|
-
b = _d === void 0 ? false : _d,
|
265
|
-
_e = _a.i,
|
266
|
-
i = _e === void 0 ? false : _e,
|
267
|
-
_f = _a.u,
|
268
|
-
u = _f === void 0 ? false : _f,
|
269
|
-
_g = _a.align,
|
270
|
-
align = _g === void 0 ? 'left' : _g,
|
271
|
-
_h = _a.type,
|
272
|
-
type = _h === void 0 ? 'text' : _h,
|
273
|
-
_j = _a.typeFont,
|
274
|
-
typeFont = _j === void 0 ? 'body' : _j,
|
275
|
-
_k = _a.h,
|
276
|
-
h = _k === void 0 ? 0 : _k,
|
277
|
-
style = _a.style;
|
278
|
-
var theme = React.useContext(aportThemes.ThemeContext).theme;
|
279
|
-
var colors = theme.colors,
|
280
|
-
fonts = theme.fonts;
|
281
|
-
// Determine font family and size based on 'typeFont'
|
282
|
-
var fontSettings = fonts[typeFont] || fonts.body;
|
283
|
-
var fontFamily = fontSettings.fontFamily;
|
284
|
-
var fontSize = fontSettings.fontSize || size;
|
285
|
-
// Calculate header size based on 'h' prop
|
286
|
-
if (h === 1) fontSize = 32;else if (h === 2) fontSize = 24;else if (h === 3) fontSize = 18;
|
287
|
-
// Define font weight based on bold prop
|
288
|
-
var fontWeight = b ? '700' : fontSettings.fontWeight || '400';
|
289
|
-
// Define font style based on italic prop
|
290
|
-
var fontStyle = i ? 'italic' : 'normal';
|
291
|
-
// Define text decoration based on underline prop
|
292
|
-
var textDecorationLine = u ? 'underline' : 'none';
|
293
|
-
// Define text alignment
|
294
|
-
var textAlign = align;
|
295
|
-
// Map the 'type' prop to the correct color from the theme
|
296
|
-
var textColor = ((_b = colors[type]) === null || _b === void 0 ? void 0 : _b.hex) || colors.text.hex;
|
297
|
-
// Combine all styles
|
298
|
-
var textStyles = {
|
299
|
-
fontSize: fontSize,
|
300
|
-
fontWeight: fontWeight,
|
301
|
-
fontFamily: fontFamily,
|
302
|
-
fontStyle: fontStyle,
|
303
|
-
textDecorationLine: textDecorationLine,
|
304
|
-
textAlign: textAlign,
|
305
|
-
color: textColor
|
306
|
-
};
|
307
|
-
return /*#__PURE__*/React.createElement(reactNative.Text, {
|
308
|
-
style: [textStyles, style]
|
309
|
-
}, children);
|
310
|
-
};
|
311
|
-
reactNative.StyleSheet.create({
|
312
|
-
// Define any default styles if needed
|
313
|
-
});
|
314
|
-
|
315
400
|
// src/forms/ErrorList.tsx
|
316
401
|
var ErrorList = function ErrorList(_a) {
|
317
402
|
var errors = _a.errors;
|