dhre-ui-kit 0.0.61 → 0.0.62

package/package.json

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

package/src/components/tabs/Tabs.interface.ts

@@ -1,13 +1,10 @@
-import {ReactElement} from 'react';
-import {ViewStyle} from 'react-native';
-
-export interface TabsProps {
-  tabs: {label: string}[];
-  onTabPress?: (index: number) => void;
-  testID?: string;
-  hideTitle?: boolean;
-  hideIcon?: boolean;
-  initialTab?: number;
-  icon?: ReactElement;
-  iconStyle?: ViewStyle;
+export interface Tab {
+  id: string;
+  title: string;
+  isSelected?: boolean;
+}
+export interface MultipleTabsProps {
+  tabs: Tab[];
+  initialSelected?: string[];
+  onSelectionChange?: (selectedTabs: Tab[]) => void;
 }

package/src/components/tabs/Tabs.styles.ts

@@ -1,36 +1,24 @@
-import {DHRE_COLORS_TEXT} from '../../theme/colors';
-import {horizontalScale, verticalScale} from '../../utils/stylehelper';
 import {StyleSheet} from 'react-native';
+import {
+  horizontalScale,
+  moderateScale,
+  verticalScale,
+} from '../../utils/stylehelper';
 
-const styles = StyleSheet.create({
-  tabsContainer: {
+export default StyleSheet.create({
+  container: {
     flexDirection: 'row',
-    alignItems: 'center',
+    gap: horizontalScale(5),
+    flexWrap: 'wrap',
   },
-  tabItem: {
-    flex: 1,
-    flexDirection: 'row',
+  button: {
+    minWidth: horizontalScale(94),
+    minHeight: verticalScale(32),
+    paddingVertical: verticalScale(8),
+    paddingHorizontal: horizontalScale(12),
+    borderRadius: moderateScale(32),
     alignItems: 'center',
     justifyContent: 'center',
-    paddingVertical: verticalScale(6),
-    paddingHorizontal: horizontalScale(12),
-    marginHorizontal: horizontalScale(8),
-    borderRadius: 50,
-    gap: horizontalScale(8),
-    backgroundColor: DHRE_COLORS_TEXT.DH_BLACK,
-  },
-  label: {
-    color: DHRE_COLORS_TEXT.DH_WHITE,
-  },
-  activeTab: {
-    backgroundColor: DHRE_COLORS_TEXT.DH_BLACK,
-  },
-  inactiveTab: {
-    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
-  },
-  inActiveLabel: {
-    color: DHRE_COLORS_TEXT.DH_TEXTLIGHTEST,
+    borderWidth: 1,
   },
 });
-
-export default styles;

package/src/components/tabs/Tabs.tsx

@@ -1,64 +1,73 @@
 import React, {useState} from 'react';
-import {ScrollView, Pressable, View} from 'react-native';
-import CustomTypography from '../customTypography/CustomTypography';
+import {Pressable, View, ViewStyle} from 'react-native';
 import styles from './Tabs.styles';
-import {TabsProps} from './Tabs.interface';
-import {DHRE_COLORS_TEXT} from '../../theme/colors';
+import {FontStyle} from '../../utils/appEnum';
+import CustomText from '../customText';
+import {useTheme} from '../../theme/ThemeContext';
 
-const Tabs: React.FC<TabsProps> = ({
-  tabs,
-  onTabPress,
-  testID,
-  hideTitle = false,
-  hideIcon = true,
-  initialTab = 0,
-  icon: Icon,
-  iconStyle,
+interface Props {
+  options: string[];
+  initialSelected?: string[];
+  onSelectionChange?: (selected: string[]) => void;
+  style?: ViewStyle;
+}
+
+const Tabs: React.FC<Props> = ({
+  options,
+  initialSelected = [],
+  onSelectionChange,
+  style,
 }) => {
-  const [activeTab, setActiveTab] = useState(initialTab);
+  const {theme} = useTheme();
+
+  const [data, setData] = useState(
+    options.map(option => ({
+      title: option,
+      id: option,
+      isSelected: initialSelected?.includes(option),
+    })),
+  );
 
-  const handleTabPress = (index: number) => {
-    setActiveTab(index);
-    if (onTabPress) {
-      onTabPress(index);
+  const handlePress = (id: string) => {
+    const updatedData = data?.map(item =>
+      item?.id === id ? {...item, isSelected: !item?.isSelected} : item,
+    );
+    setData(updatedData);
+    const selectedTabs = updatedData
+      .filter(item => item?.isSelected)
+      .map(item => item?.id);
+    if (onSelectionChange) {
+      onSelectionChange(selectedTabs);
     }
   };
 
   return (
-    <ScrollView
-      testID={testID}
-      horizontal
-      showsHorizontalScrollIndicator={false}
-      contentContainerStyle={styles.tabsContainer}>
-      {tabs?.map((tab, index) => (
+    <View style={[styles.container, style]}>
+      {data?.map(({id, title, isSelected}) => (
         <Pressable
-          testID={`Press-Tab-${index}`}
-          key={index}
-          onPress={() => handleTabPress(index)}
-          style={[
-            styles.tabItem,
-            activeTab === index ? styles.activeTab : styles.inactiveTab,
-          ]}>
-          {!hideIcon && Icon && (
-            <View style={iconStyle}>
-              {React.cloneElement(Icon, {
-                fill:
-                  activeTab === index
-                    ? DHRE_COLORS_TEXT.DH_WHITE
-                    : DHRE_COLORS_TEXT.DH_TEXTLIGHTEST,
-              })}
-            </View>
-          )}
-          {!hideTitle && (
-            <CustomTypography
-              variant={activeTab === index ? 'H8semiBold' : 'H8medium'}
-              style={activeTab === index ? styles.label : styles.inActiveLabel}
-              text={tab?.label}
-            />
-          )}
+          key={id}
+          style={{
+            ...styles.button,
+            backgroundColor: isSelected
+              ? theme.CONTENT_PRIMARY
+              : theme.CONTENT_INVERTED,
+            borderColor: isSelected
+              ? theme.CONTENT_INVERTED
+              : theme.CONTENT_SECONDRY,
+          }}
+          onPress={() => handlePress(id)}>
+          <CustomText
+            variant={FontStyle.L2_REGULAR}
+            style={{
+              color: isSelected
+                ? theme.CONTENT_INVERTED
+                : theme.CONTENT_SECONDRY,
+            }}
+            text={title}
+          />
         </Pressable>
       ))}
-    </ScrollView>
+    </View>
   );
 };
 

package/src/components/tabs/Tabs.test.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import {it} from '@jest/globals';
-import {render} from '@testing-library/react-native';
-import Tabs from './Tabs';
-
-const mockProps = {
-  tabs: [{label: 'Tabs'}],
-  hideTitle: false,
-  hideIcon: false,
-  initialTab: 1,
-  onTabPress: jest.fn(),
-  testID: 'TABS-COMPONENT',
-};
-
-describe('Tabs Component', () => {
-  it('Component renders correctly', () => {
-    const {getByTestId} = render(<Tabs {...mockProps} />);
-    expect(getByTestId('TABS-COMPONENT')).toBeTruthy();
-  });
-});