aport-tools 4.4.22 → 4.4.24

package/dist/index.js

@@ -1,4 +1,4 @@
-/*! aport-tools v4.4.22 | ISC */
+/*! aport-tools v4.4.24 | ISC */
 'use strict';
 
 var React = require('react');
@@ -539,26 +539,32 @@ var Input = function Input(_a) {
     label = _a.label,
     inputType = _a.inputType,
     firstValue = _a.firstValue,
+    _b = _a.editable,
+    editable = _b === void 0 ? true : _b,
     style = _a.style,
-    rest = __rest(_a, ["name", "label", "inputType", "firstValue", "style"]);
-  var _b = useFormContext(),
-    formValues = _b.formValues,
-    setFormValue = _b.setFormValue,
-    formErrors = _b.errors;
+    rest = __rest(_a, ["name", "label", "inputType", "firstValue", "editable", "style"]);
+  var _c = useFormContext(),
+    formValues = _c.formValues,
+    setFormValue = _c.setFormValue,
+    formErrors = _c.errors;
   var theme = React.useContext(aportThemes.ThemeContext).theme;
   var colors = theme.colors;
-  var _c = React.useState(""),
-    internalValue = _c[0],
-    setInternalValue = _c[1];
-  // Initialize the internal value based on `firstValue` or `formValues`
+  var _d = React.useState(""),
+    internalValue = _d[0],
+    setInternalValue = _d[1];
+  var isFirstRender = React.useRef(true); // Track the first render
+  // Initialize the internal value when `firstValue` changes or on first render
   React.useEffect(function () {
-    if (firstValue) {
-      setInternalValue(firstValue);
-      setFormValue(name, firstValue);
-    } else {
-      setInternalValue(formValues[name] || "");
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      if (firstValue !== undefined) {
+        setInternalValue(firstValue);
+        setFormValue(name, firstValue);
+      } else {
+        setInternalValue(formValues[name] || "");
+      }
     }
-  }, [firstValue, formValues[name]]);
+  }, [firstValue]); // Only re-run if `firstValue` changes
   /**
    * Handles text changes in the input field, applying formatting based on the inputType.
    *
@@ -606,6 +612,7 @@ var Input = function Input(_a) {
     value: internalValue,
     onChangeText: handleChange,
     placeholder: label,
+    editable: editable,
     placeholderTextColor: colors.placeHolder.hex
   }, rest)), formErrors[name] && formErrors[name].length > 0 && (/*#__PURE__*/React.createElement(ErrorList, {
     errors: formErrors[name]
@@ -633,26 +640,32 @@ var TextArea = function TextArea(_a) {
     label = _a.label;
     _a.errors;
     var firstValue = _a.firstValue,
+    _b = _a.editable,
+    editable = _b === void 0 ? true : _b,
     style = _a.style,
-    rest = __rest(_a, ["name", "label", "errors", "firstValue", "style"]);
-  var _b = useFormContext(),
-    formValues = _b.formValues,
-    setFormValue = _b.setFormValue,
-    formErrors = _b.errors;
+    rest = __rest(_a, ["name", "label", "errors", "firstValue", "editable", "style"]);
+  var _c = useFormContext(),
+    formValues = _c.formValues,
+    setFormValue = _c.setFormValue,
+    formErrors = _c.errors;
   var theme = React.useContext(aportThemes.ThemeContext).theme;
   var colors = theme.colors;
-  var _c = React.useState(""),
-    internalValue = _c[0],
-    setInternalValue = _c[1];
-  // Initialize the internal value based on `firstValue` or `formValues`
+  var _d = React.useState(""),
+    internalValue = _d[0],
+    setInternalValue = _d[1];
+  var isFirstRender = React.useRef(true); // Track the first render
+  // Initialize the internal value when `firstValue` changes or on first render
   React.useEffect(function () {
-    if (firstValue) {
-      setInternalValue(firstValue);
-      setFormValue(name, firstValue);
-    } else {
-      setInternalValue(formValues[name] || "");
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      if (firstValue !== undefined) {
+        setInternalValue(firstValue);
+        setFormValue(name, firstValue);
+      } else {
+        setInternalValue(formValues[name] || "");
+      }
     }
-  }, [firstValue, formValues[name]]);
+  }, [firstValue]);
   var handleChange = function handleChange(text) {
     setInternalValue(text);
     setFormValue(name, text);
@@ -674,6 +687,7 @@ var TextArea = function TextArea(_a) {
     placeholder: label,
     placeholderTextColor: colors.placeHolder.hex,
     multiline: true,
+    editable: editable,
     numberOfLines: 4,
     textAlignVertical: "top"
   }, rest)), formErrors[name] && formErrors[name].length > 0 && (/*#__PURE__*/React.createElement(ErrorList, {
@@ -777,16 +791,21 @@ var InputList = function InputList(_a) {
   var _l = React.useState(multi ? initialSelections : initialSelections[0] || null),
     selectedOptions = _l[0],
     setSelectedOptions = _l[1];
-  // Update form value on mount if firstValue is provided
+  // Update form value when firstValue changes
   React.useEffect(function () {
-    if (firstValue && selectedOptions !== firstValue) {
-      setSelectedOptions(firstValue); // Only update if necessary
+    if (multi) {
+      setSelectedOptions(initialSelections);
+      setFormValue(name, initialSelections);
+    } else {
+      var singleValue = initialSelections[0] || null;
+      setSelectedOptions(singleValue);
+      setFormValue(name, singleValue);
     }
-  }, [firstValue, selectedOptions]);
+  }, [firstValue, multi, initialSelections]);
+  // 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) {
         return opt.id === option.id;
@@ -799,15 +818,12 @@ var InputList = function InputList(_a) {
       }
       setFormValue(name, updatedSelections);
     } else {
-      // Handle single-selection case
       updatedSelections = option;
       setFormValue(name, option);
       if (closeOnSelect) setIsDropdownVisible(false);
     }
-    // Trigger onChange callback with the updated selection
-    if (onChange) {
-      onChange(updatedSelections);
-    }
+    setSelectedOptions(updatedSelections);
+    if (onChange) onChange(updatedSelections);
   };
   var isItemDisabled = function isItemDisabled(option) {
     if (!multi) return false; // Disable check only applies for multi-select