react-toolkits 2.13.36 → 2.14.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # react-toolkits
 
+## 2.14.0
+
+### Minor Changes
+
+- 17b672d: feat: refactor InifinitList
+
 ## 2.13.36
 
 ### Patch Changes

package/lib/index.d.ts

@@ -60,7 +60,7 @@ interface InfiniteListRef<Item = any, Values = any, Data = any> {
 }
 interface InfiniteListProps<Item, Values, Data> extends Pick<TableProps<Item>, 'columns' | 'rowKey' | 'tableLayout' | 'expandable' | 'rowSelection' | 'bordered'>, Pick<FilterFormWrapperProps, 'buttonsAlign' | 'showReset'> {
     url: string;
-    getRowKey: (response: Data | undefined) => any;
+    getRowKey?: (response: Data | undefined, pageIndex: number) => any;
     getDataSource: (data: Data[] | undefined) => Item[];
     form?: FormInstance<Values>;
     code?: string;
@@ -70,10 +70,10 @@ interface InfiniteListProps<Item, Values, Data> extends Pick<TableProps<Item>, '
         [key: string]: AxiosHeaderValue;
     });
     renderForm?: (form: FormInstance<Values>) => ReactElement;
-    params: (values: Values, rowKey?: string) => Record<any, any>;
+    params: (values: Values, pageIndex: number, rowKey?: string) => Record<any, any>;
     getHasMore?: (data: Data | undefined) => boolean;
