fix: toc style in laptop

Signed-off-by: Innei <tukon479@gmail.com>
mx-space · Aug 12, 2022 · 0f7fe66 · 0f7fe66
1 parent 2cf6c6d
commit 0f7fe66
Show file tree

Hide file tree

Showing 10 changed files with 70 additions and 55 deletions.
diff --git a/src/components/in-page/SpecialButton/float-post-tag.tsx b/src/components/in-page/SpecialButton/float-post-tag.tsx
@@ -37,13 +37,13 @@ const _FloatPostTagButton: FC = observer(() => {
 
     setTags(tags)
   }
-  const idSymbol = useRef(Symbol())
+  const actionId = useRef('tag')
   const { event } = useAnalyze()
   useEffect(() => {
-    actionStore.removeActionBySymbol(idSymbol.current)
+    actionStore.removeActionById(actionId.current)
     const action = {
       icon: <JamTags />,
-      id: idSymbol.current,
+      id: actionId.current,
       onClick: () => {
         if (tags.length == 0) {
           fetchTags()
@@ -62,7 +62,7 @@ const _FloatPostTagButton: FC = observer(() => {
 
     return () => {
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      actionStore.removeActionBySymbol(idSymbol.current)
+      actionStore.removeActionById(actionId.current)
     }
   }, [tags.length])
 

diff --git a/src/components/layouts/BasicLayout/Footer/actions.tsx b/src/components/layouts/BasicLayout/Footer/actions.tsx
@@ -79,8 +79,8 @@ export const FooterActions: FC = observer(() => {
           <BxBxsArrowToTop />
         </button>
         <TransitionGroup>
-          {actionStore.actions.map((action, i) => {
-            const El = (
+          {actionStore.actions.map((action) => {
+            const El = action.element ?? (
               <button
                 aria-label="footer action button"
                 onClick={action.onClick}
@@ -90,7 +90,11 @@ export const FooterActions: FC = observer(() => {
             )
 
             return (
-              <ScaleTransitionView key={i} unmountOnExit timeout={timeout}>
+              <ScaleTransitionView
+                key={action.id}
+                unmountOnExit
+                timeout={timeout}
+              >
                 {El}
               </ScaleTransitionView>
             )

diff --git a/src/components/layouts/BasicLayout/index.tsx b/src/components/layouts/BasicLayout/index.tsx
@@ -73,12 +73,12 @@ export const BasicLayout: FC = observer(({ children }) => {
 
     setNotice(true)
   }, [isDark, toggle])
-  const idSymbol = useRef(Symbol())
+  const actionId = useRef('basic')
   useEffect(() => {
-    actionStore.removeActionBySymbol(idSymbol.current)
+    actionStore.removeActionById(actionId.current)
     if (appStore.viewport.mobile || appStore.viewport.pad) {
       const action = {
-        id: idSymbol.current,
+        id: actionId.current,
         icon:
           appStore.colorMode === 'dark' ? <PhSunBold /> : <BiMoonStarsFill />,
         onClick: handleChangeColorMode,
@@ -87,7 +87,7 @@ export const BasicLayout: FC = observer(({ children }) => {
 
       return () => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        actionStore.removeActionBySymbol(idSymbol.current)
+        actionStore.removeActionById(actionId.current)
       }
     }
   }, [

diff --git a/src/components/universal/Icons/shared.tsx b/src/components/universal/Icons/shared.tsx
@@ -1,6 +1,6 @@
 import type { SVGProps } from 'react'
 
-export function BiListNested(props: SVGProps<SVGSVGElement>) {
+export function FluentList16Filled(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -12,8 +12,7 @@ export function BiListNested(props: SVGProps<SVGSVGElement>) {
     >
       <path
         fill="currentColor"
-        fillRule="evenodd"
-        d="M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z"
+        d="M2 3.75A.75.75 0 0 1 2.75 3h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 2 3.75Zm0 8a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1-.75-.75ZM2.75 7a.75.75 0 0 0 0 1.5h10.5a.75.75 0 0 0 0-1.5H2.75Z"
       />
     </svg>
   )

diff --git a/src/components/universal/Markdown/index.tsx b/src/components/universal/Markdown/index.tsx
@@ -20,7 +20,8 @@ import { isDev } from '~/utils/env'
 import { springScrollToElement } from '~/utils/spring'
 
 import { CodeBlock } from '../CodeBlock'
-import { BiListNested } from '../Icons/shared'
+import { FloatPopover } from '../FloatPopover'
+import { FluentList16Filled } from '../Icons/shared'
 import { useModalStack } from '../Modal/stack.context'
 import styles from './index.module.css'
 import { CommentAtRule } from './parsers/comment-at'
@@ -280,19 +281,42 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options> = memo((props) => {
 
 export const TOC: FC<TocProps> = observer((props) => {
   const { appStore, actionStore } = useStore()
-  const { isNarrowThanLaptop } = appStore
+  const {
+    isNarrowThanLaptop,
+    viewport: { mobile },
+  } = appStore
   const { present } = useModalStack()
+
   useEffect(() => {
     if (!isNarrowThanLaptop || props.headings.length == 0) {
       return
     }
-    const id = Symbol('toc')
+
+    const InnerToc = () => <Toc {...props} useAsWeight />
+    const id = 'toc'
     actionStore.appendActions({
-      icon: <BiListNested />,
+      element: !mobile ? (
+        <FloatPopover
+          placement="left-end"
+          strategy="fixed"
+          wrapperClassNames="flex flex-1"
+          offset={20}
+          triggerComponent={() => (
+            <button aria-label="toc button">
+              <FluentList16Filled />
+            </button>
+          )}
+          trigger="click"
+        >
+          <InnerToc />
+        </FloatPopover>
+      ) : undefined,
+      icon: mobile ? <FluentList16Filled /> : null,
       id,
       onClick() {
         present({
-          component: <Toc useAsWeight {...props} />,
+          component: <InnerToc />,
+
           modalProps: {
             title: 'Table of Content',
             noBlur: true,
@@ -301,8 +325,8 @@ export const TOC: FC<TocProps> = observer((props) => {
       },
     })
     return () => {
-      actionStore.removeActionBySymbol(id)
+      actionStore.removeActionById(id)
     }
-  }, [actionStore, isNarrowThanLaptop, present, props])
+  }, [actionStore, isNarrowThanLaptop, mobile, present, props])
   return !isNarrowThanLaptop ? <Toc {...props} /> : null
 })
diff --git a/src/components/universal/Modal/index.tsx b/src/components/universal/Modal/index.tsx
@@ -1,6 +1,12 @@
 import { clsx } from 'clsx'
 import { observer } from 'mobx-react-lite'
-import { forwardRef, useCallback, useImperativeHandle, useState } from 'react'
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react'
 
 import { useStore } from '~/store'
 
@@ -38,9 +44,9 @@ export const Modal = observer(
         setTimeout(() => {
           resolve(null as any)
           props.disposer()
-        }, 200)
+        }, 300)
       })
-    }, [props])
+    }, [props.disposer])
 
     useImperativeHandle(ref, () => ({
       dismiss,
@@ -66,8 +72,6 @@ export const Modal = observer(
         {title && (
           <div className={styles['title-wrapper']}>
             <h4>{title}</h4>
-
-            {/* <Divider className="absolute bottom-0 left-0 right-0 !m-0" /> */}
           </div>
         )}
         {closeable && (
@@ -90,12 +94,14 @@ export const Modal = observer(
         </div>
       </div>
     )
+
+    const timeout = useRef({ exit: 200 }).current
     return useDrawerStyle ? (
-      <BottomUpTransitionView in={modalIn} timeout={{ exit: 200 }}>
+      <BottomUpTransitionView in={modalIn} timeout={timeout}>
         {Children}
       </BottomUpTransitionView>
     ) : (
-      <ScaleModalTransition in={modalIn} timeout={{ exit: 200 }}>
+      <ScaleModalTransition in={modalIn} timeout={timeout}>
         {Children}
       </ScaleModalTransition>
     )

diff --git a/src/components/universal/Modal/stack.context.tsx b/src/components/universal/Modal/stack.context.tsx
@@ -75,7 +75,7 @@ export interface IModalStackComponent<T = any> extends UniversalProps {
 }
 
 interface UniversalProps {
-  overlayProps?: OverlayProps
+  overlayProps?: Partial<OverlayProps>
   /**
    * Only used by find stack
    */

diff --git a/src/components/widgets/Search/index.tsx b/src/components/widgets/Search/index.tsx
@@ -335,7 +335,7 @@ export const SearchHotKey: FC = memo(() => {
 export const SearchFAB = memo(() => {
   const [show, setShow] = useState(false)
   const { actionStore } = useStore()
-  const idSymbol = useRef(Symbol())
+  const actionId = useRef('search-fab')
   const { event } = useAnalyze()
   useEffect(() => {
     if (show) {
@@ -346,10 +346,10 @@ export const SearchFAB = memo(() => {
     }
   }, [show])
   useEffect(() => {
-    actionStore.removeActionBySymbol(idSymbol.current)
+    actionStore.removeActionById(actionId.current)
     const action = {
       icon: <IonSearch />,
-      id: idSymbol.current,
+      id: actionId.current,
       onClick: () => {
         setShow(true)
       },
@@ -360,7 +360,7 @@ export const SearchFAB = memo(() => {
 
     return () => {
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      actionStore.removeActionBySymbol(idSymbol.current)
+      actionStore.removeActionById(actionId.current)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])

diff --git a/src/store/action.ts b/src/store/action.ts
@@ -16,19 +16,6 @@ export default class ActionStore {
   }
   private _actions: FootAction[] = []
 
-  resetActions() {
-    this._actions = []
-  }
-
-  /**
-   * clear and set actions (replace)
-   * @param actions
-   */
-  setActions(actions: FootAction[]) {
-    this.resetActions()
-    this._actions.push(...actions)
-  }
-
   appendActions(actions: FootAction[] | FootAction) {
     if (Array.isArray(actions)) {
       this._actions.push(...actions)
@@ -37,19 +24,13 @@ export default class ActionStore {
     }
   }
 
-  removeAction(action: FootAction) {
-    const index = this._actions.indexOf(action)
-    if (index !== -1) {
-      this._actions.splice(index, 1)
-    }
-  }
   removeActionByIndex(index: number) {
     if (index !== -1) {
       this._actions.splice(index, 1)
     }
   }
 
-  removeActionBySymbol(id: symbol) {
+  removeActionById(id: string) {
     const index = this._actions.findIndex((i) => i.id === id)
 
     this.removeActionByIndex(index)

diff --git a/src/store/types/actions.ts b/src/store/types/actions.ts
@@ -1,5 +1,6 @@
 export type FootAction = {
-  id: symbol
-  icon: JSX.Element
+  id: string
+  icon: React.ReactNode
   onClick: () => void | Promise<void>
+  element?: JSX.Element
 }