@ant-design/pro-components 3.1.3-0 → 3.1.4-0

package/lib/layout/components/GlobalFooter/style.js

@@ -8,6 +8,7 @@ var _provider = require("../../../provider");
 const genFooterToolBarStyle = token => {
   return {
     [token.componentCls]: {
+      boxSizing: 'border-box',
       marginBlock: 0,
       marginBlockStart: 48,
       marginBlockEnd: 24,

package/lib/layout/components/GlobalHeader/ActionsContent.js

@@ -121,7 +121,6 @@ const ActionsContent = ({
           children: contentRender ? contentRender({
             ...props,
             // 测试专用
-            //@ts-ignore
             rightContentSize: rightSize
           }) : null
         })

package/lib/layout/components/GridContent/style.js

@@ -8,6 +8,7 @@ var _provider = require("../../../provider");
 const genGridContentStyle = token => {
   return {
     [token.componentCls]: {
+      boxSizing: 'border-box',
       width: '100%',
       '&-wide': {
         maxWidth: 1152,

package/lib/layout/components/Header/index.js

@@ -102,9 +102,7 @@ const DefaultHeader = props => {
   });
   if (layout === 'side' && !isMobile) return null;
   return stylish.wrapSSR(wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.ConfigProvider
-    // @ts-ignore
-    , {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.ConfigProvider, {
       theme: {
         hashed: (0, _provider.isNeedOpenHash)(),
         components: {

package/lib/layout/components/PageContainer/index.js

@@ -196,7 +196,6 @@ const PageContainerBase = props => {
     return () => {
       value?.setHasPageContainer?.(num => num - 1);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const {
     token

package/lib/layout/components/PageContainer/style/index.js

@@ -9,6 +9,10 @@ const [sm, md, lg, xl] = [576, 768, 992, 1200].map(bp => `@media (max-width: ${b
 const genPageContainerStyle = token => {
   return {
     [token.componentCls]: {
+      boxSizing: 'border-box',
+      '*, *::before, *::after': {
+        boxSizing: 'border-box'
+      },
       position: 'relative',
       '&-children-container': {
         paddingBlockStart: 0,

package/lib/layout/components/SettingDrawer/BlockCheckbox.js

@@ -36,7 +36,6 @@ const BlockCheckbox = ({
       })
     }, item.key));
     return domList;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value, list?.length, onChange]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: (0, _clsx.clsx)(baseClassName, hashId),

package/lib/layout/components/SettingDrawer/index.js

@@ -219,7 +219,6 @@ const SettingDrawer = props => {
       passive: true
     });
     return () => window.document.removeEventListener('languagechange', onLanguageChange);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   /**

package/lib/layout/components/SettingDrawer/style/index.js

@@ -8,6 +8,10 @@ var _provider = require("../../../../provider");
 const genSettingDrawerStyle = token => {
   return {
     [`${token.componentCls}-handle`]: {
+      boxSizing: 'border-box',
+      '*, *::before, *::after': {
+        boxSizing: 'border-box'
+      },
       position: 'fixed',
       insetBlockStart: '240px',
       insetInlineEnd: '0px',

package/lib/layout/components/SiderMenu/BaseMenu.js

@@ -163,7 +163,6 @@ class MenuUtil {
       disabled: item.disabled,
       key: item.key || item.path,
       onClick: item.onTitleClick,
-      // eslint-disable-next-line react/no-is-mounted
       label: this.getMenuItemPath(item, level, noGroupLevel)
     };
   };
@@ -381,7 +380,6 @@ const BaseMenu = props => {
       setOpenKeys(matchMenuKeys);
       setSelectedKeys(matchMenuKeys);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [matchMenuKeys.join('-')]);
   (0, _react.useEffect)(() => {
     // reset IconFont
@@ -413,9 +411,7 @@ const BaseMenu = props => {
   },
   // 依赖项加上 props.collapsed，保证折叠时能正确响应
   [matchMenuKeys.join('-'), props.collapsed]);
-  const openKeysProps = (0, _react.useMemo)(() => getOpenKeysProps(openKeys, props),
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [openKeys && openKeys.join(','), props.layout, props.collapsed]);
+  const openKeysProps = (0, _react.useMemo)(() => getOpenKeysProps(openKeys, props), [openKeys && openKeys.join(','), props.layout, props.collapsed]);
   const {
     wrapSSR,
     hashId
@@ -458,7 +454,7 @@ const BaseMenu = props => {
   }
   return wrapSSR( /*#__PURE__*/(0, _react.createElement)(_antd.Menu, {
     ...openKeysProps,
-    _internalDisableMenuItemTitleTooltip: true,
+    tooltip: false,
     key: "Menu",
     mode: mode,
     inlineIndent: 16,

package/lib/layout/components/SiderMenu/SiderMenu.js

@@ -175,9 +175,7 @@ const SiderMenu = props => {
         }, index);
       })
     });
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [actionsRender, baseClassName, collapsed]);
+  }, [actionsRender, baseClassName, collapsed]);
   const appsDom = (0, _react.useMemo)(() => {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppsLogoComponents.AppsLogoComponents, {
       onItemClick: props.itemClick,

package/lib/layout/components/SiderMenu/index.js

@@ -32,7 +32,6 @@ const SiderMenuWrapper = props => {
     if (isMobile === true) {
       onCollapse?.(true);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isMobile]);
   const omitProps = (0, _util.omit)(props, ['className', 'style']);
   const {

package/lib/layout/components/TopNavHeader/index.js

@@ -51,8 +51,7 @@ const TopNavHeader = props => {
     token
   } = (0, _react.useContext)(_provider.ProProvider);
   const contentDom = (0, _react.useMemo)(() => {
-    const defaultDom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.ConfigProvider // @ts-ignore
-    , {
+    const defaultDom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.ConfigProvider, {
       theme: {
         hashed: (0, _provider.isNeedOpenHash)(),
         components: {

package/lib/layout/components/TopNavHeader/style.js

@@ -8,6 +8,7 @@ var _provider = require("../../../provider");
 const genTopNavHeaderStyle = token => {
   return {
     [token.componentCls]: {
+      boxSizing: 'border-box',
       position: 'relative',
       width: '100%',
       height: '100%',

package/lib/layout/style/index.js

@@ -11,6 +11,10 @@ const genProLayoutStyle = token => {
       backgroundColor: 'transparent !important'
     },
     [token.componentCls]: {
+      boxSizing: 'border-box',
+      '*, *::before, *::after': {
+        boxSizing: 'border-box'
+      },
       [`& ${token.antCls}-layout`]: {
         display: 'flex',
         backgroundColor: 'transparent',

package/lib/layout/utils/getMenuData.js

@@ -7,7 +7,6 @@ exports.getMenuData = void 0;
 var _routeUtils = require("@umijs/route-utils");
 function fromEntries(iterable) {
   return [...iterable].reduce((obj, [key, val]) => {
-    // eslint-disable-next-line no-param-reassign
     obj[key] = val;
     return obj;
   }, {});

package/lib/list/Item.d.ts

@@ -1,8 +1,8 @@
-import type { ListGridType } from 'antd/lib/list';
 import type { ExpandableConfig } from 'antd/lib/table/interface';
 import React from 'react';
 import type { CheckCardProps } from '../card';
 import type { GetComponentProps } from './index';
+import type { ListGridType } from './ProListBase';
 export type RenderExpandIconProps<RecordType> = {
     prefixCls: string;
     expanded: boolean;
@@ -39,11 +39,8 @@ export type ItemProps<RecordType> = {
     grid?: ListGridType;
     expand?: boolean;
     rowSupportExpand?: boolean;
-    cardActionProps?: 'actions' | 'extra';
     onExpand?: (expand: boolean) => void;
     expandable?: ExpandableConfig<any>;
-    showActions?: 'hover' | 'always';
-    showExtra?: 'hover' | 'always';
     type?: 'new' | 'top' | 'inline' | 'subheader';
     isEditable: boolean;
     recordKey: string | number | undefined;

package/lib/list/Item.js

@@ -13,6 +13,7 @@ var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _card = require("../card");
 var _provider = require("../provider");
+var _ProListBase = require("./ProListBase");
 var _jsxRuntime = require("react/jsx-runtime");
 function renderExpandIcon({
   prefixCls,
@@ -45,26 +46,26 @@ function renderExpandIcon({
   });
 }
 function ProListItem(props) {
-  const {
-    prefixCls: customizePrefixCls
-  } = props;
   const {
     getPrefixCls
   } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
   const {
     hashId
   } = (0, _react.useContext)(_provider.ProProvider);
-  const prefixCls = getPrefixCls('pro-list', customizePrefixCls);
+  const prefixCls = getPrefixCls('pro-list', props.prefixCls);
   const defaultClassName = `${prefixCls}-row`;
   const {
     title,
     subTitle,
     content,
     itemTitleRender,
-    prefixCls: restPrefixCls,
+    prefixCls: _prefixCls,
+    // eslint-disable-line @typescript-eslint/no-unused-vars
     actions,
-    item,
-    recordKey,
+    item: _item,
+    // eslint-disable-line @typescript-eslint/no-unused-vars
+    recordKey: _recordKey,
+    // eslint-disable-line @typescript-eslint/no-unused-vars
     avatar,
     cardProps,
     description,
@@ -77,8 +78,6 @@ function ProListItem(props) {
     onExpand: propsOnExpand,
     expandable: expandableConfig,
     rowSupportExpand,
-    showActions,
-    showExtra,
     type,
     style,
     className: propsClassName = defaultClassName,
@@ -86,7 +85,6 @@ function ProListItem(props) {
     onRow,
     onItem,
     itemHeaderRender,
-    cardActionProps,
     extra,
     ...rest
   } = props;
@@ -107,37 +105,14 @@ function ProListItem(props) {
   }, [propsOnExpand]);
   const className = (0, _clsx.clsx)({
     [`${defaultClassName}-selected`]: !cardProps && selected,
-    [`${defaultClassName}-show-action-hover`]: showActions === 'hover',
     [`${defaultClassName}-type-${type}`]: !!type,
-    [`${defaultClassName}-editable`]: isEditable,
-    [`${defaultClassName}-show-extra-hover`]: showExtra === 'hover'
+    [`${defaultClassName}-editable`]: isEditable
   }, hashId, defaultClassName);
-  const extraClassName = (0, _clsx.clsx)(hashId, {
-    [`${propsClassName}-extra`]: showExtra === 'hover'
-  });
   const needExpanded = expanded || Object.values(expandableConfig || {}).length === 0;
   const expandedRowDom = expandedRowRender && expandedRowRender(record, index, indentSize, expanded);
-  const extraDom = (0, _react.useMemo)(() => {
-    if (!actions || cardActionProps === 'actions') {
-      return undefined;
-    }
-    return [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      onClick: e => e.stopPropagation(),
-      children: actions
-    }, "action")];
-  }, [actions, cardActionProps]);
-  const actionsDom = (0, _react.useMemo)(() => {
-    if (!actions || !cardActionProps || cardActionProps === 'extra') {
-      return undefined;
-    }
-    return [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: `${defaultClassName}-actions ${hashId}`.trim(),
-      onClick: e => e.stopPropagation(),
-      children: actions
-    }, "action")];
-  }, [actions, cardActionProps, defaultClassName, hashId]);
+  const actionsArray = (0, _react.useMemo)(() => actions ? _react.default.Children.toArray(actions) : undefined, [actions]);
   const titleDom = title || subTitle ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: `${defaultClassName}-header-container ${hashId}`.trim(),
+    className: (0, _clsx.clsx)(`${defaultClassName}-header-container`, hashId),
     children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _clsx.clsx)(`${defaultClassName}-title`, hashId, {
         [`${defaultClassName}-title-editable`]: isEditable
@@ -151,41 +126,77 @@ function ProListItem(props) {
     })]
   }) : null;
   const metaTitle = (itemTitleRender && itemTitleRender?.(record, index, titleDom)) ?? titleDom;
-  const metaDom = metaTitle || avatar || subTitle || description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.List.Item.Meta, {
+  const metaDom = metaTitle || avatar || subTitle || description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProListBase.ProListItemMeta, {
     avatar: avatar,
     title: metaTitle,
     description: description && needExpanded && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: `${className}-description ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${className}-description`, hashId),
       children: description
     })
   }) : null;
+  const itemProps = onItem?.(record, index);
+  const hasExpandableConfig = Object.keys(expandableConfig || {}).length > 0;
+  const expandedRowClassStr = typeof expandedRowClassName === 'function' ? expandedRowClassName(record, index, indentSize) : expandedRowClassName;
+  const headerDom = typeof itemHeaderRender === 'function' ? itemHeaderRender(record, index, metaDom) : metaDom;
+
+  // 卡片模式渲染
+  if (cardProps) {
+    const cardTitleDom = avatar || title ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [avatar, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _clsx.clsx)(`${prefixCls}-item-meta-title`, hashId),
+        children: title
+      })]
+    }) : null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _clsx.clsx)(hashId, `${className}-card-container`, {
+        [propsClassName]: propsClassName !== defaultClassName
+      }),
+      style: style,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_card.CheckCard, {
+        bordered: true,
+        style: {
+          width: '100%'
+        },
+        className: (0, _clsx.clsx)(`${defaultClassName}-card`, hashId),
+        ...cardProps,
+        title: cardTitleDom,
+        subTitle: subTitle,
+        extra: actionsArray,
+        bodyStyle: {
+          padding: 24,
+          ...cardProps.bodyStyle
+        },
+        ...itemProps,
+        onClick: e => {
+          cardProps?.onClick?.(e);
+          itemProps?.onClick?.(e);
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
+          avatar: true,
+          title: false,
+          loading: loading,
+          active: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: (0, _clsx.clsx)(`${className}-header`, hashId),
+            children: [typeof itemTitleRender === 'function' && itemTitleRender(record, index, titleDom), content]
+          })
+        })
+      })
+    });
+  }
+
+  // 列表模式渲染
   const rowClassName = (0, _clsx.clsx)(hashId, {
     [`${defaultClassName}-item-has-checkbox`]: checkbox,
     [`${defaultClassName}-item-has-avatar`]: avatar,
     [className]: className
   });
-  const cardTitleDom = (0, _react.useMemo)(() => {
-    if (avatar || title) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [avatar, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: `${getPrefixCls('list-item-meta-title')} ${hashId}`.trim(),
-          children: title
-        })]
-      });
-    }
-    return null;
-  }, [avatar, getPrefixCls, hashId, title]);
-  const itemProps = onItem?.(record, index);
-  const defaultDom = !cardProps ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.List.Item, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProListBase.ProListItem, {
     className: (0, _clsx.clsx)(rowClassName, hashId, {
       [propsClassName]: propsClassName !== defaultClassName
     }),
     ...rest,
-    actions: extraDom,
-    extra: !!extra && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: extraClassName,
-      children: extra
-    }),
+    extra: extra,
     ...onRow?.(record, index),
     ...itemProps,
     onClick: e => {
@@ -201,13 +212,13 @@ function ProListItem(props) {
       loading: loading,
       active: true,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: `${className}-header ${hashId}`.trim(),
+        className: (0, _clsx.clsx)(`${className}-header`, hashId),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: `${className}-header-option ${hashId}`.trim(),
+          className: (0, _clsx.clsx)(`${className}-header-option`, hashId),
           children: [!!checkbox && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: `${className}-checkbox ${hashId}`.trim(),
+            className: (0, _clsx.clsx)(`${className}-checkbox`, hashId),
             children: checkbox
-          }), Object.values(expandableConfig || {}).length > 0 && rowSupportExpand && renderExpandIcon({
+          }), hasExpandableConfig && rowSupportExpand && renderExpandIcon({
             prefixCls,
             hashId,
             expandIcon,
@@ -215,55 +226,15 @@ function ProListItem(props) {
             expanded,
             record
           })]
-        }), (itemHeaderRender && itemHeaderRender?.(record, index, metaDom)) ?? metaDom]
+        }), headerDom, actionsArray]
       }), needExpanded && (content || expandedRowDom) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: `${className}-content ${hashId}`.trim(),
+        className: (0, _clsx.clsx)(`${className}-content`, hashId),
         children: [content, expandedRowRender && rowSupportExpand && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: expandedRowClassName && typeof expandedRowClassName !== 'string' ? expandedRowClassName(record, index, indentSize) : expandedRowClassName,
+          className: expandedRowClassStr,
           children: expandedRowDom
         })]
       })]
     })
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_card.CheckCard, {
-    bordered: true,
-    style: {
-      width: '100%'
-    },
-    ...cardProps,
-    title: cardTitleDom,
-    subTitle: subTitle,
-    extra: extraDom,
-    actions: actionsDom,
-    bodyStyle: {
-      padding: 24,
-      ...cardProps.bodyStyle
-    },
-    ...itemProps,
-    onClick: e => {
-      cardProps?.onClick?.(e);
-      itemProps?.onClick?.(e);
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
-      avatar: true,
-      title: false,
-      loading: loading,
-      active: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: `${className}-header ${hashId}`.trim(),
-        children: [itemTitleRender && itemTitleRender?.(record, index, titleDom), content]
-      })
-    })
-  });
-  if (!cardProps) {
-    return defaultDom;
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _clsx.clsx)(hashId, {
-      [`${className}-card`]: cardProps,
-      [propsClassName]: propsClassName !== defaultClassName
-    }),
-    style: style,
-    children: defaultDom
   });
 }
 var _default = exports.default = ProListItem;

package/lib/list/ListView.d.ts

@@ -1,4 +1,4 @@
-import type { ListProps, TableProps } from 'antd';
+import type { TableProps } from 'antd';
 import type { AnyObject } from 'antd/lib/_util/type';
 import type { PaginationConfig } from 'antd/lib/pagination';
 import type { GetRowKey, TableRowSelection } from 'antd/lib/table/interface';
@@ -7,15 +7,16 @@ import type { CheckCardProps } from '../card';
 import type { ActionType } from '../table';
 import type { GetComponentProps } from './index';
 import type { ItemProps } from './Item';
+import type { ListProps } from './ProListBase';
 type AntdListProps<RecordType> = Omit<ListProps<RecordType>, 'rowKey'>;
+/** 自定义列表项渲染，defaultDom 为 ProList 默认渲染的列表项元素 */
+export type ProListItemRender<RecordType> = (item: RecordType, index: number, defaultDom: React.ReactElement) => React.ReactNode;
 export type ListViewProps<RecordType> = Omit<AntdListProps<RecordType>, 'renderItem'> & Pick<TableProps<RecordType>, 'columns' | 'dataSource' | 'expandable' | 'pagination'> & {
     rowKey?: string | keyof RecordType | GetRowKey<RecordType>;
-    showActions?: 'hover' | 'always';
-    showExtra?: 'hover' | 'always';
     rowSelection?: TableRowSelection<RecordType>;
     prefixCls?: string;
     dataSource: readonly RecordType[];
-    renderItem?: (item: RecordType, index: number, defaultDom: JSX.Element) => React.ReactNode;
+    itemRender?: ProListItemRender<RecordType>;
     actionRef: React.MutableRefObject<ActionType | undefined>;
     onRow?: GetComponentProps<RecordType>;
     onItem?: GetComponentProps<RecordType>;
@@ -25,6 +26,7 @@ export type ListViewProps<RecordType> = Omit<AntdListProps<RecordType>, 'renderI
     itemTitleRender?: ItemProps<RecordType>['itemTitleRender'];
     itemCardProps?: CheckCardProps;
     pagination?: PaginationConfig;
+    hashId?: string;
 };
 declare function ListView<RecordType extends AnyObject>(props: ListViewProps<RecordType>): import("react/jsx-runtime").JSX.Element;
 export default ListView;