@dropi/react-native-design-system 0.3.25 → 0.3.26

package/lib/molecules/Select/MultipleSelect.d.ts

@@ -14,7 +14,8 @@ type MultipleSelectProps = {
     errorMessage?: string;
     title?: string;
     disabled?: boolean;
+    searchFilter?: boolean;
     onRestablish?: () => void;
 };
-export declare const MultipleSelect: ({ options, selectedValues, onChange, label, placeholder, helper, hasError, errorMessage, title, disabled, onRestablish, }: MultipleSelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MultipleSelect: ({ options, selectedValues, onChange, label, placeholder, helper, hasError, errorMessage, title, disabled, searchFilter, onRestablish, }: MultipleSelectProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/molecules/Select/MultipleSelect.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _reactNative2 = _interopRequireDefault(require("dropi-lib-icons/react-native"));
 var _BottomSheet = require("../BottomSheet");
 var _atoms = require("../../atoms");
+var _Search = require("../Search");
 var _constants = require("../../constants");
 var _reactNativeGestureHandler = require("react-native-gesture-handler");
 var _Checkbox = require("../Checkbox");
@@ -25,11 +26,13 @@ const MultipleSelect = ({
   errorMessage,
   title,
   disabled = false,
+  searchFilter = false,
   onRestablish
 }) => {
   const bottomSheetRef = (0, _react.useRef)(null);
   const [isFocus, setIsFocus] = (0, _react.useState)(false);
   const [draftSelection, setDraftSelection] = (0, _react.useState)([]);
+  const [filterText, setFilterText] = (0, _react.useState)("");
   const getBorderColor = () => {
     if (hasError) return _constants.colors["Error-500"].light;
     if (isFocus) return _constants.colors["Info-500"].light;
@@ -69,6 +72,7 @@ const MultipleSelect = ({
   const handleDismiss = (0, _react.useCallback)(() => {
     setIsFocus(false);
     setDraftSelection([]);
+    setFilterText("");
   }, []);
   const handleRestablish = (0, _react.useCallback)(() => {
     if (onRestablish) {
@@ -77,6 +81,10 @@ const MultipleSelect = ({
       setIsFocus(false);
     }
   }, [onRestablish]);
+  const filteredOptions = (0, _react.useMemo)(() => {
+    if (!searchFilter || !filterText) return options;
+    return options.filter(opt => opt.label.toLowerCase().includes(filterText.toLowerCase()));
+  }, [options, searchFilter, filterText]);
   const renderOption = (0, _react.useCallback)(({
     item
   }) => {
@@ -179,19 +187,25 @@ const MultipleSelect = ({
         style: styles.errorText,
         children: errorMessage
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_BottomSheet.BottomSheetComponent, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_BottomSheet.BottomSheetComponent, {
       ref: bottomSheetRef,
       title: title ?? label ?? "Seleccionar",
       snapPoints: ["90%"],
       onDismiss: handleDismiss,
       footer: footer,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.FlatList, {
-        data: options,
+      children: [searchFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.searchContainer,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.Search, {
+          filterText: filterText,
+          setFilterText: setFilterText
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.FlatList, {
+        data: filteredOptions,
         keyExtractor: item => String(item.value),
         renderItem: renderOption,
         contentContainerStyle: styles.optionsList,
         showsVerticalScrollIndicator: false
-      })
+      })]
     })]
   });
 };
@@ -249,6 +263,10 @@ const styles = _reactNative.StyleSheet.create({
     marginLeft: _constants.spacing["size-1"],
     flex: 1
   },
+  searchContainer: {
+    paddingHorizontal: _constants.spacing["size-5"],
+    paddingBottom: _constants.spacing["size-3"]
+  },
   optionsList: {
     paddingHorizontal: _constants.spacing["size-5"],
     paddingBottom: _constants.spacing["size-8"]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dropi/react-native-design-system",
-  "version": "0.3.25",
+  "version": "0.3.26",
   "description": "A React Native package built from scratch",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",