@autobest-ui/components 2.2.1 → 2.4.0

package/lib/table/index.js

@@ -1,24 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _utils = require("@autobest-ui/utils");
-
 var _loadingContainer = _interopRequireDefault(require("../loading-container"));
-
 var _HeaderRow = _interopRequireDefault(require("./header/HeaderRow"));
-
 var _body = _interopRequireDefault(require("./body"));
-
 var __extends = void 0 && (void 0).__extends || function () {
   var _extendStatics = function extendStatics(d, b) {
     _extendStatics = Object.setPrototypeOf || {
@@ -30,47 +22,33 @@ var __extends = void 0 && (void 0).__extends || function () {
         if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
       }
     };
-
     return _extendStatics(d, b);
   };
-
   return function (d, b) {
     if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-
     _extendStatics(d, b);
-
     function __() {
       this.constructor = d;
     }
-
     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
   };
 }();
-
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
       s = arguments[i];
-
       for (var p in s) {
         if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
       }
     }
-
     return t;
   };
-
   return __assign.apply(this, arguments);
 };
-
-var Table =
-/** @class */
-function (_super) {
+var Table = /** @class */function (_super) {
   __extends(Table, _super);
-
   function Table(props) {
     var _this = _super.call(this, props) || this;
-
     _this.prefixCls = 'ab-table';
     _this.headerRef = /*#__PURE__*/_react.default.createRef();
     _this.bodyRef = /*#__PURE__*/_react.default.createRef();
@@ -85,7 +63,6 @@ function (_super) {
     /**
      * 清空选项
      */
-
     _this.clearSelection = function () {
       _this.setState(function (prevState) {
         return {
@@ -97,51 +74,40 @@ function (_super) {
         };
       });
     };
-
     _this.headerScroll = (0, _utils.throttleWithRAF)(function () {
       _this.headerRef.current.scrollLeft = _this.bodyRef.current.scrollLeft;
     });
-
     _this.addListener = function () {
       var fixedHeader = _this.props.fixedHeader;
       var bodyRef = _this.bodyRef.current;
-
       if (fixedHeader && _this.headerRef.current && bodyRef) {
         _this.scrollHandler = (0, _utils.addEventListener)(bodyRef, 'scroll', _this.headerScroll);
         _this.resizeObserver = new ResizeObserver(function (entries) {
           for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
             var entry = entries_1[_i];
             var ele = entry.target;
-
             if (entry.contentBoxSize) {
               var headerRef = _this.headerRef.current;
-
               if (!headerRef) {
                 return;
               }
-
               if (ele.scrollHeight > ele.clientHeight) {
                 if (_this.scrollBarThAdded) {
                   return;
                 }
-
-                var scrollBarTh = document.createElement('th'); // 显示滚动条的情况下，需要在thead追加一个与滚动条等宽的th
-
+                var scrollBarTh = document.createElement('th');
+                // 显示滚动条的情况下，需要在thead追加一个与滚动条等宽的th
                 scrollBarTh.setAttribute('style', "width: ".concat((0, _utils.getScrollBarSize)(), "px; padding: 0"));
                 var tHeader = headerRef.querySelector('thead > tr');
-
                 if (tHeader) {
                   tHeader.appendChild(scrollBarTh);
                   _this.scrollBarThAdded = true;
                 }
-
                 return;
               }
-
               if (_this.scrollBarThAdded) {
                 // 删除thead追加了的与滚动条等宽的th
                 var scrollBarTh = headerRef.querySelector('thead > tr > th:last-child');
-
                 if (scrollBarTh) {
                   scrollBarTh.parentNode.removeChild(scrollBarTh);
                 }
@@ -149,16 +115,13 @@ function (_super) {
             }
           }
         });
-
         _this.resizeObserver.observe(bodyRef);
       }
     };
-
     _this.getSelectedRows = function (selectedKeys) {
       if ((0, _utils.isEmptyArray)(selectedKeys)) {
         return [];
       }
-
       var getRowKey = _this.getRowKey;
       var dataSource = _this.props.dataSource;
       return selectedKeys.map(function (key) {
@@ -170,21 +133,16 @@ function (_super) {
     /**
      * 点击表头的checkbox，全选或全不选
      */
-
-
     _this.onSelectAll = function (checked) {
       var getRowKey = _this.getRowKey;
       var _a = _this.props,
-          dataSource = _a.dataSource,
-          rowSelection = _a.rowSelection;
-
+        dataSource = _a.dataSource,
+        rowSelection = _a.rowSelection;
       if (checked) {
         var newSelectedRowKeys_1 = dataSource.map(getRowKey);
-
         if (rowSelection.onSelectAll) {
           rowSelection.onSelectAll(true);
         }
-
         _this.setState(function (prevState) {
           return {
             rowSelection: __assign(__assign({}, prevState.rowSelection), {
@@ -193,18 +151,14 @@ function (_super) {
             selectedRowKeys: newSelectedRowKeys_1
           };
         });
-
         if (rowSelection.onSelectedRowChange) {
           rowSelection.onSelectedRowChange(newSelectedRowKeys_1, dataSource);
         }
-
         return;
       }
-
       if (rowSelection.onSelectAll) {
         rowSelection.onSelectAll(false);
       }
-
       _this.setState(function (prevState) {
         return {
           rowSelection: __assign(__assign({}, prevState.rowSelection), {
@@ -213,7 +167,6 @@ function (_super) {
           selectedRowKeys: []
         };
       });
-
       if (rowSelection.onSelectedRowChange) {
         rowSelection.onSelectedRowChange([], []);
       }
@@ -224,20 +177,17 @@ function (_super) {
      * @param rowData
      * @param rowIndex
      */
-
-
     _this.onSelect = function (visible, rowData, rowIndex) {
       var getRowKey = _this.getRowKey;
       var _a = _this.props,
-          dataSource = _a.dataSource,
-          rowSelection = _a.rowSelection;
+        dataSource = _a.dataSource,
+        rowSelection = _a.rowSelection;
       var _b = _this.state,
-          selectedRowKeys = _b.selectedRowKeys,
-          selectedRows = _b.selectedRows;
+        selectedRowKeys = _b.selectedRowKeys,
+        selectedRows = _b.selectedRows;
       var newRowKey = getRowKey(rowData, rowIndex);
       var newSelectedRowKeys = [];
       var newSelectedRows = [];
-
       if (visible) {
         if (!selectedRowKeys.includes(newRowKey)) {
           newSelectedRowKeys = selectedRowKeys.concat(newRowKey);
@@ -248,16 +198,13 @@ function (_super) {
           if (currentValue === newRowKey) {
             return previousValue;
           }
-
           var data = dataSource.find(function (item, index) {
             return getRowKey(item, index) === currentValue;
           });
-
           if (data) {
             previousValue.selectedRowKeys.push(currentValue);
             previousValue.selectedRows.push(data);
           }
-
           return previousValue;
         }, {
           selectedRowKeys: [],
@@ -266,11 +213,9 @@ function (_super) {
         newSelectedRows = result.selectedRows;
         newSelectedRowKeys = result.selectedRowKeys;
       }
-
       if (rowSelection.onSelect) {
         rowSelection.onSelect(visible, rowData, selectedRows);
       }
-
       if (!visible && _this.state.rowSelection.selectAllChecked) {
         _this.setState(function (prevState) {
           return {
@@ -280,35 +225,28 @@ function (_super) {
           };
         });
       }
-
       _this.setState({
         selectedRowKeys: newSelectedRowKeys,
         selectedRows: newSelectedRows
       });
-
       if (rowSelection.onSelectedRowChange) {
         rowSelection.onSelectedRowChange(newSelectedRowKeys, newSelectedRows);
       }
     };
-
     _this.getDisabled = function (rowData) {
       var rowSelection = _this.props.rowSelection;
-
       if ('getDisabled' in rowSelection) {
         var _a = _this.state,
-            selectedRowKeys = _a.selectedRowKeys,
-            selectedRows = _a.selectedRows;
+          selectedRowKeys = _a.selectedRowKeys,
+          selectedRows = _a.selectedRows;
         return rowSelection.getDisabled(rowData, selectedRowKeys, selectedRows);
       }
-
       return false;
     };
-
     _this.getRowSelection = function () {
       if (!('rowSelection' in _this.props) || !_this.props.rowSelection) {
         return null;
       }
-
       var propsRowSelection = _this.props.rowSelection;
       return __assign(__assign(__assign({}, _this.defaultRowSelection), propsRowSelection), {
         onSelect: _this.onSelect,
@@ -319,17 +257,14 @@ function (_super) {
     /**
      * 用colgroup设置每一列的宽度
      */
-
-
     _this.renderColgroup = function () {
       var _a = _this.props,
-          columns = _a.columns,
-          rowSelection = _a.rowSelection;
+        columns = _a.columns,
+        rowSelection = _a.rowSelection;
       return /*#__PURE__*/_react.default.createElement("colgroup", null, rowSelection ? /*#__PURE__*/_react.default.createElement("col", {
         className: "".concat(_this.prefixCls, "-checkbox-col")
       }) : null, columns.map(function (item) {
         var width = item.width;
-
         if (width) {
           return /*#__PURE__*/_react.default.createElement("col", {
             key: item.key,
@@ -339,21 +274,19 @@ function (_super) {
             }
           });
         }
-
         return /*#__PURE__*/_react.default.createElement("col", {
           key: item.key
         });
       }));
     };
-
     _this.renderHeader = function () {
       var cls = _this.prefixCls;
       var _a = _this.props,
-          columns = _a.columns,
-          sortName = _a.sortName,
-          isSortedDescending = _a.isSortedDescending,
-          sortIcon = _a.sortIcon,
-          onSortChange = _a.onSortChange;
+        columns = _a.columns,
+        sortName = _a.sortName,
+        isSortedDescending = _a.isSortedDescending,
+        sortIcon = _a.sortIcon,
+        onSortChange = _a.onSortChange;
       var rowSelection = _this.state.rowSelection;
       return /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement(_HeaderRow.default, {
         prefixCls: cls,
@@ -365,19 +298,18 @@ function (_super) {
         rowSelection: rowSelection
       }));
     };
-
     _this.renderBody = function () {
       var cls = _this.prefixCls;
       var getRowKey = _this.getRowKey;
       var _a = _this.props,
-          columns = _a.columns,
-          dataSource = _a.dataSource,
-          expandable = _a.expandable,
-          onRowClick = _a.onRowClick,
-          rowClassName = _a.rowClassName;
+        columns = _a.columns,
+        dataSource = _a.dataSource,
+        expandable = _a.expandable,
+        onRowClick = _a.onRowClick,
+        rowClassName = _a.rowClassName;
       var _b = _this.state,
-          rowSelection = _b.rowSelection,
-          selectedRowKeys = _b.selectedRowKeys;
+        rowSelection = _b.rowSelection,
+        selectedRowKeys = _b.selectedRowKeys;
       return /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement(_body.default, {
         prefixCls: cls,
         getRowKey: getRowKey,
@@ -390,9 +322,8 @@ function (_super) {
         getRowClassName: rowClassName
       }));
     };
-
     var rowSelection = props.rowSelection,
-        rowKey = props.rowKey;
+      rowKey = props.rowKey;
     _this.getRowKey = typeof rowKey === 'string' ? function (data) {
       return data[rowKey];
     } : rowKey;
@@ -404,30 +335,25 @@ function (_super) {
     };
     return _this;
   }
-
   Table.prototype.componentDidMount = function () {
     this.addListener();
   };
-
   Table.prototype.componentWillUnmount = function () {
     if (this.scrollHandler) {
       this.scrollHandler.remove();
       this.scrollHandler = null;
     }
-
     if (this.resizeObserver && this.bodyRef.current) {
       this.resizeObserver.unobserve(this.bodyRef.current);
     }
   };
-
   Table.prototype.render = function () {
     var cls = this.prefixCls;
     var _a = this.props,
-        className = _a.className,
-        fixedHeader = _a.fixedHeader,
-        maxHeight = _a.maxHeight,
-        loading = _a.loading;
-
+      className = _a.className,
+      fixedHeader = _a.fixedHeader,
+      maxHeight = _a.maxHeight,
+      loading = _a.loading;
     if (fixedHeader) {
       return /*#__PURE__*/_react.default.createElement(_loadingContainer.default, {
         loading: loading,
@@ -447,7 +373,6 @@ function (_super) {
         className: "".concat(cls, "-table")
       }, this.renderColgroup(), this.renderBody())));
     }
-
     return /*#__PURE__*/_react.default.createElement(_loadingContainer.default, {
       loading: loading,
       className: (0, _classnames.default)(className, cls)
@@ -455,7 +380,6 @@ function (_super) {
       className: "".concat(cls, "-table")
     }, this.renderColgroup(), this.renderHeader(), this.renderBody()));
   };
-
   Table.defaultProps = {
     fixedHeader: false,
     loading: false,
@@ -466,6 +390,5 @@ function (_super) {
   };
   return Table;
 }(_react.default.Component);
-
 var _default = Table;
 exports.default = _default;

package/lib/table/style/index.css

@@ -1 +1 @@
-.ab-table{overflow-x:auto}.ab-table-table{border-spacing:0;width:100%;table-layout:fixed;border-collapse:collapse}.ab-table-header{overflow:hidden}.ab-table-body{overflow:auto}.ab-table-checkbox{width:.32rem;text-align:center}.ab-table-checkbox-col{width:.32rem}.ab-table-point{cursor:pointer}.ab-table-title{display:flex;align-items:center;text-align:left}.ab-table-arrow{font-size:.16rem;color:#fff;padding:0 .05rem}
+.ab-svg-loading{display:inline-block}.ab-svg-loading-icon{display:block;width:.31rem;height:.31rem;animation:1s linear infinite reverse loading}@keyframes loading{0%{transform:rotate(0)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}.ab-loading-container{position:relative}.ab-loading-container-active{user-select:none;pointer-events:none}.ab-loading-container-icon-box{position:absolute;background-color:rgba(255,255,255,.7);top:0;left:0;z-index:4;display:block;width:100%;height:100%}.ab-loading-container-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ab-checkbox{display:inline-block;position:relative;font-size:0;cursor:pointer}.ab-checkbox-input{position:absolute;opacity:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:2}.ab-checkbox-inner{display:inline-block;position:relative;width:.16rem;height:.16rem;transition:.3s;border:.02rem solid #b0b0b0;border-radius:.02rem;background-color:#fff}.ab-checkbox-icon{visibility:hidden;position:absolute;width:.06rem;height:.1rem;left:20%;top:40%;transform:rotate(45deg) scale(0) translate(-50%,-50%);transition:.2s;border:.02rem solid #e84040;border-top:none;border-left:none}.ab-checkbox.ab-checkbox-checked .ab-checkbox-icon{visibility:visible;transform:rotate(45deg) scale(1) translate(-50%,-50%)}.ab-checkbox.ab-checkbox-disabled{cursor:not-allowed;color:rgba(0,0,0,.25)}.ab-checkbox.ab-checkbox-disabled .ab-checkbox-inner{border-color:#f0f0f0;background-color:#f5f5f5}.ab-checkbox.ab-checkbox-disabled .ab-checkbox-icon{border-color:#cecece}.ab-checkbox.ab-checkbox-disabled .ab-checkbox-content{text-decoration:none}.ab-checkbox-wrap{display:inline-block;position:relative;cursor:pointer}.ab-checkbox-wrap .ab-checkbox{position:absolute;transform:translateY(-50%);top:50%;left:0}.ab-checkbox-wrap:hover .ab-checkbox-content{text-decoration:underline}.ab-checkbox-content{padding-left:.24rem;display:inline-block}.ab-checkbox-wrap.ab-checkbox-reverse .ab-checkbox{left:auto;right:0}.ab-checkbox-wrap.ab-checkbox-reverse .ab-checkbox-content{padding-left:0;padding-right:.24rem}.ab-checkbox-wrap.ab-checkbox-disabled{cursor:not-allowed;color:rgba(0,0,0,.25)}.ab-checkbox-wrap.ab-checkbox-disabled .ab-checkbox-content{text-decoration:none}.ab-table{overflow-x:auto}.ab-table-table{border-spacing:0;width:100%;table-layout:fixed;border-collapse:collapse}.ab-table-header{overflow:hidden}.ab-table-body{overflow:auto}.ab-table-checkbox{width:.32rem;text-align:center}.ab-table-checkbox-col{width:.32rem}.ab-table-point{cursor:pointer}.ab-table-title{display:flex;align-items:center;text-align:left}.ab-table-arrow{font-size:.16rem;color:#fff;padding:0 .05rem}