shineout 2.0.23 → 2.0.24

package/css/Table/Props.d.ts

@@ -281,7 +281,7 @@ export interface SimpleTableProps<DataItem, Value> {
      * @en
      * @cn
      */
-    onResize?: (index: number, width: number, colgroup?: number[]) => void;
+    onResize?: (index: number, width: number, colgroup?: number[], colspan?: number) => void;
     /**
      * @en sticky header, When it is true, the distance from the top is 0. When it is an object, the attribute value reference [Sticky component](/components/Sticky)
      * @cn 表头是否附着顶部，为 true 时距离顶部为0，为对象时属性值参考 [Sticky](/components/Sticky) 组件

package/css/Table/Props.ts

@@ -330,7 +330,7 @@ export interface SimpleTableProps<DataItem, Value> {
    * @en
    * @cn
    */
-  onResize?: (index: number, width: number, colgroup?: number[]) => void
+  onResize?: (index: number, width: number, colgroup?: number[], colspan?: number) => void
   /**
    * @en sticky header, When it is true, the distance from the top is 0. When it is an object, the attribute value reference [Sticky component](/components/Sticky)
    * @cn 表头是否附着顶部，为 true 时距离顶部为0，为对象时属性值参考 [Sticky](/components/Sticky) 组件

package/css/Table/SimpleTable.js

@@ -251,6 +251,9 @@ var SimpleTable = /*#__PURE__*/function (_PureComponent) {
     var minWidthSup = columns.find(function (d) {
       return d.minWidth;
     });
+    console.log('======================');
+    console.log('renderBody width: >>', width);
+    console.log('======================');
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "body",
       className: (0, _styles.tableClass)('simple-body'),

package/css/Table/SimpleTable.tsx

@@ -135,7 +135,10 @@ class SimpleTable<DataItem, Value> extends PureComponent<SimpleTableProps<DataIt
       const { width } = tds[i].getBoundingClientRect()
       const colSpan = parseInt(tds[i].getAttribute('colspan') || '', 10)
       if (colSpan > 1) {
-        split(width, range(colSpan).map(j => columns[i + j].width!)).forEach(w => colgroup.push(w))
+        split(
+          width,
+          range(colSpan).map(j => columns[i + j].width!)
+        ).forEach(w => colgroup.push(w))
       } else {
         colgroup.push(width)
       }
@@ -218,6 +221,9 @@ class SimpleTable<DataItem, Value> extends PureComponent<SimpleTableProps<DataIt
     const { columns, width, fixed, columnResizable, bordered, ...others } = this.props
     const { colgroup, resize } = this.state
     const minWidthSup = columns.find(d => d.minWidth)
+    console.log('======================')
+    console.log('renderBody width: >>', width)
+    console.log('======================')
     return (
       <div key="body" className={tableClass('simple-body')} ref={this.bindBody} onScroll={this.handleScroll}>
         <table

package/css/Table/Thead.d.ts

@@ -14,10 +14,14 @@ declare class Thead<DataItem, Value> extends PureComponent<TheadProps<DataItem,
     resizingIndex: number;
     resizingCol: HTMLTableColElement;
     lastX?: number;
+    newResizingWidth: number;
     rightBorderRecord: ObjectType<boolean>;
     constructor(props: TheadProps<DataItem, Value>);
     setColumns(columns: TheadColumn<DataItem>[], col: ColumnItemWithFixed<DataItem>, level: number, index?: number): number;
+    get resizingColspan(): number;
+    getNewColgroup(): number[];
     resizeColgroup(deltaX: number): void;
+    resizeMultipleColgroup(deltaX: number, colspan: number): void;
     handleResize(type: 'mousedown' | 'mousemove' | 'mouseup', e: MouseEvent): void;
     createTh(trs: ReactElement[][], col: TheadColumn<DataItem>, level: number): void;
     ignoreRightBorder(column: TheadColumn<DataItem>): void;

package/css/Table/Thead.js

@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
@@ -31,6 +32,7 @@ var Thead = /*#__PURE__*/function (_PureComponent) {
     (0, _defineProperty2.default)(_this, "resizingIndex", void 0);
     (0, _defineProperty2.default)(_this, "resizingCol", void 0);
     (0, _defineProperty2.default)(_this, "lastX", void 0);
+    (0, _defineProperty2.default)(_this, "newResizingWidth", void 0);
     (0, _defineProperty2.default)(_this, "rightBorderRecord", void 0);
     _this.handleMouseDown = _this.handleResize.bind(_this, 'mousedown');
     _this.handleMouseMove = _this.handleResize.bind(_this, 'mousemove');
@@ -76,6 +78,21 @@ var Thead = /*#__PURE__*/function (_PureComponent) {
     }
     return colSpan;
   };
+  _proto.getNewColgroup = function getNewColgroup() {
+    var _this$resizingCol$par;
+    var colgroup = this.props.colgroup;
+    if (!colgroup) return [];
+    var colElements = (_this$resizingCol$par = this.resizingCol.parentElement) == null ? void 0 : _this$resizingCol$par.children;
+    var startIndex = this.resizingIndex;
+    var endIndex = startIndex + this.resizingColspan - 1;
+    var colElementsArray = Array.from(colElements);
+    return colgroup.map(function (col, index) {
+      if (index >= startIndex && index <= endIndex) {
+        return colElementsArray[index].getBoundingClientRect().width || col;
+      }
+      return col;
+    });
+  };
   _proto.resizeColgroup = function resizeColgroup(deltaX) {
     var columns = this.props.columns;
     var item = columns[this.resizingIndex];
@@ -95,6 +112,51 @@ var Thead = /*#__PURE__*/function (_PureComponent) {
       w = Math.min(w, maxWidth);
     }
     this.resizingCol.style.width = w + "px";
+    this.newResizingWidth = w;
+  };
+  _proto.resizeMultipleColgroup = function resizeMultipleColgroup(deltaX, colspan) {
+    var _this$resizingCol$par2;
+    var columns = this.props.columns;
+    var siblings = (_this$resizingCol$par2 = this.resizingCol.parentElement) == null ? void 0 : _this$resizingCol$par2.children;
+    var startIndex = this.resizingIndex;
+    var endIndex = startIndex + colspan - 1;
+    var resizingCols = Array.from(siblings).filter(function (_, index) {
+      return index >= startIndex && index <= endIndex;
+    });
+    var resizingItems = columns.filter(function (_, index) {
+      return index >= startIndex && index <= endIndex;
+    });
+    var minWidthTotal = resizingItems.reduce(function (total, item) {
+      return item.minWidth ? total + (item.minWidth || 0) : 0;
+    }, 0);
+    var maxWidthTotal = resizingItems.reduce(function (total, item) {
+      return item.maxWidth ? total + (item.maxWidth || 0) : 0;
+    }, 0);
+    var oWidth = resizingCols.reduce(function (total, col) {
+      return total + parseInt(col.style.width, 10);
+    }, 0);
+    var colWidthRate = resizingCols.map(function (col) {
+      return col.getBoundingClientRect().width / oWidth;
+    });
+    if (Number.isNaN(oWidth) || oWidth === 0) {
+      oWidth = resizingCols.reduce(function (total, col) {
+        return total + col.getBoundingClientRect().width;
+      }, 0);
+    }
+    var w = oWidth + deltaX;
+    if ((0, _is.isNumber)(minWidthTotal) && minWidthTotal > 0) {
+      w = Math.max(w, minWidthTotal);
+    } else {
+      w = Math.max(w, MIN_RESIZABLE_WIDTH);
+    }
+    if ((0, _is.isNumber)(maxWidthTotal) && maxWidthTotal > 0) {
+      w = Math.min(w, maxWidthTotal);
+    }
+    // 将w按照它们原本的比例分配
+    resizingCols.forEach(function (col, index) {
+      col.style.width = w * colWidthRate[index] + "px";
+    });
+    this.newResizingWidth = w;
   };
   _proto.handleResize = function handleResize(type, e) {
     if (type === 'mousedown') {
@@ -116,19 +178,22 @@ var Thead = /*#__PURE__*/function (_PureComponent) {
       var x = e.clientX;
       if (typeof this.lastX === 'number') {
         var deltaX = x - this.lastX;
-        this.resizeColgroup(deltaX);
+        if (this.resizingColspan > 1) {
+          this.resizeMultipleColgroup(deltaX, this.resizingColspan);
+        } else {
+          this.resizeColgroup(deltaX);
+        }
       }
       this.lastX = x;
     } else if (type === 'mouseup') {
-      var _this$props = this.props,
-        onColChange = _this$props.onColChange,
-        colgroup = _this$props.colgroup;
+      var onColChange = this.props.onColChange;
       document.removeEventListener('mousemove', this.handleMouseMove);
       document.removeEventListener('mouseup', this.handleMouseUp);
       this.resizingTable.classList.remove((0, _styles.tableClass)('resizing'));
       this.resizingTh.classList.remove((0, _styles.tableClass)('resizing-item'));
       this.lastX = undefined;
-      if (onColChange) onColChange(this.resizingIndex, parseInt(this.resizingCol.style.width, 10), colgroup);
+      var newColgroup = this.getNewColgroup();
+      if (onColChange) onColChange(this.resizingIndex, this.newResizingWidth, newColgroup, this.resizingColspan);
     }
   };
   _proto.createTh = function createTh(trs, col, level) {
@@ -140,15 +205,15 @@ var Thead = /*#__PURE__*/function (_PureComponent) {
     if (col.fixed) fixed.push("fixed-" + col.fixed);
     if (col.firstFixed) fixed.push('fixed-first');
     if (col.lastFixed) fixed.push('fixed-last');
-    var _this$props2 = this.props,
-      sorter = _this$props2.sorter,
-      onSortChange = _this$props2.onSortChange,
-      data = _this$props2.data,
-      datum = _this$props2.datum,
-      showSelectAll = _this$props2.showSelectAll,
-      disabled = _this$props2.disabled,
-      treeColumnsName = _this$props2.treeColumnsName,
-      treeCheckAll = _this$props2.treeCheckAll;
+    var _this$props = this.props,
+      sorter = _this$props.sorter,
+      onSortChange = _this$props.onSortChange,
+      data = _this$props.data,
+      datum = _this$props.datum,
+      showSelectAll = _this$props.showSelectAll,
+      disabled = _this$props.disabled,
+      treeColumnsName = _this$props.treeColumnsName,
+      treeCheckAll = _this$props.treeCheckAll;
     var isEmpty = !(data && data.length);
     var align = colTemp.align && "align-" + colTemp.align;
     var ignoreBorderRight = this.rightBorderRecord[col.key] && 'ignore-right-border';
@@ -239,7 +304,12 @@ var Thead = /*#__PURE__*/function (_PureComponent) {
       }, tr);
     }));
   };
-  return Thead;
+  return (0, _createClass2.default)(Thead, [{
+    key: "resizingColspan",
+    get: function get() {
+      return parseInt(this.resizingTh.getAttribute('colspan') || '', 10);
+    }
+  }]);
 }(_react.PureComponent);
 (0, _defineProperty2.default)(Thead, "defaultProps", {
   showSelectAll: true

package/css/Table/Thead.tsx

@@ -34,6 +34,8 @@ class Thead<DataItem, Value> extends PureComponent<TheadProps<DataItem, Value>>
 
   lastX?: number
 
+  newResizingWidth: number
+
   rightBorderRecord: ObjectType<boolean>
 
   constructor(props: TheadProps<DataItem, Value>) {
@@ -81,10 +83,28 @@ class Thead<DataItem, Value> extends PureComponent<TheadProps<DataItem, Value>>
         columns: sub,
       })
     }
