ordering-ui-react-native 0.23.27 → 0.23.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.23.27",
+  "version": "0.23.28",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/themes/original/src/components/BusinessProductsList/SubcategoriesComponent/index.tsx

@@ -1,87 +1,90 @@
 import React from 'react'
-import { useTheme } from 'styled-components/native'
 import { StyleSheet } from 'react-native'
-import { SubCategoriesContainer, ContainerButton } from './styles'
-import { OButton } from '../../shared'
 import { useLanguage } from 'ordering-components/native'
+import FIcon from 'react-native-vector-icons/Feather'
+import { SubCategoriesContainer, ContainerButton } from './styles'
+import { OButton, OText } from '../../shared'
 
 function SubcategoriesComponentPropsAreEqual(prev: any, next: any) {
-    return prev.subcategoriesSelected === next.subcategoriesSelected &&
-        prev.category === next.category
+  return prev.subcategoriesSelected === next.subcategoriesSelected &&
+    prev.category === next.category
 }
 
 interface SubcategoriesComponentParams {
-    subcategoriesSelected?: any,
-    category?: any,
-    onClickSubcategory: any
+  subcategoriesSelected?: any,
+  category?: any,
+  onClickSubcategory: any
 }
 
 const SubcategoriesComponent = (props: SubcategoriesComponentParams) => {
-    const {
-        subcategoriesSelected,
-        category,
-        onClickSubcategory
-    } = props
+  const {
+    subcategoriesSelected,
+    category,
+    onClickSubcategory
+  } = props
 
-    const theme = useTheme()
-    const [, t] = useLanguage()
-    const allsubcategorySelected = !subcategoriesSelected?.some((subcategory: any) => category?.id === subcategory?.parent_category_id)
+  const [, t] = useLanguage()
+  const allsubcategorySelected = !subcategoriesSelected?.some((subcategory: any) => category?.id === subcategory?.parent_category_id)
 
-    const bpStyles = StyleSheet.create({
-        catWrap: { flexDirection: 'row', alignItems: 'center', marginBottom: 19 },
-        catIcon: {
-            borderRadius: 7.6,
-            shadowColor: '#000000',
-            shadowOpacity: 0.1,
-            shadowOffset: { width: 0, height: 0 },
-            shadowRadius: 1,
-            marginEnd: 13,
-        },
-        categoryButtonStyle: {
-            borderWidth: 0,
-            marginLeft: 5,
-            marginRight: 5,
-            marginBottom: 10,
-            height: 35,
-            paddingLeft: 3,
-            paddingRight: 3,
-        }
-    });
+  const bpStyles = StyleSheet.create({
+    categoryButtonStyle: {
+      borderWidth: 0,
+      marginRight: 5,
+      borderRadius: 8,
+      marginBottom: 5,
+      height: 35,
+      padding: 0,
+      paddingLeft: 3,
+      paddingRight: 3,
+    }
+  });
 
 
-    return (
-        <SubCategoriesContainer>
-            <ContainerButton
-                isSelected={allsubcategorySelected}
-            >
-                <OButton
-                    onClick={() => onClickSubcategory(null, category)}
-                    text={`${t('ALL', 'All')} ${allsubcategorySelected ? 'X' : ''}`}
-                    style={bpStyles.categoryButtonStyle}
-                    textStyle={{ fontSize: 12 }}
-                    isDisabled={!allsubcategorySelected}
-                />
-            </ContainerButton>
-            {category?.subcategories?.map((subcategory: any) => {
-                const isSubcategorySelected = subcategoriesSelected?.find((_subcategory: any) => _subcategory?.id === subcategory?.id)
-                return (
-                    <ContainerButton
-                        key={subcategory?.id}
-                        isSelected={isSubcategorySelected}
-                    >
-                        <OButton
-                            onClick={() => onClickSubcategory(subcategory, category)}
-                            text={`${subcategory?.name} ${isSubcategorySelected ? 'X' : ''}`}
-                            style={bpStyles.categoryButtonStyle}
-                            textStyle={{ fontSize: 12 }}
-                            isDisabled={!allsubcategorySelected}
-                        />
-                    </ContainerButton>
-                )
-            }
-            )}
-        </SubCategoriesContainer>
-    )
+  return (
+    <SubCategoriesContainer>
+      <ContainerButton
+        isSelected={allsubcategorySelected}
+      >
+        <OButton
+          onClick={() => onClickSubcategory(null, category)}
+          text={
+            allsubcategorySelected
+              ? <OText color='#FFF'>
+                  {t('ALL', 'All')}{' '}
+                  <FIcon name='x-circle' size={16} />
+                </OText>
+              : t('ALL', 'All')
+          }
+          style={bpStyles.categoryButtonStyle}
+          textStyle={{ fontSize: 12 }}
+        />
+      </ContainerButton>
+      {category?.subcategories?.map((subcategory: any) => {
+        const isSubcategorySelected = subcategoriesSelected?.find((_subcategory: any) => _subcategory?.id === subcategory?.id)
+        return (
+          <ContainerButton
+            key={subcategory?.id}
+            isSelected={isSubcategorySelected}
+          >
+            <OButton
+              onClick={() => onClickSubcategory(subcategory, category)}
+              text={
+                isSubcategorySelected
+                  ? <OText color='#FFF'>
+                      {subcategory?.name}{' '}
+                      <FIcon name='x-circle' size={16} />
+                    </OText>
+                  : subcategory?.name
+              }
+              style={bpStyles.categoryButtonStyle}
+              textStyle={{ fontSize: 12 }}
+            />
+          </ContainerButton>
+        )
+      }
+      )}
+    </SubCategoriesContainer>
+  )
 }
 
 export const SubcategoriesComponentMemoized = React.memo(SubcategoriesComponent, SubcategoriesComponentPropsAreEqual)

package/themes/original/src/components/BusinessProductsList/index.tsx

@@ -65,11 +65,10 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
       return
     }
     const categoryFounded = subcategoriesSelected.find((_subcategory: any) => subCategory?.id === _subcategory?.id)
-    if (categoryFounded) {
-      setSubcategoriesSelected?.(subcategoriesSelected.filter((_subcategory: any) => subCategory?.id !== _subcategory?.id))
-    } else {
-      setSubcategoriesSelected?.([...subcategoriesSelected, subCategory])
-    }
+    setSubcategoriesSelected?.(categoryFounded
+      ? subcategoriesSelected.filter((_subcategory: any) => subCategory?.id !== _subcategory?.id)
+      : [...subcategoriesSelected, subCategory]
+    )
   }
 
   return (