pref: 优化商品品类筛选的展示

src/pages/lxMall/components/Filter/components/Category/index.tsx

@@ -18,6 +18,14 @@ interface CategoryPropsType {
   showAttr?: boolean
 }
 
+type CategoryItemType = {
+  title: string | React.ReactNode,
+  key: string,
+  name?: string | React.ReactNode,
+  parentKey?: string,
+  children?: CategoryItemType[]
+}
+
 const Category: React.FC<CategoryPropsType> = (props) => {
   const { layoutType = LAYOUT_TYPE.mall, shopId, memberId, showAttr = false } = props
   const { onFilter, filterList } = props.FilterStore
@@ -165,41 +173,56 @@ const Category: React.FC<CategoryPropsType> = (props) => {
 
   }
 
-  const initTreeData = (list: any) => {
+  const initTreeData = (list: any, parentKey?: string) => {
     if (!list) {
       return []
     }
     const initExpandKeys = []
-    const result: any = list.map(item => {
+
+     const result: any = list.map(item => {
       initExpandKeys.push(item.id)
-      return {
+      const newItem: CategoryItemType = {
         title: item.title,
+        name: item.title,
         key: item.id,
-        children: item.children.map(secondCategoryItem => {
-          initExpandKeys.push(secondCategoryItem.id)
-          return {
-            title: secondCategoryItem.title,
-            key: secondCategoryItem.id,
-            children: secondCategoryItem.children.map(thirdCategoryItem => {
-              return {
-                title: <span className={styles.sub_category_title}>{thirdCategoryItem.title}</span>,
-                name: thirdCategoryItem.title,
-                key: thirdCategoryItem.id,
-                children: []
-              }
-            })
-          }
-        })
       }
+      if(parentKey) {
+        newItem.parentKey = parentKey
+      }
+      if(item.children && item.children.length > 0) {
+        newItem.children = initTreeData(item.children, newItem.key)
+      } else {
+        newItem.title = <span className={styles.sub_category_title}>{newItem.title}</span>
+      }
+      return newItem
     })
-
     return result
   }
 
+  const findParentByKey = (key: number, list) => {
+    const temp = []
+    const forFn = (arr, key) => {
+      for (let i = 0; i < arr.length; i++) {
+        const item = arr[i]
+        if (item.key === key) {
+          temp.push(item)
+          forFn(list, item.parentKey)
+          break
+        } else {
+          if (item.children) {
+            forFn(item.children, key)
+          }
+        }
+      }
+    }
+    forFn(list, key)
+    return temp
+  }
+
   const handleSelect = (selectedKeys, info) => {
     const { title, children, name } = info.node
     setSelectedKeys(selectedKeys)
-    if (children.length === 0) {
+    if (!children) {
       if (lastCategoryId !== selectedKeys[0]) {
         setLastCategoryId(selectedKeys[0])
       }
@@ -209,26 +232,29 @@ const Category: React.FC<CategoryPropsType> = (props) => {
     if(selectedKeys.length === 0) {
       initAttribute()
     }
+    const categoryNameList = findParentByKey(selectedKeys[0], categoryList).reverse()
+    const filterCatogoryName = categoryNameList.map(item => item.name).join(' > ')
+
     switch(layoutType) {
       case LAYOUT_TYPE.mall:
         onFilter({
           type: FILTER_TYPE.category,
           key: selectedKeys,
-          title: typeof title === 'string' ? title : name
+          title: filterCatogoryName
         })
         break
       case LAYOUT_TYPE.purchaseOnline:
          onFilter({
           type: FILTER_TYPE.categoryName,
-          key: typeof title === 'string' ? title : name,
-          title: typeof title === 'string' ? title : name
+          key: filterCatogoryName,
+          title: filterCatogoryName
         })
         break
       default:
         onFilter({
           type: FILTER_TYPE.customerCategory,
           key: selectedKeys,
-          title: typeof title === 'string' ? title : name
+          title: filterCatogoryName
         })
         break
     }