aport-tools 4.4.1 → 4.4.2
Sign up to get free protection for your applications and to get access to all the features.
- 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;
|