dhre-ui-kit 0.0.67 → 0.0.68

package/package.json

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

package/src/components/singleSelectionTag/TagSingleSelection.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import {View, Text, Pressable, FlatList, StyleSheet} from 'react-native';
+
+interface Tag {
+  value: string;
+  name: string;
+}
+
+interface TagsComponentProps {
+  tagList: Tag[];
+  selectedTag: string; // Allow null for unselected state
+  setSelectedTag: (val: string) => void; // Allow null for unselected state
+  handleTagPress?: (val: string) => void | undefined;
+}
+
+const TagsComponent: React.FC<TagsComponentProps> = ({
+  tagList,
+  selectedTag,
+  handleTagPress,
+}) => {
+  const reorderedTags = (): Tag[] => {
+    if (selectedTag) {
+      return [
+        tagList.find(tag => tag.name === selectedTag)!,
+        ...tagList.filter(tag => tag.name !== selectedTag),
+      ];
+    }
+    return tagList;
+  };
+
+  const renderTagItem = ({item}: {item: Tag}) => (
+    <Pressable
+      onPress={() => handleTagPress?.(item.name)}
+      style={[
+        styles.tagButton,
+        selectedTag === item?.name
+          ? styles.selectedTagButton
+          : styles.unselectedTagButton,
+      ]}>
+      <Text
+        style={[
+          styles.tagText,
+          selectedTag === item?.name
+            ? styles.selectedTagText
+            : styles.unselectedTagText,
+        ]}>
+        {item?.name}
+      </Text>
+      {selectedTag === item?.name && <Text style={styles.closeButton}>✕</Text>}
+    </Pressable>
+  );
+
+  return (
+    <View>
+      <FlatList
+        data={reorderedTags()}
+        renderItem={renderTagItem}
+        keyExtractor={item => item?.name}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.listContainer}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  listContainer: {
+    paddingHorizontal: 10,
+    alignItems: 'center',
+  },
+  tagButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 20,
+    marginHorizontal: 8,
+    borderWidth: 1,
+  },
+  selectedTagButton: {
+    backgroundColor: '#FFF',
+    borderColor: '#000',
+  },
+  unselectedTagButton: {
+    backgroundColor: 'transparent',
+    borderColor: '#888',
+  },
+  tagText: {
+    fontSize: 16,
+  },
+  selectedTagText: {
+    color: '#000',
+  },
+  unselectedTagText: {
+    color: '#888',
+  },
+  closeButton: {
+    marginLeft: 10,
+    fontSize: 18,
+    color: '#000',
+  },
+});
+
+export default TagsComponent;

package/src/components/singleSelectionTag/index.ts

@@ -0,0 +1 @@
+export {default} from './TagSingleSelection';

package/src/index.ts

@@ -38,6 +38,7 @@ export {default as TextInput} from './components/textInput';
 export {default as DropDown} from './components/dropDown';
 export {default as CustomSwitchBtn} from './components/customSwitchBtn';
 export {default as toastService} from './components/toast/ToastService';
+export {default as SingleSelectionTags} from './components/singleSelectionTag';
 export {FONT_STYLES} from './theme/fonts';
 export {FontStyle, Theme} from './utils/appEnum';