aport-tools 4.4.1 → 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 +3 -1
- package/dist/forms/Stepper.d.ts +2 -0
- package/dist/index.esm.js +116 -85
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +115 -84
- 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,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,23 @@ 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
|
+
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
|
+
};
|
|
145
249
|
return /*#__PURE__*/React.createElement(reactNative.View, {
|
|
146
250
|
style: styles$9.container
|
|
147
251
|
}, Array.from({
|
|
@@ -158,10 +262,12 @@ var Stepper = function Stepper(_a) {
|
|
|
158
262
|
return _onPress && _onPress(index);
|
|
159
263
|
}
|
|
160
264
|
}, /*#__PURE__*/React.createElement(reactNative.View, {
|
|
161
|
-
style: [styles$9.step, stepStyle === "square" && styles$9.squareStep, currentStep >= index &&
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
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, {
|
|
165
271
|
style: styles$9.stepText
|
|
166
272
|
}, steps[index])), index < totalSteps - 1 && (/*#__PURE__*/React.createElement(reactNative.View, {
|
|
167
273
|
style: styles$9.separatorContainer
|
|
@@ -190,7 +296,6 @@ var styles$9 = reactNative.StyleSheet.create({
|
|
|
190
296
|
height: 30,
|
|
191
297
|
borderRadius: 15,
|
|
192
298
|
// Default to circular
|
|
193
|
-
backgroundColor: "#aaaaaa",
|
|
194
299
|
alignItems: "center",
|
|
195
300
|
justifyContent: "center",
|
|
196
301
|
marginBottom: 4
|
|
@@ -198,9 +303,6 @@ var styles$9 = reactNative.StyleSheet.create({
|
|
|
198
303
|
squareStep: {
|
|
199
304
|
borderRadius: 5 // Square shape
|
|
200
305
|
},
|
|
201
|
-
activeStep: {
|
|
202
|
-
backgroundColor: "#3498db"
|
|
203
|
-
},
|
|
204
306
|
stepLabel: {
|
|
205
307
|
color: "#ffffff",
|
|
206
308
|
fontWeight: "bold"
|
|
@@ -289,83 +391,12 @@ var Form = function Form(_a) {
|
|
|
289
391
|
currentStep: stepper.step,
|
|
290
392
|
presseable: stepper.presseable,
|
|
291
393
|
onPress: stepper.onPress,
|
|
292
|
-
totalSteps: stepper.totalSteps
|
|
394
|
+
totalSteps: stepper.totalSteps,
|
|
395
|
+
stepType: stepper.stepType,
|
|
396
|
+
icon: stepper.icon
|
|
293
397
|
})), children);
|
|
294
398
|
};
|
|
295
399
|
|
|
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
400
|
// src/forms/ErrorList.tsx
|
|
370
401
|
var ErrorList = function ErrorList(_a) {
|
|
371
402
|
var errors = _a.errors;
|