aport-tools 4.4.0 → 4.4.1

package/dist/forms/FormContext.d.ts

@@ -12,6 +12,7 @@ interface StepperProps {
     presseable?: boolean;
     onPress?: (stepIndex: number) => void;
     step: number;
+    totalSteps: number;
 }
 interface FormProps {
     children: ReactNode;

package/dist/forms/Stepper.d.ts

@@ -1,9 +1,11 @@
 import React from "react";
 interface StepperProps {
-    steps: string[];
+    steps?: string[];
     currentStep: number;
     presseable?: boolean;
     onPress?: (stepIndex: number) => void;
+    stepStyle?: "circular" | "square";
+    totalSteps: number;
 }
 declare const Stepper: React.FC<StepperProps>;
 export default Stepper;

package/dist/index.esm.js

@@ -1,6 +1,6 @@
-/*! aport-tools v4.4.0 | ISC */
+/*! aport-tools v4.4.1 | ISC */
 import React, { useContext, useState, createContext, useCallback, useMemo } from 'react';
-import { StyleSheet, View, TouchableOpacity, Text as Text$1, TextInput, Modal, Pressable, FlatList, Keyboard, Platform, Image, Alert, ActivityIndicator } from 'react-native';
+import { StyleSheet, Animated, View, TouchableOpacity, Text as Text$1, TextInput, Modal, Pressable, FlatList, Keyboard, Platform, Image, Alert, ActivityIndicator } from 'react-native';
 import { ThemeContext } from 'aport-themes';
 import * as ImagePicker from 'expo-image-picker';
 
@@ -102,24 +102,55 @@ var Stepper = function Stepper(_a) {
     currentStep = _a.currentStep,
     _b = _a.presseable,
     presseable = _b === void 0 ? false : _b,
-    _onPress = _a.onPress;
+    _onPress = _a.onPress,
+    _c = _a.stepStyle,
+    stepStyle = _c === void 0 ? "circular" : _c,
+    totalSteps = _a.totalSteps;
+  var progressAnim = React.useRef(new Animated.Value(0)).current;
+  React.useEffect(function () {
+    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(View, {
     style: styles$9.container
-  }, steps.map(function (label, index) {
-    return /*#__PURE__*/React.createElement(TouchableOpacity, {
-      key: index,
-      style: [styles$9.stepContainer, index <= currentStep ? styles$9.activeStep : styles$9.inactiveStep],
+  }, Array.from({
+    length: totalSteps
+  }, function (_, index) {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: index
+    }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+      style: [styles$9.stepContainer, presseable && {
+        cursor: "pointer"
+      }],
       disabled: !presseable,
       onPress: function onPress() {
         return _onPress && _onPress(index);
       }
     }, /*#__PURE__*/React.createElement(View, {
-      style: styles$9.stepCircle
+      style: [styles$9.step, stepStyle === "square" && styles$9.squareStep, currentStep >= index && styles$9.activeStep]
     }, /*#__PURE__*/React.createElement(Text$1, {
       style: styles$9.stepLabel
-    }, index + 1)), /*#__PURE__*/React.createElement(Text$1, {
+    }, index + 1)), steps && /*#__PURE__*/React.createElement(Text$1, {
       style: styles$9.stepText
-    }, label));
+    }, steps[index])), index < totalSteps - 1 && (/*#__PURE__*/React.createElement(View, {
+      style: styles$9.separatorContainer
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles$9.separatorBackground
+    }), /*#__PURE__*/React.createElement(Animated.View, {
+      style: [styles$9.separatorProgress, {
+        width: getSeparatorWidth(index)
+      }]
+    }))));
   }));
 };
 var styles$9 = StyleSheet.create({
@@ -133,27 +164,49 @@ var styles$9 = StyleSheet.create({
     alignItems: "center",
     flex: 1
   },
-  stepCircle: {
+  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"
   },
-  inactiveStep: {
-    backgroundColor: "#aaaaaa"
-  },
   stepLabel: {
     color: "#ffffff",
     fontWeight: "bold"
   },
   stepText: {
     fontSize: 12,
-    textAlign: "center"
+    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
   }
 });
 
@@ -214,7 +267,8 @@ var Form = function Form(_a) {
     steps: stepper.steps,
     currentStep: stepper.step,
     presseable: stepper.presseable,
-    onPress: stepper.onPress
+    onPress: stepper.onPress,
+    totalSteps: stepper.totalSteps
   })), children);
 };