aport-tools 4.2.0 → 4.2.2

package/dist/forms/InputList.d.ts

@@ -0,0 +1,84 @@
+import React from 'react';
+interface Option {
+    id: number | string;
+    label: string;
+    value: any;
+}
+interface InputListProps {
+    name: string;
+    /**
+     * Placeholder text displayed in the input box when no selection is made.
+     * @type {string}
+     * @default "Choose value/s"
+     */
+    placeholder?: string;
+    /**
+     * Custom styles for the component.
+     * @type {object}
+     */
+    style?: object;
+    /**
+     * Array of options to display in the dropdown. Each option should have an id, label, and value.
+     * @type {Option[]}
+     */
+    options: Option[];
+    /**
+     * Enables multi-selection mode when true. If enabled, users can select multiple values.
+     * @type {boolean}
+     * @default false
+     */
+    multi?: boolean;
+    /**
+     * Disables the dropdown input when true.
+     * @type {boolean}
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Key used to sort options in the dropdown (e.g., by 'id', 'label').
+     * @type {keyof Option}
+     */
+    sortBy?: keyof Option;
+    /**
+     * If true, displays a separator line between each option.
+     * @type {boolean}
+     * @default false
+     */
+    separator?: boolean;
+    /**
+     * Closes the dropdown if the user scrolls the list.
+     * @type {boolean}
+     * @default false
+     */
+    closeOnScroll?: boolean;
+    /**
+     * Closes the dropdown after selecting an item if true (only relevant when multi is false).
+     * @type {boolean}
+     * @default true
+     */
+    closeOnSelect?: boolean;
+    /**
+     * Limits the maximum number of items that can be selected when multi is true.
+     * Once the limit is reached, the dropdown closes, and no further selections can be made until
+     * an item is deselected.
+     * @type {number}
+     */
+    maxSelection?: number;
+}
+/**
+ * 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.
+ */
+export declare const InputList: React.FC<InputListProps>;
+export {};

package/dist/forms/index.d.ts

@@ -3,3 +3,4 @@ export { Form, useFormContext } from './FormContext';
 export { default as TextArea } from './TextArea';
 export { default as Label } from './Label';
 export { default as ErrorList } from './ErrorList';
+export { InputList } from './InputList';

package/dist/index.esm.js

