aport-tools 4.4.18 → 4.4.20

package/dist/index.esm.js

@@ -1,5 +1,5 @@
-/*! aport-tools v4.4.18 | ISC */
-import React, { useContext, useState, createContext, useEffect, useCallback, useMemo } from 'react';
+/*! aport-tools v4.4.20 | ISC */
+import React, { useContext, useState, createContext, useEffect, useMemo, useCallback } 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';
@@ -730,99 +730,95 @@ var InputList = function InputList(_a) {
     closeOnSelect = _h === void 0 ? true : _h,
     maxSelection = _a.maxSelection,
     onChange = _a.onChange;
-  var _j = useFormContext(),
-    formValues = _j.formValues,
-    setFormValue = _j.setFormValue,
+  var _j = useFormContext();
+    _j.formValues;
+    var setFormValue = _j.setFormValue,
     formErrors = _j.errors;
   var _k = useState(false),
     isDropdownVisible = _k[0],
     setIsDropdownVisible = _k[1];
-  var selectedOptions = formValues[name] || (multi ? [] : null);
-  var sortedOptions = sortBy ? __spreadArray([], options, true).sort(function (a, b) {
-    return a[sortBy] > b[sortBy] ? 1 : -1;
-  }) : options;
+  // Memoize sorted options for performance
+  var sortedOptions = useMemo(function () {
+    return sortBy ? __spreadArray([], options, true).sort(function (a, b) {
+      return a[sortBy] > b[sortBy] ? 1 : -1;
+    }) : options;
+  }, [options, sortBy]);
   var theme = useContext(ThemeContext).theme;
   var colors = theme.colors;
-  var _l = useState();
-    _l[0];
-    var setInternalValue = _l[1];
-  // Initialize the internal value based on `firstValue` or `formValues`
+  // Initialize selected options based on firstValue
+  // Filter initial selections from options based on `firstValue`
+  var initialSelections = useMemo(function () {
+    return options.filter(function (opt) {
+      return firstValue.includes(opt.value);
+    });
+  }, [options, firstValue]);
+  // State for selected options
+  var _l = useState(multi ? initialSelections : initialSelections[0] || null),
+    selectedOptions = _l[0],
+    setSelectedOptions = _l[1];
+  // Update form value on mount if firstValue is provided
+  // Update form value and internal state on mount or `firstValue` change
   useEffect(function () {
-    if (firstValue) {
-      setInternalValue(firstValue);
-      setFormValue(name, firstValue);
-    } else {
-      setInternalValue(formValues[name] || "");
+    if (firstValue && selectedOptions !== firstValue) {
+      setSelectedOptions(multi ? initialSelections : initialSelections[0] || null);
+      setFormValue(name, multi ? initialSelections : initialSelections[0] || null);
     }
-  }, [firstValue, formValues[name]]);
-  /**
-   * Handles selection of an option. Adds or removes the option from selectedOptions based on
-   * multi-selection and maxSelection criteria.
-   * @param {Option} option - The selected option object.
-   */
+  }, [firstValue, initialSelections, multi, name, selectedOptions, setFormValue]);
+  // Handle option selection
   var handleSelectOption = function handleSelectOption(option) {
     var updatedSelections;
     if (multi) {
-      // Ensure selectedOptions is treated as an array
-      var selectedArray = Array.isArray(selectedOptions) ? selectedOptions : [];
-      var alreadySelected = selectedArray.some(function (opt) {
+      var alreadySelected = Array.isArray(selectedOptions) && selectedOptions.some(function (opt) {
         return opt.id === option.id;
       });
-      updatedSelections = alreadySelected ? selectedArray.filter(function (opt) {
+      updatedSelections = alreadySelected ? selectedOptions.filter(function (opt) {
         return opt.id !== option.id;
-      }) : __spreadArray(__spreadArray([], selectedArray, true), [option], false);
+      }) : Array.isArray(selectedOptions) ? __spreadArray(__spreadArray([], selectedOptions, true), [option], false) : [option];
       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);
     }
-    // Trigger onChange callback with the updated selection
+    setSelectedOptions(updatedSelections);
+    setFormValue(name, updatedSelections);
     if (onChange) {
       onChange(updatedSelections);
     }
   };
+  // Check if an option should be disabled
   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) {
+    if (!multi) return false;
+    return maxSelection && Array.isArray(selectedOptions) && selectedOptions.length >= maxSelection && !selectedOptions.some(function (opt) {
       return opt.id === option.id;
     });
   };
+  // Render selected text
   var renderSelectedText = function renderSelectedText() {
     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;
+      }).join(", ") || placeholder;
     }
     return (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.label) || 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.
-   */
-  /**
-   * Toggles dropdown visibility. Disables toggle if the component is disabled.
-   */
+  // Toggle dropdown visibility
   var toggleDropdown = function toggleDropdown() {
     if (!disabled) {
       setIsDropdownVisible(!isDropdownVisible);
       if (!isDropdownVisible) Keyboard.dismiss();
     }
   };
-  /**
-   * Closes the dropdown when pressing outside.
-   */
+  // Close dropdown
   var handleCloseDropdown = useCallback(function () {
     if (isDropdownVisible) setIsDropdownVisible(false);
   }, [isDropdownVisible]);
+  /**
+   * Renders selected options as a comma-separated string or the placeholder if none selected.
+   * @returns {string} - The display text for selected options or placeholder.
+   */
   // Conditionally render item as disabled if max selection reached and item is unselected
   return /*#__PURE__*/React.createElement(View, {
     style: [styles$4.container, style]