aport-tools 4.4.1 → 4.4.3
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 +3 -1
- package/dist/forms/Stepper.d.ts +2 -0
- package/dist/index.esm.js +148 -87
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +147 -86
- 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.3 | ISC */
|
2
2
|
'use strict';
|
3
3
|
|
4
4
|
var React = require('react');
|
@@ -118,6 +118,79 @@ 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,
|
@@ -126,8 +199,13 @@ var Stepper = function Stepper(_a) {
|
|
126
199
|
_onPress = _a.onPress,
|
127
200
|
_c = _a.stepStyle,
|
128
201
|
stepStyle = _c === void 0 ? "circular" : _c,
|
129
|
-
totalSteps = _a.totalSteps
|
202
|
+
totalSteps = _a.totalSteps,
|
203
|
+
_d = _a.stepType,
|
204
|
+
stepType = _d === void 0 ? "number" : _d,
|
205
|
+
icon = _a.icon;
|
130
206
|
var progressAnim = React.useRef(new reactNative.Animated.Value(0)).current;
|
207
|
+
var theme = React.useContext(aportThemes.ThemeContext).theme;
|
208
|
+
var colors = theme.colors;
|
131
209
|
React.useEffect(function () {
|
132
210
|
reactNative.Animated.timing(progressAnim, {
|
133
211
|
toValue: currentStep,
|
@@ -135,6 +213,15 @@ var Stepper = function Stepper(_a) {
|
|
135
213
|
useNativeDriver: false
|
136
214
|
}).start();
|
137
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]);
|
138
225
|
var getSeparatorWidth = function getSeparatorWidth(index) {
|
139
226
|
if (currentStep > index && currentStep < index + 1) {
|
140
227
|
// Return the fractional percentage for odd steps
|
@@ -142,6 +229,53 @@ var Stepper = function Stepper(_a) {
|
|
142
229
|
}
|
143
230
|
return currentStep > index ? "100%" : "0%";
|
144
231
|
};
|
232
|
+
var renderStepContent = function renderStepContent(index) {
|
233
|
+
switch (stepType) {
|
234
|
+
case "icon":
|
235
|
+
if (Array.isArray(icon)) {
|
236
|
+
var stepIcon = icon[index];
|
237
|
+
if (typeof stepIcon === "string") {
|
238
|
+
return /*#__PURE__*/React.createElement(reactNative.Image, {
|
239
|
+
source: {
|
240
|
+
uri: stepIcon
|
241
|
+
},
|
242
|
+
style: {
|
243
|
+
width: 24,
|
244
|
+
height: 24
|
245
|
+
},
|
246
|
+
resizeMode: "contain"
|
247
|
+
});
|
248
|
+
} else {
|
249
|
+
console.error("Invalid icon value for step ".concat(index, ". Expected a string URI."));
|
250
|
+
return null;
|
251
|
+
}
|
252
|
+
}
|
253
|
+
if (typeof icon === "string") {
|
254
|
+
return /*#__PURE__*/React.createElement(reactNative.Image, {
|
255
|
+
source: {
|
256
|
+
uri: icon
|
257
|
+
},
|
258
|
+
style: {
|
259
|
+
width: 24,
|
260
|
+
height: 24
|
261
|
+
},
|
262
|
+
resizeMode: "contain"
|
263
|
+
});
|
264
|
+
}
|
265
|
+
console.error("Icon prop must be a string or an array of strings.");
|
266
|
+
return null;
|
267
|
+
case "empty":
|
268
|
+
return null;
|
269
|
+
case "number":
|
270
|
+
default:
|
271
|
+
return /*#__PURE__*/React.createElement(Text, {
|
272
|
+
style: {
|
273
|
+
fontSize: 16,
|
274
|
+
fontWeight: "bold"
|
275
|
+
}
|
276
|
+
}, index + 1);
|
277
|
+
}
|
278
|
+
};
|
145
279
|
return /*#__PURE__*/React.createElement(reactNative.View, {
|
146
280
|
style: styles$9.container
|
147
281
|
}, Array.from({
|
@@ -158,10 +292,12 @@ var Stepper = function Stepper(_a) {
|
|
158
292
|
return _onPress && _onPress(index);
|
159
293
|
}
|
160
294
|
}, /*#__PURE__*/React.createElement(reactNative.View, {
|
161
|
-
style: [styles$9.step, stepStyle === "square" && styles$9.squareStep, currentStep >= index &&
|
162
|
-
|
163
|
-
|
164
|
-
|
295
|
+
style: [styles$9.step, stepStyle === "square" && styles$9.squareStep, currentStep >= index && {
|
296
|
+
backgroundColor: colors.primary.hex
|
297
|
+
}, {
|
298
|
+
backgroundColor: colors.body.hex
|
299
|
+
}]
|
300
|
+
}, renderStepContent(index)), steps && /*#__PURE__*/React.createElement(Text, {
|
165
301
|
style: styles$9.stepText
|
166
302
|
}, steps[index])), index < totalSteps - 1 && (/*#__PURE__*/React.createElement(reactNative.View, {
|
167
303
|
style: styles$9.separatorContainer
|
@@ -169,7 +305,8 @@ var Stepper = function Stepper(_a) {
|
|
169
305
|
style: styles$9.separatorBackground
|
170
306
|
}), /*#__PURE__*/React.createElement(reactNative.Animated.View, {
|
171
307
|
style: [styles$9.separatorProgress, {
|
172
|
-
width: getSeparatorWidth(index)
|
308
|
+
width: getSeparatorWidth(index),
|
309
|
+
backgroundColor: colors.primary.hex
|
173
310
|
}]
|
174
311
|
}))));
|
175
312
|
}));
|
@@ -190,7 +327,6 @@ var styles$9 = reactNative.StyleSheet.create({
|
|
190
327
|
height: 30,
|
191
328
|
borderRadius: 15,
|
192
329
|
// Default to circular
|
193
|
-
backgroundColor: "#aaaaaa",
|
194
330
|
alignItems: "center",
|
195
331
|
justifyContent: "center",
|
196
332
|
marginBottom: 4
|
@@ -198,9 +334,6 @@ var styles$9 = reactNative.StyleSheet.create({
|
|
198
334
|
squareStep: {
|
199
335
|
borderRadius: 5 // Square shape
|
200
336
|
},
|
201
|
-
activeStep: {
|
202
|
-
backgroundColor: "#3498db"
|
203
|
-
},
|
204
337
|
stepLabel: {
|
205
338
|
color: "#ffffff",
|
206
339
|
fontWeight: "bold"
|
@@ -226,7 +359,6 @@ var styles$9 = reactNative.StyleSheet.create({
|
|
226
359
|
separatorProgress: {
|
227
360
|
position: "absolute",
|
228
361
|
height: "100%",
|
229
|
-
backgroundColor: "#3498db",
|
230
362
|
borderRadius: 2
|
231
363
|
}
|
232
364
|
});
|
@@ -289,83 +421,12 @@ var Form = function Form(_a) {
|
|
289
421
|
currentStep: stepper.step,
|
290
422
|
presseable: stepper.presseable,
|
291
423
|
onPress: stepper.onPress,
|
292
|
-
totalSteps: stepper.totalSteps
|
424
|
+
totalSteps: stepper.totalSteps,
|
425
|
+
stepType: stepper.stepType,
|
426
|
+
icon: stepper.icon
|
293
427
|
})), children);
|
294
428
|
};
|
295
429
|
|
296
|
-
// src/fonts/Text.tsx
|
297
|
-
/**
|
298
|
-
* A dynamic Text component that supports HTML-like formatting.
|
299
|
-
* Integrates with the Theme system for consistent styling.
|
300
|
-
*
|
301
|
-
* @param children - The content to be displayed inside the Text component.
|
302
|
-
* @param size - Size of the text. Defaults to 'medium'.
|
303
|
-
* @param b - If true, applies bold styling.
|
304
|
-
* @param i - If true, applies italic styling.
|
305
|
-
* @param type - Type of Text component. Defaults to 'text'.
|
306
|
-
* @param typeFont - Type of Font component. Defaults to 'body'.
|
307
|
-
* @param u - If true, applies underline styling.
|
308
|
-
* @param align - Paragraph alignment. Defaults to 'left'.
|
309
|
-
* @param h - Header level. Accepts 0 (none), 1, 2, or 3. Defaults to 0.
|
310
|
-
* @param style - Additional styles to apply.
|
311
|
-
*/
|
312
|
-
var Text = function Text(_a) {
|
313
|
-
var _b;
|
314
|
-
var children = _a.children,
|
315
|
-
_c = _a.size,
|
316
|
-
size = _c === void 0 ? 14 : _c,
|
317
|
-
_d = _a.b,
|
318
|
-
b = _d === void 0 ? false : _d,
|
319
|
-
_e = _a.i,
|
320
|
-
i = _e === void 0 ? false : _e,
|
321
|
-
_f = _a.u,
|
322
|
-
u = _f === void 0 ? false : _f,
|
323
|
-
_g = _a.align,
|
324
|
-
align = _g === void 0 ? 'left' : _g,
|
325
|
-
_h = _a.type,
|
326
|
-
type = _h === void 0 ? 'text' : _h,
|
327
|
-
_j = _a.typeFont,
|
328
|
-
typeFont = _j === void 0 ? 'body' : _j,
|
329
|
-
_k = _a.h,
|
330
|
-
h = _k === void 0 ? 0 : _k,
|
331
|
-
style = _a.style;
|
332
|
-
var theme = React.useContext(aportThemes.ThemeContext).theme;
|
333
|
-
var colors = theme.colors,
|
334
|
-
fonts = theme.fonts;
|
335
|
-
// Determine font family and size based on 'typeFont'
|
336
|
-
var fontSettings = fonts[typeFont] || fonts.body;
|
337
|
-
var fontFamily = fontSettings.fontFamily;
|
338
|
-
var fontSize = fontSettings.fontSize || size;
|
339
|
-
// Calculate header size based on 'h' prop
|
340
|
-
if (h === 1) fontSize = 32;else if (h === 2) fontSize = 24;else if (h === 3) fontSize = 18;
|
341
|
-
// Define font weight based on bold prop
|
342
|
-
var fontWeight = b ? '700' : fontSettings.fontWeight || '400';
|
343
|
-
// Define font style based on italic prop
|
344
|
-
var fontStyle = i ? 'italic' : 'normal';
|
345
|
-
// Define text decoration based on underline prop
|
346
|
-
var textDecorationLine = u ? 'underline' : 'none';
|
347
|
-
// Define text alignment
|
348
|
-
var textAlign = align;
|
349
|
-
// Map the 'type' prop to the correct color from the theme
|
350
|
-
var textColor = ((_b = colors[type]) === null || _b === void 0 ? void 0 : _b.hex) || colors.text.hex;
|
351
|
-
// Combine all styles
|
352
|
-
var textStyles = {
|
353
|
-
fontSize: fontSize,
|
354
|
-
fontWeight: fontWeight,
|
355
|
-
fontFamily: fontFamily,
|
356
|
-
fontStyle: fontStyle,
|
357
|
-
textDecorationLine: textDecorationLine,
|
358
|
-
textAlign: textAlign,
|
359
|
-
color: textColor
|
360
|
-
};
|
361
|
-
return /*#__PURE__*/React.createElement(reactNative.Text, {
|
362
|
-
style: [textStyles, style]
|
363
|
-
}, children);
|
364
|
-
};
|
365
|
-
reactNative.StyleSheet.create({
|
366
|
-
// Define any default styles if needed
|
367
|
-
});
|
368
|
-
|
369
430
|
// src/forms/ErrorList.tsx
|
370
431
|
var ErrorList = function ErrorList(_a) {
|
371
432
|
var errors = _a.errors;
|