refactor(RecGrid): add renderHeader / renderContent props

magicdawn · Dec 27, 2024 · d0ba287 · d0ba287
1 parent 570dfe1
commit d0ba287
Show file tree

Hide file tree

Showing 8 changed files with 124 additions and 119 deletions.
diff --git a/.ncurc.cjs b/.ncurc.cjs
@@ -7,4 +7,10 @@ module.exports = {
     // v1 is enough
     'ua-parser-js',
   ],
+  dep: [
+    'prod',
+    'dev',
+    'optional',
+    // 'packageManager'
+  ],
 }
diff --git a/package.json b/package.json
@@ -38,9 +38,9 @@
     "@types/debug": "^4.1.12",
     "@types/md5": "^2.3.5",
     "@types/ms": "^0.7.34",
-    "@types/node": "22.10.2",
-    "@types/react": "18.3.14",
-    "@types/react-dom": "18.3.2",
+    "@types/node": "^22.10.2",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@types/ua-parser-js": "^0.7.39",
     "@unocss/preset-rem-to-px": "^0.65.3",
     "@violentmonkey/types": "^0.2.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/ModalFeed/index.tsx b/src/components/ModalFeed/index.tsx
@@ -1,8 +1,7 @@
 import { appClsDarkSelector } from '$common/css-vars-export.module.scss'
 import { CheckboxSettingItem } from '$components/ModalSettings/setting-item'
-import type { RecGridRef } from '$components/RecGrid'
+import type { RenderHeaderOptions } from '$components/RecGrid'
 import { RecGrid } from '$components/RecGrid'
-import type { OnRefresh } from '$components/RecGrid/useRefresh'
 import { OnRefreshContext } from '$components/RecGrid/useRefresh'
 import { RefreshButton } from '$components/RecHeader/RefreshButton'
 import { VideoSourceTab } from '$components/RecHeader/tab'
