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

package/lib/atoms/Buttons/DefaultButton.d.ts

@@ -8,7 +8,7 @@ type ButtonConfig = {
     borderColor: string;
 };
 interface Props extends TouchableOpacityProps {
-    label: string;
+    label?: string;
     variant: Variant;
     size: Size;
     preIcon?: IconName;

package/lib/atoms/Buttons/DefaultButton.js

@@ -27,9 +27,9 @@ const DefaultButton = ({
     return "m";
   };
   const getIconSize = () => {
-    if (size === "small") return 12;
-    if (size === "large") return 16;
-    return 14;
+    if (size === "small") return _constants.sizes.s;
+    if (size === "large") return _constants.sizes.l;
+    return _constants.sizes.m;
   };
   const getTabletIconSize = () => {
     if (size === "small") return 20;
@@ -99,20 +99,21 @@ const DefaultButton = ({
     style: {
       backgroundColor: currentButtonConfig.backgroundColor,
       paddingVertical: getPaddingVertical(),
-      paddingHorizontal: _constants.spacing["size-4"],
+      paddingHorizontal: !label ? getPaddingVertical() : _constants.spacing["size-4"],
       borderRadius: _constants.radius["border-2"],
       alignItems: "center",
       justifyContent: "center",
       opacity: disabled ? 0.5 : 1,
       borderWidth: 1,
       borderColor: currentButtonConfig.borderColor,
-      flexDirection: "row"
+      flexDirection: "row",
+      alignSelf: !label ? 'flex-start' : 'stretch'
     },
     disabled: disabled || isMakingRequest,
     ...rest,
     children: [preIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
-        marginRight: _constants.spacing["size-2"]
+        marginRight: label || postIcon ? _constants.spacing["size-2"] : 0
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.Icon, {
         name: preIcon,
@@ -121,7 +122,7 @@ const DefaultButton = ({
       })
     }), isMakingRequest ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
       color: currentButtonConfig.labelColor
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Label, {
+    }) : !!label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Label, {
       type: textVariant,
       style: {
         color: currentButtonConfig.labelColor
@@ -129,7 +130,7 @@ const DefaultButton = ({
       children: label
     }), postIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
-        marginLeft: _constants.spacing["size-2"]
+        marginLeft: label || preIcon ? _constants.spacing["size-2"] : 0
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.Icon, {
         name: postIcon,

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.27",
   "description": "A React Native package built from scratch",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",