-    tableExtra?: ReactNode | ((form: FormInstance<Values>) => ReactNode);
-    footer?: (data: (Data | undefined)[] | undefined) => ReactNode;
+    tableExtra?: ReactNode | ((form: FormInstance<Values>, data?: Item[]) => ReactNode);
+    footer?: (data: Data[] | undefined) => ReactNode;
 }
 declare const InfiniteList: <Item extends AnyObject = AnyObject, Values extends object | undefined = undefined, Data = any>(props: InfiniteListProps<Item, Values, Data> & {
     ref?: Ref<InfiniteListRef<Item, Data>>;

package/lib/index.js

@@ -5,10 +5,10 @@ import { persist, createJSONStorage } from 'zustand/middleware';
 import logoUrl from './logo-L6MFCL6M.png';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as Antd2 from 'antd';
-import { Modal, Form, Spin, Result, Table, Button, Card, Input, Select, App, Switch, InputNumber, theme, Space, Tag, Typography, Alert, Divider, Menu, Popconfirm, Row, Col, Breadcrumb, Descriptions, Skeleton, Empty, Dropdown, Tooltip, Collapse, Checkbox } from 'antd';
+import { Modal, Form, Spin, Result, Table, Button, Card, Input, Select, App, Switch, InputNumber, theme, Space, Tag, Typography, Alert, Divider, Menu, Popconfirm, Row, Col, Breadcrumb, Descriptions, Skeleton, Empty, Dropdown, Tooltip, Checkbox, Collapse } from 'antd';
 import { Routes, Route, Navigate, useNavigate, useParams, useLocation, Link } from 'react-router-dom';
 import useSWR6, { mutate, unstable_serialize, useSWRConfig } from 'swr';
-import { forwardRef, lazy, useContext, useMemo, useState, useEffect, useImperativeHandle, cloneElement, useRef, createContext, memo, useCallback, Fragment as Fragment$1, Suspense } from 'react';
+import { forwardRef, lazy, useContext, useMemo, useState, useEffect, useImperativeHandle, cloneElement, useRef, createContext, memo, useCallback, Fragment as Fragment$1, Suspense, useTransition } from 'react';
 import { last, has, template, get, isEqual, first } from 'lodash-es';
 import { flushSync } from 'react-dom';
 import { createRoot } from 'react-dom/client';
@@ -2288,6 +2288,7 @@ var init_permissionCollapse = __esm({
       const [checkedMap, setCheckedMap] = useState({});
       const [internalValue, setInternalValue] = useState(value ?? []);
       const { t } = useTranslation();
+      const [, startTransition] = useTransition();
       const onCollapseChange = useCallback((key) => {
         setActiveKey(key);
       }, []);
@@ -2316,9 +2317,11 @@ var init_permissionCollapse = __esm({
       }, [value]);
       useEffect(() => {
         if (expand) {
-          setActiveKey((permissions ?? []).map(({ category }) => category));
+          startTransition(() => {
+            setActiveKey((permissions ?? []).map(({ category }) => category));
+          });
         }
-      }, [expand, permissions]);
+      }, []);
       useEffect(() => {
         const checkedValue = (permissions ?? []).reduce(
           (acc, curr) => {
@@ -2329,39 +2332,40 @@ var init_permissionCollapse = __esm({
         );
         setCheckedMap(checkedValue);
       }, [internalValue, permissions]);
+      const items = (permissions ?? []).map((item) => ({
+        key: item.category,
+        label: item.category,
+        extra: !readonly && /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: checkedMap[item.category],
+            onChange: (e) => {
+              onCheckChange(
+                e,
+                item.permissions?.map((permission) => permission.value)
+              );
+            },
+            children: t("global.selectAll")
+          }
+        ),
+        children: /* @__PURE__ */ jsx(Checkbox.Group, { style: { width: "100%" }, value: internalValue, disabled: readonly, children: /* @__PURE__ */ jsx(Row, { gutter: [10, 10], style: { width: "100%" }, children: item.permissions?.map((permission) => /* @__PURE__ */ jsx(Col, { span: 6, children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            value: permission.value,
+            onChange: (e) => {
+              onCheckChange(e, [permission.value]);
+            },
+            children: permission.label
+          }
+        ) }, permission.value)) }) })
+      }));
       return /* @__PURE__ */ jsx(
         Collapse,
         {
           style: { width: "100%" },
           collapsible: "header",
           activeKey,
-          items: (permissions ?? []).map((item) => ({
-            key: item.category,
-            label: item.category,
-            extra: !readonly && /* @__PURE__ */ jsx(
-              Checkbox,
-              {
-                checked: checkedMap[item.category],
-                onChange: (e) => {
-                  onCheckChange(
-                    e,
-                    item.permissions?.map((permission) => permission.value)
-                  );
-                },
-                children: t("global.selectAll")
-              }
-            ),
-            children: /* @__PURE__ */ jsx(Checkbox.Group, { style: { width: "100%" }, value: internalValue, disabled: readonly, children: /* @__PURE__ */ jsx(Row, { gutter: [10, 10], style: { width: "100%" }, children: item.permissions?.map((permission) => /* @__PURE__ */ jsx(Col, { span: 6, children: /* @__PURE__ */ jsx(
-              Checkbox,
-              {
-                value: permission.value,
-                onChange: (e) => {
-                  onCheckChange(e, [permission.value]);
-                },
-                children: permission.label
-              }
-            ) }, permission.value)) }) })
-          })),
+          items,
           onChange: onCollapseChange
         }
       );
@@ -2572,6 +2576,7 @@ var init_userList = __esm({
       const remove = useRemoveUser();
       const { mutate: mutate2, refetch } = useQueryListStore();
       const { permissionVersion } = useToolkitsStore((s) => s);
+      const isV1 = permissionVersion === "v1" /* V1 */;
       const isV3 = permissionVersion === "v3" /* V3 */;
       const { show: showCreateModal, modal: createModal } = useCreateUserModal({
         onSuccess() {
@@ -2614,7 +2619,7 @@ var init_userList = __esm({
           dataIndex: "id",
           key: "id"
         },
-        isV3 && {
+        (isV1 || isV3) && {
           title: t("global.role"),
           dataIndex: "roles",
           key: "roles",
@@ -3286,8 +3291,8 @@ var InternalInfiniteList = (props, ref) => {
   const { axios: axios2 } = useToolkitsStore((s) => s);
   const getKey = (pageIndex, previousPageData) => {
     if (!isValid) return null;
-    const rowKey = pageIndex !== 0 ? getRowKey(previousPageData) : void 0;
-    const args = params(formValues, rowKey);
+    const rowKey = getRowKey?.(previousPageData, pageIndex);
+    const args = params(formValues, pageIndex, rowKey);
     const queryString = qs.stringify(args);
     return queryString ? `${url4}?${qs.stringify(args)}` : url4;
   };
@@ -3313,7 +3318,7 @@ var InternalInfiniteList = (props, ref) => {
   );
   const dataSource = getDataSource(data);
   const isLoadingMore = isListValidating || size > 0 && data && typeof data[size - 1] === "undefined";
-  const isReachingEnd = typeof getHasMore !== "undefined" ? !getHasMore(last(data)) : true;
+  const isReachingEnd = typeof getHasMore !== "undefined" ? !getHasMore(last(data)) : false;
   const isEmpty = !dataSource || dataSource.length === 0;
   const onConfirm = async () => {
     const values = await _form.getFieldsValue();
@@ -3398,7 +3403,7 @@ var InternalInfiniteList = (props, ref) => {
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     formRenderer,
-    typeof tableExtra === "function" ? tableExtra(_form) : tableExtra,
+    typeof tableExtra === "function" ? tableExtra(_form, dataSource) : tableExtra,
     /* @__PURE__ */ jsx(Table, { ...tableProps, dataSource, loading: isLoadingMore, pagination: false, footer: renderFooter }),
     !isEmpty && /* @__PURE__ */ jsx(
       Button,