refactor(publish-button): add menu option (#1329)

Author: mydearxym

src/containers/thread/ThreadSidebar/ClassicLayout/DynamicPart.tsx

@@ -86,7 +86,7 @@ const ClassicLayout: FC<TProps> = ({
             <PublishButton
               thread={thread}
               community={community.raw}
-              text="反馈/建议/问题"
+              text="参与讨论"
             />
           ) : (
             <NoteWrapper>

src/containers/thread/ThreadSidebar/styles/classic_layout.ts

@@ -52,8 +52,8 @@ export const CommunityNoteWrapper = styled.div`
 `
 export const PublishWrapper = styled.div<TActive>`
   display: ${({ show }) => (show ? 'block' : 'none')};
-  width: 160px;
-  max-width: 180px;
+  width: 185px;
+  max-width: 185px;
 `
 export const NoteWrapper = styled.div`
   color: ${theme('thread.articleDigest')};

src/spec/index.ts

@@ -82,6 +82,7 @@ export type {
   TTagMode,
   TMenuOption,
   TToastOption,
+  TPublishMode,
 } from './utils'
 
 export type { TGQLError } from './graphql'

src/spec/utils.d.ts

@@ -215,3 +215,5 @@ export type TToastOption = {
   position?: TToastPos
   duration?: number
 }
+
+export type TPublishMode = 'default' | 'changelog' | 'help'

src/widgets/Buttons/MenuButton/index.tsx

@@ -18,13 +18,15 @@ type TProps = {
   extraOptions?: TMenuOption[]
   placement?: TTooltipPlacement
   panelMinWidth?: string
+  offset?: [number, number]
   onClick?: (key?: string) => void
 }
 
 const MenuButton: FC<TProps> = ({
   children,
   options,
   extraOptions = [],
+  offset = [5, 5],
   onClick = log,
   placement = 'top-end',
   panelMinWidth = '110px',
@@ -34,6 +36,7 @@ const MenuButton: FC<TProps> = ({
       placement={placement}
       trigger="click"
       hideOnClick
+      offset={offset}
       content={
         <Menu
           options={options}

src/widgets/Buttons/PublishButton/constant.ts

@@ -0,0 +1,29 @@
+import { SVG, PUBLISH_MODE } from '@/constant'
+
+export const MORE_MENU = {
+  [PUBLISH_MODE.DEFAULT]: [
+    {
+      key: 'feedback',
+      icon: SVG.FEATURE,
+      title: '功能建议',
+    },
+    {
+      key: 'question',
+      icon: SVG.QUESTION,
+      title: '问题 / 求助',
+    },
+    {
+      key: 'bug',
+      icon: SVG.BUG,
+      title: 'Bug / 吐槽',
+    },
+    {
+      key: 'other',
+      icon: SVG.MORE,
+      title: '其它话题',
+    },
+  ],
+  [PUBLISH_MODE.CHANGELOG]: [],
+}
+
+export const holder = 1

src/widgets/Buttons/PublishButton/index.tsx

@@ -6,18 +6,23 @@
 
 import { memo, FC } from 'react'
 import Router from 'next/router'
+import { isEmpty } from 'ramda'
 
-import type { TThread } from '@/spec'
+import type { TThread, TPublishMode } from '@/spec'
+import { THREAD, HCN, SVG, PUBLISH_MODE } from '@/constant'
 
-import { THREAD, HCN } from '@/constant'
 import { buildLog } from '@/utils/logger'
 import { authWarn } from '@/utils/helper'
 import { useAccount } from '@/hooks'
 
+import { MORE_MENU } from './constant'
+import IconButton from '../IconButton'
+import MenuButton from '../MenuButton'
+
 import PostLayout from './PostLayout'
 import WorksLayout from './WorksLayout'
 
-import { Wrapper, PubButton } from '../styles/publish_button'
+import { Wrapper, PubButton, MoreOption } from '../styles/publish_button'
 import { getTargetPage, getText } from './helper'
 
 /* eslint-disable-next-line */
@@ -27,15 +32,20 @@ type TProps = {
   thread?: TThread
   community?: string
   text?: string
+  mode?: TPublishMode
 }
 
 const PublishButton: FC<TProps> = ({
   thread = THREAD.POST,
   community = HCN,
   text = getText(thread),
+  mode = PUBLISH_MODE.DEFAULT,
 }) => {
   const accountInfo = useAccount()
 
+  const menuOptions = MORE_MENU[mode]
+  const hasNoMenu = isEmpty(menuOptions)
+
   return (
     <Wrapper>
       <PubButton
@@ -51,6 +61,17 @@ const PublishButton: FC<TProps> = ({
           <PostLayout text={text} />
         )}
       </PubButton>
+      {!hasNoMenu && (
+        <MoreOption>
+          <MenuButton
+            placement="bottom-end"
+            options={menuOptions}
+            offset={[-5, 14]}
+          >
+            <IconButton icon={SVG.MOREL} />
+          </MenuButton>
+        </MoreOption>
+      )}
     </Wrapper>
   )
 }

src/widgets/Buttons/styles/publish_button/index.ts

@@ -4,10 +4,10 @@ import styled from 'styled-components'
 import css from '@/utils/css'
 
 import Button from '../../Button'
-
 // see example: https://codepen.io/mydearxym2/pen/qBEvvpo
 
 export const Wrapper = styled.div`
+  ${css.flex('align-center')};
   width: 100%;
 `
 export const PubButton = styled(Button)`
@@ -17,7 +17,11 @@ export const PubButton = styled(Button)`
   border: none;
   font-weight: 600;
   background: #3b434a; // to-theme
-  color: #fff; // to-theme
+  color: white; // to-theme
   height: 33px;
   border-radius: 15px;
 `
+export const MoreOption = styled.div`
+  ${css.flex('align-both')};
+  margin-left: 3px;
+`

src/widgets/Icons/index.ts

@@ -31,10 +31,27 @@ import MoreDotIcon from './menu/MoreDot'
 import QRCodeIcon from './menu/QRCode'
 import ReportIcon from './menu/Report'
 
+//
+import LightIcon from './Light'
+import BugIcon from './Bug'
+import QuestionIcon from './Question'
+
 type TstyledFn = (comp: FC) => FC
 
 export const getLocalSVG = (type: string, styledFn: TstyledFn): FC => {
   switch (type) {
+    case SVG.FEATURE: {
+      return styledFn(LightIcon)
+    }
+
+    case SVG.BUG: {
+      return styledFn(BugIcon)
+    }
+
+    case SVG.QUESTION: {
+      return styledFn(QuestionIcon)
+    }
+
     case SVG.REPORT: {
       return styledFn(ReportIcon)
     }

utils/constant/index.ts

@@ -45,3 +45,5 @@ export {
 /* some svg icon are sensitive to fill color */
 /* some community svg need fill color, like city etc.. */
 export const NON_FILL_COMMUNITY = ['javascript']
+
+export { PUBLISH_MODE } from './publish'