feat(faq): add toggle menu, re-org codebase (#1311)

Author: mydearxym

src/spec/index.ts

@@ -80,6 +80,7 @@ export type {
   TASType,
   TASState,
   TTagMode,
+  TMenuOption,
 } from './utils'
 
 export type { TGQLError } from './graphql'

src/spec/utils.ts

@@ -191,3 +191,11 @@ export type TASType = 'BUG' | 'FEATURE' | 'DEFAULT' | 'QUESTION' | 'LOCK'
 export type TASState = 'TODO' | 'WIP' | 'DONE' | 'DEFAULT' | 'RESOLVE' | 'LOCK'
 
 export type TTagMode = 'default' | 'label'
+
+// for menu button
+export type TMenuOption = {
+  title: string
+  key: string
+  icon?: string
+  link?: string
+}

src/widgets/Buttons/IconButton.tsx

@@ -4,7 +4,14 @@ import { ICON } from '@/config'
 import { SVG } from '@/constant'
 
 import Tooltip from '@/widgets/Tooltip'
-import { Wrapper, Icon, Hint, getIcon } from './styles/icon_button'
+import {
+  Wrapper,
+  Content,
+  Icon,
+  Hint,
+  getIcon,
+  HoverBg,
+} from './styles/icon_button'
 
 export type TProps = {
   path?: string | null
@@ -66,18 +73,21 @@ const IconButton: FC<TProps> = ({
       mBottom={mBottom}
       onClick={onClick}
     >
-      {hint ? (
-        <Tooltip
-          placement={hintPlacement}
-          content={<Hint>{hint}</Hint>}
-          noPadding
-          delay={hintDelay}
-        >
-          {realIcon}
-        </Tooltip>
-      ) : (
-        <>{realIcon}</>
-      )}
+      <>
+        {hint ? (
+          <Tooltip
+            placement={hintPlacement}
+            content={<Hint>{hint}</Hint>}
+            noPadding
+            delay={hintDelay}
+          >
+            <Content>{realIcon}</Content>
+          </Tooltip>
+        ) : (
+          <Content>{realIcon}</Content>
+        )}
+        <HoverBg size={size} />
+      </>
     </Wrapper>
   )
 }

src/widgets/Buttons/MenuButton/Menu.tsx

@@ -1,9 +1,10 @@
 import { FC, memo } from 'react'
 import { isEmpty } from 'ramda'
 
+import type { TMenuOption } from '@/spec'
+
 import { ICON } from '@/config'
 import { cutRest } from '@/utils/helper'
-import type { TOption } from './index'
 
 import {
   Wrapper,
@@ -40,8 +41,8 @@ const OptionBlock = ({ item, onClick }) => {
 }
 
 type TProps = {
-  options: TOption[]
-  extraOptions: TOption[]
+  options: TMenuOption[]
+  extraOptions: TMenuOption[]
   panelMinWidth: string
   onClick?: (key?: string) => void
 }

src/widgets/Buttons/MenuButton/index.tsx

@@ -2,7 +2,7 @@ import { FC, ReactNode, memo } from 'react'
 
 import { buildLog } from '@/utils/logger'
 
-import type { TTooltipPlacement } from '@/spec'
+import type { TTooltipPlacement, TMenuOption } from '@/spec'
 
 import Tooltip from '@/widgets/Tooltip'
 
@@ -12,17 +12,10 @@ import Menu from './Menu'
 
 const log = buildLog('C:MenuButton')
 
-export type TOption = {
-  title: string
-  key: string
-  icon?: string
-  link?: string
-}
-
 type TProps = {
   children: ReactNode
-  options: TOption[]
-  extraOptions?: TOption[]
+  options: TMenuOption[]
+  extraOptions?: TMenuOption[]
   placement?: TTooltipPlacement
   panelMinWidth?: string
   onClick?: (key?: string) => void

src/widgets/Buttons/styles/icon_button.ts

@@ -21,6 +21,8 @@ import ArchivedIcon from '@/icons/article/Archived'
 
 import CollectionIcon from '@/icons/CollectionBookmark'
 import ShareIcon from '@/icons/Share'
+import MoreLIcon from '@/icons/MoreL'
+import MoreIcon from '@/icons/More'
 
 // import CloseCross from '@/icons/CloseCross'
 // import AirBalloon from '@/icons/AirBalloon'
@@ -37,14 +39,37 @@ const AirBalloon = dynamic(() => import('@/icons/AirBalloon'), {
 
 type TWrapper = Omit<TIconButtonProps, 'path'>
 export const Wrapper = styled.div<TWrapper>`
+  position: relative;
+  ${({ size }) => css.size(size)}
   ${css.flex('align-both')};
-  width: ${({ size }) => `${size}px`};
-  height: ${({ size }) => `${size}px`};
 
   margin-left: ${({ mLeft }) => `${mLeft}px`};
   margin-right: ${({ mRight }) => `${mRight}px`};
   margin-top: ${({ mTop }) => `${mTop}px`};
   margin-bottom: ${({ mBottom }) => `${mBottom}px`};
+
+  /* &:before {
+    content: '';
+    ${({ size }) => css.circle(size + 2)};
+    background: ${theme('hoverBg')};
+  } */
+`
+export const Content = styled.div`
+  z-index: 2;
+`
+export const HoverBg = styled.div<{ size: number }>`
+  position: absolute;
+  ${({ size }) => css.circle(size + 4)};
+  left: -2px;
+  top: -2px;
+  background: ${theme('hoverBg')};
+  opacity: 0;
+
+  ${Wrapper}:hover & {
+    opacity: 1;
+  }
+
+  transition: 0.25s;
 `
 type TIcon = { size: number; $dimWhenIdle: boolean } & TSpace & TActive
 export const Icon = styled(Img)<TIcon>`
@@ -116,7 +141,12 @@ export const getIcon = (type: string): FC<TIcon> => {
     case SVG.COMMENT: {
       return getStyledIcon(CommentIcon)
     }
-
+    case SVG.MOREL: {
+      return getStyledIcon(MoreLIcon)
+    }
+    case SVG.MORE: {
+      return getStyledIcon(MoreIcon)
+    }
     default: {
       return getStyledIcon(UpvoteIcon)
     }

src/widgets/Buttons/styles/menu_button/menu.ts

@@ -17,14 +17,14 @@ export const Block = styled.div`
   padding-left: 15px;
 
   &:hover {
-    background: #0d3e4e;
+    background: ${theme('hoverBg')};
     cursor: pointer;
   }
 `
 export const Divider = styled.div`
   width: 100%;
   height: 1px;
-  background: #0d3e4e;
+  background: ${theme('border')};
   margin-top: 3px;
   margin-bottom: 3px;
 `

src/widgets/FaqList/Collapse.tsx

@@ -0,0 +1,60 @@
+import { FC, memo, useCallback } from 'react'
+import { pluck } from 'ramda'
+
+import type { TID, TMenuOption, TArticle } from '@/spec'
+
+import { SVG } from '@/constant'
+
+import IconButton from '@/widgets/Buttons/IconButton'
+import MenuButton from '@/widgets/Buttons/MenuButton'
+
+import { Wrapper, Title, MenuWrapper } from '../styles/collapse/banner'
+
+type TProps = {
+  menuOptions: TMenuOption[]
+  setOpenedIDs: (ids: TID[]) => void
+  articles: TArticle[]
+}
+
+const Banner: FC<TProps> = ({ menuOptions, setOpenedIDs, articles }) => {
+  const foldAll = useCallback(() => setOpenedIDs([]), [])
+  const unFoldAll = useCallback(
+    () => setOpenedIDs(pluck('id', articles)),
+    [articles, setOpenedIDs],
+  )
+
+  const handleMenu = useCallback(
+    (key) => {
+      switch (key) {
+        case 'fold': {
+          return foldAll()
+        }
+        case 'unfold': {
+          return unFoldAll()
+        }
+
+        default: {
+          console.log('todo')
+        }
+      }
+    },
+    [foldAll, unFoldAll],
+  )
+
+  return (
+    <Wrapper>
+      <Title>常见问题</Title>
+      <MenuWrapper>
+        <MenuButton
+          placement="bottom-end"
+          options={menuOptions}
+          onClick={(key) => handleMenu(key)}
+        >
+          <IconButton icon={SVG.MORE} mRight={0} />
+        </MenuButton>
+      </MenuWrapper>
+    </Wrapper>
+  )
+}
+
+export default memo(Banner)

src/widgets/FaqList/Collapse/Banner.tsx

@@ -0,0 +1,35 @@
+import { FC, memo } from 'react'
+
+import { includes } from 'ramda'
+
+import type { TID, TArticle } from '@/spec'
+import {
+  Wrapper,
+  Header,
+  Title,
+  ArrowIcon,
+  Body,
+} from '../styles/collapse/section'
+
+type TProps = {
+  item: TArticle
+  openedIDs: TID[]
+  toggle: (id: TID) => void
+}
+
+const Section: FC<TProps> = ({ item, openedIDs, toggle }) => {
+  const isOpened = includes(item.id, openedIDs)
+
+  return (
+    <Wrapper>
+      <Header onClick={() => toggle(item.id)}>
+        <Title $active={isOpened}>{item.title}</Title>
+        <ArrowIcon $active={isOpened} />
+      </Header>
+
+      <Body show={isOpened}>{item.body}</Body>
+    </Wrapper>
+  )
+}
+
+export default memo(Section)