shineout 2.0.23 → 2.0.24

package/lib/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/lib/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/lib/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/lib/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/lib/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'
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shineout",
-  "version": "2.0.23",
+  "version": "2.0.24",
   "description": "Shein 前端组件库",
   "main": "./lib/index.js",
   "module": "./es/index.js",