@ant-design/pro-components 3.1.12-0 → 3.1.13-0

package/es/table/components/ListToolBar/index.js

@@ -1,7 +1,7 @@
 import ResizeObserver from '@rc-component/resize-observer';
 import { ConfigProvider, Input, Tabs, Tooltip } from 'antd';
 import { clsx } from 'clsx';
-import React, { useContext, useMemo, useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { proTheme, useIntl } from "../../../provider";
 import { LabelIconTip } from "../../../utils";
 import HeaderMenu from "./HeaderMenu";
@@ -113,94 +113,75 @@ const ListToolBar = ({
    *
    * @param search 搜索框相关配置
    */
-  const searchNode = useMemo(() => {
-    if (!search) {
-      return null;
-    }
+  let searchNode = null;
+  if (search) {
     if ( /*#__PURE__*/React.isValidElement(search)) {
-      return search;
-    }
-    return /*#__PURE__*/_jsx(Input.Search, {
-      style: {
-        width: 200
-      },
-      placeholder: placeholder,
-      ...search,
-      onSearch: async (...restParams) => {
-        const success = await search.onSearch?.(...restParams);
-        if (success !== false) {
-          onSearch?.(restParams?.[0]);
+      searchNode = search;
+    } else {
+      searchNode = /*#__PURE__*/_jsx(Input.Search, {
+        style: {
+          width: 200
+        },
+        placeholder: placeholder,
+        ...search,
+        onSearch: async (...restParams) => {
+          const success = await search.onSearch?.(...restParams);
+          if (success !== false) {
+            onSearch?.(restParams?.[0]);
+          }
         }
-      }
-    });
-  }, [placeholder, onSearch, search]);
+      });
+    }
+  }
 
   /** 轻量筛选组件 */
-  const filtersNode = useMemo(() => {
-    if (filter) return /*#__PURE__*/_jsx("div", {
-      className: clsx(`${prefixCls}-filter`, hashId),
-      children: filter
-    });
-    return null;
-  }, [filter, hashId, prefixCls]);
+  const filtersNode = filter ? /*#__PURE__*/_jsx("div", {
+    className: clsx(`${prefixCls}-filter`, hashId),
+    children: filter
+  }) : null;
 
   /** 有没有 title，需要结合多个场景判断 */
-  const hasTitle = useMemo(() => menu || title || subTitle || tooltip, [menu, subTitle, title, tooltip]);
+  const hasTitle = menu || title || subTitle || tooltip;
 
   /** 没有 key 的时候帮忙加一下 key 不加的话很烦人 */
-  const actionDom = useMemo(() => {
-    if (!Array.isArray(actions)) {
-      return actions;
-    }
-    if (actions.length < 1) {
-      return null;
-    }
-    return /*#__PURE__*/_jsx("div", {
+  let actionDom = null;
+  if (Array.isArray(actions) && actions.length > 0) {
+    actionDom = /*#__PURE__*/_jsx("div", {
       style: {
         display: 'flex',
         alignItems: 'center',
         gap: token.marginXS
       },
-      children: actions.map((action, index) => {
-        if (! /*#__PURE__*/React.isValidElement(action)) {
-          return /*#__PURE__*/_jsx(React.Fragment, {
-            children: action
-          }, index);
-        }
-        return /*#__PURE__*/React.cloneElement(action, {
-          key: index,
-          ...action?.props
-        });
-      })
+      children: actions.map((action, index) => /*#__PURE__*/_jsx(React.Fragment, {
+        children: action
+      }, index))
     });
-  }, [actions]);
-  const hasRight = useMemo(() => {
-    return !!(hasTitle && searchNode || !multipleLine && filtersNode || actionDom || settings?.length);
-  }, [actionDom, filtersNode, hasTitle, multipleLine, searchNode, settings?.length]);
-  const hasLeft = useMemo(() => tooltip || title || subTitle || menu || !hasTitle && searchNode, [hasTitle, menu, searchNode, subTitle, title, tooltip]);
-  const leftTitleDom = useMemo(() => {
-    // 保留dom是为了占位，不然 right 就变到左边了
-    if (!hasLeft && hasRight) {
-      return /*#__PURE__*/_jsx("div", {
-        className: clsx(`${prefixCls}-left`, hashId)
-      });
-    }
-
+  } else if (!Array.isArray(actions)) {
+    actionDom = actions;
+  }
+  const hasRight = !!(hasTitle && searchNode || !multipleLine && filtersNode || actionDom || settings?.length);
+  const hasLeft = !!(tooltip || title || subTitle || menu || !hasTitle && searchNode);
+  let leftTitleDom;
+  // 保留dom是为了占位，不然 right 就变到左边了
+  if (!hasLeft && hasRight) {
+    leftTitleDom = /*#__PURE__*/_jsx("div", {
+      className: clsx(`${prefixCls}-left`, hashId)
+    });
+  } else if (!menu && (hasTitle || !searchNode)) {
     // 减少 space 的dom，渲染的时候能节省点性能
-    if (!menu && (hasTitle || !searchNode)) {
-      return /*#__PURE__*/_jsx("div", {
-        className: clsx(`${prefixCls}-left`, hashId),
-        children: /*#__PURE__*/_jsx("div", {
-          className: clsx(`${prefixCls}-title`, hashId),
-          children: /*#__PURE__*/_jsx(LabelIconTip, {
-            tooltip: tooltip,
-            label: title,
-            subTitle: subTitle
-          })
+    leftTitleDom = /*#__PURE__*/_jsx("div", {
+      className: clsx(`${prefixCls}-left`, hashId),
+      children: /*#__PURE__*/_jsx("div", {
+        className: clsx(`${prefixCls}-title`, hashId),
+        children: /*#__PURE__*/_jsx(LabelIconTip, {
+          tooltip: tooltip,
+          label: title,
+          subTitle: subTitle
         })
-      });
-    }
-    return /*#__PURE__*/_jsxs("div", {
+      })
+    });
+  } else {
+    leftTitleDom = /*#__PURE__*/_jsxs("div", {
       className: clsx(`${prefixCls}-left`, hashId, {
         [`${prefixCls}-left-has-tabs`]: menu?.type === 'tab',
         [`${prefixCls}-left-has-dropdown`]: menu?.type === 'dropdown',
@@ -225,39 +206,32 @@ const ListToolBar = ({
         children: searchNode
       }) : null]
     });
-  }, [hasLeft, hasRight, hasTitle, hashId, menu, prefixCls, searchNode, subTitle, title, tooltip]);
-  const rightTitleDom = useMemo(() => {
-    if (!hasRight) return null;
-    return /*#__PURE__*/_jsxs("div", {
-      className: clsx(`${prefixCls}-right`, hashId),
-      style: isMobile ? {} : {
-        alignItems: 'center'
-      },
-      children: [!multipleLine ? filtersNode : null, hasTitle && searchNode ? /*#__PURE__*/_jsx("div", {
-        className: clsx(`${prefixCls}-search`, hashId),
-        children: searchNode
-      }) : null, actionDom, settings?.length ? /*#__PURE__*/_jsx("div", {
-        className: clsx(`${prefixCls}-setting-items`, hashId),
-        children: settings.map((setting, index) => {
-          const settingItem = getSettingItem(setting);
-          return /*#__PURE__*/_jsx("div", {
-            className: clsx(`${prefixCls}-setting-item`, hashId),
-            children: settingItem
-          }, index);
-        })
-      }) : null]
-    });
-  }, [hasRight, prefixCls, hashId, isMobile, hasTitle, searchNode, multipleLine, filtersNode, actionDom, settings]);
-  const titleNode = useMemo(() => {
-    if (!hasRight && !hasLeft) return null;
-    const containerClassName = clsx(`${prefixCls}-container`, hashId, {
+  }
+  const rightTitleDom = hasRight ? /*#__PURE__*/_jsxs("div", {
+    className: clsx(`${prefixCls}-right`, hashId),
+    style: isMobile ? {} : {
+      alignItems: 'center'
+    },
+    children: [!multipleLine ? filtersNode : null, hasTitle && searchNode ? /*#__PURE__*/_jsx("div", {
+      className: clsx(`${prefixCls}-search`, hashId),
+      children: searchNode
+    }) : null, actionDom, settings?.length ? /*#__PURE__*/_jsx("div", {
+      className: clsx(`${prefixCls}-setting-items`, hashId),
+      children: settings.map((setting, index) => {
+        const settingItem = getSettingItem(setting);
+        return /*#__PURE__*/_jsx("div", {
+          className: clsx(`${prefixCls}-setting-item`, hashId),
+          children: settingItem
+        }, index);
+      })
+    }) : null]
+  }) : null;
+  const titleNode = hasRight || hasLeft ? /*#__PURE__*/_jsxs("div", {
+    className: clsx(`${prefixCls}-container`, hashId, {
       [`${prefixCls}-container-mobile`]: isMobile
-    });
-    return /*#__PURE__*/_jsxs("div", {
-      className: containerClassName,
-      children: [leftTitleDom, rightTitleDom]
-    });
-  }, [hasLeft, hasRight, hashId, isMobile, leftTitleDom, prefixCls, rightTitleDom]);
+    }),
+    children: [leftTitleDom, rightTitleDom]
+  }) : null;
   return wrapSSR( /*#__PURE__*/_jsx(ResizeObserver, {
     onResize: size => {
       if (size.width < 375 !== isMobile) {

package/es/table/components/ToolBar/DensityIcon.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export type DensitySize = 'middle' | 'small' | 'large' | undefined;
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
+declare const DensityIcon: React.FC<{
     icon?: React.ReactNode;
-} & React.RefAttributes<HTMLSpanElement>>>;
-export default _default;
+}>;
+export default DensityIcon;

package/es/table/components/ToolBar/DensityIcon.js

@@ -4,10 +4,9 @@ import React, { useContext } from 'react';
 import { useIntl } from "../../../provider";
 import { TableContext } from "../../Store/Provide";
 import { jsx as _jsx } from "react/jsx-runtime";
-const DensityIcon = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    icon = /*#__PURE__*/_jsx(ColumnHeightOutlined, {})
-  } = props;
+const DensityIcon = ({
+  icon = /*#__PURE__*/_jsx(ColumnHeightOutlined, {})
+}) => {
   const counter = useContext(TableContext);
   const intl = useIntl();
   return /*#__PURE__*/_jsx(Dropdown, {
@@ -36,10 +35,9 @@ const DensityIcon = /*#__PURE__*/React.forwardRef((props, ref) => {
     children: /*#__PURE__*/_jsx(Tooltip, {
       title: intl.getMessage('tableToolBar.density', '表格密度'),
       children: /*#__PURE__*/_jsx("span", {
-        ref: ref,
         children: icon
       })
     })
   });
-});
-export default /*#__PURE__*/React.memo(DensityIcon);
+};
+export default DensityIcon;

package/es/table/components/ToolBar/FullscreenIcon.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<React.RefAttributes<HTMLSpanElement>>>;
-export default _default;
+declare const FullScreenIcon: React.FC;
+export default FullScreenIcon;

package/es/table/components/ToolBar/FullscreenIcon.js

@@ -4,29 +4,30 @@ import React, { useEffect, useState } from 'react';
 import { useIntl } from "../../../provider";
 import { isBrowser } from "../../../utils";
 import { jsx as _jsx } from "react/jsx-runtime";
-const FullScreenIcon = /*#__PURE__*/React.forwardRef((_, ref) => {
+const FullScreenIcon = () => {
   const intl = useIntl();
   const [fullscreen, setFullscreen] = useState(false);
   useEffect(() => {
-    if (!isBrowser()) {
-      return;
-    }
-    document.onfullscreenchange = () => {
-      setFullscreen(!!document.fullscreenElement);
-    };
+    if (!isBrowser()) return;
+    const handler = () => setFullscreen(!!document.fullscreenElement);
+    document.addEventListener('fullscreenchange', handler);
+    return () => document.removeEventListener('fullscreenchange', handler);
   }, []);
-  return fullscreen ? /*#__PURE__*/_jsx(Tooltip, {
+  const {
+    title,
+    Icon
+  } = fullscreen ? {
     title: intl.getMessage('tableToolBar.exitFullScreen', '退出全屏'),
-    children: /*#__PURE__*/_jsx("span", {
-      ref: ref,
-      children: /*#__PURE__*/_jsx(FullscreenExitOutlined, {})
-    })
-  }) : /*#__PURE__*/_jsx(Tooltip, {
+    Icon: FullscreenExitOutlined
+  } : {
     title: intl.getMessage('tableToolBar.fullScreen', '全屏'),
+    Icon: FullscreenOutlined
+  };
+  return /*#__PURE__*/_jsx(Tooltip, {
+    title: title,
     children: /*#__PURE__*/_jsx("span", {
-      ref: ref,
-      children: /*#__PURE__*/_jsx(FullscreenOutlined, {})
+      children: /*#__PURE__*/_jsx(Icon, {})
     })
   });
-});
-export default /*#__PURE__*/React.memo(FullScreenIcon);
+};
+export default FullScreenIcon;

package/es/table/components/ToolBar/index.d.ts

@@ -41,7 +41,9 @@ export type ToolBarProps<T = unknown> = {
     selectedRows?: T[];
     className?: string;
     onSearch?: (keyWords: string) => void;
-    columns: TableColumnType<T>[];
+    columns: (TableColumnType<T> & {
+        index?: number;
+    })[];
 };
 export type ToolbarRenderProps<T> = {
     hideToolbar: boolean;
@@ -58,5 +60,5 @@ export type ToolbarRenderProps<T> = {
     toolBarRender?: ToolBarProps<T>['toolBarRender'];
     actionRef: React.MutableRefObject<ActionType | undefined>;
 };
-declare const _default: <T>(props: ToolbarRenderProps<T>) => import("react/jsx-runtime").JSX.Element | null;
+declare const _default: <T>(props: ToolbarRenderProps<T>) => React.JSX.Element | null;
 export default _default;

package/es/table/components/ToolBar/index.js

@@ -1,6 +1,6 @@
 import { ReloadOutlined } from '@ant-design/icons';
 import { Tooltip } from 'antd';
-import React, { memo, useCallback, useContext, useEffect, useMemo } from 'react';
+import React, { memo, useCallback, useContext, useEffect } from 'react';
 import { useIntl } from "../../../provider";
 import { isDeepEqualReact, omitUndefined } from "../../../utils";
 import { TableContext } from "../../Store/Provide";
@@ -91,17 +91,17 @@ function ToolBar({
 }) {
   const counter = useContext(TableContext);
   const intl = useIntl();
-  const optionDom = useMemo(() => {
-    const defaultOptions = {
-      reload: () => action?.current?.reload(),
-      density: true,
-      setting: true,
-      search: false,
-      fullScreen: () => action?.current?.fullScreen?.()
-    };
-    if (propsOptions === false) {
-      return [];
-    }
+  const defaultOptions = {
+    reload: () => action?.current?.reload(),
+    density: true,
+    setting: true,
+    search: false,
+    fullScreen: () => action?.current?.fullScreen?.()
+  };
+  let optionDom;
+  if (propsOptions === false) {
+    optionDom = [];
+  } else {
     const options = {
       ...defaultOptions,
       fullScreen: false,
@@ -111,51 +111,45 @@ function ToolBar({
       ...defaultOptions,
       intl
     }, action, columns);
-    if (optionsRender) {
-      return optionsRender({
-        headerTitle,
-        tooltip,
-        toolBarRender,
-        action,
-        options: propsOptions,
-        selectedRowKeys,
-        selectedRows,
-        toolbar,
-        onSearch,
-        columns,
-        optionsRender,
-        ...rest
-      }, settings);
-    }
-    return settings;
-  }, [action, columns, headerTitle, intl, onSearch, optionsRender, propsOptions, rest, selectedRowKeys, selectedRows, toolBarRender, toolbar, tooltip]);
+    optionDom = optionsRender ? optionsRender({
+      headerTitle,
+      tooltip,
+      toolBarRender,
+      action,
+      options: propsOptions,
+      selectedRowKeys,
+      selectedRows,
+      toolbar,
+      onSearch,
+      columns,
+      optionsRender,
+      ...rest
+    }, settings) : settings;
+  }
   // 操作列表
   const actions = toolBarRender ? toolBarRender(action?.current, {
     selectedRowKeys,
     selectedRows
   }) : [];
-  const searchConfig = useMemo(() => {
-    if (!propsOptions) {
-      return false;
-    }
-    if (!propsOptions.search) return false;
-
+  let searchConfig = false;
+  if (propsOptions && propsOptions.search) {
     /** 受控的value 和 onChange */
     const defaultSearchConfig = {
       value: counter.keyWords,
       onChange: e => counter.setKeyWords(e.target.value)
     };
-    if (propsOptions.search === true) return defaultSearchConfig;
-    return {
+    searchConfig = propsOptions.search === true ? defaultSearchConfig : {
       ...defaultSearchConfig,
       ...propsOptions.search
     };
-  }, [counter, propsOptions]);
+  }
   useEffect(() => {
     if (counter.keyWords === undefined) {
       onSearch?.('');
     }
-  }, [counter.keyWords, onSearch]);
+    // onSearch 用 useRefFunction 稳定后，这里只需跟踪 keyWords 变化
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [counter.keyWords]);
   return /*#__PURE__*/_jsx(ListToolBar, {
     title: headerTitle,
     tooltip: tooltip,

package/es/table/index.d.ts

@@ -1,7 +1,3 @@
-import { FieldIndexColumn, FieldStatus } from '../field';
-import type { IntlType } from '../provider';
-import { ConfigConsumer, arEGIntl, caESIntl, createIntl, enUSIntl, esESIntl, frFRIntl, itITIntl, jaJPIntl, msMYIntl, ptBRIntl, ruRUIntl, thTHIntl, viVNIntl, zhCNIntl, zhTWIntl } from '../provider';
-import type { ProFieldValueType, RowEditableConfig } from '../utils';
 import type { DragTableProps } from './components/DragSortTable';
 import DragSortTable from './components/DragSortTable';
 import TableDropdown from './components/Dropdown';
@@ -15,8 +11,7 @@ import ListToolBar from './components/ListToolBar';
 import type { ColumnsState } from './Store/Provide';
 import ProTable from './Table';
 import type { ActionType, ProColumnType, ProColumns, ProTableProps, RequestData } from './typing';
-type ProColumnsValueType = ProFieldValueType;
-type TableRowEditable<T> = RowEditableConfig<T>;
-export { CellEditorTable, ConfigConsumer, DragSortTable, EditableProTable, FieldIndexColumn as IndexColumn, ConfigConsumer as IntlConsumer, ListToolBar, ProTable, RowEditorTable, Search, TableDropdown, FieldStatus as TableStatus, arEGIntl, caESIntl, createIntl, enUSIntl, esESIntl, frFRIntl, itITIntl, jaJPIntl, msMYIntl, ptBRIntl, ruRUIntl, thTHIntl, viVNIntl, zhCNIntl, zhTWIntl, };
-export type { ActionType, ColumnsState, DragTableProps, EditableFormInstance, EditableProTableProps, IntlType, ListToolBarProps, ProColumnType, ProColumns, ProColumnsValueType, ProTableProps, RequestData, TableRowEditable, };
+import { resolveTableViewDefaultDom } from './utils';
+export { CellEditorTable, DragSortTable, EditableProTable, ListToolBar, ProTable, resolveTableViewDefaultDom, RowEditorTable, Search, TableDropdown, };
+export type { ActionType, ColumnsState, DragTableProps, EditableFormInstance, EditableProTableProps, ListToolBarProps, ProColumnType, ProColumns, ProTableProps, RequestData, };
 export default ProTable;

package/es/table/index.js

@@ -1,5 +1,3 @@
-import { FieldIndexColumn, FieldStatus } from "../field";
-import { ConfigConsumer, arEGIntl, caESIntl, createIntl, enUSIntl, esESIntl, frFRIntl, itITIntl, jaJPIntl, msMYIntl, ptBRIntl, ruRUIntl, thTHIntl, viVNIntl, zhCNIntl, zhTWIntl } from "../provider";
 import DragSortTable from "./components/DragSortTable";
 import TableDropdown from "./components/Dropdown";
 import EditableProTable from "./components/EditableTable";
@@ -8,5 +6,6 @@ import { RowEditorTable } from "./components/EditableTable/RowEditorTable";
 import Search from "./components/Form";
 import ListToolBar from "./components/ListToolBar";
 import ProTable from "./Table";
-export { CellEditorTable, ConfigConsumer, DragSortTable, EditableProTable, FieldIndexColumn as IndexColumn, ConfigConsumer as IntlConsumer, ListToolBar, ProTable, RowEditorTable, Search, TableDropdown, FieldStatus as TableStatus, arEGIntl, caESIntl, createIntl, enUSIntl, esESIntl, frFRIntl, itITIntl, jaJPIntl, msMYIntl, ptBRIntl, ruRUIntl, thTHIntl, viVNIntl, zhCNIntl, zhTWIntl };
+import { resolveTableViewDefaultDom } from "./utils";
+export { CellEditorTable, DragSortTable, EditableProTable, ListToolBar, ProTable, resolveTableViewDefaultDom, RowEditorTable, Search, TableDropdown };
 export default ProTable;

package/es/table/typing.d.ts

@@ -8,7 +8,7 @@ import type React from 'react';
 import type { CSSProperties, Key } from 'react';
 import type { ProCardProps } from '../card';
 import type { ProFieldEmptyText } from '../field';
-import type { LightWrapperProps, ProFormProps, QueryFilterProps } from '../form';
+import type { ProFormProps, QueryFilterProps } from '../form';
 import type { LabelTooltipType, ProCoreActionType, ProEllipsis, ProSchema, ProSchemaComponentTypes, ProTableEditableFnType, RowEditableConfig, SearchTransformKeyFn } from '../utils';
 import type { AlertRenderType } from './components/Alert';
 import type { SearchConfig, TableFormItem } from './components/Form/FormRender';
@@ -119,9 +119,7 @@ export type ProColumnType<T = unknown, ValueType = 'text'> = ProSchema<T, ExtraP
     disable?: boolean | {
         checkbox: boolean;
     };
-}, ProSchemaComponentTypes, ValueType, {
-    lightProps?: LightWrapperProps;
-}>;
+}, ProSchemaComponentTypes, ValueType>;
 export type ProColumns<T = any, ValueType = 'text'> = ProColumnType<T, ValueType>;
 export type BorderedType = 'search' | 'table';
 export type Bordered = boolean | {
@@ -185,7 +183,9 @@ export type ProTableProps<DataSource, U, ValueType = 'text'> = {
     /**
      * @name 渲染 table 视图，用于定制 ProList，不推荐直接使用
      */
-    tableViewRender?: (props: TableProps<DataSource>, defaultDom: JSX.Element) => JSX.Element | undefined;
+    tableViewRender?: (props: TableProps<DataSource>, 
+    /** 懒执行：为函数时请在需要默认 Table 时调用，避免 ProList 等仅替换视图时创建未挂载的 Table */
+    defaultDom: JSX.Element | (() => JSX.Element)) => JSX.Element | undefined;
     /**
      * @name table 和搜索表单之间的 dom 渲染
      *