dhre-ui-kit 0.0.189 → 0.0.191

package/lib/index.mjs

@@ -2309,6 +2309,17 @@ const SwipableList = (props) => {
     titleStyle
   } = props;
   const { theme } = useTheme();
+  const [currentOpenId, setCurrentOpenId] = useState(null);
+  const swipeableRefs = useRef({});
+  const closeSwipeable = (id) => {
+    swipeableRefs.current[id]?.close();
+  };
+  const handleSwipeStart = (id) => {
+    if (currentOpenId && currentOpenId !== id) {
+      closeSwipeable(currentOpenId);
+    }
+    setCurrentOpenId(id);
+  };
   const ActionButton = ({
     icon,
     title,
@@ -2337,7 +2348,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}`
     }
@@ -2346,7 +2360,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}`
     }
@@ -2356,7 +2373,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}`
     }
@@ -2364,6 +2384,7 @@ const SwipableList = (props) => {
   const renderItem = ({ item }) => /* @__PURE__ */ React.createElement(GestureHandlerRootView, { testID: `${testId}-LIST`, style: styles$h.container }, /* @__PURE__ */ React.createElement(
     Swipeable,
     {
+      ref: (ref) => swipeableRefs.current[item.id] = ref,
       renderLeftActions: () => leftActionHandle(
         item,
         item.isPinned ? leftPrimaryActionInActiveIcon : leftPrimaryActionActiveIcon,
@@ -2371,6 +2392,7 @@ const SwipableList = (props) => {
         item.isRead ? leftSecondaryActionInActiveIcon : leftSecondaryActionActiveIcon,
         item.isRead ? leftSecondaryActionInActiveTitle : leftSecondaryActionActiveTitle
       ),
+      onSwipeableWillOpen: () => handleSwipeStart(item.id),
       renderRightActions: () => rightActionHandle(item)
     },
     props?.renderItem(item)
@@ -3363,7 +3385,9 @@ const CustomDropdown = (props) => {
     onValueChange,
     itemContainerStyle,
     menuContainerStyle,
-    activeColor
+    activeColor,
+    keepPlaceholderOnFocus = false,
+    selectedItemTextStyle
   } = props;
   const [value, setValue] = useState(defaultValue);
   const [isFocus, setIsFocus] = useState(false);
@@ -3391,6 +3415,22 @@ const CustomDropdown = (props) => {
       onValueChange(newValue);
     }
   };
+  const renderItem = (item) => {
+    const isSelected = item[valueField] === value;
+    return /* @__PURE__ */ React.createElement(View, { style: [styles$7.itemContainer, itemContainerStyle] }, /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [
+          styles$7.itemText,
+          itemTextStyle,
+          // Apply itemTextStyle to all items
+          isSelected && selectedItemTextStyle
+          // Apply selectedItemTextStyle to the selected item
+        ]
+      },
+      item[labelField]
+    ));
+  };
   return /* @__PURE__ */ React.createElement(View, { style: [styles$7.container, containerStyle] }, label && renderLabel(), /* @__PURE__ */ React.createElement(
     Dropdown,
     {
@@ -3406,13 +3446,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,
@@ -3455,6 +3496,13 @@ const styles$7 = StyleSheet.create({
   },
   itemListStyle: {
     maxHeight: verticalScale(150)
+  },
+  itemContainer: {
+    paddingVertical: verticalScale(8),
+    paddingHorizontal: horizontalScale(12)
+  },
+  itemText: {
+    fontSize: verticalScale(14)
   }
 });