@fe-free/core 2.3.4 → 2.4.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @fe-free/core
 
+## 2.4.1
+
+### Patch Changes
+
+- fix: type InfiniteList
+  - @fe-free/tool@2.4.1
+
+## 2.4.0
+
+### Minor Changes
+
+- feat: add InfiniteList and sleep
+
+### Patch Changes
+
+- Updated dependencies
+  - @fe-free/tool@2.4.0
+
 ## 2.3.4
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "2.3.4",
+  "version": "2.4.1",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -41,7 +41,7 @@
     "remark-gfm": "^4.0.1",
     "vanilla-jsoneditor": "^0.23.1",
     "zustand": "^4.5.4",
-    "@fe-free/tool": "2.3.4"
+    "@fe-free/tool": "2.4.1"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "2.8.9",

package/src/index.ts

@@ -33,6 +33,8 @@ export {
 } from './form';
 export { RequestError, initErrorHandle } from './global/error';
 export { downloadInterceptor } from './global/interceptors';
+export { InfiniteList } from './infinite_list';
+export type { InfiniteListProps } from './infinite_list';
 export { Markdown } from './markdown';
 export { PageLayout } from './page_layout';
 export { routeTool } from './route';

package/src/infinite_list/index.tsx

@@ -0,0 +1,124 @@
+import { Spin } from 'antd';
+import classNames from 'classnames';
+import type { ReactNode } from 'react';
+import { useImperativeHandle, useRef, useState } from 'react';
+import { useGlobalInfiniteScroll } from '../ahooks/use_global_infinite_scroll';
+
+interface ActionType {
+  reload: () => void;
+}
+interface InfiniteListProps<D, P> {
+  request: (params: { current: number; pageSize: number } & P) => Promise<{
+    data: D[];
+    total: number;
+  }>;
+  renderItem: ({ item, index }: { item: D; index: number }) => ReactNode;
+  params?: P;
+  /** 每页数量 */
+  pageSize: number;
+  /** 定义网格布局 */
+  gridClassName: string;
+  className?: string;
+  actionRef?: React.Ref<ActionType | undefined>;
+}
+
+const emptyParams = {};
+
+const InfiniteListBase = <D, P>({
+  request,
+  renderItem,
+  params = emptyParams as P,
+  actionRef,
+  pageSize,
+  gridClassName,
+  className,
+}: InfiniteListProps<D, P>) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const { data, loading, loadingMore, noMore, mutate, reload } = useGlobalInfiniteScroll(
+    async (p) => {
+      // 获得当前页面
+      const current = p?.nextId || 1;
+
+      const res = await request({
+        current,
+        pageSize,
+        ...params,
+      });
+
+      let hasMore = true;
+      // 总数少于当前页数 * 每页数量，则没有更多
+      if (res.total <= current * pageSize) {
+        hasMore = false;
+      }
+
+      return {
+        list: res.data,
+        nextId: hasMore ? current + 1 : undefined,
+      };
+    },
+    {
+      target: ref,
+      isNoMore: (d) => d?.nextId === undefined,
+    },
+  );
+
+  useImperativeHandle(actionRef, () => ({
+    reload: async () => {
+      // 没有数据，相当于重新获取
+      if (!data) {
+        return reload();
+      }
+
+      // 获取全部数据。因为不清楚哪个要更新。
+      const res = await request({
+        ...params,
+        current: 1,
+        pageSize,
+      });
+
+      // 只更新数据
+      data.list = res.data;
+
+      mutate({
+        ...data,
+      });
+    },
+  }));
+
+  return (
+    <div ref={ref} className={classNames('h-full overflow-y-auto', className)}>
+      {loading && (
+        <div className="flex h-full w-full items-center justify-center">
+          <Spin />
+        </div>
+      )}
+      {!loading && (
+        <div className={classNames('grid', gridClassName)}>
+          {data?.list?.map((item, index) => {
+            return <div key={index}>{renderItem({ item, index })}</div>;
+          })}
+        </div>
+      )}
+      <div className="flex w-full items-center justify-center">
+        {noMore && <div className="my-5 text-center text-desc">没有更多数据</div>}
+        {loadingMore && <div className="my-5 text-center text-desc">加载更多数据中...</div>}
+      </div>
+    </div>
+  );
+};
+
+function InfiniteList<D, P>(props: InfiniteListProps<D, P>) {
+  const [reloadCount, setReloadCount] = useState(0);
+
+  useImperativeHandle(props.actionRef, () => ({
+    reload: () => {
+      setReloadCount((prev) => prev + 1);
+    },
+  }));
+
+  return <InfiniteListBase key={reloadCount} {...props} />;
+}
+
+export { InfiniteList };
+export type { InfiniteListProps };

package/src/infinite_list/infinite_list.stories.tsx

@@ -0,0 +1,47 @@
+import { InfiniteList } from '@fe-free/core';
+import { sleep } from '@fe-free/tool';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta: Meta<typeof InfiniteList> = {
+  title: '@fe-free/core/InfiniteList',
+  component: InfiniteList,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: '无线滚动列表',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof InfiniteList>;
+
+export const Resolve: Story = {
+  render: () => {
+    return (
+      <div className="h-[500px]">
+        <InfiniteList
+          request={async ({ current, pageSize }) => {
+            await sleep(500);
+            return {
+              data: new Array(pageSize).fill(0).map((_, index) => index + (current - 1) * pageSize),
+              total: 100,
+            };
+          }}
+          renderItem={({ item }) => {
+            return (
+              <div className="p-2">
+                <div className="h-[100px] bg-red-500">item{item}</div>
+              </div>
+            );
+          }}
+          pageSize={20}
+          gridClassName="grid-cols-3"
+        />
+      </div>
+    );
+  },
+};