aport-tools 4.3.6 → 4.4.1

package/dist/index.js

@@ -1,4 +1,4 @@
-/*! aport-tools v4.3.6 | ISC */
+/*! aport-tools v4.4.1 | ISC */
 'use strict';
 
 var React = require('react');
@@ -118,6 +118,119 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+var Stepper = function Stepper(_a) {
+  var steps = _a.steps,
+    currentStep = _a.currentStep,
+    _b = _a.presseable,
+    presseable = _b === void 0 ? false : _b,
+    _onPress = _a.onPress,
+    _c = _a.stepStyle,
+    stepStyle = _c === void 0 ? "circular" : _c,
+    totalSteps = _a.totalSteps;
+  var progressAnim = React.useRef(new reactNative.Animated.Value(0)).current;
+  React.useEffect(function () {
+    reactNative.Animated.timing(progressAnim, {
+      toValue: currentStep,
+      duration: 300,
+      useNativeDriver: false
+    }).start();
+  }, [currentStep]);
+  var getSeparatorWidth = function getSeparatorWidth(index) {
+    if (currentStep > index && currentStep < index + 1) {
+      // Return the fractional percentage for odd steps
+      return "".concat(((currentStep - index) * 100).toFixed(0), "%");
+    }
+    return currentStep > index ? "100%" : "0%";
+  };
+  return /*#__PURE__*/React.createElement(reactNative.View, {
+    style: styles$9.container
+  }, Array.from({
+    length: totalSteps
+  }, function (_, index) {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: index
+    }, /*#__PURE__*/React.createElement(reactNative.TouchableOpacity, {
+      style: [styles$9.stepContainer, presseable && {
+        cursor: "pointer"
+      }],
+      disabled: !presseable,
+      onPress: function onPress() {
+        return _onPress && _onPress(index);
+      }
+    }, /*#__PURE__*/React.createElement(reactNative.View, {
+      style: [styles$9.step, stepStyle === "square" && styles$9.squareStep, currentStep >= index && styles$9.activeStep]
+    }, /*#__PURE__*/React.createElement(reactNative.Text, {
+      style: styles$9.stepLabel
+    }, index + 1)), steps && /*#__PURE__*/React.createElement(reactNative.Text, {
+      style: styles$9.stepText
+    }, steps[index])), index < totalSteps - 1 && (/*#__PURE__*/React.createElement(reactNative.View, {
+      style: styles$9.separatorContainer
+    }, /*#__PURE__*/React.createElement(reactNative.View, {
+      style: styles$9.separatorBackground
+    }), /*#__PURE__*/React.createElement(reactNative.Animated.View, {
+      style: [styles$9.separatorProgress, {
+        width: getSeparatorWidth(index)
+      }]
+    }))));
+  }));
+};
+var styles$9 = reactNative.StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 16
+  },
+  stepContainer: {
+    alignItems: "center",
+    flex: 1
+  },
+  step: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    // Default to circular
+    backgroundColor: "#aaaaaa",
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 4
+  },
+  squareStep: {
+    borderRadius: 5 // Square shape
+  },
+  activeStep: {
+    backgroundColor: "#3498db"
+  },
+  stepLabel: {
+    color: "#ffffff",
+    fontWeight: "bold"
+  },
+  stepText: {
+    fontSize: 12,
+    textAlign: "center",
+    marginTop: 4
+  },
+  separatorContainer: {
+    flex: 1,
+    height: 4,
+    marginHorizontal: 8,
+    position: "relative"
+  },
+  separatorBackground: {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    backgroundColor: "#aaaaaa",
+    borderRadius: 2
+  },
+  separatorProgress: {
+    position: "absolute",
+    height: "100%",
+    backgroundColor: "#3498db",
+    borderRadius: 2
+  }
+});
+
 // src/forms/FormContext.tsx
 var FormContext = /*#__PURE__*/React.createContext(undefined);
 var useFormContext = function useFormContext() {
@@ -129,7 +242,8 @@ var useFormContext = function useFormContext() {
 };
 var Form = function Form(_a) {
   var children = _a.children,
-    onSubmit = _a.onSubmit;
+    onSubmit = _a.onSubmit,
+    stepper = _a.stepper;
   var _b = React.useState({}),
     formValues = _b[0],
     setFormValues = _b[1];
@@ -170,7 +284,13 @@ var Form = function Form(_a) {
       setErrors: setErrors,
       handleSubmit: handleSubmit
     }
-  }, children);
+  }, stepper && (/*#__PURE__*/React.createElement(Stepper, {
+    steps: stepper.steps,
+    currentStep: stepper.step,
+    presseable: stepper.presseable,
+    onPress: stepper.onPress,
+    totalSteps: stepper.totalSteps
+  })), children);
 };
 
 // src/fonts/Text.tsx