dhre-ui-kit 0.0.189 → 0.0.191

package/lib/index.d.ts

@@ -629,6 +629,8 @@ interface CustomDropdownProps {
     itemTextStyle?: TextStyle;
     onValueChange?: (value: string) => void;
     itemContainerStyle?: ViewStyle;
+    keepPlaceholderOnFocus?: boolean;
+    selectedItemTextStyle?: TextStyle;
     menuContainerStyle?: ViewStyle;
     activeColor?: string;
     renderRightIcon?: (visible?: boolean) => JSX.Element | null | undefined;

package/lib/index.js

@@ -2342,6 +2342,17 @@ const SwipableList = (props) => {
     titleStyle
   } = props;
   const { theme } = useTheme();
+  const [currentOpenId, setCurrentOpenId] = React.useState(null);
+  const swipeableRefs = React.useRef({});
+  const closeSwipeable = (id) => {
+    swipeableRefs.current[id]?.close();
+  };
+  const handleSwipeStart = (id) => {
+    if (currentOpenId && currentOpenId !== id) {
+      closeSwipeable(currentOpenId);
+    }
+    setCurrentOpenId(id);
+  };
   const ActionButton = ({
     icon,
     title,
@@ -2370,7 +2381,10 @@ const SwipableList = (props) => {
     {
       icon: leftPrimaryActionIcon,
       title: leftPrimaryActionTitle,
-      onPress: () => leftPrimaryActionHandler?.(item),
+      onPress: () => {
+        leftPrimaryActionHandler?.(item);
+        closeSwipeable(item.id);
+      },
       style: leftPrimaryActionStyle,
       testID: `${testId}-LEFT-PRIMARY-${item.id}`
     }
@@ -2379,7 +2393,10 @@ const SwipableList = (props) => {
     {
       icon: leftSecondaryActionIcon,
       title: leftSecondaryActionTitle,
-      onPress: () => leftSecondaryActionHandler?.(item),
+      onPress: () => {
+        leftSecondaryActionHandler?.(item);
+        closeSwipeable(item.id);
+      },
       style: leftSecondaryActionStyle,
       testID: `${testId}-LEFT-SECONDARY-${item.id}`
     }
@@ -2389,7 +2406,10 @@ const SwipableList = (props) => {
     {
       icon: rightPrimaryActionIcon,
       title: rightPrimaryActionTitle || "",
-      onPress: () => rightPrimaryActionHandler?.(item),
+      onPress: () => {
+        rightPrimaryActionHandler?.(item);
+        closeSwipeable(item.id);
+      },
       style: rightPrimaryActionStyle,
       testID: `${testId}-RIGHT-PRIMARY-${item.id}`
     }
@@ -2397,6 +2417,7 @@ const SwipableList = (props) => {
   const renderItem = ({ item }) => /* @__PURE__ */ React__default["default"].createElement(reactNativeGestureHandler.GestureHandlerRootView, { testID: `${testId}-LIST`, style: styles$h.container }, /* @__PURE__ */ React__default["default"].createElement(
     reactNativeGestureHandler.Swipeable,
     {
+      ref: (ref) => swipeableRefs.current[item.id] = ref,
       renderLeftActions: () => leftActionHandle(
         item,
         item.isPinned ? leftPrimaryActionInActiveIcon : leftPrimaryActionActiveIcon,
@@ -2404,6 +2425,7 @@ const SwipableList = (props) => {
         item.isRead ? leftSecondaryActionInActiveIcon : leftSecondaryActionActiveIcon,
         item.isRead ? leftSecondaryActionInActiveTitle : leftSecondaryActionActiveTitle
       ),
+      onSwipeableWillOpen: () => handleSwipeStart(item.id),
       renderRightActions: () => rightActionHandle(item)
     },
     props?.renderItem(item)
@@ -3396,7 +3418,9 @@ const CustomDropdown = (props) => {
     onValueChange,
     itemContainerStyle,
     menuContainerStyle,
-    activeColor
+    activeColor,
+    keepPlaceholderOnFocus = false,
+    selectedItemTextStyle
   } = props;
   const [value, setValue] = React.useState(defaultValue);
   const [isFocus, setIsFocus] = React.useState(false);
@@ -3424,6 +3448,22 @@ const CustomDropdown = (props) => {
       onValueChange(newValue);
     }
   };
+  const renderItem = (item) => {
+    const isSelected = item[valueField] === value;
+    return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$7.itemContainer, itemContainerStyle] }, /* @__PURE__ */ React__default["default"].createElement(
+      reactNative.Text,
+      {
+        style: [
+          styles$7.itemText,
+          itemTextStyle,
+          // Apply itemTextStyle to all items
+          isSelected && selectedItemTextStyle
+          // Apply selectedItemTextStyle to the selected item
+        ]
+      },
+      item[labelField]
+    ));
+  };
   return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$7.container, containerStyle] }, label && renderLabel(), /* @__PURE__ */ React__default["default"].createElement(
     reactNativeElementDropdown.Dropdown,
     {
@@ -3439,13 +3479,14 @@ const CustomDropdown = (props) => {
       data: data ?? [],
       labelField,
       valueField,
-      placeholder: !isFocus ? placeholder : "",
+      placeholder: keepPlaceholderOnFocus || !isFocus ? placeholder : "",
       value,
       onFocus: () => setIsFocus(true),
       onBlur: () => setIsFocus(false),
       onChange: handleValueChange,
       iconColor,
       dropdownPosition: "bottom",
+      renderItem,
       itemTextStyle,
       containerStyle: menuContainerStyle,
       activeColor,
@@ -3488,6 +3529,13 @@ const styles$7 = reactNative.StyleSheet.create({
   },
   itemListStyle: {
     maxHeight: verticalScale(150)
+  },
+  itemContainer: {
+    paddingVertical: verticalScale(8),
+    paddingHorizontal: horizontalScale(12)
+  },
+  itemText: {
+    fontSize: verticalScale(14)
   }
 });