@teamix/pro 1.5.0 → 1.5.1

package/lib/table/components/CardView/index.js

@@ -0,0 +1,468 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _components = require("@alicloudfe/components");
+
+var _ = require("../../../");
+
+var _skeleton = require("../../../skeleton");
+
+var _utils = require("@teamix/utils");
+
+require("./index.scss");
+
+var _columnRender = require("../../utils/columnRender");
+
+var _LoadMore = _interopRequireDefault(require("../LoadMore"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var Row = _components.Grid.Row,
+    Col = _components.Grid.Col;
+var cls = (0, _utils.usePrefixCls)('teamix-pro-table-card-view');
+
+var CardView = function CardView(props) {
+  var _cardViewProps$scroll;
+
+  var dataSource = props.dataSource,
+      _props$columns = props.columns,
+      columns = _props$columns === void 0 ? [] : _props$columns,
+      _props$loading = props.loading,
+      loading = _props$loading === void 0 ? false : _props$loading,
+      originColumns = props.originColumns,
+      _props$cardViewProps = props.cardViewProps,
+      cardViewProps = _props$cardViewProps === void 0 ? {} : _props$cardViewProps,
+      actionRef = props.actionRef,
+      context = props.context,
+      scrollHeight = props.scrollHeight,
+      _props$showSkeleton = props.showSkeleton,
+      showSkeleton = _props$showSkeleton === void 0 ? false : _props$showSkeleton; // 加载状态
+
+  var _useState = (0, _react.useState)('none'),
+      _useState2 = _slicedToArray(_useState, 2),
+      loadState = _useState2[0],
+      setLoadState = _useState2[1]; // 骨架屏状态
+
+
+  var _useState3 = (0, _react.useState)(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      skeletonVisible = _useState4[0],
+      setSkeletonVisible = _useState4[1]; // 加载状态变化回调
+
+
+  (0, _react.useEffect)(function () {
+    setLoadState(loading ? 'loading' : 'loadMore');
+    setSkeletonVisible(showSkeleton);
+
+    if (showSkeleton) {
+      setLoadState('none');
+    }
+  }, [loading, skeletonVisible, showSkeleton]);
+
+  var getDataIndexValue = function getDataIndexValue(dataIndex, dataSource) {
+    if (Array.isArray(dataIndex)) {
+      return dataIndex.map(function (item) {
+        return (0, _.getDeepValue)(item !== null && item !== void 0 ? item : '', dataSource);
+      });
+    }
+
+    return (0, _.getDeepValue)(dataIndex !== null && dataIndex !== void 0 ? dataIndex : '', dataSource);
+  }; // 获取卡片 columns
+
+
+  var cardColumns = (0, _react.useMemo)(function () {
+    return columns.map(function (column) {
+      var _originColumn$title;
+
+      var originColumn = originColumns === null || originColumns === void 0 ? void 0 : originColumns.find(function (item) {
+        return item.dataIndex === column.dataIndex;
+      });
+      var render = column === null || column === void 0 ? void 0 : column.render;
+
+      if (typeof (column === null || column === void 0 ? void 0 : column.render) === 'function') {
+        render = function render(value, record) {
+          var _column$render;
+
+          return column === null || column === void 0 ? void 0 : (_column$render = column.render) === null || _column$render === void 0 ? void 0 : _column$render.call(column, value, undefined, record);
+        };
+      } else {
+        var _Object$entries$map, _Object$entries, _Object$entries$map2, _column$render2;
+
+        render = Object.fromEntries((_Object$entries$map = (_Object$entries = Object.entries((_column$render2 = column === null || column === void 0 ? void 0 : column.render) !== null && _column$render2 !== void 0 ? _column$render2 : {})) === null || _Object$entries === void 0 ? void 0 : (_Object$entries$map2 = _Object$entries.map) === null || _Object$entries$map2 === void 0 ? void 0 : _Object$entries$map2.call(_Object$entries, function (_ref) {
+          var _ref2 = _slicedToArray(_ref, 2),
+              k = _ref2[0],
+              v = _ref2[1];
+
+          if (typeof v === 'function') {
+            return [k, function (value, record) {
+              return v === null || v === void 0 ? void 0 : v(value, undefined, record);
+            }];
+          }
+
+          return [k, v];
+        })) !== null && _Object$entries$map !== void 0 ? _Object$entries$map : []);
+      }
+
+      return _objectSpread(_objectSpread({}, column), {}, {
+        title: (_originColumn$title = originColumn === null || originColumn === void 0 ? void 0 : originColumn.title) !== null && _originColumn$title !== void 0 ? _originColumn$title : column.title,
+        render: render
+      });
+    }).filter(function (item) {
+      return !(item === null || item === void 0 ? void 0 : item.actionSchema);
+    });
+  }, [columns, originColumns]); // 获取单个渲染数据
+
+  var renderCardInfoItem = function renderCardInfoItem(itemProps, record, index) {
+    if (itemProps) {
+      if (typeof itemProps === 'string' || Array.isArray(itemProps)) {
+        var _titleColumn$cell, _titleColumn$cell2;
+
+        var titleColumn = cardColumns.find(function (item) {
+          return item.dataIndex === itemProps;
+        });
+        return (_titleColumn$cell = titleColumn === null || titleColumn === void 0 ? void 0 : (_titleColumn$cell2 = titleColumn.cell) === null || _titleColumn$cell2 === void 0 ? void 0 : _titleColumn$cell2.call(titleColumn, getDataIndexValue(itemProps, record), index, record)) !== null && _titleColumn$cell !== void 0 ? _titleColumn$cell : '';
+      }
+
+      return (0, _columnRender.renderCell)(getDataIndexValue(itemProps.dataIndex, record), itemProps, index, record, actionRef, context);
+    }
+  }; // 渲染卡片title
+
+
+  var renderCardTitle = function renderCardTitle(record, index) {
+    var _cardColumns$, _cardColumns$$render, _cardColumns$2, _cardColumns$2$cell, _cardColumns$3;
+
+    var titleProp = cardViewProps.title;
+    var title = titleProp;
+
+    if (typeof titleProp === 'function') {
+      title = titleProp === null || titleProp === void 0 ? void 0 : titleProp(index, record);
+    }
+
+    if (titleProp) {
+      return renderCardInfoItem(title, record, index);
+    } // 【默认情况】看看第一列有没有 description，有的话，只取 title
+
+
+    if (cardColumns === null || cardColumns === void 0 ? void 0 : (_cardColumns$ = cardColumns[0]) === null || _cardColumns$ === void 0 ? void 0 : (_cardColumns$$render = _cardColumns$.render) === null || _cardColumns$$render === void 0 ? void 0 : _cardColumns$$render.description) {
+      var _originColumn$render;
+
+      var column = cardColumns === null || cardColumns === void 0 ? void 0 : cardColumns[0];
+      var originColumn = originColumns === null || originColumns === void 0 ? void 0 : originColumns[0]; // 转化为新的 table columns
+
+      var _columns = _objectSpread(_objectSpread({}, originColumn), {}, {
+        render: _objectSpread(_objectSpread({}, originColumn === null || originColumn === void 0 ? void 0 : originColumn.render), {}, {
+          value: originColumn === null || originColumn === void 0 ? void 0 : (_originColumn$render = originColumn.render) === null || _originColumn$render === void 0 ? void 0 : _originColumn$render.value,
+          description: undefined,
+          descriptionCopy: undefined
+        })
+      });
+
+      return (0, _columnRender.renderCell)(getDataIndexValue(column === null || column === void 0 ? void 0 : column.dataIndex, record), _columns, index, record, actionRef, context);
+    } // 【默认情况】直接拿第一列的 cell
+
+
+    return cardColumns === null || cardColumns === void 0 ? void 0 : (_cardColumns$2 = cardColumns[0]) === null || _cardColumns$2 === void 0 ? void 0 : (_cardColumns$2$cell = _cardColumns$2.cell) === null || _cardColumns$2$cell === void 0 ? void 0 : _cardColumns$2$cell.call(_cardColumns$2, getDataIndexValue(cardColumns === null || cardColumns === void 0 ? void 0 : (_cardColumns$3 = cardColumns[0]) === null || _cardColumns$3 === void 0 ? void 0 : _cardColumns$3.dataIndex, record), index, record);
+  }; // 渲染卡片subTitle
+
+
+  var renderCardSubTitle = function renderCardSubTitle(record, index) {
+    var _cardColumns$4, _cardColumns$4$render;
+
+    var subTitleProp = cardViewProps.subTitle;
+    var subTitle = subTitleProp;
+
+    if (typeof subTitleProp === 'function') {
+      subTitle = subTitleProp === null || subTitleProp === void 0 ? void 0 : subTitleProp(index, record);
+    }
+
+    if (subTitle) {
+      return renderCardInfoItem(subTitle, record, index);
+    } // 【默认情况】看看第一列有没有 description，有的话，只取 title
+
+
+    if (cardColumns === null || cardColumns === void 0 ? void 0 : (_cardColumns$4 = cardColumns[0]) === null || _cardColumns$4 === void 0 ? void 0 : (_cardColumns$4$render = _cardColumns$4.render) === null || _cardColumns$4$render === void 0 ? void 0 : _cardColumns$4$render.description) {
+      var _originColumn$render2, _column$render3;
+
+      var column = cardColumns === null || cardColumns === void 0 ? void 0 : cardColumns[0];
+      var originColumn = originColumns === null || originColumns === void 0 ? void 0 : originColumns[0]; // 转化为新的 table columns
+
+      var _columns2 = _objectSpread(_objectSpread({}, originColumn), {}, {
+        render: {
+          value: originColumn === null || originColumn === void 0 ? void 0 : (_originColumn$render2 = originColumn.render) === null || _originColumn$render2 === void 0 ? void 0 : _originColumn$render2.description,
+          description: undefined,
+          descriptionCopy: undefined
+        }
+      });
+
+      return (0, _columnRender.renderCell)(getDataIndexValue(column === null || column === void 0 ? void 0 : (_column$render3 = column.render) === null || _column$render3 === void 0 ? void 0 : _column$render3.value, record), _columns2, index, record, actionRef, context);
+    }
+  }; // 获取ProInfoColumns
+
+
+  var getPropInfoColumns = function getPropInfoColumns(record, index) {
+    var contentProp = cardViewProps.content;
+    var content = contentProp;
+
+    if (typeof contentProp === 'function') {
+      content = contentProp === null || contentProp === void 0 ? void 0 : contentProp(index, record);
+    }
+
+    if (content) {
+      return content.map(function (item) {
+        if (typeof item === 'string') {
+          return cardColumns.find(function (column) {
+            return column.dataIndex === item;
+          });
+        }
+
+        return content;
+      });
+    } // 默认取4条数据
+
+
+    return cardColumns.filter(function (item, index) {
+      return index > 0 && index < 5;
+    });
+  }; // 从表格columns获取Action配置
+
+
+  var getActionGroupFromColumn = function getActionGroupFromColumn(dataIndex, record, index) {
+    var actionColumn;
+
+    if (dataIndex) {
+      actionColumn = columns === null || columns === void 0 ? void 0 : columns.find(function (item) {
+        return item.dataIndex.toString() === dataIndex.toString();
+      });
+    } else {
+      // 默认继承表格操作列
+      // 获取操作列，只能获取最后一列
+      actionColumn = columns === null || columns === void 0 ? void 0 : columns[(columns === null || columns === void 0 ? void 0 : columns.length) - 1];
+    }
+
+    if (actionColumn.actionSchema) {
+      var _actionColumn, _actionColumn$actionS;
+
+      var newActionColumn = _objectSpread(_objectSpread({}, actionColumn), {}, {
+        actionSchema: {
+          actions: (_actionColumn = actionColumn) === null || _actionColumn === void 0 ? void 0 : (_actionColumn$actionS = _actionColumn.actionSchema) === null || _actionColumn$actionS === void 0 ? void 0 : _actionColumn$actionS.actions,
+          max: 1
+        }
+      });
+
+      return (0, _columnRender.renderCell)(null, newActionColumn, index, record, actionRef, context);
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+  }; // 获取Card操作列配置
+
+
+  var getProCardExtra = function getProCardExtra(record, index) {
+    var extraProp = cardViewProps.extra;
+    var extra = extraProp;
+
+    if (typeof extraProp === 'function') {
+      extra = extraProp === null || extraProp === void 0 ? void 0 : extraProp(index, record);
+    }
+
+    if (Array.isArray(extra)) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: cls('extra')
+      }, extra.map(function (item) {
+        if (typeof item === 'string') {
+          return /*#__PURE__*/_react.default.createElement("div", {
+            className: cls('extra-item')
+          }, getActionGroupFromColumn(item, record, index));
+        }
+
+        if ( /*#__PURE__*/(0, _react.isValidElement)(item)) {
+          return /*#__PURE__*/_react.default.createElement("div", {
+            className: cls('extra-item')
+          }, item);
+        }
+
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: cls('extra-item')
+        }, (0, _columnRender.renderCell)(null, item, index, record, actionRef, context));
+      }));
+    }
+
+    return getActionGroupFromColumn(undefined, record, index);
+  }; // 渲染Tag
+
+
+  var getTags = function getTags(record, index) {
+    var tagProp = cardViewProps.tags;
+    var tags = tagProp !== null && tagProp !== void 0 ? tagProp : [];
+
+    if (typeof tagProp === 'function') {
+      var _tagProp;
+
+      tags = (_tagProp = tagProp === null || tagProp === void 0 ? void 0 : tagProp(index, record)) !== null && _tagProp !== void 0 ? _tagProp : [];
+    }
+
+    var getTagFromColumns = function getTagFromColumns(columns, dataIndex) {
+      var _columns$render, _columns$render2, _columns$render4, _columns$render5, _columns$render7, _columns$render8;
+
+      var text = getDataIndexValue(dataIndex, record);
+
+      if ((columns === null || columns === void 0 ? void 0 : (_columns$render = columns.render) === null || _columns$render === void 0 ? void 0 : _columns$render.value) && typeof (columns === null || columns === void 0 ? void 0 : (_columns$render2 = columns.render) === null || _columns$render2 === void 0 ? void 0 : _columns$render2.value) === 'string') {
+        var _columns$render3;
+
+        text = columns === null || columns === void 0 ? void 0 : (_columns$render3 = columns.render) === null || _columns$render3 === void 0 ? void 0 : _columns$render3.value;
+      }
+
+      if ((columns === null || columns === void 0 ? void 0 : (_columns$render4 = columns.render) === null || _columns$render4 === void 0 ? void 0 : _columns$render4.value) && typeof (columns === null || columns === void 0 ? void 0 : (_columns$render5 = columns.render) === null || _columns$render5 === void 0 ? void 0 : _columns$render5.value) === 'function') {
+        var _columns$render6;
+
+        text = columns === null || columns === void 0 ? void 0 : (_columns$render6 = columns.render) === null || _columns$render6 === void 0 ? void 0 : _columns$render6.value(getDataIndexValue(dataIndex, record), index, record);
+      }
+
+      var color = columns === null || columns === void 0 ? void 0 : (_columns$render7 = columns.render) === null || _columns$render7 === void 0 ? void 0 : _columns$render7.color;
+
+      if (typeof (columns === null || columns === void 0 ? void 0 : (_columns$render8 = columns.render) === null || _columns$render8 === void 0 ? void 0 : _columns$render8.color) === 'function') {
+        var _columns$render9;
+
+        color = columns === null || columns === void 0 ? void 0 : (_columns$render9 = columns.render) === null || _columns$render9 === void 0 ? void 0 : _columns$render9.color(getDataIndexValue(dataIndex, record), index, record);
+      }
+
+      return {
+        children: text,
+        color: color
+      };
+    };
+
+    return tags.map(function (tagItem) {
+      if (typeof tagItem === 'string') {
+        var tagColumns = columns.find(function (item) {
+          return item.dataIndex === tagItem;
+        });
+        return getTagFromColumns(tagColumns, tagItem);
+      }
+
+      if (_typeof(tagItem) === 'object') {
+        return getTagFromColumns(tagItem, tagItem === null || tagItem === void 0 ? void 0 : tagItem.dataIndex);
+      }
+    });
+  }; // 加载下一页回调
+
+
+  var onLoadMore = function onLoadMore() {
+    var _actionRef$current, _actionRef$current$ne;
+
+    actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current = actionRef.current) === null || _actionRef$current === void 0 ? void 0 : (_actionRef$current$ne = _actionRef$current.nextPage) === null || _actionRef$current$ne === void 0 ? void 0 : _actionRef$current$ne.call(_actionRef$current);
+  }; // 触底回调
+
+
+  var onScrollBottom = function onScrollBottom() {
+    if (cardViewProps.autoLoadNextPage !== false) {
+      var _cardViewProps$onScro;
+
+      onLoadMore();
+      cardViewProps === null || cardViewProps === void 0 ? void 0 : (_cardViewProps$onScro = cardViewProps.onScrollBottom) === null || _cardViewProps$onScro === void 0 ? void 0 : _cardViewProps$onScro.call(cardViewProps);
+    }
+  }; // 获取ProCard配置
+
+
+  var getProCardProps = function getProCardProps(record, index) {
+    var _cardViewProps$cardPr;
+
+    var external = ['onCollapse', 'onSelect', 'onClick'];
+    return Object.fromEntries(Object.entries((_cardViewProps$cardPr = cardViewProps.cardProps) !== null && _cardViewProps$cardPr !== void 0 ? _cardViewProps$cardPr : {}).map(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+          key = _ref4[0],
+          value = _ref4[1];
+
+      if (typeof value === 'function' && !external.includes(key)) {
+        return [key, value === null || value === void 0 ? void 0 : value(index, record)];
+      }
+
+      if (typeof value === 'function' && external.includes(key)) {
+        return [key, function () {
+          for (var _len = arguments.length, others = new Array(_len), _key = 0; _key < _len; _key++) {
+            others[_key] = arguments[_key];
+          }
+
+          return value === null || value === void 0 ? void 0 : value.apply(void 0, [index, record].concat(others));
+        }];
+      }
+
+      return [key, value];
+    }));
+  }; // 渲染单个卡片
+
+
+  var renderCard = function renderCard(record, index) {
+    return /*#__PURE__*/_react.default.createElement(Col, {
+      xxs: 24,
+      xs: 12,
+      s: 8,
+      m: 8,
+      l: 6,
+      xl: 6,
+      key: index,
+      className: cls('card-item')
+    }, /*#__PURE__*/_react.default.createElement(_.ProCard, _objectSpread({
+      title: renderCardTitle(record, index),
+      subTitle: renderCardSubTitle(record, index),
+      extra: getProCardExtra(record, index),
+      tags: getTags(record, index)
+    }, getProCardProps(record, index)), /*#__PURE__*/_react.default.createElement(_.ProInfo, {
+      columns: getPropInfoColumns(record, index),
+      dataSource: record,
+      context: {
+        record: record,
+        index: index
+      }
+    })));
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: cls()
+  }, /*#__PURE__*/_react.default.createElement(_LoadMore.default, {
+    onScrollBottom: onScrollBottom,
+    onLoadMore: onLoadMore,
+    loadState: loadState,
+    scrollHeight: (_cardViewProps$scroll = cardViewProps.scrollHeight) !== null && _cardViewProps$scroll !== void 0 ? _cardViewProps$scroll : scrollHeight
+  }, skeletonVisible && /*#__PURE__*/_react.default.createElement(_skeleton.ProSkeletonRaw.Content, null), !skeletonVisible && /*#__PURE__*/_react.default.createElement(Row, {
+    gutter: 16,
+    wrap: true,
+    style: {
+      marginTop: '-16px'
+    }
+  }, dataSource === null || dataSource === void 0 ? void 0 : dataSource.map(function (item, index) {
+    return renderCard(item, index);
+  }))));
+};
+
+var _default = CardView;
+exports.default = _default;