@@ -1,6 +1,6 @@
-/*! aport-tools v4.2.0 | ISC */
-import React, { useContext, useState, createContext, useMemo } from 'react';
-import { StyleSheet, Text as Text$1, View, TextInput, TouchableOpacity, ActivityIndicator, Platform } from 'react-native';
+/*! aport-tools v4.2.2 | ISC */
+import React, { useContext, useState, createContext, useCallback, useMemo } from 'react';
+import { StyleSheet, Text as Text$1, View, TextInput, TouchableOpacity, Modal, Pressable, FlatList, Keyboard, ActivityIndicator, Platform } from 'react-native';
 import { ThemeContext } from 'aport-themes';
 
 /******************************************************************************
@@ -81,6 +81,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;
@@ -220,23 +230,23 @@ var ErrorList = function ErrorList(_a) {
   var theme = useContext(ThemeContext).theme;
   var colors = theme.colors;
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$5.container
+    style: styles$6.container
   }, errors.map(function (error, index) {
     return /*#__PURE__*/React.createElement(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 = StyleSheet.create({
+var styles$6 = StyleSheet.create({
   container: {
     marginTop: 4
   },
@@ -314,13 +324,13 @@ var Input = function Input(_a) {
     setFormValue(name, formattedText);
   };
   return /*#__PURE__*/React.createElement(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(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
@@ -333,7 +343,7 @@ var Input = function Input(_a) {
     errors: formErrors[name]
   })));
 };
-var styles$4 = StyleSheet.create({
+var styles$5 = StyleSheet.create({
   container: {
     marginBottom: 16
   },
@@ -364,11 +374,11 @@ var TextArea = function TextArea(_a) {
     setFormValue(name, text);
   };
   return /*#__PURE__*/React.createElement(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(TextInput, __assign({
-    style: [styles$3.textArea, style],
+    style: [styles$4.textArea, style],
     value: formValues[name] || '',
     onChangeText: handleChange,
     placeholder: label,
@@ -381,7 +391,7 @@ var TextArea = function TextArea(_a) {
     errors: formErrors[name]
   })));
 };
-var styles$3 = StyleSheet.create({
+var styles$4 = StyleSheet.create({
   container: {
     marginBottom: 16
   },
@@ -410,18 +420,214 @@ var Label = function Label(_a) {
   var theme = useContext(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 = StyleSheet.create({
+var styles$3 = 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 = 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 = useContext(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;
+      });
+      // Add or remove item from selected options
+      var updatedSelections = alreadySelected ? selectedOptions.filter(function (opt) {
+        return opt.id !== option.id;
+      }) : __spreadArray(__spreadArray([], selectedOptions, true), [option], false);
+      // Close dropdown if max selection is reached after selecting
+      if (!alreadySelected && maxSelection && updatedSelections.length >= maxSelection) {
+        setIsDropdownVisible(false);
+      }
+      // Update form value
+      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) Keyboard.dismiss();
+    }
+  };
+  /**
+   * Closes the dropdown when pressing outside.
+   */
+  var handleCloseDropdown = useCallback(function () {
+    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$2.container, style]
+  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: styles$2.inputContainer,
+    onPress: toggleDropdown,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(Text$1, {
+    style: {
+      color: colors.text.hex
+    }
+  }, renderSelectedText())), /*#__PURE__*/React.createElement(Modal, {
+    visible: isDropdownVisible,
+    transparent: true,
+    animationType: "fade"
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    style: styles$2.overlay,
+    onPress: handleCloseDropdown
+  }), /*#__PURE__*/React.createElement(View, {
+    style: [styles$2.dropdownContainer, {
+      backgroundColor: colors.body.hex
+    }]
+  }, /*#__PURE__*/React.createElement(FlatList, {
+    data: sortedOptions,
+    keyExtractor: function keyExtractor(item) {
+      return item.id.toString();
+    },
+    renderItem: function renderItem(_a) {
+      var item = _a.item;
+      var isSelected = selectedOptions.some(function (opt) {
+        return opt.id === item.id;
+      });
+      var isDisabled = isItemDisabled(item);
+      return /*#__PURE__*/React.createElement(TouchableOpacity, {
+        onPress: function onPress() {
+          return handleSelectOption(item);
+        },
+        style: [styles$2.optionItem, isSelected ? {
+          backgroundColor: colors.primary.hex
+        } : {}, isDisabled ? styles$2.disabledItem : {}],
+        disabled: !!isDisabled
+      }, /*#__PURE__*/React.createElement(Text$1, {
+        style: [{
+          color: colors.primary.hex
+        }, isDisabled ? styles$2.disabledText : {}]
+      }, item.label));
+    },
+    ItemSeparatorComponent: function ItemSeparatorComponent() {
+      return separator ? /*#__PURE__*/React.createElement(View, {
+        style: styles$2.separator
+      }) : null;
+    },
+    scrollEnabled: !closeOnScroll
+  }))));
+};
+var styles$2 = StyleSheet.create({
+  container: {
+    padding: 8
+  },
+  inputContainer: {
+    padding: 12,
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 5
+  },
+  dropdownContainer: {
+    position: 'absolute',
+    top: '30%',
+    // Center the dropdown vertically
+    alignSelf: 'center',
+    width: '90%',
+    backgroundColor: '#fff',
+    borderRadius: 8,
+    elevation: 5,
+    paddingVertical: 10
+  },
+  optionItem: {
+    padding: 12
+  },
+  disabledItem: {
+    backgroundColor: '#f0f0f0'
+  },
+  disabledText: {
+    color: '#999'
+  },
+  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.
@@ -600,5 +806,5 @@ var styles = StyleSheet.create({
   }
 });
 
-export { Button, Card, ErrorList, Form, Input, Label, Text, TextArea, useFormContext };
+export { Button, Card, ErrorList, Form, Input, InputList, Label, Text, TextArea, useFormContext };
 //# sourceMappingURL=index.esm.js.map