@ant-design/pro-components 3.1.0-0 → 3.1.1-1

package/lib/list/ListView.js

@@ -1,86 +1,80 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _util = require("@rc-component/util");
 var _antd = require("antd");
-var _useLazyKVMap3 = _interopRequireDefault(require("antd/lib/table/hooks/useLazyKVMap"));
-var _usePagination3 = _interopRequireDefault(require("antd/lib/table/hooks/usePagination"));
-var _useSelection3 = _interopRequireDefault(require("antd/lib/table/hooks/useSelection"));
-var _classnames = _interopRequireDefault(require("classnames"));
+var _useLazyKVMap = _interopRequireDefault(require("antd/lib/table/hooks/useLazyKVMap"));
+var _usePagination = _interopRequireDefault(require("antd/lib/table/hooks/usePagination"));
+var _useSelection = _interopRequireDefault(require("antd/lib/table/hooks/useSelection"));
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _provider = require("../provider");
 var _constants = require("./constants");
 var _Item = _interopRequireDefault(require("./Item"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["dataSource", "columns", "rowKey", "showActions", "showExtra", "prefixCls", "actionRef", "itemTitleRender", "renderItem", "itemCardProps", "itemHeaderRender", "expandable", "rowSelection", "pagination", "onRow", "onItem", "rowClassName"];
 function ListView(props) {
-  var dataSource = props.dataSource,
-    columns = props.columns,
-    rowKey = props.rowKey,
-    showActions = props.showActions,
-    showExtra = props.showExtra,
-    customizePrefixCls = props.prefixCls,
-    actionRef = props.actionRef,
-    itemTitleRender = props.itemTitleRender,
-    _renderItem = props.renderItem,
-    itemCardProps = props.itemCardProps,
-    itemHeaderRender = props.itemHeaderRender,
-    expandableConfig = props.expandable,
-    rowSelection = props.rowSelection,
-    pagination = props.pagination,
-    onRow = props.onRow,
-    onItem = props.onItem,
-    rowClassName = props.rowClassName,
-    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var _useContext = (0, _react.useContext)(_provider.ProProvider),
-    hashId = _useContext.hashId;
-  var _useContext2 = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext2.getPrefixCls;
-  var getRowKey = _react.default.useMemo(function () {
+  const {
+    dataSource,
+    columns,
+    rowKey,
+    showActions,
+    showExtra,
+    prefixCls: customizePrefixCls,
+    actionRef,
+    itemTitleRender,
+    renderItem,
+    itemCardProps,
+    itemHeaderRender,
+    expandable: expandableConfig,
+    rowSelection,
+    pagination,
+    // List 的 pagination 默认是 false
+    onRow,
+    onItem,
+    rowClassName,
+    ...rest
+  } = props;
+  const {
+    hashId
+  } = (0, _react.useContext)(_provider.ProProvider);
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const getRowKey = _react.default.useMemo(() => {
     if (typeof rowKey === 'function') {
       return rowKey;
     }
-    return function (record, index) {
-      return record[rowKey] || index;
-    };
+    return (record, index) => record[rowKey] || index;
   }, [rowKey]);
-  var _useLazyKVMap = (0, _useLazyKVMap3.default)(dataSource, 'children', getRowKey),
-    _useLazyKVMap2 = (0, _slicedToArray2.default)(_useLazyKVMap, 1),
-    getRecordByKey = _useLazyKVMap2[0];
-  var usePaginationArgs = [function () {}, pagination];
+  const [getRecordByKey] = (0, _useLazyKVMap.default)(dataSource, 'children', getRowKey);
+  const usePaginationArgs = [() => {}, pagination];
 
   // 合并分页的的配置，这里是为了兼容 antd 的分页
-  var _usePagination = (0, _usePagination3.default)(dataSource.length, usePaginationArgs[0], usePaginationArgs[1]),
-    _usePagination2 = (0, _slicedToArray2.default)(_usePagination, 1),
-    mergedPagination = _usePagination2[0];
+  const [mergedPagination] = (0, _usePagination.default)(dataSource.length, usePaginationArgs[0], usePaginationArgs[1]);
   /** 根据分页来返回不同的数据，模拟 table */
-  var pageData = _react.default.useMemo(function () {
+  const pageData = _react.default.useMemo(() => {
     if (pagination === false || !mergedPagination.pageSize || dataSource.length < mergedPagination.total) {
       return dataSource;
     }
-    var _mergedPagination$cur = mergedPagination.current,
-      current = _mergedPagination$cur === void 0 ? 1 : _mergedPagination$cur,
-      _mergedPagination$pag = mergedPagination.pageSize,
-      pageSize = _mergedPagination$pag === void 0 ? 10 : _mergedPagination$pag;
-    var currentPageData = dataSource.slice((current - 1) * pageSize, current * pageSize);
+    const {
+      current = 1,
+      pageSize = 10
+    } = mergedPagination;
+    const currentPageData = dataSource.slice((current - 1) * pageSize, current * pageSize);
     return currentPageData;
   }, [dataSource, mergedPagination, pagination]);
-  var prefixCls = getPrefixCls('pro-list', customizePrefixCls);
+  const prefixCls = getPrefixCls('pro-list', customizePrefixCls);
 
   /** 提供和 table 一样的 rowSelection 配置 */
-  var useSelectionArgs = [{
-    getRowKey: getRowKey,
-    getRecordByKey: getRecordByKey,
-    prefixCls: prefixCls,
+  const useSelectionArgs = [{
+    getRowKey,
+    getRecordByKey,
+    prefixCls,
     data: dataSource,
     pageData: pageData,
     expandType: 'row',
@@ -89,46 +83,38 @@ function ListView(props) {
   }, rowSelection
   // 这个 API 用的不好，先 any 一下
   ];
-  var _useSelection = _useSelection3.default.apply(void 0, useSelectionArgs),
-    _useSelection2 = (0, _slicedToArray2.default)(_useSelection, 2),
-    selectItemRender = _useSelection2[0],
-    selectedKeySet = _useSelection2[1];
+  const [selectItemRender, selectedKeySet] = (0, _useSelection.default)(...useSelectionArgs);
 
   // 提供和 Table 一样的 expand 支持
-  var _ref = expandableConfig || {},
-    expandedRowKeys = _ref.expandedRowKeys,
-    defaultExpandedRowKeys = _ref.defaultExpandedRowKeys,
-    _ref$defaultExpandAll = _ref.defaultExpandAllRows,
-    defaultExpandAllRows = _ref$defaultExpandAll === void 0 ? true : _ref$defaultExpandAll,
-    onExpand = _ref.onExpand,
-    onExpandedRowsChange = _ref.onExpandedRowsChange,
-    rowExpandable = _ref.rowExpandable;
+  const {
+    expandedRowKeys,
+    defaultExpandedRowKeys,
+    defaultExpandAllRows = true,
+    onExpand,
+    onExpandedRowsChange,
+    rowExpandable
+  } = expandableConfig || {};
 
   /** 展开收起功能区域 star */
-  var _React$useState = _react.default.useState(function () {
-      if (defaultExpandedRowKeys) {
-        return defaultExpandedRowKeys;
-      }
-      if (defaultExpandAllRows !== false) {
-        return dataSource.map(getRowKey);
-      }
-      return [];
-    }),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    innerExpandedKeys = _React$useState2[0],
-    setInnerExpandedKeys = _React$useState2[1];
-  var mergedExpandedKeys = _react.default.useMemo(function () {
-    return new Set(expandedRowKeys || innerExpandedKeys || []);
-  }, [expandedRowKeys, innerExpandedKeys]);
-  var onTriggerExpand = _react.default.useCallback(function (record) {
-    var key = getRowKey(record, dataSource.indexOf(record));
-    var newExpandedKeys;
-    var hasKey = mergedExpandedKeys.has(key);
+  const [innerExpandedKeys, setInnerExpandedKeys] = _react.default.useState(() => {
+    if (defaultExpandedRowKeys) {
+      return defaultExpandedRowKeys;
+    }
+    if (defaultExpandAllRows !== false) {
+      return dataSource.map(getRowKey);
+    }
+    return [];
+  });
+  const mergedExpandedKeys = _react.default.useMemo(() => new Set(expandedRowKeys || innerExpandedKeys || []), [expandedRowKeys, innerExpandedKeys]);
+  const onTriggerExpand = _react.default.useCallback(record => {
+    const key = getRowKey(record, dataSource.indexOf(record));
+    let newExpandedKeys;
+    const hasKey = mergedExpandedKeys.has(key);
     if (hasKey) {
       mergedExpandedKeys.delete(key);
-      newExpandedKeys = (0, _toConsumableArray2.default)(mergedExpandedKeys);
+      newExpandedKeys = [...mergedExpandedKeys];
     } else {
-      newExpandedKeys = [].concat((0, _toConsumableArray2.default)(mergedExpandedKeys), [key]);
+      newExpandedKeys = [...mergedExpandedKeys, key];
     }
     setInnerExpandedKeys(newExpandedKeys);
     if (onExpand) {
@@ -142,60 +128,65 @@ function ListView(props) {
   /** 展开收起功能区域 end */
 
   /** 这个是 选择框的 render 方法 为了兼容 antd 的 table,用了同样的渲染逻辑 所以看起来有点奇怪 */
-  var selectItemDom = selectItemRender([])[0];
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.List, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, rest), {}, {
-    className: (0, _classnames.default)(getPrefixCls('pro-list-container', customizePrefixCls), hashId, rest.className),
+  const selectItemDom = selectItemRender([])[0];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.List, {
+    ...rest,
+    className: (0, _clsx.clsx)(getPrefixCls('pro-list-container', customizePrefixCls), hashId, rest.className),
     dataSource: pageData,
     pagination: pagination && mergedPagination,
-    renderItem: function renderItem(item, index) {
-      var _actionRef$current;
-      var listItemProps = {
+    renderItem: (item, index) => {
+      const listItemProps = {
         className: typeof rowClassName === 'function' ? rowClassName(item, index) : rowClassName
       };
-      columns === null || columns === void 0 || columns.forEach(function (column) {
-        var listKey = column.listKey,
-          cardActionProps = column.cardActionProps;
+      columns?.forEach(column => {
+        const {
+          listKey,
+          cardActionProps
+        } = column;
         if (!_constants.PRO_LIST_KEYS_MAP.has(listKey)) {
           return;
         }
-        var dataIndex = column.dataIndex || listKey || column.key;
-        var rawData = Array.isArray(dataIndex) ? (0, _util.get)(item, dataIndex) : item[dataIndex];
+        const dataIndex = column.dataIndex || listKey || column.key;
+        const rawData = Array.isArray(dataIndex) ? (0, _util.get)(item, dataIndex) : item[dataIndex];
 
         /** 如果cardActionProps 需要直接使用源数组，因为 action 必须要源数组 */
         if (cardActionProps === 'actions' && listKey === 'actions') {
           listItemProps.cardActionProps = cardActionProps;
         }
         // 调用protable的列配置渲染数据
-        var data = column.render ? column.render(rawData, item, index) : rawData;
+        const data = column.render ? column.render(rawData, item, index) : rawData;
         if (data !== '-') listItemProps[column.listKey] = data;
       });
-      var checkboxDom;
+      let checkboxDom;
       if (selectItemDom && selectItemDom.render) {
         checkboxDom = selectItemDom.render(item, item, index);
       }
-      var _ref2 = ((_actionRef$current = actionRef.current) === null || _actionRef$current === void 0 ? void 0 : _actionRef$current.isEditable((0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
-          index: index
-        }))) || {},
-        isEditable = _ref2.isEditable,
-        recordKey = _ref2.recordKey;
-      var isChecked = selectedKeySet.has(recordKey || index);
-      var defaultDom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({
-        cardProps: rest.grid ? (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemCardProps), rest.grid), {}, {
+      const {
+        isEditable,
+        recordKey
+      } = actionRef.current?.isEditable({
+        ...item,
+        index
+      }) || {};
+      const isChecked = selectedKeySet.has(recordKey || index);
+      const defaultDom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.default, {
+        cardProps: rest.grid ? {
+          ...itemCardProps,
+          ...rest.grid,
           checked: isChecked,
-          onChange: /*#__PURE__*/_react.default.isValidElement(checkboxDom) ? function (changeChecked) {
-            var _checkboxDom;
-            return (_checkboxDom = checkboxDom) === null || _checkboxDom === void 0 || (_checkboxDom = _checkboxDom.props) === null || _checkboxDom === void 0 ? void 0 : _checkboxDom.onChange({
+          onChange: /*#__PURE__*/_react.default.isValidElement(checkboxDom) ? changeChecked => {
+            return checkboxDom?.props?.onChange({
               nativeEvent: {},
-              changeChecked: changeChecked
+              changeChecked
             });
           } : undefined
-        }) : undefined
-      }, listItemProps), {}, {
+        } : undefined,
+        ...listItemProps,
         recordKey: recordKey,
         isEditable: isEditable || false,
         expandable: expandableConfig,
         expand: mergedExpandedKeys.has(getRowKey(item, index)),
-        onExpand: function onExpand() {
+        onExpand: () => {
           onTriggerExpand(item);
         },
         index: index,
@@ -210,12 +201,12 @@ function ListView(props) {
         checkbox: checkboxDom,
         onRow: onRow,
         onItem: onItem
-      }), recordKey);
-      if (_renderItem) {
-        return _renderItem(item, index, defaultDom);
+      }, recordKey);
+      if (renderItem) {
+        return renderItem(item, index, defaultDom);
       }
       return defaultDom;
     }
-  }));
+  });
 }
 var _default = exports.default = ListView;

package/lib/list/constants.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PRO_LIST_KEYS_MAP = exports.PRO_LIST_KEYS = void 0;
-var PRO_LIST_KEYS = exports.PRO_LIST_KEYS = ['title', 'subTitle', 'avatar', 'description', 'extra', 'content', 'actions', 'type'];
-var PRO_LIST_KEYS_MAP = exports.PRO_LIST_KEYS_MAP = PRO_LIST_KEYS.reduce(function (pre, next) {
+const PRO_LIST_KEYS = exports.PRO_LIST_KEYS = ['title', 'subTitle', 'avatar', 'description', 'extra', 'content', 'actions', 'type'];
+const PRO_LIST_KEYS_MAP = exports.PRO_LIST_KEYS_MAP = PRO_LIST_KEYS.reduce((pre, next) => {
   pre.set(next, true);
   return pre;
 }, new Map());

package/lib/list/index.js

@@ -8,58 +8,53 @@ Object.defineProperty(exports, "__esModule", {
 exports.BaseProList = BaseProList;
 exports.ProList = ProList;
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _antd = require("antd");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _provider = require("../provider");
 var _table = _interopRequireDefault(require("../table"));
 var _ListView = _interopRequireDefault(require("./ListView"));
 var _index = require("./style/index");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["metas", "split", "footer", "rowKey", "tooltip", "className", "options", "search", "expandable", "showActions", "showExtra", "rowSelection", "pagination", "itemLayout", "renderItem", "grid", "itemCardProps", "onRow", "onItem", "rowClassName", "locale", "itemHeaderRender", "itemTitleRender"];
 function NoProVideProList(props) {
-  var metals = props.metas,
-    split = props.split,
-    footer = props.footer,
-    rowKey = props.rowKey,
-    tooltip = props.tooltip,
-    className = props.className,
-    _props$options = props.options,
-    options = _props$options === void 0 ? false : _props$options,
-    _props$search = props.search,
-    search = _props$search === void 0 ? false : _props$search,
-    expandable = props.expandable,
-    showActions = props.showActions,
-    showExtra = props.showExtra,
-    _props$rowSelection = props.rowSelection,
-    propRowSelection = _props$rowSelection === void 0 ? false : _props$rowSelection,
-    _props$pagination = props.pagination,
-    propsPagination = _props$pagination === void 0 ? false : _props$pagination,
-    itemLayout = props.itemLayout,
-    renderItem = props.renderItem,
-    grid = props.grid,
-    itemCardProps = props.itemCardProps,
-    onRow = props.onRow,
-    onItem = props.onItem,
-    rowClassName = props.rowClassName,
-    locale = props.locale,
-    itemHeaderRender = props.itemHeaderRender,
-    itemTitleRender = props.itemTitleRender,
-    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var actionRef = (0, _react.useRef)();
-  (0, _react.useImperativeHandle)(rest.actionRef, function () {
-    return actionRef.current;
-  }, [actionRef.current]);
-  var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var proTableColumns = (0, _react.useMemo)(function () {
-    var columns = [];
-    Object.keys(metals || {}).forEach(function (key) {
-      var meta = metals[key] || {};
-      var valueType = meta.valueType;
+  const {
+    metas: metals,
+    split,
+    footer,
+    rowKey,
+    tooltip,
+    className,
+    options = false,
+    search = false,
+    expandable,
+    showActions,
+    showExtra,
+    rowSelection: propRowSelection = false,
+    pagination: propsPagination = false,
+    itemLayout,
+    renderItem,
+    grid,
+    itemCardProps,
+    onRow,
+    onItem,
+    rowClassName,
+    locale,
+    itemHeaderRender,
+    itemTitleRender,
+    ...rest
+  } = props;
+  const actionRef = (0, _react.useRef)();
+  (0, _react.useImperativeHandle)(rest.actionRef, () => actionRef.current, [actionRef.current]);
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const proTableColumns = (0, _react.useMemo)(() => {
+    const columns = [];
+    Object.keys(metals || {}).forEach(key => {
+      const meta = metals[key] || {};
+      let {
+        valueType
+      } = meta;
       if (!valueType) {
         // 根据 key 给不同的 valueType
         if (key === 'avatar') {
@@ -72,39 +67,43 @@ function NoProVideProList(props) {
           valueType = 'textarea';
         }
       }
-      columns.push((0, _objectSpread2.default)((0, _objectSpread2.default)({
+      columns.push({
         listKey: key,
-        dataIndex: (meta === null || meta === void 0 ? void 0 : meta.dataIndex) || key
-      }, meta), {}, {
-        valueType: valueType
-      }));
+        dataIndex: meta?.dataIndex || key,
+        ...meta,
+        valueType
+      });
     });
     return columns;
   }, [metals]);
-  var prefixCls = getPrefixCls('pro-list', props.prefixCls);
-  var _useStyle = (0, _index.useStyle)(prefixCls),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var listClassName = (0, _classnames.default)(prefixCls, hashId, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-no-split"), !split));
-  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(_table.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({
-    tooltip: tooltip
-  }, rest), {}, {
+  const prefixCls = getPrefixCls('pro-list', props.prefixCls);
+  const {
+    wrapSSR,
+    hashId
+  } = (0, _index.useStyle)(prefixCls);
+  const listClassName = (0, _clsx.clsx)(prefixCls, hashId, {
+    [`${prefixCls}-no-split`]: !split
+  });
+  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(_table.default, {
+    tooltip: tooltip,
+    ...rest,
     actionRef: actionRef,
     pagination: propsPagination,
     type: "list",
     rowSelection: propRowSelection,
     search: search,
     options: options,
-    className: (0, _classnames.default)(prefixCls, className, listClassName),
+    className: (0, _clsx.clsx)(prefixCls, className, listClassName),
     columns: proTableColumns,
     rowKey: rowKey,
-    tableViewRender: function tableViewRender(_ref) {
-      var columns = _ref.columns,
-        size = _ref.size,
-        pagination = _ref.pagination,
-        rowSelection = _ref.rowSelection,
-        dataSource = _ref.dataSource,
-        loading = _ref.loading;
+    tableViewRender: ({
+      columns,
+      size,
+      pagination,
+      rowSelection,
+      dataSource,
+      loading
+    }) => {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListView.default, {
         grid: grid,
         itemCardProps: itemCardProps,
@@ -132,22 +131,25 @@ function NoProVideProList(props) {
         locale: locale
       });
     }
-  })));
+  }));
 }
 function BaseProList(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_provider.ProConfigProvider, {
     needDeps: true,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(NoProVideProList, (0, _objectSpread2.default)({
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(NoProVideProList, {
       cardProps: false,
       search: false,
-      toolBarRender: false
-    }, props))
+      toolBarRender: false,
+      ...props
+    })
   });
 }
 function ProList(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_provider.ProConfigProvider, {
     needDeps: true,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(NoProVideProList, (0, _objectSpread2.default)({}, props))
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(NoProVideProList, {
+      ...props
+    })
   });
 }
 var _default = exports.default = ProList;