@teamix/pro 1.5.3 → 1.5.4-beta.0

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

@@ -1,23 +1,13 @@
 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; }
-
 import React, { isValidElement, useEffect, useMemo, useState } from 'react';
 import { Grid } from '@alicloudfe/components';
 import { getDeepValue, ProCard, ProInfo } from '../../../';
@@ -27,91 +17,76 @@ import './index.scss';
 import { renderCell } from '../../utils/columnRender';
 import LoadMore from '../LoadMore';
 var Row = Grid.Row,
-    Col = Grid.Col;
+  Col = Grid.Col;
 var cls = 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; // 加载状态
-
+    _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 = useState('none'),
-      _useState2 = _slicedToArray(_useState, 2),
-      loadState = _useState2[0],
-      setLoadState = _useState2[1]; // 骨架屏状态
-
-
+    _useState2 = _slicedToArray(_useState, 2),
+    loadState = _useState2[0],
+    setLoadState = _useState2[1];
+  // 骨架屏状态
   var _useState3 = useState(true),
-      _useState4 = _slicedToArray(_useState3, 2),
-      skeletonVisible = _useState4[0],
-      setSkeletonVisible = _useState4[1]; // 加载状态变化回调
-
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    skeletonVisible = _useState4[0],
+    setSkeletonVisible = _useState4[1];
+  // 加载状态变化回调
   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 getDeepValue(item !== null && item !== void 0 ? item : '', dataSource);
       });
     }
-
     return getDeepValue(dataIndex !== null && dataIndex !== void 0 ? dataIndex : '', dataSource);
-  }; // 获取卡片 columns
-
-
+  };
+  // 获取卡片 columns
   var cardColumns = 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];
-
+            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
@@ -119,45 +94,37 @@ var CardView = function CardView(props) {
     }).filter(function (item) {
       return !(item === null || item === void 0 ? void 0 : item.actionSchema);
     });
-  }, [columns, originColumns]); // 获取单个渲染数据
-
+  }, [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 renderCell(getDataIndexValue(itemProps.dataIndex, record), itemProps, index, record, actionRef, context);
     }
-  }; // 渲染卡片title
-
-
+  };
+  // 渲染卡片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
-
-
+    }
+    // 【默认情况】看看第一列有没有 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 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,
@@ -165,36 +132,28 @@ var CardView = function CardView(props) {
           descriptionCopy: undefined
         })
       });
-
       return renderCell(getDataIndexValue(column === null || column === void 0 ? void 0 : column.dataIndex, record), _columns, index, record, actionRef, context);
-    } // 【默认情况】直接拿第一列的 cell
-
-
+    }
+    // 【默认情况】直接拿第一列的 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
-
-
+  };
+  // 渲染卡片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
-
-
+    }
+    // 【默认情况】看看第一列有没有 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 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,
@@ -202,20 +161,16 @@ var CardView = function CardView(props) {
           descriptionCopy: undefined
         }
       });
-
       return 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
-
-
+  };
+  // 获取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') {
@@ -223,21 +178,17 @@ var CardView = function CardView(props) {
             return column.dataIndex === item;
           });
         }
-
         return content;
       });
-    } // 默认取4条数据
-
-
+    }
+    // 默认取4条数据
     return cardColumns.filter(function (item, index) {
       return index > 0 && index < 5;
     });
-  }; // 从表格columns获取Action配置
-
-
+  };
+  // 从表格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();
@@ -247,32 +198,25 @@ var CardView = function CardView(props) {
       // 获取操作列，只能获取最后一列
       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 renderCell(null, newActionColumn, index, record, actionRef, context);
     }
-
     return /*#__PURE__*/React.createElement(React.Fragment, null);
-  }; // 获取Card操作列配置
-
-
+  };
+  // 获取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.createElement("div", {
         className: cls('extra')
@@ -282,64 +226,47 @@ var CardView = function CardView(props) {
             className: cls('extra-item')
           }, getActionGroupFromColumn(item, record, index));
         }
-
         if ( /*#__PURE__*/isValidElement(item)) {
           return /*#__PURE__*/React.createElement("div", {
             className: cls('extra-item')
           }, item);
         }
-
         return /*#__PURE__*/React.createElement("div", {
           className: cls('extra-item')
         }, renderCell(null, item, index, record, actionRef, context));
       }));
     }
-
     return getActionGroupFromColumn(undefined, record, index);
-  }; // 渲染Tag
-
-
+  };
+  // 渲染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) {
@@ -347,59 +274,47 @@ var CardView = function CardView(props) {
         });
         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配置
-
-
+  };
+  // 获取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];
-
+        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.createElement(Col, {
       xxs: 24,
@@ -424,7 +339,6 @@ var CardView = function CardView(props) {
       }
     })));
   };
-
   return /*#__PURE__*/React.createElement("div", {
     className: cls()
   }, /*#__PURE__*/React.createElement(LoadMore, {
@@ -442,5 +356,4 @@ var CardView = function CardView(props) {
     return renderCard(item, index);
   }))));
 };
-
 export default CardView;