-
     return colSpan
   }
 
+  get resizingColspan() {
+    return parseInt(this.resizingTh.getAttribute('colspan') || '', 10)
+  }
+
+  getNewColgroup() {
+    const { colgroup } = this.props
+    if (!colgroup) return []
+    const colElements = this.resizingCol.parentElement?.children as HTMLCollection
+    const startIndex = this.resizingIndex
+    const endIndex = startIndex + this.resizingColspan - 1
+    const colElementsArray = Array.from(colElements)
+    return colgroup.map((col, index) => {
+      if (index >= startIndex && index <= endIndex) {
+        return colElementsArray[index].getBoundingClientRect().width || col
+      }
+      return col
+    })
+  }
+
   resizeColgroup(deltaX: number) {
     const { columns } = this.props
     const item = columns[this.resizingIndex]
@@ -104,6 +124,40 @@ class Thead<DataItem, Value> extends PureComponent<TheadProps<DataItem, Value>>
       w = Math.min(w, maxWidth)
     }
     this.resizingCol.style.width = `${w}px`
+    this.newResizingWidth = w
+  }
+
+  resizeMultipleColgroup(deltaX: number, colspan: number) {
+    const { columns } = this.props
+    const siblings = this.resizingCol.parentElement?.children as HTMLCollection
+    const startIndex = this.resizingIndex
+    const endIndex = startIndex + colspan - 1
+    const resizingCols = Array.from(siblings).filter((_, index) => index >= startIndex && index <= endIndex)
+    const resizingItems = columns.filter((_, index) => index >= startIndex && index <= endIndex)
+    const minWidthTotal = resizingItems.reduce((total, item) => (item.minWidth ? total + (item.minWidth || 0) : 0), 0)
+    const maxWidthTotal = resizingItems.reduce((total, item) => (item.maxWidth ? total + (item.maxWidth || 0) : 0), 0)
+
+    let oWidth = resizingCols.reduce((total, col: HTMLTableColElement) => total + parseInt(col.style.width, 10), 0)
+    const colWidthRate = resizingCols.map((col: HTMLTableColElement) => col.getBoundingClientRect().width / oWidth)
+
+    if (Number.isNaN(oWidth) || oWidth === 0) {
+      oWidth = resizingCols.reduce((total, col: HTMLTableColElement) => total + col.getBoundingClientRect().width, 0)
+    }
+    let w = oWidth + deltaX
+    if (isNumber(minWidthTotal) && minWidthTotal > 0) {
+      w = Math.max(w, minWidthTotal)
+    } else {
+      w = Math.max(w, MIN_RESIZABLE_WIDTH)
+    }
+
+    if (isNumber(maxWidthTotal) && maxWidthTotal > 0) {
+      w = Math.min(w, maxWidthTotal)
+    }
+    // 将w按照它们原本的比例分配
+    resizingCols.forEach((col: HTMLTableColElement, index: number) => {
+      col.style.width = `${w * colWidthRate[index]}px`
+    })
+    this.newResizingWidth = w
   }
 
   handleResize(type: 'mousedown' | 'mousemove' | 'mouseup', e: MouseEvent) {
@@ -129,17 +183,22 @@ class Thead<DataItem, Value> extends PureComponent<TheadProps<DataItem, Value>>
       const x = e.clientX
       if (typeof this.lastX === 'number') {
         const deltaX = x - this.lastX
-        this.resizeColgroup(deltaX)
+        if (this.resizingColspan > 1) {
+          this.resizeMultipleColgroup(deltaX, this.resizingColspan)
+        } else {
+          this.resizeColgroup(deltaX)
+        }
       }
       this.lastX = x
     } else if (type === 'mouseup') {
-      const { onColChange, colgroup } = this.props
+      const { onColChange } = this.props
       document.removeEventListener('mousemove', this.handleMouseMove)
       document.removeEventListener('mouseup', this.handleMouseUp)
       this.resizingTable.classList.remove(tableClass('resizing'))
       this.resizingTh.classList.remove(tableClass('resizing-item'))
       this.lastX = undefined
-      if (onColChange) onColChange(this.resizingIndex, parseInt(this.resizingCol.style.width, 10), colgroup)
+      const newColgroup = this.getNewColgroup()
+      if (onColChange) onColChange(this.resizingIndex, this.newResizingWidth, newColgroup, this.resizingColspan)
     }
   }
 

