@ant-design/pro-components 3.0.0-beta.1 → 3.0.0-beta.3

package/es/list/ListView.js

@@ -1,138 +1,103 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-
-// src/list/ListView.tsx
-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 get from "rc-util/lib/utils/get";
-import React, { useContext } from "react";
+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 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) {
-  const _a = props, {
-    dataSource,
-    columns,
-    rowKey,
-    showActions,
-    showExtra,
-    prefixCls: customizePrefixCls,
-    actionRef,
-    itemTitleRender,
-    renderItem,
-    itemCardProps,
-    itemHeaderRender,
-    expandable: expandableConfig,
-    rowSelection,
-    pagination,
-    onRow: onRow,
-    onItem,
-    rowClassName
-  } = _a, rest = __objRest(_a, [
-    "dataSource",
-    "columns",
-    "rowKey",
-    "showActions",
-    "showExtra",
-    "prefixCls",
-    "actionRef",
-    "itemTitleRender",
-    "renderItem",
-    "itemCardProps",
-    "itemHeaderRender",
-    "expandable",
-    "rowSelection",
-    "pagination",
-    // List 的 pagination 默认是 false
-    "onRow",
-    "onItem",
-    "rowClassName"
-  ]);
-  const { hashId } = useContext(ProProvider);
-  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
-  const getRowKey = React.useMemo(() => {
-    if (typeof rowKey === "function") {
+  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 () {
+    if (typeof rowKey === 'function') {
       return rowKey;
     }
-    return (record, index) => record[rowKey] || index;
+    return function (record, index) {
+      return record[rowKey] || index;
+    };
   }, [rowKey]);
-  const [getRecordByKey] = useLazyKVMap(dataSource, "children", getRowKey);
-  const usePaginationArgs = [() => {
-  }, pagination];
-  const [mergedPagination] = usePagination(
-    dataSource.length,
-    usePaginationArgs[0],
-    usePaginationArgs[1]
-  );
-  const pageData = React.useMemo(() => {
+  var _useLazyKVMap = useLazyKVMap(dataSource, 'children', getRowKey),
+    _useLazyKVMap2 = _slicedToArray(_useLazyKVMap, 1),
+    getRecordByKey = _useLazyKVMap2[0];
+  var usePaginationArgs = [function () {}, pagination];
+
+  // 合并分页的的配置，这里是为了兼容 antd 的分页
+  var _usePagination = usePagination(dataSource.length, usePaginationArgs[0], usePaginationArgs[1]),
+    _usePagination2 = _slicedToArray(_usePagination, 1),
+    mergedPagination = _usePagination2[0];
+  /** 根据分页来返回不同的数据，模拟 table */
+  var pageData = React.useMemo(function () {
     if (pagination === false || !mergedPagination.pageSize || dataSource.length < mergedPagination.total) {
       return dataSource;
     }
-    const { current = 1, pageSize = 10 } = mergedPagination;
-    const currentPageData = dataSource.slice(
-      (current - 1) * pageSize,
-      current * pageSize
-    );
+    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);
     return currentPageData;
   }, [dataSource, mergedPagination, pagination]);
-  const prefixCls = getPrefixCls("pro-list", customizePrefixCls);
-  const useSelectionArgs = [
-    {
-      getRowKey,
-      getRecordByKey,
-      prefixCls,
-      data: dataSource,
-      pageData,
-      expandType: "row",
-      childrenColumnName: "children",
-      locale: {}
-    },
-    rowSelection
-    // 这个 API 用的不好，先 any 一下
+  var prefixCls = getPrefixCls('pro-list', customizePrefixCls);
+
+  /** 提供和 table 一样的 rowSelection 配置 */
+  var useSelectionArgs = [{
+    getRowKey: getRowKey,
+    getRecordByKey: getRecordByKey,
+    prefixCls: prefixCls,
+    data: dataSource,
+    pageData: pageData,
+    expandType: 'row',
+    childrenColumnName: 'children',
+    locale: {}
+  }, rowSelection
+  // 这个 API 用的不好，先 any 一下
   ];
-  const [selectItemRender, selectedKeySet] = useSelection(...useSelectionArgs);
-  const {
-    expandedRowKeys,
-    defaultExpandedRowKeys,
-    defaultExpandAllRows = true,
-    onExpand,
-    onExpandedRowsChange,
-    rowExpandable
-  } = expandableConfig || {};
-  const [innerExpandedKeys, setInnerExpandedKeys] = React.useState(
-    () => {
+  var _useSelection = useSelection.apply(void 0, useSelectionArgs),
+    _useSelection2 = _slicedToArray(_useSelection, 2),
+    selectItemRender = _useSelection2[0],
+    selectedKeySet = _useSelection2[1];
+
+  // 提供和 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;
+
+  /** 展开收起功能区域 star */
+  var _React$useState = React.useState(function () {
       if (defaultExpandedRowKeys) {
         return defaultExpandedRowKeys;
       }
@@ -140,118 +105,109 @@ function ListView(props) {
         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);
+    if (hasKey) {
+      mergedExpandedKeys.delete(key);
+      newExpandedKeys = _toConsumableArray(mergedExpandedKeys);
+    } else {
+      newExpandedKeys = [].concat(_toConsumableArray(mergedExpandedKeys), [key]);
     }
-  );
-  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 = [...mergedExpandedKeys];
-      } else {
-        newExpandedKeys = [...mergedExpandedKeys, key];
-      }
-      setInnerExpandedKeys(newExpandedKeys);
-      if (onExpand) {
-        onExpand(!hasKey, record);
-      }
-      if (onExpandedRowsChange) {
-        onExpandedRowsChange(newExpandedKeys);
-      }
-    },
-    [getRowKey, mergedExpandedKeys, dataSource, onExpand, onExpandedRowsChange]
-  );
-  const selectItemDom = selectItemRender([])[0];
-  return /* @__PURE__ */ React.createElement(
-    List,
-    __spreadProps(__spreadValues({}, rest), {
-      className: classNames(
-        getPrefixCls("pro-list-container", customizePrefixCls),
-        hashId,
-        rest.className
-      ),
-      dataSource: pageData,
-      pagination: pagination && mergedPagination,
-      renderItem: (item, index) => {
-        var _a2;
-        const listItemProps = {
-          className: typeof rowClassName === "function" ? rowClassName(item, index) : rowClassName
-        };
-        columns == null ? void 0 : columns.forEach((column) => {
-          const { listKey, cardActionProps } = column;
-          if (!PRO_LIST_KEYS_MAP.has(listKey)) {
-            return;
-          }
-          const dataIndex = column.dataIndex || listKey || column.key;
-          const rawData = Array.isArray(dataIndex) ? get(item, dataIndex) : item[dataIndex];
-          if (cardActionProps === "actions" && listKey === "actions") {
-            listItemProps.cardActionProps = cardActionProps;
-          }
-          const data = column.render ? column.render(rawData, item, index) : rawData;
-          if (data !== "-")
-            listItemProps[column.listKey] = data;
-        });
-        let checkboxDom;
-        if (selectItemDom && selectItemDom.render) {
-          checkboxDom = selectItemDom.render(
-            item,
-            item,
-            index
-          );
+    setInnerExpandedKeys(newExpandedKeys);
+    if (onExpand) {
+      onExpand(!hasKey, record);
+    }
+    if (onExpandedRowsChange) {
+      onExpandedRowsChange(newExpandedKeys);
+    }
+  }, [getRowKey, mergedExpandedKeys, dataSource, onExpand, onExpandedRowsChange]);
+
+  /** 展开收起功能区域 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),
+    dataSource: pageData,
+    pagination: pagination && mergedPagination,
+    renderItem: function renderItem(item, index) {
+      var _actionRef$current;
+      var 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;
+        if (!PRO_LIST_KEYS_MAP.has(listKey)) {
+          return;
         }
-        const { isEditable, recordKey } = ((_a2 = actionRef.current) == null ? void 0 : _a2.isEditable(__spreadProps(__spreadValues({}, item), { index }))) || {};
-        const isChecked = selectedKeySet.has(recordKey || index);
-        const defaultDom = /* @__PURE__ */ React.createElement(
-          ProListItem,
-          __spreadProps(__spreadValues({
-            key: recordKey,
-            cardProps: rest.grid ? __spreadProps(__spreadValues(__spreadValues({}, itemCardProps), rest.grid), {
-              checked: isChecked,
-              onChange: React.isValidElement(checkboxDom) ? (changeChecked) => {
-                var _a3;
-                return (_a3 = checkboxDom == null ? void 0 : checkboxDom.props) == null ? void 0 : _a3.onChange({
-                  nativeEvent: {},
-                  changeChecked
-                });
-              } : void 0
-            }) : void 0
-          }, listItemProps), {
-            recordKey,
-            isEditable: isEditable || false,
-            expandable: expandableConfig,
-            expand: mergedExpandedKeys.has(getRowKey(item, index)),
-            onExpand: () => {
-              onTriggerExpand(item);
-            },
-            index,
-            record: item,
-            item,
-            showActions,
-            showExtra,
-            itemTitleRender,
-            itemHeaderRender,
-            rowSupportExpand: !rowExpandable || rowExpandable && rowExpandable(item),
-            selected: selectedKeySet.has(getRowKey(item, index)),
-            checkbox: checkboxDom,
-            onRow,
-            onItem
-          })
-        );
-        if (renderItem) {
-          return renderItem(item, index, defaultDom);
+        var dataIndex = column.dataIndex || listKey || column.key;
+        var rawData = Array.isArray(dataIndex) ? get(item, dataIndex) : item[dataIndex];
+
+        /** 如果cardActionProps 需要直接使用源数组，因为 action 必须要源数组 */
+        if (cardActionProps === 'actions' && listKey === 'actions') {
+          listItemProps.cardActionProps = cardActionProps;
         }
-        return defaultDom;
+        // 调用protable的列配置渲染数据
+        var data = column.render ? column.render(rawData, item, index) : rawData;
+        if (data !== '-') listItemProps[column.listKey] = data;
+      });
+      var 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), {}, {
+          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({
+              nativeEvent: {},
+              changeChecked: changeChecked
+            });
+          } : undefined
+        }) : undefined
+      }, listItemProps), {}, {
+        recordKey: recordKey,
+        isEditable: isEditable || false,
+        expandable: expandableConfig,
+        expand: mergedExpandedKeys.has(getRowKey(item, index)),
+        onExpand: function onExpand() {
+          onTriggerExpand(item);
+        },
+        index: index,
+        record: item,
+        item: item,
+        showActions: showActions,
+        showExtra: showExtra,
+        itemTitleRender: itemTitleRender,
+        itemHeaderRender: itemHeaderRender,
+        rowSupportExpand: !rowExpandable || rowExpandable && rowExpandable(item),
+        selected: selectedKeySet.has(getRowKey(item, index)),
+        checkbox: checkboxDom,
+        onRow: onRow,
+        onItem: onItem
+      }), recordKey);
+      if (_renderItem) {
+        return _renderItem(item, index, defaultDom);
+      }
+      return defaultDom;
+    }
+  }));
 }
-var ListView_default = ListView;
-export {
-  ListView_default as default
-};
+export default ListView;

package/es/list/constants.js

@@ -1,19 +1,6 @@
-// src/list/constants.ts
-var PRO_LIST_KEYS = [
-  "title",
-  "subTitle",
-  "avatar",
-  "description",
-  "extra",
-  "content",
-  "actions",
-  "type"
-];
-var PRO_LIST_KEYS_MAP = PRO_LIST_KEYS.reduce((pre, next) => {
+var PRO_LIST_KEYS = ['title', 'subTitle', 'avatar', 'description', 'extra', 'content', 'actions', 'type'];
+var PRO_LIST_KEYS_MAP = PRO_LIST_KEYS.reduce(function (pre, next) {
   pre.set(next, true);
   return pre;
-}, /* @__PURE__ */ new Map());
-export {
-  PRO_LIST_KEYS,
-  PRO_LIST_KEYS_MAP
-};
+}, new Map());
+export { PRO_LIST_KEYS, PRO_LIST_KEYS_MAP };