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;