refactor(tags-bar): simu real-world group tag && fix some edge-case (#1006)

Author: mydearxym

src/containers/unit/TagsBar/DesktopView/Folder.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 
 import { findIndex } from 'ramda'
 
@@ -20,11 +20,13 @@ import {
 } from '../styles/desktop_view/folder'
 
 const MAX_DISPLAY_COUNT = 5
-const TOGGLE_SUB_TOGGLE_THROLD = 5 // TODO: only for test, should be 15
+const TOGGLE_SUB_TOGGLE_THROLD = 15
 
 const Folder = ({ title, groupTags, allTags, activeTag, onSelect }) => {
-  // 如果标签总数都没有超过 15 个，那么就不用显示 '展示更多'了，直接全部显示完事儿
-  const needSubToggle = allTags?.length > TOGGLE_SUB_TOGGLE_THROLD || false
+  // 决定是否显示 '展示更多' 的时候参考标签总数
+  const needSubToggle =
+    allTags?.length > TOGGLE_SUB_TOGGLE_THROLD &&
+    groupTags.length > MAX_DISPLAY_COUNT
 
   const initDisplayCount = needSubToggle ? MAX_DISPLAY_COUNT : groupTags.length
 
@@ -36,9 +38,27 @@ const Folder = ({ title, groupTags, allTags, activeTag, onSelect }) => {
   const isActiveTagInFolder =
     findIndex((item) => item.id === activeTag.id, groupTags) >= 0
 
+  const subToggleRef = useRef(null)
+  // 当选中的 Tag 被折叠在展示更多里面时，将其展开
+  useEffect(() => {
+    if (subToggleRef && isActiveTagInFolder) {
+      setCurDisplayCount(groupTags.length)
+    }
+  }, [subToggleRef, isActiveTagInFolder, groupTags])
+
   return (
     <Wrapper>
-      <Header onClick={() => toggleFolder(!isFolderOpen)}>
+      <Header
+        onClick={() => {
+          toggleFolder(!isFolderOpen)
+
+          // 当关闭 Folder 的时候，如果当前 Folder 没有被激活的 Tag, 那么就回到折叠状态
+          // 如果有，那么保持原来的状态
+          if (isFolderOpen && !isActiveTagInFolder) {
+            setCurDisplayCount(MAX_DISPLAY_COUNT)
+          }
+        }}
+      >
         <ArrowIcon
           isOpen={isFolderOpen}
           src={`${ICON}/shape/arrow-simple.svg`}
@@ -63,6 +83,7 @@ const Folder = ({ title, groupTags, allTags, activeTag, onSelect }) => {
         </TagsWrapper>
         {needSubToggle && (
           <SubToggle
+            ref={subToggleRef}
             onClick={() => {
               setCurDisplayCount(
                 curDisplayCount === MAX_DISPLAY_COUNT

src/containers/unit/TagsBar/DesktopView/index.js

@@ -6,15 +6,15 @@
 
 import React from 'react'
 import T from 'prop-types'
+import { keys } from 'ramda'
 
 import { THREAD, TOPIC } from '@/constant'
-import { buildLog, pluggedIn } from '@/utils'
+import { buildLog, pluggedIn, groupByKey } from '@/utils'
 
 import GobackTag from './GobackTag'
 import Folder from './Folder'
-// import TagItem from './TagItem'
 
-import { Wrapper /* TagsWrapper */ } from '../styles/desktop_view'
+import { Wrapper } from '../styles/desktop_view'
 
 import { useInit } from '../logic'
 
@@ -30,45 +30,34 @@ const TagsBarContainer = ({
 }) => {
   useInit(store, thread, topic, active)
   const { tagsData, activeTagData } = store
-  // const sortedTags = sortByColor(tagsData)
+  // const tagsByGroup = groupByKey(tagsData, 'group')
+  const tagsByGroup = groupByKey(
+    tagsData.map((tag) => {
+      if (tag.id < 4) {
+        tag.group = '这是第一组'
+      } else {
+        tag.group = '这是第二组' // '__default__'
+      }
+      return tag
+    }),
+    'group',
+  )
+  // console.log('tagsByGroup: ', tagsByGroup)
+  const groupsKeys = keys(tagsByGroup)
 
   return (
     <Wrapper>
       {activeTagData.title && <GobackTag onSelect={onSelect} />}
-
-      <Folder
-        title="默认分组"
-        groupTags={tagsData}
-        allTags={tagsData}
-        activeTag={activeTagData}
-        onSelect={onSelect}
-      />
-
-      {/* <Folder title="实践 Demo">
-        <TagsWrapper>
-          {sortedTags.slice(0, 5).map((tag) => (
-            <TagItem
-              key={tag.id}
-              tag={tag}
-              active={activeTagData.title === tag.title}
-              activeId={activeTagData.id}
-              onSelect={onSelect}
-            />
-          ))}
-        </TagsWrapper>
-      </Folder> */}
-
-      {/* <TagsWrapper>
-      {sortedTags.map((tag) => (
-        <TagItem
-          key={tag.id}
-          tag={tag}
-          active={activeTagData.title === tag.title}
-          activeId={activeTagData.id}
+      {groupsKeys.map((groupKey) => (
+        <Folder
+          key={groupKey}
+          title={groupKey}
+          groupTags={tagsByGroup[groupKey]}
+          allTags={tagsData}
+          activeTag={activeTagData}
           onSelect={onSelect}
         />
-      ))} </TagsWrapper>
-      */}
+      ))}
     </Wrapper>
   )
 }

src/containers/unit/TagsBar/styles/desktop_view/folder.js

@@ -29,7 +29,7 @@ export const Title = styled.div`
   margin-left: 4px;
   font-size: 14px;
   margin-right: 8px;
-  ${css.cutFrom('120px')};
+  ${css.cutFrom('85px')};
 
   ${Header}:hover & {
     opacity: 0.65;

src/containers/unit/TagsBar/styles/desktop_view/tag_item.js

@@ -48,7 +48,7 @@ export const TagTitle = styled.div`
   letter-spacing: 2px;
   font-weight: ${({ active }) => (active ? 'bold' : 'normal')};
   opacity: ${({ active }) => (active ? 1 : 0.9)};
-  ${css.cutFrom('120px')};
+  ${({ isInline }) => (!isInline ? css.cutFrom('120px') : css.cutFrom('50px'))};
 
   &:hover {
     cursor: pointer;

utils/helper.js

@@ -273,3 +273,20 @@ export const findDeepMatch = (data, key, value) => {
 
   return result
 }
+
+/**
+ * groupByKey
+ * see @link: https://stackoverflow.com/a/47385953/4050784
+ *
+ * @param {Array} - array
+ * @param {String} - key
+ * @returns {Object}
+ */
+export const groupByKey = (array, key) => {
+  return array.reduce((hash, obj) => {
+    if (obj[key] === undefined) return hash
+    return Object.assign(hash, {
+      [obj[key]]: (hash[obj[key]] || []).concat(obj),
+    })
+  }, {})
+}

utils/index.js

@@ -31,6 +31,7 @@ export {
   isCypressRunning,
   multiClick,
   findDeepMatch,
+  groupByKey,
 } from './helper'
 
 export { errorForHuman, ssrAmbulance } from './errors'