dhre-ui-kit 0.0.34 → 0.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-ui-kit",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "main": "src/index.ts",
   "files": [
     "src",

package/src/components/bottomDrawer/BottomDrawer.interface.ts

@@ -17,4 +17,5 @@ export interface BottomDrawerProps {
   showRightIcon?: boolean;
   onLeftIconPress?: () => void;
   titleStyle?: TextStyle;
+  titleVariant?: string;
 }

package/src/components/bottomDrawer/BottomDrawer.tsx

@@ -23,6 +23,7 @@ const BottomDrawer: React.FC<BottomDrawerProps> = ({
   rightIcon = <CrossIcon />,
   onLeftIconPress,
   titleStyle,
+  titleVariant = 'B2_REGULAR',
 }) => {
   return (
     <Modal
@@ -47,9 +48,9 @@ const BottomDrawer: React.FC<BottomDrawerProps> = ({
                 onPress: onLeftIconPress,
               })}
             <CustomTypography
-              variant="B2_REGULAR"
+              variant={titleVariant}
               text={title}
-              style={[styles.title, titleStyle]}
+              style={{...styles.title, ...titleStyle}}
             />
             {showRightIcon &&
               React.cloneElement(rightIcon, {

package/src/components/scrollList/category.tsx

@@ -3,8 +3,8 @@ import {ScrollView, Pressable, View, StyleSheet} from 'react-native';
 import CustomText from '../customText/CustomText';
 
 interface ScrollableListProps {
-  data: string[];
-  handleSelectCategory: (item: string) => void;
+  data: {name: string; value: string}[];
+  handleSelectCategory: (value: string) => void;
   containerStyle?: object;
   scrollViewContentStyle?: object;
   itemStyle?: object;
@@ -23,7 +23,9 @@ const ScrollableList = ({
   selectedItemTextColor = 'CONTENT_PRIMARY',
   defaultItemTextColor = 'CONTENT_SECONDRY',
 }: ScrollableListProps) => {
-  const [selectedItem, setSelectedItem] = useState<string | null>(data[0]);
+  const [selectedItem, setSelectedItem] = useState<string | null>(
+    data.length > 0 ? data[0].name : null,
+  );
 
   return (
     <View style={[styles.container, containerStyle]}>
@@ -36,21 +38,24 @@ const ScrollableList = ({
         ]}>
         {data?.map(item => (
           <Pressable
-            key={item}
+            key={item.value} // Use item.value as the key
             style={[
               styles.item,
               itemStyle,
-              selectedItem === item && [styles.selectedItem, selectedItemStyle],
+              selectedItem === item.name && [
+                styles.selectedItem,
+                selectedItemStyle,
+              ],
             ]}
             onPress={() => {
-              setSelectedItem(item);
-              handleSelectCategory(item);
+              setSelectedItem(item.name);
+              handleSelectCategory(item.name);
             }}>
             <CustomText
-              text={item}
+              text={item.name}
               variant="L1_REGULAR"
               textColor={
-                selectedItem === item
+                selectedItem === item.name
                   ? selectedItemTextColor
                   : defaultItemTextColor
               }