refactor: card list resize container

src/components/resize-container/index.tsx

@@ -0,0 +1,35 @@
+import { Col, Row } from 'antd';
+import ResizeObserver from 'rc-resize-observer';
+import useResponsive from './use-responsive';
+
+interface ResizeObserverContainerProps {
+  dataList: any[];
+  renderItem: (data: any) => React.ReactNode;
+  defaultSpan?: number;
+  resizable?: boolean;
+}
+
+const ResizeContainer: React.FC<ResizeObserverContainerProps> = ({
+  defaultSpan = 8,
+  dataList,
+  renderItem,
+  resizable = true
+}) => {
+  const { span, handleResize } = useResponsive({ defaultSpan });
+
+  return (
+    <ResizeObserver onResize={handleResize} disabled={!resizable}>
+      <Row gutter={[16, 16]}>
+        {dataList.map((item: any, index) => {
+          return (
+            <Col span={span} key={item.id || index}>
+              {renderItem(item)}
+            </Col>
+          );
+        })}
+      </Row>
+    </ResizeObserver>
+  );
+};
+
+export default ResizeContainer;

src/components/resize-container/use-responsive.ts

@@ -0,0 +1,23 @@
+import breakpoints from '@/config/breakpoints';
+import { useMemoizedFn } from 'ahooks';
+import _ from 'lodash';
+import { useState } from 'react';
+
+const useResponsive = ({ defaultSpan = 8 }: { defaultSpan?: number }) => {
+  const [span, setSpan] = useState(defaultSpan);
+
+  const getSpanByWidth = (width: number) => {
+    if (width < breakpoints.md) return 24;
+    if (width < breakpoints.lg) return 12;
+    return 8;
+  };
+
+  const handleResize = useMemoizedFn(
+    _.throttle((size: { width: number; height: number }) => {
+      setSpan(getSpanByWidth(size.width));
+    }, 100)
+  );
+  return { span, handleResize };
+};
+
+export default useResponsive;

src/components/templates/card-list.tsx

@@ -1,10 +1,9 @@
-import breakpoints from '@/config/breakpoints';
+import ResizeContainer from '@/components/resize-container';
+import CardSkeleton from '@/components/templates/card-skelton';
 import InfiniteScroller from '@/pages/_components/infinite-scroller';
 import { useScrollerContext } from '@/pages/_components/infinite-scroller/use-scroller-context';
-import { Col, Row, Spin } from 'antd';
-import _ from 'lodash';
-import ResizeObserver from 'rc-resize-observer';
-import React, { useCallback } from 'react';
+import { Spin } from 'antd';
+import React from 'react';
 import styled from 'styled-components';
 
 const SpinWrapper = styled.div`
@@ -30,22 +29,12 @@ interface CatalogListProps {
   activeId: Global.WithFalse<number>;
   isFirst: boolean;
   renderItem: (data: any) => React.ReactNode;
-  Skeleton: React.ComponentType<{ span: number }>;
 }
 
-const InnerSkeleton = (Skeleton: React.ComponentType<{ span: number }>) => {
-  return (props: any) => {
-    return <Skeleton {...props} />;
-  };
-};
-
 const ListSkeleton: React.FC<{
-  span: number;
   loading: boolean;
   isFirst: boolean;
-  Skeleton: React.ComponentType<{ span: number }>;
-}> = ({ span, loading, isFirst, Skeleton }) => {
-  const CatalogSkeleton = InnerSkeleton(Skeleton);
+}> = ({ loading, isFirst }) => {
   return (
     <div>
       {loading && (
@@ -57,7 +46,7 @@ const ListSkeleton: React.FC<{
             }}
             wrapperClassName="skelton-wrapper"
           >
-            {isFirst && <CatalogSkeleton span={span}></CatalogSkeleton>}
+            {isFirst && <CardSkeleton></CardSkeleton>}
           </Spin>
         </SpinWrapper>
       )}
@@ -72,10 +61,8 @@ const CardList: React.FC<CatalogListProps> = (props) => {
     isFirst,
     defaultSpan = 8,
     resizable = true,
-    Skeleton,
     renderItem
   } = props;
-  const [span, setSpan] = React.useState(defaultSpan);
   const {
     total,
     current,
@@ -83,46 +70,21 @@ const CardList: React.FC<CatalogListProps> = (props) => {
     refresh
   } = useScrollerContext();
 
-  const getSpanByWidth = (width: number) => {
-    if (width < breakpoints.md) return 24;
-    if (width < breakpoints.lg) return 12;
-    return 8;
-  };
-
-  const handleResize = useCallback(
-    _.throttle((size: { width: number; height: number }) => {
-      setSpan(getSpanByWidth(size.width));
-    }, 100),
-    []
-  );
-
   return (
-    <div className="relative" style={{ width: '100%' }}>
-      <ResizeObserver onResize={handleResize} disabled={!resizable}>
-        <InfiniteScroller
-          total={total}
-          current={current}
-          loading={contextLoading}
-          refresh={refresh}
-        >
-          <Row gutter={[16, 16]}>
-            {dataList.map((item: any, index) => {
-              return (
-                <Col span={span} key={item.id}>
-                  {renderItem?.(item)}
-                </Col>
-              );
-            })}
-          </Row>
-          <ListSkeleton
-            span={span}
-            loading={loading}
-            isFirst={isFirst}
-            Skeleton={Skeleton}
-          />
-        </InfiniteScroller>
-      </ResizeObserver>
-    </div>
+    <InfiniteScroller
+      total={total}
+      current={current}
+      loading={contextLoading}
+      refresh={refresh}
+    >
+      <ResizeContainer
+        dataList={dataList}
+        renderItem={renderItem}
+        defaultSpan={defaultSpan}
+        resizable={resizable}
+      ></ResizeContainer>
+      <ListSkeleton loading={loading} isFirst={isFirst} />
+    </InfiniteScroller>
   );
 };
 

src/components/templates/card-skelton.tsx

@@ -1,38 +1,33 @@
-import { Col, Row, Skeleton } from 'antd';
+import { Skeleton } from 'antd';
 import React from 'react';
+import ResizeContainer from '../resize-container';
 
 interface CatalogSkeltonProps {
-  span: number;
   skeletonProps?: any;
   skeletonStyle?: React.CSSProperties;
 }
 
 const CardSkelton: React.FC<CatalogSkeltonProps> = (props) => {
   return (
-    <Row gutter={[16, 16]}>
-      {Array(6)
-        .fill(1)
-        .map((_, index) => {
-          return (
-            <Col span={props.span} key={index}>
-              <Skeleton
-                avatar={{
-                  size: 32
-                }}
-                paragraph={{ rows: 2 }}
-                style={{
-                  border: '1px solid var(--ant-color-border)',
-                  borderRadius: 'var(--border-radius-base)',
-                  padding: '16px 16px',
-                  ...props.skeletonStyle
-                }}
-                {...(props.skeletonProps || {})}
-              ></Skeleton>
-            </Col>
-          );
-        })}
-    </Row>
+    <ResizeContainer
+      dataList={Array(6).fill({ label: 'skeleton' })}
+      renderItem={() => (
+        <Skeleton
+          avatar={{
+            size: 32
+          }}
+          paragraph={{ rows: 2 }}
+          style={{
+            border: '1px solid var(--ant-color-border)',
+            borderRadius: 'var(--border-radius-base)',
+            padding: '16px 16px',
+            ...props.skeletonStyle
+          }}
+          {...(props.skeletonProps || {})}
+        ></Skeleton>
+      )}
+    ></ResizeContainer>
   );
 };
 
-export default React.memo(CardSkelton);
+export default CardSkelton;