From 41afc64cce1b89d39d92c67c2832b3bf2481ba45 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sun, 31 Oct 2021 16:09:11 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=B0=83=E6=95=B4=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0=E4=B8=8E=E7=B1=BB=E5=9E=8B=E4=BD=BF=E5=85=B6=E6=9B=B4?=
 =?UTF-8?q?=E5=8A=A0=E5=90=88=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChatMessageList/VirtualizedList.tsx       | 11 ++++----
 .../DynamicSizeList.tsx                       | 25 ++++++++++---------
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/web/src/components/ChatBox/ChatMessageList/VirtualizedList.tsx b/web/src/components/ChatBox/ChatMessageList/VirtualizedList.tsx
index c9b72ee9..c216a55d 100644
--- a/web/src/components/ChatBox/ChatMessageList/VirtualizedList.tsx
+++ b/web/src/components/ChatBox/ChatMessageList/VirtualizedList.tsx
@@ -1,4 +1,6 @@
-import DynamicSizeList, {
+import {
+  DynamicSizeList,
+  DynamicSizeRenderInfo,
   OnScrollInfo,
 } from '@/components/DynamicVirtualizedList/DynamicSizeList';
 import { Divider } from 'antd';
@@ -118,7 +120,7 @@ export const VirtualizedMessageList: React.FC<VirtualizedMessageListProps> =
     /**
      * 渲染列表元素
      */
-    const renderRow = ({ itemId }: any) => {
+    const renderRow = ({ itemId }: DynamicSizeRenderInfo) => {
       if (itemId === messageReverseItemId.OLDER_MESSAGES_LOADER) {
         return (
           <div key={itemId} className="text-center text-gray-400">
@@ -197,6 +199,7 @@ export const VirtualizedMessageList: React.FC<VirtualizedMessageListProps> =
             height={height}
             width={width}
             itemData={itemData}
+            renderItem={renderRow}
             overscanCountForward={OVERSCAN_COUNT_FORWARD}
             overscanCountBackward={OVERSCAN_COUNT_BACKWARD}
             onScroll={handleScroll}
@@ -208,9 +211,7 @@ export const VirtualizedMessageList: React.FC<VirtualizedMessageListProps> =
             initRangeToRender={initRangeToRender}
             loaderId={messageReverseItemId.OLDER_MESSAGES_LOADER}
             correctScrollToBottom={isBottom}
-          >
-            {renderRow}
-          </DynamicSizeList>
+          />
         )}
       </AutoSizer>
     );
diff --git a/web/src/components/DynamicVirtualizedList/DynamicSizeList.tsx b/web/src/components/DynamicVirtualizedList/DynamicSizeList.tsx
index e1781084..491b853f 100644
--- a/web/src/components/DynamicVirtualizedList/DynamicSizeList.tsx
+++ b/web/src/components/DynamicVirtualizedList/DynamicSizeList.tsx
@@ -151,9 +151,14 @@ export interface OnScrollInfo {
   scrollHeight: number;
 }
 
+export interface DynamicSizeRenderInfo {
+  data: string[];
+  itemId: string;
+}
+
 interface DynamicSizeListProps {
   canLoadMorePosts: () => void;
-  children: (info: { data: string[]; itemId: string }) => React.ReactElement;
+  renderItem: (info: DynamicSizeRenderInfo) => React.ReactElement;
   height: number;
   initRangeToRender: number[];
   initScrollToIndex: () => {
@@ -199,7 +204,7 @@ type DynamicSizeListSnapshot = {
 /**
  * 注意，该组件必须拥有一个loader
  */
-export default class DynamicSizeList extends PureComponent<
+export class DynamicSizeList extends PureComponent<
   DynamicSizeListProps,
   DynamicSizeListState
 > {
@@ -866,7 +871,7 @@ export default class DynamicSizeList extends PureComponent<
   };
 
   _renderItems = () => {
-    const { children, itemData, loaderId } = this.props;
+    const { renderItem, itemData, loaderId } = this.props;
     const width = this.innerRefWidth;
     const [startIndex, stopIndex] = this._getRangeToRender();
     const itemCount = itemData.length;
@@ -896,7 +901,7 @@ export default class DynamicSizeList extends PureComponent<
           isItemInLocalPosts ||
           isLoader
         ) {
-          const item: React.ReactElement = children({
+          const item: React.ReactElement = renderItem({
             data: itemData,
             itemId,
           });
@@ -991,18 +996,14 @@ export default class DynamicSizeList extends PureComponent<
 // I assume people already do this (render function returning a class component),
 // So my doing it would just unnecessarily double the wrappers.
 
-const validateProps = ({ children, itemSize }: any) => {
+const validateProps = ({ renderItem }: DynamicSizeListProps) => {
   if (process.env.NODE_ENV !== 'production') {
-    if (children == null) {
+    if (renderItem == null) {
       throw Error(
-        'An invalid "children" prop has been specified. ' +
+        'An invalid "renderItem" prop has been specified. ' +
           'Value should be a React component. ' +
-          `"${children === null ? 'null' : typeof children}" was specified.`
+          `"${renderItem === null ? 'null' : typeof renderItem}" was specified.`
       );
     }
-
-    if (itemSize !== undefined) {
-      throw Error('An unexpected "itemSize" prop has been provided.');
-    }
   }
 };