@@ -74,7 +73,6 @@ interface IProps {
 
 export const ModalFeed = memo(function ModalFeed({ show, onHide }: IProps) {
   const scrollerRef = useRef<HTMLDivElement>(null)
-  const recGridRef = useRef<RecGridRef>(null)
 
   const {
     // 双列模式
@@ -91,26 +89,14 @@ export const ModalFeed = memo(function ModalFeed({ show, onHide }: IProps) {
     `
   }, [useFullScreen])
 
-  const onRefresh: OnRefresh = useMemoizedFn((...args) => {
-    return recGridRef.current?.refresh(...args)
-  })
-
-  const [extraInfo, setExtraInfo] = useState<ReactNode>(null)
-
   const onScrollToTop = useMemoizedFn(() => {
     if (scrollerRef.current) {
       scrollerRef.current.scrollTop = 0
     }
   })
 
-  const [refreshing, setRefreshing] = useState(false)
-
-  return (
-    <BaseModal
-      {...{ show, onHide }}
-      cssModalMask={S.modalMask(useNarrowMode)}
-      cssModal={[S.modal(useNarrowMode, useFullScreen), modalBorderCss]}
-    >
+  const renderHeader = ({ refreshing, onRefresh, extraInfo }: RenderHeaderOptions) => {
+    return (
       <OnRefreshContext.Provider value={onRefresh}>
         <div
           css={[
@@ -167,19 +153,31 @@ export const ModalFeed = memo(function ModalFeed({ show, onHide }: IProps) {
             <ModalClose onClick={onHide} />
           </div>
         </div>
-
-        <div css={[BaseModalStyle.modalBody, S.modalBody]} ref={scrollerRef}>
-          <RecGrid
-            ref={recGridRef}
-            shortcutEnabled={show}
-            onScrollToTop={onScrollToTop}
-            infiniteScrollUseWindow={false}
-            scrollerRef={scrollerRef}
-            onUpdateRefreshing={setRefreshing}
-            onUpdateExtraInfo={setExtraInfo}
-          />
-        </div>
       </OnRefreshContext.Provider>
+    )
+  }
+  const renderContent = (content: ReactNode) => {
+    return (
+      <div css={[BaseModalStyle.modalBody, S.modalBody]} ref={scrollerRef}>
+        {content}
+      </div>
+    )
+  }
+
+  return (
+    <BaseModal
+      {...{ show, onHide }}
+      cssModalMask={S.modalMask(useNarrowMode)}
+      cssModal={[S.modal(useNarrowMode, useFullScreen), modalBorderCss]}
+    >
+      <RecGrid
+        renderHeader={renderHeader}
+        renderContent={renderContent}
+        shortcutEnabled={show}
+        onScrollToTop={onScrollToTop}
+        infiniteScrollUseWindow={false}
+        scrollerRef={scrollerRef}
+      />
     </BaseModal>
   )
 })

diff --git a/src/components/PureRecommend/index.tsx b/src/components/PureRecommend/index.tsx
@@ -1,8 +1,5 @@
-import type { RecGridRef } from '$components/RecGrid'
-import { RecGrid } from '$components/RecGrid'
-import type { OnRefresh } from '$components/RecGrid/useRefresh'
-import type { RecHeaderRef } from '$components/RecHeader'
-import { RecHeader } from '$components/RecHeader'
+import { RecGrid, type RenderHeaderOptions } from '$components/RecGrid'
+import { RecHeader, type RecHeaderRef } from '$components/RecHeader'
 import { useHeaderState } from '$components/RecHeader/index.shared'
 import { useSettingsSnapshot } from '$modules/settings'
 import { css } from '@emotion/react'
@@ -18,41 +15,32 @@ const narrowStyle = {
 export function PureRecommend() {
   // 窄屏模式
   const { useNarrowMode } = useSettingsSnapshot()
-
   // 是否已经打开 "查看更多" 即 ModalFeed
   const { modalFeedVisible, modalSettingsVisible } = useHeaderState()
 
-  const recHeader = useRef<RecHeaderRef>(null)
-  const recGrid = useRef<RecGridRef>(null)
-
-  const onRefresh: OnRefresh = useMemoizedFn((...args) => {
-    return recGrid.current?.refresh(...args)
-  })
+  const recHeaderRef = useRef<RecHeaderRef>(null)
   const onScrollToTop = useMemoizedFn(() => {
-    return recHeader.current?.scroll()
+    recHeaderRef.current?.scroll()
   })
 
-  const [refreshing, setRefreshing] = useState(false)
-
-  const [extraInfo, setExtraInfo] = useState<ReactNode>(null)
-
-  return (
-    <section data-area='推荐'>
+  const renderHeader = ({ refreshing, onRefresh, extraInfo }: RenderHeaderOptions) => {
+    return (
       <RecHeader
-        ref={recHeader}
+        ref={recHeaderRef}
         refreshing={refreshing}
         onRefresh={onRefresh}
         leftSlot={extraInfo}
       />
-      <RecGrid
-        ref={recGrid}
-        css={[useNarrowMode && narrowStyle.grid]}
-        shortcutEnabled={!(modalFeedVisible || modalSettingsVisible)}
-        infiniteScrollUseWindow={true}
-        onScrollToTop={onScrollToTop}
-        onUpdateRefreshing={setRefreshing}
-        onUpdateExtraInfo={setExtraInfo}
-      />
-    </section>
+    )
+  }
+
+  return (
+    <RecGrid
+      renderHeader={renderHeader}
+      css={[useNarrowMode && narrowStyle.grid]}
+      shortcutEnabled={!(modalFeedVisible || modalSettingsVisible)}
+      infiniteScrollUseWindow={true}
+      onScrollToTop={onScrollToTop}
+    />
   )
 }
diff --git a/src/components/RecGrid/index-bak.txt b/src/components/RecGrid/index-bak.txt
@@ -111,3 +111,15 @@ import InfiniteScroll from 'react-infinite-scroller'
       </div>
     )
   }
+
+
+
+// h slide
+// initial={direction ? { opacity: 0, x: direction === 'right' ? '10vw' : '-10vw' } : false}
+// animate={{ opacity: 1, x: 0 }}
+// transition={{ bounce: false, duration: 0.3 }}
+
+// v slide
+// initial={direction ? { opacity: 0, y: -10 } : false}
+// animate={{ opacity: 1, y: 0 }}
+// transition={{ bounce: false, duration: 0.3 }}