aport-tools 4.2.0 → 4.2.1

package/dist/index.js

@@ -1,4 +1,4 @@
-/*! aport-tools v4.2.0 | ISC */
+/*! aport-tools v4.2.1 | ISC */
 'use strict';
 
 var React = require('react');
@@ -83,6 +83,16 @@ function __generator(thisArg, body) {
     }
 }
 
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
     var e = new Error(message);
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -222,23 +232,23 @@ var ErrorList = function ErrorList(_a) {
   var theme = React.useContext(aportThemes.ThemeContext).theme;
   var colors = theme.colors;
   return /*#__PURE__*/React.createElement(reactNative.View, {
-    style: styles$5.container
+    style: styles$6.container
   }, errors.map(function (error, index) {
     return /*#__PURE__*/React.createElement(reactNative.View, {
       key: index,
-      style: styles$5.errorItem
+      style: styles$6.errorItem
     }, /*#__PURE__*/React.createElement(Text, {
-      style: [styles$5.bullet, {
+      style: [styles$6.bullet, {
         color: colors.error.hex
       }]
     }, "\u2022"), /*#__PURE__*/React.createElement(Text, {
-      style: [styles$5.errorText, {
+      style: [styles$6.errorText, {
         color: colors.error.hex
       }]
     }, error));
   }));
 };
-var styles$5 = reactNative.StyleSheet.create({
+var styles$6 = reactNative.StyleSheet.create({
   container: {
     marginTop: 4
   },
@@ -316,13 +326,13 @@ var Input = function Input(_a) {
     setFormValue(name, formattedText);
   };
   return /*#__PURE__*/React.createElement(reactNative.View, {
-    style: styles$4.container
+    style: styles$5.container
   }, /*#__PURE__*/React.createElement(Text, {
-    style: [styles$4.label, {
+    style: [styles$5.label, {
       color: colors.text.hex
     }]
   }, label), /*#__PURE__*/React.createElement(reactNative.TextInput, __assign({
-    style: [styles$4.input, {
+    style: [styles$5.input, {
       backgroundColor: colors.body.hex,
       borderColor: formErrors[name] ? colors.error.hex : "#CCC",
       color: colors.text.hex
@@ -335,7 +345,7 @@ var Input = function Input(_a) {
     errors: formErrors[name]
   })));
 };
-var styles$4 = reactNative.StyleSheet.create({
+var styles$5 = reactNative.StyleSheet.create({
   container: {
     marginBottom: 16
   },
@@ -366,11 +376,11 @@ var TextArea = function TextArea(_a) {
     setFormValue(name, text);
   };
   return /*#__PURE__*/React.createElement(reactNative.View, {
-    style: styles$3.container
+    style: styles$4.container
   }, /*#__PURE__*/React.createElement(Text, {
-    style: styles$3.label
+    style: styles$4.label
   }, label), /*#__PURE__*/React.createElement(reactNative.TextInput, __assign({
-    style: [styles$3.textArea, style],
+    style: [styles$4.textArea, style],
     value: formValues[name] || '',
     onChangeText: handleChange,
     placeholder: label,
@@ -383,7 +393,7 @@ var TextArea = function TextArea(_a) {
     errors: formErrors[name]
   })));
 };
-var styles$3 = reactNative.StyleSheet.create({
+var styles$4 = reactNative.StyleSheet.create({
   container: {
     marginBottom: 16
   },
@@ -412,18 +422,191 @@ var Label = function Label(_a) {
   var theme = React.useContext(aportThemes.ThemeContext).theme;
   var colors = theme.colors;
   return /*#__PURE__*/React.createElement(Text, {
-    style: [styles$2.label, style, {
+    style: [styles$3.label, style, {
       color: colors.text.hex
     }]
   }, text);
 };
-var styles$2 = reactNative.StyleSheet.create({
+var styles$3 = reactNative.StyleSheet.create({
   label: {
     marginBottom: 4,
     fontWeight: '500'
   }
 });
 
+/**
+ * InputList component - A custom dropdown list component for React Native with multi-selection support,
+ * customizable styling, sorting, and configurable close behavior on selection or scrolling.
+ *
+ * @param {string} placeholder - Placeholder text for the input.
+ * @param {object} style - Custom styles for the component.
+ * @param {Option[]} options - Array of options to display in the dropdown.
+ * @param {boolean} multi - Enables multi-selection mode.
+ * @param {boolean} disabled - Disables the dropdown input.
+ * @param {keyof Option} sortBy - Key to sort options by (e.g., 'id').
+ * @param {boolean} separator - If true, adds a separator line between options.
+ * @param {boolean} closeOnScroll - Closes the dropdown if the user scrolls the list.
+ * @param {boolean} closeOnSelect - Closes the dropdown on selection in single-select mode.
+ * @param {number} maxSelection - Maximum number of items selectable in multi-select mode.
+ */
+var InputList = function InputList(_a) {
+  var name = _a.name,
+    _b = _a.placeholder,
+    placeholder = _b === void 0 ? "Choose value/s" : _b,
+    style = _a.style,
+    options = _a.options,
+    _c = _a.multi,
+    multi = _c === void 0 ? false : _c,
+    _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,
+    maxSelection = _a.maxSelection;
+  var _h = useFormContext(),
+    formValues = _h.formValues,
+    setFormValue = _h.setFormValue;
+  var _j = React.useState(false),
+    isDropdownVisible = _j[0],
+    setIsDropdownVisible = _j[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;
+  var theme = React.useContext(aportThemes.ThemeContext).theme;
+  var colors = theme.colors;
+  /**
+   * 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.
+   */
+  var handleSelectOption = function handleSelectOption(option) {
+    if (multi) {
+      var alreadySelected = selectedOptions.some(function (opt) {
+        return opt.id === option.id;
+      });
+      var updatedSelections = alreadySelected ? selectedOptions.filter(function (opt) {
+        return opt.id !== option.id;
+      }) : __spreadArray(__spreadArray([], selectedOptions, true), [option], false);
+      // Close dropdown if max selection reached
+      if (!alreadySelected && maxSelection && updatedSelections.length >= maxSelection) {
+        setIsDropdownVisible(false);
+      }
+      // Update form value with selected items
+      setFormValue(name, updatedSelections);
+    } else {
+      setFormValue(name, option);
+      if (closeOnSelect) setIsDropdownVisible(false);
+    }
+  };
+  /**
+   * 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;
+    return (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.label) || placeholder;
+  };
+  /**
+   * Toggles dropdown visibility. Disables toggle if the component is disabled.
+   */
+  var toggleDropdown = function toggleDropdown() {
+    if (!disabled) {
+      setIsDropdownVisible(!isDropdownVisible);
+      if (!isDropdownVisible) reactNative.Keyboard.dismiss();
+    }
+  };
+  /**
+   * Closes the dropdown when pressing outside.
+   */
+  var handleCloseDropdown = React.useCallback(function () {
+    if (isDropdownVisible) setIsDropdownVisible(false);
+  }, [isDropdownVisible]);
+  return /*#__PURE__*/React.createElement(reactNative.View, {
+    style: [styles$2.container, style]
+  }, /*#__PURE__*/React.createElement(reactNative.TouchableOpacity, {
+    style: styles$2.inputContainer,
+    onPress: toggleDropdown,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(reactNative.Text, {
+    style: {
+      color: colors.text.hex
+    }
+  }, renderSelectedText())), /*#__PURE__*/React.createElement(reactNative.Modal, {
+    visible: isDropdownVisible,
+    transparent: true,
+    animationType: "fade"
+  }, /*#__PURE__*/React.createElement(reactNative.Pressable, {
+    style: styles$2.overlay,
+    onPress: handleCloseDropdown
+  }), /*#__PURE__*/React.createElement(reactNative.View, {
+    style: [styles$2.dropdownContainer, {
+      backgroundColor: colors.body.hex
+    }]
+  }, /*#__PURE__*/React.createElement(reactNative.FlatList, {
+    data: sortedOptions,
+    keyExtractor: function keyExtractor(item) {
+      return item.id.toString();
+    },
+    renderItem: function renderItem(_a) {
+      var item = _a.item;
+      return /*#__PURE__*/React.createElement(reactNative.TouchableOpacity, {
+        onPress: function onPress() {
+          return handleSelectOption(item);
+        },
+        style: styles$2.optionItem
+      }, /*#__PURE__*/React.createElement(reactNative.Text, {
+        style: {
+          color: colors.text.hex
+        }
+      }, item.label));
+    },
+    ItemSeparatorComponent: function ItemSeparatorComponent() {
+      return separator ? /*#__PURE__*/React.createElement(reactNative.View, {
+        style: styles$2.separator
+      }) : null;
+    },
+    scrollEnabled: !closeOnScroll
+  }))));
+};
+var styles$2 = reactNative.StyleSheet.create({
+  container: {
+    padding: 8
+  },
+  inputContainer: {
+    padding: 12,
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 5
+  },
+  dropdownContainer: {
+    position: 'absolute',
+    top: 60,
+    width: '90%',
+    borderRadius: 8,
+    elevation: 5,
+    alignSelf: 'center'
+  },
+  optionItem: {
+    padding: 12
+  },
+  separator: {
+    height: 1,
+    backgroundColor: '#ddd',
+    marginHorizontal: 8
+  },
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.3)'
+  }
+});
+
 // src/components/Button.tsx
 /**
  * Determines the styles based on the button type and whether it is disabled.
@@ -607,6 +790,7 @@ exports.Card = Card;
 exports.ErrorList = ErrorList;
 exports.Form = Form;
 exports.Input = Input;
+exports.InputList = InputList;
 exports.Label = Label;
 exports.Text = Text;
 exports.TextArea = TextArea;