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

package/es/list/ListView.js

@@ -1,78 +1,72 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["dataSource", "columns", "rowKey", "showActions", "showExtra", "prefixCls", "actionRef", "itemTitleRender", "renderItem", "itemCardProps", "itemHeaderRender", "expandable", "rowSelection", "pagination", "onRow", "onItem", "rowClassName"];
 import { get } from '@rc-component/util';
 import { ConfigProvider, List } from 'antd';
 import useLazyKVMap from 'antd/lib/table/hooks/useLazyKVMap';
 import usePagination from 'antd/lib/table/hooks/usePagination';
 import useSelection from 'antd/lib/table/hooks/useSelection';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useContext } from 'react';
 import { ProProvider } from "../provider";
 import { PRO_LIST_KEYS_MAP } from "./constants";
 import ProListItem from "./Item";
 import { jsx as _jsx } from "react/jsx-runtime";
 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 = _objectWithoutProperties(props, _excluded);
-  var _useContext = useContext(ProProvider),
-    hashId = _useContext.hashId;
-  var _useContext2 = useContext(ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext2.getPrefixCls;
-  var getRowKey = React.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
+  } = useContext(ProProvider);
+  const {
+    getPrefixCls
+  } = useContext(ConfigProvider.ConfigContext);
+  const getRowKey = React.useMemo(() => {
     if (typeof rowKey === 'function') {
       return rowKey;
     }
-    return function (record, index) {
-      return record[rowKey] || index;
-    };
+    return (record, index) => record[rowKey] || index;
   }, [rowKey]);
-  var _useLazyKVMap = useLazyKVMap(dataSource, 'children', getRowKey),
-    _useLazyKVMap2 = _slicedToArray(_useLazyKVMap, 1),
-    getRecordByKey = _useLazyKVMap2[0];
-  var usePaginationArgs = [function () {}, pagination];
+  const [getRecordByKey] = useLazyKVMap(dataSource, 'children', getRowKey);
+  const usePaginationArgs = [() => {}, pagination];
 
   // 合并分页的的配置，这里是为了兼容 antd 的分页
-  var _usePagination = usePagination(dataSource.length, usePaginationArgs[0], usePaginationArgs[1]),
-    _usePagination2 = _slicedToArray(_usePagination, 1),
-    mergedPagination = _usePagination2[0];
+  const [mergedPagination] = usePagination(dataSource.length, usePaginationArgs[0], usePaginationArgs[1]);
   /** 根据分页来返回不同的数据，模拟 table */
