@autobest-ui/components 2.0.4 → 2.0.5-alpha.1

package/lib/table/body/index.js

@@ -9,6 +9,8 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _utils = require("@autobest-ui/utils");
+
 var _BodyRow = _interopRequireDefault(require("./BodyRow"));
 
 var _CheckIcon = _interopRequireDefault(require("./CheckIcon"));
@@ -25,15 +27,16 @@ function Body(_a) {
       rowSelection = _a.rowSelection,
       selectedRowKeys = _a.selectedRowKeys,
       expandable = _a.expandable,
-      onRowClick = _a.onRowClick;
+      onRowClick = _a.onRowClick,
+      getRowClassName = _a.getRowClassName;
   var rows = [];
   var expandedRowRenderer = expandable ? expandable.expandedRowRender : noop;
   dataSource.forEach(function (row, rowIndex) {
-    var rowKey = getRowKey(row) || rowIndex;
+    var rowKey = getRowKey(row, rowIndex);
     var CheckCell = rowSelection ? /*#__PURE__*/_react.default.createElement(_CheckIcon.default, {
       prefixCls: prefixCls,
       rowSelection: rowSelection,
-      rowKey: rowKey,
+      rowKey: (0, _utils.isBlank)(rowKey) ? rowIndex : rowKey,
       rowData: row,
       rowIndex: rowIndex,
       selectedRowKeys: selectedRowKeys
@@ -46,7 +49,8 @@ function Body(_a) {
       columns: columns,
       CheckCell: CheckCell,
       indent: 0,
-      onRowClick: onRowClick
+      onRowClick: onRowClick,
+      className: getRowClassName(row, rowIndex)
     }));
 
     if (expandable) {

package/lib/table/header/HeaderCell.js

@@ -39,6 +39,10 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
+var rotate180Style = {
+  transform: 'rotate(180deg)'
+};
+
 var HeaderCell =
 /** @class */
 function (_super) {
@@ -75,9 +79,7 @@ function (_super) {
       return /*#__PURE__*/_react.default.createElement("span", {
         className: "".concat(prefixCls, "-arrow")
       }, /*#__PURE__*/_react.default.createElement("svg", {
-        style: isSortedDescending ? {
-          transform: 'rotate(180deg)'
-        } : null,
+        style: isSortedDescending ? rotate180Style : null,
         viewBox: "0 0 1024 1024",
         version: "1.1",
         width: "1em",
@@ -102,11 +104,11 @@ function (_super) {
         sortName = _b.sortName,
         colSpan = _b.colSpan;
     return /*#__PURE__*/_react.default.createElement("th", {
-      className: className,
-      colSpan: colSpan
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)("".concat(prefixCls, "-title"), (_a = {}, _a["".concat(prefixCls, "-point")] = sortName, _a)),
+      className: (0, _classnames.default)(className, (_a = {}, _a["".concat(prefixCls, "-point")] = sortName, _a)),
+      colSpan: colSpan,
       onClick: this.onClick
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-title")
     }, title, this.renderArrow()));
   };
 

package/lib/table/index.d.ts

@@ -22,12 +22,9 @@ export interface TableProps<T> extends Pick<HeaderRowProps<T>, 'sortName' | 'sor
      * 具体类型见Column
      */
     columns: TableColumnInfo<T>[];
-    /**
-     * 获取单条记录的唯一主键; 若是string类型，则取当前行数据中对应名称的属性值； 若是函数，则传入当前行数据，获取rowKey值；这也是勾选功能匹配时所用的key值
-     */
-    rowKey?: string | ((rowData: T) => ReactText);
     /**
      * 是否固定表头
+     * 固定表头时，建议留一列不设置固定宽度，适应弹性布局
      */
     fixedHeader?: boolean;
     /**
@@ -38,6 +35,15 @@ export interface TableProps<T> extends Pick<HeaderRowProps<T>, 'sortName' | 'sor
      * 为true时，Table会显示loading样式
      */
     loading?: boolean;
+    /**
+     * 获取单条记录的唯一主键; 若是string类型，则取当前行数据中对应名称的属性值； 若是函数，则传入当前行数据，获取rowKey值；这也是勾选功能匹配时所用的key值
+     * 默认取key属性
+     */
+    rowKey?: string | BodyProps<T>['getRowKey'];
+    /**
+     * 获取单行className
+     */
+    rowClassName?: (rowData: T, rowIndex: number) => string;
     /**
      * 表格行是否可勾选，详见RowSelection
      */
@@ -69,11 +75,14 @@ declare class Table<RowDataType> extends React.Component<TableProps<RowDataType>
     headerRef: React.RefObject<HTMLDivElement>;
     bodyRef: React.RefObject<HTMLDivElement>;
     scrollHandler: AddListenerEventHandler;
-    getRowKey: (rowData: RowDataType) => ReactText;
+    getRowKey: BodyProps<RowDataType>['getRowKey'];
+    resizeObserver: ResizeObserver;
+    scrollBarThAdded: boolean;
     static defaultProps: {
         fixedHeader: boolean;
         loading: boolean;
         rowKey: string;
+        rowClassName: () => string;
     };
     readonly defaultRowSelection: Pick<StateRowSelectionInfo<RowDataType>, 'selectAllVisible' | 'selectAllChecked' | 'getDisabled'>;
     constructor(props: TableProps<RowDataType>);
@@ -83,7 +92,8 @@ declare class Table<RowDataType> extends React.Component<TableProps<RowDataType>
     clearSelection: () => void;
     componentDidMount(): void;
     componentWillUnmount(): void;
-    addScrollListener: () => void;
+    headerScroll: (...arg: any[]) => void;
+    addListener: () => void;
     getSelectedRows: (selectedKeys: any) => any;
     /**
      * 点击表头的checkbox，全选或全不选
@@ -93,11 +103,12 @@ declare class Table<RowDataType> extends React.Component<TableProps<RowDataType>
      * 点击某一行的checkbook
      * @param visible
      * @param rowData
+     * @param rowIndex
      */
-    onSelect: (visible: boolean, rowData: RowDataType) => void;
+    onSelect: (visible: boolean, rowData: RowDataType, rowIndex: number) => void;
     getDisabled: (rowData: any) => boolean;
     getRowSelection: () => {
-        onSelect: (visible: boolean, rowData: RowDataType) => void;
+        onSelect: (visible: boolean, rowData: RowDataType, rowIndex: number) => void;
         onSelectAll: (checked: any) => void;
         getDisabled: (rowData: any) => boolean;
         defaultSelectedRowKeys?: React.ReactText[];

package/lib/table/index.js

@@ -74,6 +74,7 @@ function (_super) {
     _this.prefixCls = 'ab-table';
     _this.headerRef = /*#__PURE__*/_react.default.createRef();
     _this.bodyRef = /*#__PURE__*/_react.default.createRef();
+    _this.scrollBarThAdded = false;
     _this.defaultRowSelection = {
       selectAllVisible: true,
       selectAllChecked: false,
@@ -97,15 +98,59 @@ function (_super) {
       });
     };
 
-    _this.addScrollListener = function () {
+    _this.headerScroll = (0, _utils.throttleWithRAF)(function () {
+      _this.headerRef.current.scrollLeft = _this.bodyRef.current.scrollLeft;
+    });
+
+    _this.addListener = function () {
       var fixedHeader = _this.props.fixedHeader;
-      var headerRef = _this.headerRef.current;
       var bodyRef = _this.bodyRef.current;
 
-      if (fixedHeader && headerRef && bodyRef) {
-        _this.scrollHandler = (0, _utils.addEventListener)(bodyRef, 'scroll', (0, _utils.throttleWithRAF)(function () {
-          headerRef.scrollLeft = bodyRef.scrollLeft;
-        }));
+      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
+
+                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);
+                }
+              }
+            }
+          }
+        });
+
+        _this.resizeObserver.observe(bodyRef);
       }
     };
 
@@ -117,8 +162,8 @@ function (_super) {
       var getRowKey = _this.getRowKey;
       var dataSource = _this.props.dataSource;
       return selectedKeys.map(function (key) {
-        return dataSource.find(function (item) {
-          return getRowKey(item) === key;
+        return dataSource.find(function (item, index) {
+          return getRowKey(item, index) === key;
         });
       });
     };
@@ -177,10 +222,11 @@ function (_super) {
      * 点击某一行的checkbook
      * @param visible
      * @param rowData
+     * @param rowIndex
      */
 
 
-    _this.onSelect = function (visible, rowData) {
+    _this.onSelect = function (visible, rowData, rowIndex) {
       var getRowKey = _this.getRowKey;
       var _a = _this.props,
           dataSource = _a.dataSource,
@@ -188,7 +234,7 @@ function (_super) {
       var _b = _this.state,
           selectedRowKeys = _b.selectedRowKeys,
           selectedRows = _b.selectedRows;
-      var newRowKey = getRowKey(rowData);
+      var newRowKey = getRowKey(rowData, rowIndex);
       var newSelectedRowKeys = [];
       var newSelectedRows = [];
 
@@ -203,8 +249,8 @@ function (_super) {
             return previousValue;
           }
 
-          var data = dataSource.find(function (item) {
-            return getRowKey(item) === currentValue;
+          var data = dataSource.find(function (item, index) {
+            return getRowKey(item, index) === currentValue;
           });
 
           if (data) {
@@ -280,7 +326,7 @@ function (_super) {
           columns = _a.columns,
           rowSelection = _a.rowSelection;
       return /*#__PURE__*/_react.default.createElement("colgroup", null, rowSelection ? /*#__PURE__*/_react.default.createElement("col", {
-        width: 32
+        className: "".concat(_this.prefixCls, "-checkbox-col")
       }) : null, columns.map(function (item) {
         var width = item.width;
 
@@ -327,7 +373,8 @@ function (_super) {
           columns = _a.columns,
           dataSource = _a.dataSource,
           expandable = _a.expandable,
-          onRowClick = _a.onRowClick;
+          onRowClick = _a.onRowClick,
+          rowClassName = _a.rowClassName;
       var _b = _this.state,
           rowSelection = _b.rowSelection,
           selectedRowKeys = _b.selectedRowKeys;
@@ -339,7 +386,8 @@ function (_super) {
         expandable: expandable,
         rowSelection: rowSelection,
         selectedRowKeys: selectedRowKeys,
-        onRowClick: onRowClick
+        onRowClick: onRowClick,
+        getRowClassName: rowClassName
       }));
     };
 
@@ -358,7 +406,7 @@ function (_super) {
   }
 
   Table.prototype.componentDidMount = function () {
-    this.addScrollListener();
+    this.addListener();
   };
 
   Table.prototype.componentWillUnmount = function () {
@@ -366,6 +414,10 @@ function (_super) {
       this.scrollHandler.remove();
       this.scrollHandler = null;
     }
+
+    if (this.resizeObserver && this.bodyRef.current) {
+      this.resizeObserver.unobserve(this.bodyRef.current);
+    }
   };
 
   Table.prototype.render = function () {
@@ -383,25 +435,34 @@ function (_super) {
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(cls, "-header"),
         ref: this.headerRef
-      }, /*#__PURE__*/_react.default.createElement("table", null, this.renderColgroup(), this.renderHeader())), /*#__PURE__*/_react.default.createElement("div", {
+      }, /*#__PURE__*/_react.default.createElement("table", {
+        className: "".concat(cls, "-table")
+      }, this.renderColgroup(), this.renderHeader())), /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(cls, "-body"),
         style: {
           maxHeight: maxHeight
         },
         ref: this.bodyRef
-      }, /*#__PURE__*/_react.default.createElement("table", null, this.renderColgroup(), this.renderBody())));
+      }, /*#__PURE__*/_react.default.createElement("table", {
+        className: "".concat(cls, "-table")
+      }, this.renderColgroup(), this.renderBody())));
     }
 
     return /*#__PURE__*/_react.default.createElement(_loadingContainer.default, {
       loading: loading,
       className: (0, _classnames.default)(className, cls)
-    }, /*#__PURE__*/_react.default.createElement("table", null, this.renderColgroup(), this.renderHeader(), this.renderBody()));
+    }, /*#__PURE__*/_react.default.createElement("table", {
+      className: "".concat(cls, "-table")
+    }, this.renderColgroup(), this.renderHeader(), this.renderBody()));
   };
 
   Table.defaultProps = {
     fixedHeader: false,
     loading: false,
-    rowKey: 'key'
+    rowKey: 'key',
+    rowClassName: function rowClassName() {
+      return '';
+    }
   };
   return Table;
 }(_react.default.Component);

package/lib/table/style/index.css

@@ -1 +1 @@
-.ab-table{overflow-x:auto}.ab-table table{border-spacing:0;width:100%;table-layout:fixed}.ab-table-header{overflow:hidden}.ab-table-header table{width:calc(100% - .17rem)}.ab-table-body{overflow:auto scroll}.ab-table-checkbox{width:.32rem;text-align:center}.ab-table-title{display:flex;align-items:center;text-align:left}.ab-table-title.ab-table-point{cursor:pointer}.ab-table-arrow{font-size:.16rem;color:#fff;padding:0 .05rem}@media only screen and (max-width:767px){.ab-table-header table{width:100%}}
+.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}

package/lib/table/style/index.scss

@@ -3,22 +3,19 @@ $namespace: ab-table;
 .#{$namespace} {
   overflow-x: auto;
 
-  table {
+  &-table {
     border-spacing: 0;
     width: 100%;
     table-layout: fixed;
+    border-collapse: collapse;
   }
 
   &-header {
     overflow: hidden;
-
-    table {
-      width: calc(100% - .17rem);
-    }
   }
 
   &-body {
-    overflow: auto scroll;
+    overflow: auto;
   }
 
   &-checkbox {
@@ -26,14 +23,18 @@ $namespace: ab-table;
     text-align: center;
   }
 
+  &-checkbox-col {
+    width: .32rem;
+  }
+
+  &-point {
+    cursor: pointer;
+  }
+
   &-title {
     display: flex;
     align-items: center;
     text-align: left;
-
-    &.#{$namespace}-point {
-      cursor: pointer;
-    }
   }
 
   &-arrow {
@@ -41,14 +42,4 @@ $namespace: ab-table;
     color: #fff;
     padding: 0 .05rem;
   }
-}
-
-@media only screen and (max-width: 767px) {
-  .#{$namespace} {
-    &-header {
-      table {
-        width: 100%;
-      }
-    }
-  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobest-ui/components",
-  "version": "2.0.4",
+  "version": "2.0.5-alpha.1",
   "private": false,
   "description": "components common ui for React",
   "main": "lib/index.js",
@@ -46,5 +46,5 @@
     "react": ">=16.8.6",
     "react-transition-group": ">=4.2.2"
   },
-  "gitHead": "5350d0e451afedca23971bd5469c6f7320145fae"
+  "gitHead": "25088b80191d4491efa60bf4a36be60d09d7fce1"
 }