package/css/Table/resizable.d.ts

@@ -8,7 +8,7 @@ declare const _default: <DataItem, Value, Props extends SimpleTableProps<DataIte
     new (props: GetResizeProps<Props, DataItem>): {
         componentDidUpdate(prevProps: GetResizeProps<Props, DataItem>): void;
         getWidth(): number | GetResizeProps<Props, DataItem>["width"] | undefined;
-        handleResize(index: number, width: number, colgroup: number[]): void;
+        handleResize(startIndex: number, newResizingwidth: number, colgroup: number[], colspan: number): void;
         render(): JSX.Element;
         context: any;
         setState<K extends keyof ScrollState<DataItem, Value>>(state: ScrollState<DataItem, Value> | ((prevState: Readonly<ScrollState<DataItem, Value>>, props: Readonly<GetResizeProps<Props, DataItem>>) => ScrollState<DataItem, Value> | Pick<ScrollState<DataItem, Value>, K> | null) | Pick<ScrollState<DataItem, Value>, K> | null, callback?: (() => void) | undefined): void;

package/css/Table/resizable.js

@@ -60,14 +60,17 @@ var _default = exports.default = function _default(Table) {
       }
       return width;
     };
-    _proto.handleResize = function handleResize(index, width, colgroup) {
+    _proto.handleResize = function handleResize(startIndex, newResizingwidth, colgroup, colspan) {
       if (colgroup === undefined) return;
       var onColumnResize = this.props.onColumnResize;
+      var endIndex = startIndex + colspan - 1;
+      var oldRsizingColsWidth = colgroup.filter(function (_, i) {
+        return i >= startIndex && i <= endIndex;
+      }).reduce(function (sum, w) {
+        return sum + w;
+      }, 0);
       var changed = (0, _immer.default)(this.state, function (draft) {
-        var column = draft.columns[index];
-        // @ts-ignore
-        draft.delta += parseFloat(width - (column.width || colgroup[index] || 0));
-        colgroup[index] = width;
+        draft.delta += newResizingwidth - oldRsizingColsWidth;
         draft.columns.forEach(function (col, i) {
           var w = colgroup[i];
           if (w) col.width = w;

package/css/Table/resizable.tsx

@@ -49,14 +49,17 @@ export default <DataItem, Value, Props extends SimpleTableProps<DataItem, Value>
       return width
     }
 
-    handleResize(index: number, width: number, colgroup: number[]) {
+    handleResize(startIndex: number, newResizingwidth: number, colgroup: number[], colspan: number) {
       if (colgroup === undefined) return
       const { onColumnResize } = this.props
+      const endIndex = startIndex + colspan - 1
+      const oldRsizingColsWidth = colgroup
+        .filter((_, i) => i >= startIndex && i <= endIndex)
+        .reduce((sum, w) => sum + w, 0)
+
       const changed = immer(this.state, draft => {
-        const column = draft.columns[index]
-        // @ts-ignore
-        draft.delta += parseFloat(width - (column.width || colgroup[index] || 0))
-        colgroup[index] = width
+        draft.delta += newResizingwidth - oldRsizingColsWidth
+
         draft.columns.forEach((col, i) => {
           const w = colgroup[i]
           if (w) col.width = w
@@ -73,6 +76,6 @@ export default <DataItem, Value, Props extends SimpleTableProps<DataItem, Value>
       const { columns } = this.state
       const { onColumnResize, ...other } = this.props
       const width = this.getWidth()
-      return <Table {...other as Props} width={width} columns={columns} onResize={this.handleResize} />
+      return <Table {...(other as Props)} width={width} columns={columns} onResize={this.handleResize} />
     }
   }

package/css/index.js

@@ -115,5 +115,5 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 // Created by scripts/src-index.js.
 var _default = exports.default = {
   utils: utils,
-  version: '2.0.23'
+  version: '2.0.24'
 };