-  var pageData = React.useMemo(function () {
+  const pageData = React.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',
@@ -81,46 +75,38 @@ function ListView(props) {
   }, rowSelection
   // 这个 API 用的不好，先 any 一下
   ];
-  var _useSelection = useSelection.apply(void 0, useSelectionArgs),
-    _useSelection2 = _slicedToArray(_useSelection, 2),
-    selectItemRender = _useSelection2[0],
-    selectedKeySet = _useSelection2[1];
+  const [selectItemRender, selectedKeySet] = useSelection(...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.useState(function () {
-      if (defaultExpandedRowKeys) {
-        return defaultExpandedRowKeys;
-      }
-      if (defaultExpandAllRows !== false) {
-        return dataSource.map(getRowKey);
-      }
-      return [];
-    }),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    innerExpandedKeys = _React$useState2[0],
-    setInnerExpandedKeys = _React$useState2[1];
-  var mergedExpandedKeys = React.useMemo(function () {
-    return new Set(expandedRowKeys || innerExpandedKeys || []);
-  }, [expandedRowKeys, innerExpandedKeys]);
-  var onTriggerExpand = React.useCallback(function (record) {
-    var key = getRowKey(record, dataSource.indexOf(record));
-    var newExpandedKeys;
-    var hasKey = mergedExpandedKeys.has(key);
+  const [innerExpandedKeys, setInnerExpandedKeys] = React.useState(() => {
+    if (defaultExpandedRowKeys) {
+      return defaultExpandedRowKeys;
+    }
+    if (defaultExpandAllRows !== false) {
+      return dataSource.map(getRowKey);
+    }
+    return [];
+  });
+  const mergedExpandedKeys = React.useMemo(() => new Set(expandedRowKeys || innerExpandedKeys || []), [expandedRowKeys, innerExpandedKeys]);
+  const onTriggerExpand = React.useCallback(record => {
+    const key = getRowKey(record, dataSource.indexOf(record));
+    let newExpandedKeys;
+    const hasKey = mergedExpandedKeys.has(key);
     if (hasKey) {
       mergedExpandedKeys.delete(key);
-      newExpandedKeys = _toConsumableArray(mergedExpandedKeys);
+      newExpandedKeys = [...mergedExpandedKeys];
     } else {
-      newExpandedKeys = [].concat(_toConsumableArray(mergedExpandedKeys), [key]);
+      newExpandedKeys = [...mergedExpandedKeys, key];
     }
     setInnerExpandedKeys(newExpandedKeys);
     if (onExpand) {
@@ -134,60 +120,65 @@ function ListView(props) {
   /** 展开收起功能区域 end */
 
   /** 这个是 选择框的 render 方法 为了兼容 antd 的 table,用了同样的渲染逻辑 所以看起来有点奇怪 */
-  var selectItemDom = selectItemRender([])[0];
-  return /*#__PURE__*/_jsx(List, _objectSpread(_objectSpread({}, rest), {}, {
-    className: classNames(getPrefixCls('pro-list-container', customizePrefixCls), hashId, rest.className),
+  const selectItemDom = selectItemRender([])[0];
+  return /*#__PURE__*/_jsx(List, {
+    ...rest,
+    className: 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 (!PRO_LIST_KEYS_MAP.has(listKey)) {
           return;
         }
-        var dataIndex = column.dataIndex || listKey || column.key;
-        var rawData = Array.isArray(dataIndex) ? get(item, dataIndex) : item[dataIndex];
+        const dataIndex = column.dataIndex || listKey || column.key;
+        const rawData = Array.isArray(dataIndex) ? 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(_objectSpread(_objectSpread({}, item), {}, {
-          index: index
-        }))) || {},
-        isEditable = _ref2.isEditable,
-        recordKey = _ref2.recordKey;
-      var isChecked = selectedKeySet.has(recordKey || index);
-      var defaultDom = /*#__PURE__*/_jsx(ProListItem, _objectSpread(_objectSpread({
-        cardProps: rest.grid ? _objectSpread(_objectSpread(_objectSpread({}, itemCardProps), rest.grid), {}, {
+      const {
+        isEditable,
+        recordKey
+      } = actionRef.current?.isEditable({
+        ...item,
+        index
+      }) || {};
+      const isChecked = selectedKeySet.has(recordKey || index);
+      const defaultDom = /*#__PURE__*/_jsx(ProListItem, {
+        cardProps: rest.grid ? {
+          ...itemCardProps,
+          ...rest.grid,
           checked: isChecked,
-          onChange: /*#__PURE__*/React.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.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,
@@ -202,12 +193,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;
     }
-  }));
+  });
 }
 export default ListView;

package/es/list/constants.js

@@ -1,5 +1,5 @@
-var PRO_LIST_KEYS = ['title', 'subTitle', 'avatar', 'description', 'extra', 'content', 'actions', 'type'];
-var PRO_LIST_KEYS_MAP = PRO_LIST_KEYS.reduce(function (pre, next) {
+const PRO_LIST_KEYS = ['title', 'subTitle', 'avatar', 'description', 'extra', 'content', 'actions', 'type'];
+const PRO_LIST_KEYS_MAP = PRO_LIST_KEYS.reduce((pre, next) => {
   pre.set(next, true);
   return pre;
 }, new Map());

package/es/list/index.js

@@ -1,9 +1,5 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-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"];
 import { ConfigProvider } from 'antd';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useContext, useImperativeHandle, useMemo, useRef } from 'react';
 import { ProConfigProvider } from "../provider";
 import ProTable from "../table";
@@ -11,45 +7,44 @@ import ListView from "./ListView";
 import { useStyle } from "./style/index";
 import { jsx as _jsx } from "react/jsx-runtime";
 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 = _objectWithoutProperties(props, _excluded);
-  var actionRef = useRef();
-  useImperativeHandle(rest.actionRef, function () {
-    return actionRef.current;
-  }, [actionRef.current]);
-  var _useContext = useContext(ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var proTableColumns = 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 = useRef();
+  useImperativeHandle(rest.actionRef, () => actionRef.current, [actionRef.current]);
+  const {
+    getPrefixCls
+  } = useContext(ConfigProvider.ConfigContext);
+  const proTableColumns = useMemo(() => {
+    const columns = [];
+    Object.keys(metals || {}).forEach(key => {
+      const meta = metals[key] || {};
+      let {
+        valueType
+      } = meta;
       if (!valueType) {
         // 根据 key 给不同的 valueType
         if (key === 'avatar') {
@@ -62,39 +57,43 @@ function NoProVideProList(props) {
           valueType = 'textarea';
         }
       }
-      columns.push(_objectSpread(_objectSpread({
+      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 = useStyle(prefixCls),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var listClassName = classNames(prefixCls, hashId, _defineProperty({}, "".concat(prefixCls, "-no-split"), !split));
-  return wrapSSR( /*#__PURE__*/_jsx(ProTable, _objectSpread(_objectSpread({
-    tooltip: tooltip
-  }, rest), {}, {
+  const prefixCls = getPrefixCls('pro-list', props.prefixCls);
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(prefixCls);
+  const listClassName = clsx(prefixCls, hashId, {
+    [`${prefixCls}-no-split`]: !split
+  });
+  return wrapSSR( /*#__PURE__*/_jsx(ProTable, {
+    tooltip: tooltip,
+    ...rest,
     actionRef: actionRef,
     pagination: propsPagination,
     type: "list",
     rowSelection: propRowSelection,
     search: search,
     options: options,
-    className: classNames(prefixCls, className, listClassName),
+    className: 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__*/_jsx(ListView, {
         grid: grid,
         itemCardProps: itemCardProps,
@@ -122,22 +121,25 @@ function NoProVideProList(props) {
         locale: locale
       });
     }
-  })));
+  }));
 }
 function BaseProList(props) {
   return /*#__PURE__*/_jsx(ProConfigProvider, {
     needDeps: true,
-    children: /*#__PURE__*/_jsx(NoProVideProList, _objectSpread({
+    children: /*#__PURE__*/_jsx(NoProVideProList, {
       cardProps: false,
       search: false,
-      toolBarRender: false
-    }, props))
+      toolBarRender: false,
+      ...props
+    })
   });
 }
 function ProList(props) {
   return /*#__PURE__*/_jsx(ProConfigProvider, {
     needDeps: true,
-    children: /*#__PURE__*/_jsx(NoProVideProList, _objectSpread({}, props))
+    children: /*#__PURE__*/_jsx(NoProVideProList, {
+      ...props
+    })
   });
 }
 export { BaseProList, ProList };