aport-tools 4.4.12 → 4.4.14

package/dist/forms/Input.d.ts

@@ -8,6 +8,10 @@ interface InputProps extends TextInputProps {
      * The unique identifier for the input field, used to manage its state within the form.
      */
     name: string;
+    /**
+     * Optional first value if you want to set values with fetch or dont have empty inputs.
+     */
+    firstValue?: string;
     /**
      * The text label displayed above the input field.
      */

package/dist/forms/InputList.d.ts

@@ -11,6 +11,10 @@ interface InputListProps {
      * @type {string}
      * @default "Choose value/s"
      */
+    /**
+     * Optional first value if you want to set values with fetch or dont have empty inputs.
+     */
+    firstValue?: any[];
     placeholder?: string;
     /**
      * Custom styles for the component.

package/dist/forms/TextArea.d.ts

@@ -2,6 +2,10 @@ import React from 'react';
 import { TextInputProps } from 'react-native';
 interface TextAreaProps extends TextInputProps {
     name: string;
+    /**
+     * Optional first value if you want to set values with fetch or dont have empty inputs.
+     */
+    firstValue?: string;
     label: string;
     errors?: string[];
 }

package/dist/index.esm.js

@@ -1,5 +1,5 @@
-/*! aport-tools v4.4.12 | ISC */
-import React, { useContext, useState, createContext, useCallback, useMemo } from 'react';
+/*! aport-tools v4.4.14 | ISC */
+import React, { useContext, useState, createContext, useEffect, useCallback, useMemo } from 'react';
 import { StyleSheet, Text as Text$1, Animated, View, TouchableOpacity, Image, TextInput, Modal, Pressable, FlatList, Keyboard, Platform, Alert, ActivityIndicator } from 'react-native';
 import { ThemeContext } from 'aport-themes';
 import * as ImagePicker from 'expo-image-picker';
@@ -517,14 +517,27 @@ var Input = function Input(_a) {
   var name = _a.name,
     label = _a.label,
     inputType = _a.inputType,
+    firstValue = _a.firstValue,
     style = _a.style,
-    rest = __rest(_a, ["name", "label", "inputType", "style"]);
+    rest = __rest(_a, ["name", "label", "inputType", "firstValue", "style"]);
   var _b = useFormContext(),
     formValues = _b.formValues,
     setFormValue = _b.setFormValue,
     formErrors = _b.errors;
   var theme = useContext(ThemeContext).theme;
   var colors = theme.colors;
+  var _c = useState(""),
+    internalValue = _c[0],
+    setInternalValue = _c[1];
+  // Initialize the internal value based on `firstValue` or `formValues`
+  useEffect(function () {
+    if (firstValue) {
+      setInternalValue(firstValue);
+      setFormValue(name, firstValue);
+    } else {
+      setInternalValue(formValues[name] || "");
+    }
+  }, [firstValue, formValues[name]]);
   /**
    * Handles text changes in the input field, applying formatting based on the inputType.
    *
@@ -554,6 +567,7 @@ var Input = function Input(_a) {
         formattedText = text.replace(/\D/g, "");
         break;
     }
+    setInternalValue(formattedText);
     setFormValue(name, formattedText);
   };
   return /*#__PURE__*/React.createElement(View, {
@@ -568,7 +582,7 @@ var Input = function Input(_a) {
       borderColor: formErrors[name] ? colors.error.hex : "#CCC",
       color: colors.text.hex
     }, style],
-    value: formValues[name] || "",
+    value: internalValue,
     onChangeText: handleChange,
     placeholder: label,
     placeholderTextColor: colors.placeHolder.hex
@@ -597,15 +611,29 @@ var TextArea = function TextArea(_a) {
   var name = _a.name,
     label = _a.label;
     _a.errors;
-    var style = _a.style,
-    rest = __rest(_a, ["name", "label", "errors", "style"]);
+    var firstValue = _a.firstValue,
+    style = _a.style,
+    rest = __rest(_a, ["name", "label", "errors", "firstValue", "style"]);
   var _b = useFormContext(),
     formValues = _b.formValues,
     setFormValue = _b.setFormValue,
     formErrors = _b.errors;
   var theme = useContext(ThemeContext).theme;
   var colors = theme.colors;
+  var _c = useState(""),
+    internalValue = _c[0],
+    setInternalValue = _c[1];
+  // Initialize the internal value based on `firstValue` or `formValues`
+  useEffect(function () {
+    if (firstValue) {
+      setInternalValue(firstValue);
+      setFormValue(name, firstValue);
+    } else {
+      setInternalValue(formValues[name] || "");
+    }
+  }, [firstValue, formValues[name]]);
   var handleChange = function handleChange(text) {
+    setInternalValue(text);
     setFormValue(name, text);
   };
   return /*#__PURE__*/React.createElement(View, {
@@ -620,7 +648,7 @@ var TextArea = function TextArea(_a) {
       color: colors.text.hex,
       borderColor: formErrors[name] ? colors.error.hex : "#CCC"
     }],
-    value: formValues[name] || '',
+    value: internalValue,
     onChangeText: handleChange,
     placeholder: label,
     placeholderTextColor: colors.placeHolder.hex,
@@ -692,27 +720,39 @@ var InputList = function InputList(_a) {
     _d = _a.disabled,
     disabled = _d === void 0 ? false : _d,
     sortBy = _a.sortBy,
-    _e = _a.separator,
-    separator = _e === void 0 ? false : _e,
-    _f = _a.closeOnScroll,
-    closeOnScroll = _f === void 0 ? false : _f,
-    _g = _a.closeOnSelect,
-    closeOnSelect = _g === void 0 ? true : _g,
+    _e = _a.firstValue,
+    firstValue = _e === void 0 ? [] : _e,
+    _f = _a.separator,
+    separator = _f === void 0 ? false : _f,
+    _g = _a.closeOnScroll,
+    closeOnScroll = _g === void 0 ? false : _g,
+    _h = _a.closeOnSelect,
+    closeOnSelect = _h === void 0 ? true : _h,
     maxSelection = _a.maxSelection,
     onChange = _a.onChange;
-  var _h = useFormContext(),
-    formValues = _h.formValues,
-    setFormValue = _h.setFormValue,
-    formErrors = _h.errors;
-  var _j = useState(false),
-    isDropdownVisible = _j[0],
-    setIsDropdownVisible = _j[1];
-  var selectedOptions = formValues[name] || (multi ? [] : null);
+  var _j = useFormContext();
+    _j.formValues;
+    var setFormValue = _j.setFormValue,
+    formErrors = _j.errors;
+  var _k = useState(false),
+    isDropdownVisible = _k[0],
+    setIsDropdownVisible = _k[1];
   var sortedOptions = sortBy ? __spreadArray([], options, true).sort(function (a, b) {
     return a[sortBy] > b[sortBy] ? 1 : -1;
   }) : options;
   var theme = useContext(ThemeContext).theme;
   var colors = theme.colors;
+  // Initialize selected options based on firstValue
+  var initialSelections = options.filter(function (opt) {
+    return firstValue.includes(opt.value);
+  });
+  var _l = useState(multi ? initialSelections : initialSelections[0] || null),
+    selectedOptions = _l[0];
+    _l[1];
+  // Update form value on mount if firstValue is provided
+  useEffect(function () {
+    setFormValue(name, multi ? initialSelections : initialSelections[0] || null);
+  }, [firstValue]);
   /**
    * Handles selection of an option. Adds or removes the option from selectedOptions based on
    * multi-selection and maxSelection criteria.
@@ -721,17 +761,20 @@ var InputList = function InputList(_a) {
   var handleSelectOption = function handleSelectOption(option) {
     var updatedSelections;
     if (multi) {
-      var alreadySelected = selectedOptions.some(function (opt) {
+      // Ensure selectedOptions is treated as an array
+      var selectedArray = Array.isArray(selectedOptions) ? selectedOptions : [];
+      var alreadySelected = selectedArray.some(function (opt) {
         return opt.id === option.id;
       });
-      updatedSelections = alreadySelected ? selectedOptions.filter(function (opt) {
+      updatedSelections = alreadySelected ? selectedArray.filter(function (opt) {
         return opt.id !== option.id;
-      }) : __spreadArray(__spreadArray([], selectedOptions, true), [option], false);
+      }) : __spreadArray(__spreadArray([], selectedArray, true), [option], false);
       if (!alreadySelected && maxSelection && updatedSelections.length >= maxSelection) {
         setIsDropdownVisible(false);
       }
       setFormValue(name, updatedSelections);
     } else {
+      // Handle single-selection case
       updatedSelections = option;
       setFormValue(name, option);
       if (closeOnSelect) setIsDropdownVisible(false);
@@ -741,14 +784,26 @@ var InputList = function InputList(_a) {
       onChange(updatedSelections);
     }
   };
+  var isItemDisabled = function isItemDisabled(option) {
+    if (!multi) return false; // Disable check only applies for multi-select
+    // Ensure selectedOptions is treated as an array
+    var selectedArray = Array.isArray(selectedOptions) ? selectedOptions : [];
+    return maxSelection && selectedArray.length >= maxSelection && !selectedArray.some(function (opt) {
+      return opt.id === option.id;
+    });
+  };
   /**
-   * Renders selected options as a comma-separated string or the placeholder if none selected.
-   * @returns {string} - The display text for selected options or placeholder.
-   */
+  * Renders selected options as a comma-separated string or the placeholder if none selected.
+  * @returns {string} - The display text for selected options or placeholder.
+  */
   var renderSelectedText = function renderSelectedText() {
-    if (multi) return selectedOptions.map(function (opt) {
-      return opt.label;
-    }).join(', ') || placeholder;
+    if (multi) {
+      // Ensure selectedOptions is treated as an array
+      var selectedArray = Array.isArray(selectedOptions) ? selectedOptions : [];
+      return selectedArray.map(function (opt) {
+        return opt.label;
+      }).join(', ') || placeholder;
+    }
     return (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.label) || placeholder;
   };
   /**
@@ -767,11 +822,6 @@ var InputList = function InputList(_a) {
     if (isDropdownVisible) setIsDropdownVisible(false);
   }, [isDropdownVisible]);
   // Conditionally render item as disabled if max selection reached and item is unselected
-  var isItemDisabled = function isItemDisabled(option) {
-    return multi && maxSelection && selectedOptions.length >= maxSelection && !selectedOptions.some(function (opt) {
-      return opt.id === option.id;
-    });
-  };
   return /*#__PURE__*/React.createElement(View, {
     style: [styles$4.container, style]
   }, /*#__PURE__*/React.createElement(Text$1, {
@@ -809,9 +859,9 @@ var InputList = function InputList(_a) {
     },
     renderItem: function renderItem(_a) {
       var item = _a.item;
-      var isSelected = multi ? selectedOptions.some(function (opt) {
+      var isSelected = multi ? Array.isArray(selectedOptions) && selectedOptions.some(function (opt) {
         return opt.id === item.id;
-      }) : (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.id) === item.id;
+      }) : selectedOptions && 'id' in selectedOptions && selectedOptions.id === item.id;
       var isDisabled = isItemDisabled(item);
       return /*#__PURE__*/React.createElement(TouchableOpacity, {
         onPress: function onPress() {