package/lib/table/components/CardView/index.scss

@@ -0,0 +1,46 @@
+.teamix-pro-table-card-view {
+  &-card-item {
+    margin-top: 16px;
+  }
+
+  // 样式覆盖
+  .teamix-pro-card-title-name.teamix-pro-card-title-name {
+
+    .teamix-pro-field.teamix-pro-field.teamix-pro-field {
+      font-weight: var(--font-weight-medium);
+      font-size: var(--card-title-font-size, 14px);
+    }
+
+    .next-form-preview.next-form-preview.next-form-preview {
+      font-weight: var(--font-weight-medium);
+      font-size: var(--card-title-font-size, 14px);
+    }
+
+
+  }
+
+  .next-card-header-subtitle.next-card-header-subtitle {
+
+    .teamix-pro-field.teamix-pro-field.teamix-pro-field {
+      font-size: var(--card-sub-title-font-size, 12px);
+      color: var(--card-sub-title-color, #5a5a5a);
+    }
+
+    .next-form-preview.next-form-preview.next-form-preview {
+      font-size: var(--card-sub-title-font-size, 12px);
+      color: var(--card-sub-title-color, #5a5a5a);
+    }
+
+
+  }
+
+  &-extra {
+    display: flex;
+    align-items: center;
+
+    &-item {
+      display: inline-block;
+      margin-left: 8px;
+    }
+  }
+}

package/lib/table/components/Filter/index.d.ts

@@ -4,6 +4,7 @@ import { ProTableColumnProps, ProTableActionType } from '../../typing';
 declare type ProTableFilterProps = {
     column: ProTableColumnProps;
     actionRef: React.MutableRefObject<ProTableActionType | undefined>;
+    switchCardView?: 'table' | 'card';
 };
 declare const Filter: React.FC<ProTableFilterProps>;
 export default Filter;

package/lib/table/components/Filter/index.js

@@ -55,7 +55,8 @@ var RadioItem = _components.Menu.RadioItem;
 
 var Filter = function Filter(props) {
   var column = props.column,
-      actionRef = props.actionRef;
+      actionRef = props.actionRef,
+      switchCardView = props.switchCardView;
   var _column$filtersWidth = column.filtersWidth,
       filtersWidth = _column$filtersWidth === void 0 ? 130 : _column$filtersWidth; // 选中过滤项
 
@@ -191,7 +192,7 @@ var Filter = function Filter(props) {
       btn: true
     }),
     onClick: function onClick() {
-      var _actionRef$current2, _actionRef$current2$f, _actionRef$current$ge6, _actionRef$current3, _actionRef$current3$g, _actionRef$current3$g2, _actionRef$current4, _actionRef$current4$s, _actionRef$current5, _actionRef$current6, _actionRef$current6$r, _actionRef$current7, _actionRef$current7$r, _actionRef$current8, _actionRef$current8$c;
+      var _actionRef$current2, _actionRef$current2$f, _actionRef$current$ge6, _actionRef$current3, _actionRef$current3$g, _actionRef$current3$g2, _actionRef$current4, _actionRef$current4$s, _actionRef$current5, _actionRef$current7, _actionRef$current7$r, _actionRef$current8, _actionRef$current8$r, _actionRef$current9, _actionRef$current9$c;
 
       (_actionRef$current2 = actionRef.current) === null || _actionRef$current2 === void 0 ? void 0 : (_actionRef$current2$f = _actionRef$current2.filterDataSource) === null || _actionRef$current2$f === void 0 ? void 0 : _actionRef$current2$f.call(_actionRef$current2, column.dataIndex); // 先获取此列的param
 
@@ -217,13 +218,19 @@ var Filter = function Filter(props) {
 
       if (pageInfo && (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.targetPageKey)) {
         targetPageKey = pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.targetPageKey;
+      }
+
+      if (switchCardView === 'card') {
+        var _actionRef$current6, _actionRef$current6$s;
+
+        (_actionRef$current6 = actionRef.current) === null || _actionRef$current6 === void 0 ? void 0 : (_actionRef$current6$s = _actionRef$current6.setData) === null || _actionRef$current6$s === void 0 ? void 0 : _actionRef$current6$s.call(_actionRef$current6, []);
       } // 发送请求
 
 
-      (_actionRef$current6 = actionRef.current) === null || _actionRef$current6 === void 0 ? void 0 : (_actionRef$current6$r = _actionRef$current6.request) === null || _actionRef$current6$r === void 0 ? void 0 : _actionRef$current6$r.call(_actionRef$current6, _defineProperty({}, targetPageKey, 1));
-      (_actionRef$current7 = actionRef.current) === null || _actionRef$current7 === void 0 ? void 0 : (_actionRef$current7$r = _actionRef$current7.resetPage) === null || _actionRef$current7$r === void 0 ? void 0 : _actionRef$current7$r.call(_actionRef$current7); // 清空表格选择
+      (_actionRef$current7 = actionRef.current) === null || _actionRef$current7 === void 0 ? void 0 : (_actionRef$current7$r = _actionRef$current7.request) === null || _actionRef$current7$r === void 0 ? void 0 : _actionRef$current7$r.call(_actionRef$current7, _defineProperty({}, targetPageKey, 1));
+      (_actionRef$current8 = actionRef.current) === null || _actionRef$current8 === void 0 ? void 0 : (_actionRef$current8$r = _actionRef$current8.resetPage) === null || _actionRef$current8$r === void 0 ? void 0 : _actionRef$current8$r.call(_actionRef$current8); // 清空表格选择
 
-      (_actionRef$current8 = actionRef.current) === null || _actionRef$current8 === void 0 ? void 0 : (_actionRef$current8$c = _actionRef$current8.clearRowSelection) === null || _actionRef$current8$c === void 0 ? void 0 : _actionRef$current8$c.call(_actionRef$current8);
+      (_actionRef$current9 = actionRef.current) === null || _actionRef$current9 === void 0 ? void 0 : (_actionRef$current9$c = _actionRef$current9.clearRowSelection) === null || _actionRef$current9$c === void 0 ? void 0 : _actionRef$current9$c.call(_actionRef$current9);
       setVisible(false);
     }
   }, (0, _utils.getMessage)('ok')), /*#__PURE__*/_react.default.createElement(_components.Button, {
@@ -233,31 +240,31 @@ var Filter = function Filter(props) {
       btn: true
     }),
     onClick: function onClick() {
-      var _actionRef$current$ge7, _actionRef$current9, _actionRef$current9$g, _actionRef$current9$g2, _actionRef$current10, _actionRef$current10$, _actionRef$current11, _actionRef$current11$;
+      var _actionRef$current$ge7, _actionRef$current10, _actionRef$current10$, _actionRef$current10$2, _actionRef$current11, _actionRef$current11$, _actionRef$current12, _actionRef$current12$;
 
       setSelected([]);
-      var rules = (_actionRef$current$ge7 = (_actionRef$current9 = actionRef.current) === null || _actionRef$current9 === void 0 ? void 0 : (_actionRef$current9$g = _actionRef$current9.getState) === null || _actionRef$current9$g === void 0 ? void 0 : (_actionRef$current9$g2 = _actionRef$current9$g.call(_actionRef$current9)) === null || _actionRef$current9$g2 === void 0 ? void 0 : _actionRef$current9$g2.filterRules) !== null && _actionRef$current$ge7 !== void 0 ? _actionRef$current$ge7 : {};
-      (_actionRef$current10 = actionRef.current) === null || _actionRef$current10 === void 0 ? void 0 : (_actionRef$current10$ = _actionRef$current10.setFilterRules) === null || _actionRef$current10$ === void 0 ? void 0 : _actionRef$current10$.call(_actionRef$current10, _objectSpread(_objectSpread({}, rules), {}, _defineProperty({}, column.dataIndex, {
+      var rules = (_actionRef$current$ge7 = (_actionRef$current10 = actionRef.current) === null || _actionRef$current10 === void 0 ? void 0 : (_actionRef$current10$ = _actionRef$current10.getState) === null || _actionRef$current10$ === void 0 ? void 0 : (_actionRef$current10$2 = _actionRef$current10$.call(_actionRef$current10)) === null || _actionRef$current10$2 === void 0 ? void 0 : _actionRef$current10$2.filterRules) !== null && _actionRef$current$ge7 !== void 0 ? _actionRef$current$ge7 : {};
+      (_actionRef$current11 = actionRef.current) === null || _actionRef$current11 === void 0 ? void 0 : (_actionRef$current11$ = _actionRef$current11.setFilterRules) === null || _actionRef$current11$ === void 0 ? void 0 : _actionRef$current11$.call(_actionRef$current11, _objectSpread(_objectSpread({}, rules), {}, _defineProperty({}, column.dataIndex, {
         rules: [],
         params: ''
       })));
-      (_actionRef$current11 = actionRef.current) === null || _actionRef$current11 === void 0 ? void 0 : (_actionRef$current11$ = _actionRef$current11.filterDataSource) === null || _actionRef$current11$ === void 0 ? void 0 : _actionRef$current11$.call(_actionRef$current11, column.dataIndex);
+      (_actionRef$current12 = actionRef.current) === null || _actionRef$current12 === void 0 ? void 0 : (_actionRef$current12$ = _actionRef$current12.filterDataSource) === null || _actionRef$current12$ === void 0 ? void 0 : _actionRef$current12$.call(_actionRef$current12, column.dataIndex);
 
       if (selected.length > 0) {
-        var _actionRef$current12, _actionRef$current13, _actionRef$current13$, _actionRef$current14, _actionRef$current14$, _actionRef$current15, _actionRef$current15$;
+        var _actionRef$current13, _actionRef$current14, _actionRef$current14$, _actionRef$current15, _actionRef$current15$, _actionRef$current16, _actionRef$current16$;
 
         var targetPageKey = 'currentPage';
-        var pageInfo = (_actionRef$current12 = actionRef.current) === null || _actionRef$current12 === void 0 ? void 0 : _actionRef$current12.pageInfo;
+        var pageInfo = (_actionRef$current13 = actionRef.current) === null || _actionRef$current13 === void 0 ? void 0 : _actionRef$current13.pageInfo;
 
         if (pageInfo && (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.targetPageKey)) {
           targetPageKey = pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.targetPageKey;
         } // 发送请求
 
 
-        (_actionRef$current13 = actionRef.current) === null || _actionRef$current13 === void 0 ? void 0 : (_actionRef$current13$ = _actionRef$current13.request) === null || _actionRef$current13$ === void 0 ? void 0 : _actionRef$current13$.call(_actionRef$current13, _defineProperty({}, targetPageKey, 1));
-        (_actionRef$current14 = actionRef.current) === null || _actionRef$current14 === void 0 ? void 0 : (_actionRef$current14$ = _actionRef$current14.resetPage) === null || _actionRef$current14$ === void 0 ? void 0 : _actionRef$current14$.call(_actionRef$current14); // 清空表格选择
+        (_actionRef$current14 = actionRef.current) === null || _actionRef$current14 === void 0 ? void 0 : (_actionRef$current14$ = _actionRef$current14.request) === null || _actionRef$current14$ === void 0 ? void 0 : _actionRef$current14$.call(_actionRef$current14, _defineProperty({}, targetPageKey, 1));
+        (_actionRef$current15 = actionRef.current) === null || _actionRef$current15 === void 0 ? void 0 : (_actionRef$current15$ = _actionRef$current15.resetPage) === null || _actionRef$current15$ === void 0 ? void 0 : _actionRef$current15$.call(_actionRef$current15); // 清空表格选择
 
-        (_actionRef$current15 = actionRef.current) === null || _actionRef$current15 === void 0 ? void 0 : (_actionRef$current15$ = _actionRef$current15.clearRowSelection) === null || _actionRef$current15$ === void 0 ? void 0 : _actionRef$current15$.call(_actionRef$current15);
+        (_actionRef$current16 = actionRef.current) === null || _actionRef$current16 === void 0 ? void 0 : (_actionRef$current16$ = _actionRef$current16.clearRowSelection) === null || _actionRef$current16$ === void 0 ? void 0 : _actionRef$current16$.call(_actionRef$current16);
       } // setVisible(!visible);
 
     }

package/lib/table/components/Layout/index.js

@@ -21,7 +21,7 @@ var _QuickAction = _interopRequireDefault(require("../QuickAction"));
 
 require("./index.scss");
 
-var _excluded = ["header", "mainAction", "extra", "actionRef", "dataFilter", "dataFilterFormRef", "afterDataFilter", "rowSelection", "toolBar"];
+var _excluded = ["header", "mainAction", "extra", "actionRef", "dataFilter", "dataFilterFormRef", "afterDataFilter", "rowSelection", "toolBar", "dataTeamixSpm"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -53,6 +53,7 @@ var Layout = function Layout(props) {
       afterDataFilter = props.afterDataFilter,
       rowSelection = props.rowSelection,
       toolBar = props.toolBar,
+      dataTeamixSpm = props.dataTeamixSpm,
       otherProps = _objectWithoutProperties(props, _excluded); // 渲染主操作区
 
 
@@ -77,7 +78,8 @@ var Layout = function Layout(props) {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: cls('main-action')
       }, /*#__PURE__*/_react.default.createElement(_actions.ProActionGroup, _objectSpread(_objectSpread({}, mainAction), {}, {
-        context: _objectSpread(_objectSpread({}, defaultContext), mainAction.context)
+        context: _objectSpread(_objectSpread({}, defaultContext), mainAction.context),
+        "data-teamix-spm": dataTeamixSpm ? "".concat(dataTeamixSpm, "-mainAction") : undefined
       })));
     } else return mainAction;
   }; // 渲染 addonAfter

package/lib/table/components/LoadMore/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import './index.scss';
+export declare type LoadMoreProps = {
+    /** 内容 **/
+    children?: React.ReactNode;
+    /** 加载状态 受控 **/
+    loadState?: 'loading' | 'loadMore' | 'noMore' | 'none';
+    /** 滚动条滚动到底部触发事件 **/
+    onScrollBottom?: () => void;
+    /** 加载状态改变回调 **/
+    onChangeLoadState?: (state: LoadMoreProps['loadState']) => void;
+    /** 点击加载更多回调 **/
+    onLoadMore?: () => void;
+    /** 滚动区域高度 **/
+    scrollHeight?: number | string;
+    /** 当前滚动区域位置 **/
+    scrollPosition?: number;
+};
+declare const LoadMore: React.FC<LoadMoreProps>;
+export default LoadMore;