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

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

@@ -0,0 +1,21 @@
+export type MultipleSelectOption = {
+    label: string;
+    value: string | number;
+    description?: string;
+};
+type MultipleSelectProps = {
+    options: MultipleSelectOption[];
+    selectedValues: (string | number)[];
+    onChange: (options: MultipleSelectOption[]) => void;
+    label?: string;
+    placeholder?: string;
+    helper?: string;
+    hasError?: boolean;
+    errorMessage?: string;
+    title?: string;
+    disabled?: boolean;
+    searchFilter?: boolean;
+    onRestablish?: () => void;
+};
+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

@@ -0,0 +1,277 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MultipleSelect = void 0;
+var _react = require("react");
+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");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const MultipleSelect = ({
+  options,
+  selectedValues,
+  onChange,
+  label,
+  placeholder = "Seleccionar",
+  helper,
+  hasError = false,
+  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;
+    return _constants.colors["Gray-200"].light;
+  };
+  const hasChanges = (0, _react.useMemo)(() => {
+    if (draftSelection.length !== selectedValues.length) return true;
+    const sortedDraft = [...draftSelection].sort();
+    const sortedCurrent = [...selectedValues].sort();
+    return sortedDraft.some((v, i) => v !== sortedCurrent[i]);
+  }, [draftSelection, selectedValues]);
+  const displayText = (0, _react.useMemo)(() => {
+    if (!selectedValues.length) return null;
+    const selectedOptions = options.filter(opt => selectedValues.includes(opt.value));
+    const count = selectedOptions.length;
+    const labels = selectedOptions.map(opt => opt.label).join(", ");
+    return {
+      count,
+      labels
+    };
+  }, [selectedValues, options]);
+  const handleOpen = (0, _react.useCallback)(() => {
+    if (disabled) return;
+    setDraftSelection([...selectedValues]);
+    setIsFocus(true);
+    bottomSheetRef.current?.present();
+  }, [disabled, selectedValues]);
+  const handleToggle = (0, _react.useCallback)(value => {
+    setDraftSelection(prev => prev.includes(value) ? prev.filter(v => v !== value) : [...prev, value]);
+  }, []);
+  const handleSave = (0, _react.useCallback)(() => {
+    const selectedOptions = options.filter(opt => draftSelection.includes(opt.value));
+    onChange(selectedOptions);
+    bottomSheetRef.current?.dismiss();
+    setIsFocus(false);
+  }, [draftSelection, onChange, options]);
+  const handleDismiss = (0, _react.useCallback)(() => {
+    setIsFocus(false);
+    setDraftSelection([]);
+    setFilterText("");
+  }, []);
+  const handleRestablish = (0, _react.useCallback)(() => {
+    if (onRestablish) {
+      onRestablish();
+      bottomSheetRef.current?.dismiss();
+      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
+  }) => {
+    const isChecked = draftSelection.includes(item.value);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.Checkbox, {
+      title: item.label,
+      description: item.description,
+      isChecked: isChecked,
+      onToggle: () => handleToggle(item.value)
+    });
+  }, [draftSelection, handleToggle]);
+  const footer = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.DefaultButton, {
+      label: "Guardar",
+      variant: "primary",
+      size: "large",
+      onPress: handleSave,
+      disabled: !hasChanges
+    }), onRestablish && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.footerSecondaryButton,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.TextButton, {
+        label: "Restablecer",
+        variant: "primary",
+        size: "large",
+        onPress: handleRestablish
+      })
+    })]
+  }), [handleSave, hasChanges, onRestablish, handleRestablish]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.fieldContainer,
+    children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+      type: "m-regular",
+      style: {
+        color: _constants.colors["Gray-600"].light
+      },
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+      style: [styles.selectButton, {
+        borderColor: getBorderColor()
+      }, disabled && styles.disabled],
+      onPress: handleOpen,
+      activeOpacity: 0.7,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.displayTextContainer,
+        children: displayText ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.countBadge,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+              type: "s-regular",
+              style: styles.countText,
+              children: displayText.count
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+            type: "m-regular",
+            style: {
+              color: _constants.colors["Gray-600"].light,
+              flex: 1
+            },
+            numberOfLines: 1,
+            ellipsizeMode: "tail",
+            children: displayText.labels
+          })]
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+          type: "m-regular",
+          style: {
+            color: _constants.colors["Gray-500"].light,
+            flex: 1
+          },
+          numberOfLines: 1,
+          ellipsizeMode: "tail",
+          children: placeholder
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.default, {
+        name: "dropdown-down",
+        size: _constants.sizes.xl,
+        color: _constants.colors["Gray-400"].light
+      })]
+    }), helper && !hasError && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        marginTop: _constants.spacing["size-2"]
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+        type: "s-regular",
+        style: {
+          color: _constants.colors["Gray-600"].light
+        },
+        children: helper
+      })
+    }), hasError && errorMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.errorContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.errorIcon,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.default, {
+          name: "warning-circle",
+          size: _constants.sizes.s,
+          color: _constants.colors["Error-500"].light
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+        type: "s-regular",
+        style: styles.errorText,
+        children: errorMessage
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_BottomSheet.BottomSheetComponent, {
+      ref: bottomSheetRef,
+      title: title ?? label ?? "Seleccionar",
+      snapPoints: ["90%"],
+      onDismiss: handleDismiss,
+      footer: footer,
+      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
+      })]
+    })]
+  });
+};
+exports.MultipleSelect = MultipleSelect;
+const styles = _reactNative.StyleSheet.create({
+  fieldContainer: {
+    marginBottom: _constants.spacing["size-4"],
+    width: "100%"
+  },
+  selectButton: {
+    width: "100%",
+    borderRadius: _constants.radius["border-2"],
+    borderWidth: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginTop: _constants.spacing["size-2"],
+    height: 48,
+    paddingHorizontal: _constants.spacing["size-3"]
+  },
+  disabled: {
+    opacity: 0.5
+  },
+  displayTextContainer: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    marginRight: _constants.spacing["size-2"]
+  },
+  countBadge: {
+    backgroundColor: _constants.colors["Primary-500"].light,
+    borderRadius: _constants.radius.circle,
+    minWidth: 20,
+    height: 20,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: _constants.spacing["size-1"],
+    marginRight: _constants.spacing["size-2"]
+  },
+  countText: {
+    color: _constants.colors.White.light,
+    fontSize: 11
+  },
+  errorContainer: {
+    marginTop: _constants.spacing["size-2"],
+    flexDirection: "row",
+    width: "100%"
+  },
+  errorIcon: {
+    alignItems: "center",
+    paddingTop: _constants.spacing["size-1"]
+  },
+  errorText: {
+    color: _constants.colors["Error-500"].light,
+    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"]
+  },
+  footerSecondaryButton: {
+    marginTop: _constants.spacing["size-4"]
+  }
+});

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

@@ -1 +1,2 @@
 export * from './Select';
+export * from './MultipleSelect';

package/lib/molecules/Select/index.js

@@ -13,4 +13,15 @@ Object.keys(_Select).forEach(function (key) {
       return _Select[key];
     }
   });
+});
+var _MultipleSelect = require("./MultipleSelect");
+Object.keys(_MultipleSelect).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _MultipleSelect[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _MultipleSelect[key];
+    }
+  });
 });

package/package.json

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