diff --git a/src/containers/unit/TagsBar/DesktopView/Folder.js b/src/containers/unit/TagsBar/DesktopView/Folder.js index d825d52cd..f15df15b7 100644 --- a/src/containers/unit/TagsBar/DesktopView/Folder.js +++ b/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 ( -
toggleFolder(!isFolderOpen)}> +
{ + toggleFolder(!isFolderOpen) + + // 当关闭 Folder 的时候，如果当前 Folder 没有被激活的 Tag, 那么就回到折叠状态 + // 如果有，那么保持原来的状态 + if (isFolderOpen && !isActiveTagInFolder) { + setCurDisplayCount(MAX_DISPLAY_COUNT) + } + }} + > { {needSubToggle && ( { setCurDisplayCount( curDisplayCount === MAX_DISPLAY_COUNT diff --git a/src/containers/unit/TagsBar/DesktopView/index.js b/src/containers/unit/TagsBar/DesktopView/index.js index e824556ff..a1cb71644 100644 --- a/src/containers/unit/TagsBar/DesktopView/index.js +++ b/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 ( {activeTagData.title && } - - - - {/* - - {sortedTags.slice(0, 5).map((tag) => ( - - ))} - - */} - - {/* - {sortedTags.map((tag) => ( - ( + - ))} - */} + ))} ) } diff --git a/src/containers/unit/TagsBar/styles/desktop_view/folder.js b/src/containers/unit/TagsBar/styles/desktop_view/folder.js index aa8827e3e..fa0f6c482 100644 --- a/src/containers/unit/TagsBar/styles/desktop_view/folder.js +++ b/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; diff --git a/src/containers/unit/TagsBar/styles/desktop_view/tag_item.js b/src/containers/unit/TagsBar/styles/desktop_view/tag_item.js index 56c14953b..e5fd80556 100644 --- a/src/containers/unit/TagsBar/styles/desktop_view/tag_item.js +++ b/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; diff --git a/utils/helper.js b/utils/helper.js index 1d88bdf74..fe91338a8 100755 --- a/utils/helper.js +++ b/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), + }) + }, {}) +} diff --git a/utils/index.js b/utils/index.js index cffb6f027..f61470cad 100755 --- a/utils/index.js +++ b/utils/index.js @@ -31,6 +31,7 @@ export { isCypressRunning, multiClick, findDeepMatch, + groupByKey, } from './helper' export { errorForHuman, ssrAmbulance } from './errors'