aport-tools 4.3.5 → 4.4.0

package/dist/forms/FormContext.d.ts

@@ -7,9 +7,16 @@ interface FormContextProps {
     handleSubmit: () => void;
 }
 export declare const useFormContext: () => FormContextProps;
+interface StepperProps {
+    steps: string[];
+    presseable?: boolean;
+    onPress?: (stepIndex: number) => void;
+    step: number;
+}
 interface FormProps {
     children: ReactNode;
     onSubmit: (values: Record<string, any>) => Promise<Record<string, string[]>>;
+    stepper?: StepperProps;
 }
 export declare const Form: React.FC<FormProps>;
 export {};

package/dist/forms/Stepper.d.ts

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

package/dist/index.esm.js

@@ -1,6 +1,6 @@
-/*! aport-tools v4.3.5 | ISC */
+/*! aport-tools v4.4.0 | ISC */
 import React, { useContext, useState, createContext, useCallback, useMemo } from 'react';
-import { StyleSheet, Text as Text$1, View, TextInput, TouchableOpacity, Modal, Pressable, FlatList, Keyboard, Platform, Image, Alert, ActivityIndicator } from 'react-native';
+import { StyleSheet, 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';
 
@@ -97,6 +97,66 @@ 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;
+  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],
+      disabled: !presseable,
+      onPress: function onPress() {
+        return _onPress && _onPress(index);
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles$9.stepCircle
+    }, /*#__PURE__*/React.createElement(Text$1, {
+      style: styles$9.stepLabel
+    }, index + 1)), /*#__PURE__*/React.createElement(Text$1, {
+      style: styles$9.stepText
+    }, label));
+  }));
+};
+var styles$9 = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 16
+  },
+  stepContainer: {
+    alignItems: "center",
+    flex: 1
+  },
+  stepCircle: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 4
+  },
+  activeStep: {
+    backgroundColor: "#3498db"
+  },
+  inactiveStep: {
+    backgroundColor: "#aaaaaa"
+  },
+  stepLabel: {
+    color: "#ffffff",
+    fontWeight: "bold"
+  },
+  stepText: {
+    fontSize: 12,
+    textAlign: "center"
+  }
+});
+
 // src/forms/FormContext.tsx
 var FormContext = /*#__PURE__*/createContext(undefined);
 var useFormContext = function useFormContext() {
@@ -108,7 +168,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 = useState({}),
     formValues = _b[0],
     setFormValues = _b[1];
@@ -149,7 +210,12 @@ 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
+  })), children);
 };
 
 // src/fonts/Text.tsx
@@ -725,7 +791,8 @@ var InputCheck = function InputCheck(_a) {
     disabled = _e === void 0 ? false : _e;
   var _f = useFormContext(),
     formValues = _f.formValues,
-    setFormValue = _f.setFormValue;
+    setFormValue = _f.setFormValue,
+    formErrors = _f.errors;
   var _g = useState(formValues[name] || []),
     selectedValues = _g[0],
     setSelectedValues = _g[1];
@@ -784,7 +851,9 @@ var InputCheck = function InputCheck(_a) {
       }]
     }, item.label));
   };
-  return /*#__PURE__*/React.createElement(FlatList, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+    style: styles$2.title
+  }, name), /*#__PURE__*/React.createElement(FlatList, {
     data: options,
     renderItem: renderItem,
     keyExtractor: function keyExtractor(item) {
@@ -793,7 +862,9 @@ var InputCheck = function InputCheck(_a) {
     numColumns: rowAmount,
     columnWrapperStyle: rowAmount > 1 ? styles$2.row : undefined,
     scrollEnabled: false
-  });
+  }), formErrors[name] && formErrors[name].length > 0 && (/*#__PURE__*/React.createElement(ErrorList, {
+    errors: formErrors[name]
+  })));
 };
 var styles$2 = StyleSheet.create({
   card: {
@@ -806,6 +877,10 @@ var styles$2 = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center"
   },
+  title: {
+    marginBottom: 4,
+    fontSize: 14
+  },
   cardDisabled: {
     opacity: 0.5
   },