拖拽bug fix 修复
This commit is contained in:
parent
179694799f
commit
05f8b4483b
|
@ -7861,14 +7861,12 @@ ul {
|
||||||
.u-table-body {
|
.u-table-body {
|
||||||
position: relative; }
|
position: relative; }
|
||||||
.u-table-hiden-drag {
|
.u-table-hiden-drag {
|
||||||
position: relative;
|
position: relative; }
|
||||||
z-index: 9999; }
|
|
||||||
.u-table-hiden-drag-li {
|
.u-table-hiden-drag-li {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
height: 10px;
|
height: 10px; }
|
||||||
border: 1px solid; }
|
|
||||||
.u-table table {
|
.u-table table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
|
@ -7897,7 +7895,8 @@ ul {
|
||||||
.u-table-bordered table {
|
.u-table-bordered table {
|
||||||
border: 1px solid #e9e9e9;
|
border: 1px solid #e9e9e9;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
table-layout: fixed; }
|
table-layout: fixed;
|
||||||
|
width: auto; }
|
||||||
.u-table-bordered th {
|
.u-table-bordered th {
|
||||||
border-bottom: 1px solid #e9e9e9;
|
border-bottom: 1px solid #e9e9e9;
|
||||||
box-sizing: border-box; }
|
box-sizing: border-box; }
|
||||||
|
@ -8035,7 +8034,7 @@ ul {
|
||||||
.u-table-thead-th .th-drag-gap {
|
.u-table-thead-th .th-drag-gap {
|
||||||
background: transparent; }
|
background: transparent; }
|
||||||
.u-table-thead-th .th-drag-gap-hover {
|
.u-table-thead-th .th-drag-gap-hover {
|
||||||
background: #000; }
|
background: #ccc; }
|
||||||
.u-table-thead-th:last-child-drag-gap {
|
.u-table-thead-th:last-child-drag-gap {
|
||||||
border: none; }
|
border: none; }
|
||||||
|
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -8099,8 +8099,6 @@
|
||||||
|
|
||||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
||||||
|
|
||||||
// import ResizableTh from './ResizableTh';
|
|
||||||
|
|
||||||
var propTypes = {
|
var propTypes = {
|
||||||
clsPrefix: _propTypes2['default'].string,
|
clsPrefix: _propTypes2['default'].string,
|
||||||
rowStyle: _propTypes2['default'].object,
|
rowStyle: _propTypes2['default'].object,
|
||||||
|
@ -8140,17 +8138,10 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
_this.onMouseMove = function (event, data) {
|
_this.onMouseMove = function (event, data) {
|
||||||
console.log("onMouseMove----", _this.border);
|
|
||||||
if (_this.border) return;
|
if (_this.border) return;
|
||||||
var clsPrefix = _this.props.clsPrefix;
|
var clsPrefix = _this.props.clsPrefix;
|
||||||
// if(this.border){
|
|
||||||
// console.log("xxxx-------000");
|
|
||||||
// let x = (event.pageX - this.drag.initPageLeftX) + this.drag.initLeft;
|
|
||||||
// console.log("xxxx-------" ,x);
|
|
||||||
// }else{
|
|
||||||
|
|
||||||
event.target.className = clsPrefix + '-thead-th-drag-gap th-drag-gap-hover';
|
event.target.className = clsPrefix + '-thead-th-drag-gap th-drag-gap-hover';
|
||||||
// }
|
|
||||||
};
|
};
|
||||||
|
|
||||||
_this.onMouseOut = function (event, data) {
|
_this.onMouseOut = function (event, data) {
|
||||||
|
@ -8163,9 +8154,7 @@
|
||||||
_this.onMouseDown = function (event, data) {
|
_this.onMouseDown = function (event, data) {
|
||||||
_this.border = true;
|
_this.border = true;
|
||||||
var clsPrefix = _this.props.clsPrefix;
|
var clsPrefix = _this.props.clsPrefix;
|
||||||
// event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`;
|
|
||||||
|
|
||||||
console.log("--onThMouseMove---" + _this.drag);
|
|
||||||
_this.drag.initPageLeftX = event.pageX;
|
_this.drag.initPageLeftX = event.pageX;
|
||||||
_this.drag.initLeft = (0, _utils.tryParseInt)(event.target.style.left);
|
_this.drag.initLeft = (0, _utils.tryParseInt)(event.target.style.left);
|
||||||
_this.drag.x = _this.drag.initLeft;
|
_this.drag.x = _this.drag.initLeft;
|
||||||
|
@ -8192,42 +8181,12 @@
|
||||||
//设置hiden的left
|
//设置hiden的left
|
||||||
var currentHideDom = document.getElementById("u-table-drag-hide-table").getElementsByTagName("div")[_this.drag.currIndex];
|
var currentHideDom = document.getElementById("u-table-drag-hide-table").getElementsByTagName("div")[_this.drag.currIndex];
|
||||||
currentHideDom.style.left = _this.drag.initPageLeftX + x - 16 + "px";
|
currentHideDom.style.left = _this.drag.initPageLeftX + x - 16 + "px";
|
||||||
// currentHideDom.style.width = ((this.props.rows[0])[this.drag.currIndex]).width+"px";
|
|
||||||
// console.log("--------------",x);
|
|
||||||
|
|
||||||
|
|
||||||
// console.log("----",(currentHideDom[this.drag.currIndex]).offsetLeft);
|
|
||||||
// // console.log(" ==== ",this.props.rows[0][this.drag.currIndex])
|
|
||||||
|
|
||||||
// for(let i = this.drag.currIndex ; i < currentHideDom.length; i ++){
|
|
||||||
// // console.log("----",currentHideDom[i].offsetLeft);
|
|
||||||
// let _daWidth = (this.props.rows[0][this.drag.currIndex]).width;
|
|
||||||
// currentHideDom[i].style.left = (_daWidth +x-15)+"px";
|
|
||||||
// // if(i == this.drag.currIndex){
|
|
||||||
|
|
||||||
// // }
|
|
||||||
// // currentHideDom[i].style.left = (this.drag.initPageLeftX+x-15)+"px";
|
|
||||||
|
|
||||||
// }
|
|
||||||
|
|
||||||
|
|
||||||
//设置当前的宽度
|
//设置当前的宽度
|
||||||
// event.target.style.width = (data.width+x)+"px";
|
|
||||||
var currentData = _this.drag.data[_this.drag.currIndex];
|
var currentData = _this.drag.data[_this.drag.currIndex];
|
||||||
// currentData.width = ((this.props.rows[0])[this.drag.currIndex].width+x);
|
|
||||||
currentData.width = _this.drag.width + x;
|
currentData.width = _this.drag.width + x;
|
||||||
console.log("-----currentData.width---------" + x, currentData.width);
|
|
||||||
var currentDom = document.getElementById("u-table-drag-thead").getElementsByTagName("th")[_this.drag.currIndex];
|
var currentDom = document.getElementById("u-table-drag-thead").getElementsByTagName("th")[_this.drag.currIndex];
|
||||||
currentDom.style.width = currentData.width + "px";
|
currentDom.style.width = currentData.width + "px";
|
||||||
//设置他的后一个的宽度
|
|
||||||
// let currentLastDom = document.getElementById("u-table-drag-thead").getElementsByTagName("div")[this.drag.currIndex+1];
|
|
||||||
// let _x = x<0?(-1*x):x;
|
|
||||||
// currentLastDom.style.left = (this.drag.initPageLeftX+x)+"px";
|
|
||||||
|
|
||||||
|
|
||||||
_this.drag.x = x;
|
_this.drag.x = x;
|
||||||
// console.log("--------------",this.drag);
|
|
||||||
// console.log("----------pppp----",this.props.rows[0]);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
_this.currentObj = null;
|
_this.currentObj = null;
|
||||||
|
@ -8299,22 +8258,14 @@
|
||||||
return _react2['default'].createElement(
|
return _react2['default'].createElement(
|
||||||
'th',
|
'th',
|
||||||
{
|
{
|
||||||
// onDragStart={(event)=>{this.onDragGapStart(event,da)}}
|
|
||||||
// onDragOver={(event)=>{this.onDragGapOver(event,da)}}
|
|
||||||
// onDrop={(event)=>{this.onDropGap(event,da)}}
|
|
||||||
// onDragEnter={(event)=>{this.onDragGapEnter(event,da)}}
|
|
||||||
|
|
||||||
// onMouseDown={(event)=>{onMouseDown(event,da)}}
|
|
||||||
style: { width: da.width },
|
style: { width: da.width },
|
||||||
onMouseMove: function onMouseMove(event) {
|
onMouseMove: function onMouseMove(event) {
|
||||||
_this2.onThMouseMove(event, da);
|
_this2.onThMouseMove(event, da);
|
||||||
},
|
},
|
||||||
onMouseUp: function onMouseUp(event) {
|
onMouseUp: function onMouseUp(event) {
|
||||||
_this2.onThMouseUp(event, da);
|
_this2.onThMouseUp(event, da);
|
||||||
}
|
},
|
||||||
// onMouseUp={(event)=>{onMouseUp(event,da)}}
|
className: da.className + ' ' + clsPrefix + '-thead-th ',
|
||||||
// {...da}
|
|
||||||
, className: da.className + ' ' + clsPrefix + '-thead-th ',
|
|
||||||
key: i },
|
key: i },
|
||||||
da.children,
|
da.children,
|
||||||
_react2['default'].createElement('div', { ref: function ref(el) {
|
_react2['default'].createElement('div', { ref: function ref(el) {
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -27,14 +27,11 @@ $table-move-in-color: $bg-color-base;
|
||||||
}
|
}
|
||||||
&-hiden-drag{
|
&-hiden-drag{
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 9999;
|
|
||||||
|
|
||||||
&-li{
|
&-li{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
border: 1px solid;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
table {
|
table {
|
||||||
|
@ -84,6 +81,7 @@ $table-move-in-color: $bg-color-base;
|
||||||
border: 1px solid #e9e9e9;
|
border: 1px solid #e9e9e9;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
|
width:auto;
|
||||||
}
|
}
|
||||||
th {
|
th {
|
||||||
border-bottom: 1px solid #e9e9e9;
|
border-bottom: 1px solid #e9e9e9;
|
||||||
|
@ -294,7 +292,7 @@ $table-move-in-color: $bg-color-base;
|
||||||
background:transparent;
|
background:transparent;
|
||||||
}
|
}
|
||||||
.th-drag-gap-hover{
|
.th-drag-gap-hover{
|
||||||
background: #000;
|
background: #ccc;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&-th:last-child {
|
&-th:last-child {
|
||||||
|
|
|
@ -2,7 +2,6 @@ import React, { Component } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import shallowequal from 'shallowequal';
|
import shallowequal from 'shallowequal';
|
||||||
import {tryParseInt} from './utils';
|
import {tryParseInt} from './utils';
|
||||||
// import ResizableTh from './ResizableTh';
|
|
||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
clsPrefix: PropTypes.string,
|
clsPrefix: PropTypes.string,
|
||||||
|
@ -60,16 +59,9 @@ class TableHeader extends Component{
|
||||||
|
|
||||||
|
|
||||||
onMouseMove=(event,data)=>{
|
onMouseMove=(event,data)=>{
|
||||||
console.log("onMouseMove----" ,this.border);
|
|
||||||
if(this.border)return;
|
if(this.border)return;
|
||||||
const {clsPrefix} = this.props;
|
const {clsPrefix} = this.props;
|
||||||
// if(this.border){
|
|
||||||
// console.log("xxxx-------000");
|
|
||||||
// let x = (event.pageX - this.drag.initPageLeftX) + this.drag.initLeft;
|
|
||||||
// console.log("xxxx-------" ,x);
|
|
||||||
// }else{
|
|
||||||
event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`;
|
event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`;
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
onMouseOut=(event,data)=>{
|
onMouseOut=(event,data)=>{
|
||||||
if(this.border)return;
|
if(this.border)return;
|
||||||
|
@ -79,8 +71,6 @@ class TableHeader extends Component{
|
||||||
onMouseDown=(event,data)=>{
|
onMouseDown=(event,data)=>{
|
||||||
this.border = true;
|
this.border = true;
|
||||||
const {clsPrefix} = this.props;
|
const {clsPrefix} = this.props;
|
||||||
// event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`;
|
|
||||||
console.log("--onThMouseMove---"+this.drag);
|
|
||||||
this.drag.initPageLeftX = event.pageX;
|
this.drag.initPageLeftX = event.pageX;
|
||||||
this.drag.initLeft = tryParseInt(event.target.style.left);
|
this.drag.initLeft = tryParseInt(event.target.style.left);
|
||||||
this.drag.x = this.drag.initLeft;
|
this.drag.x = this.drag.initLeft;
|
||||||
|
@ -102,42 +92,12 @@ class TableHeader extends Component{
|
||||||
//设置hiden的left
|
//设置hiden的left
|
||||||
let currentHideDom = document.getElementById("u-table-drag-hide-table").getElementsByTagName("div")[this.drag.currIndex];
|
let currentHideDom = document.getElementById("u-table-drag-hide-table").getElementsByTagName("div")[this.drag.currIndex];
|
||||||
currentHideDom.style.left = (this.drag.initPageLeftX+x-16)+"px";
|
currentHideDom.style.left = (this.drag.initPageLeftX+x-16)+"px";
|
||||||
// currentHideDom.style.width = ((this.props.rows[0])[this.drag.currIndex]).width+"px";
|
|
||||||
// console.log("--------------",x);
|
|
||||||
|
|
||||||
|
|
||||||
// console.log("----",(currentHideDom[this.drag.currIndex]).offsetLeft);
|
|
||||||
// // console.log(" ==== ",this.props.rows[0][this.drag.currIndex])
|
|
||||||
|
|
||||||
// for(let i = this.drag.currIndex ; i < currentHideDom.length; i ++){
|
|
||||||
// // console.log("----",currentHideDom[i].offsetLeft);
|
|
||||||
// let _daWidth = (this.props.rows[0][this.drag.currIndex]).width;
|
|
||||||
// currentHideDom[i].style.left = (_daWidth +x-15)+"px";
|
|
||||||
// // if(i == this.drag.currIndex){
|
|
||||||
|
|
||||||
// // }
|
|
||||||
// // currentHideDom[i].style.left = (this.drag.initPageLeftX+x-15)+"px";
|
|
||||||
|
|
||||||
// }
|
|
||||||
|
|
||||||
|
|
||||||
//设置当前的宽度
|
//设置当前的宽度
|
||||||
// event.target.style.width = (data.width+x)+"px";
|
|
||||||
let currentData = this.drag.data[this.drag.currIndex];
|
let currentData = this.drag.data[this.drag.currIndex];
|
||||||
// currentData.width = ((this.props.rows[0])[this.drag.currIndex].width+x);
|
|
||||||
currentData.width = this.drag.width + x;
|
currentData.width = this.drag.width + x;
|
||||||
console.log("-----currentData.width---------"+x,currentData.width);
|
|
||||||
let currentDom = document.getElementById("u-table-drag-thead").getElementsByTagName("th")[this.drag.currIndex];
|
let currentDom = document.getElementById("u-table-drag-thead").getElementsByTagName("th")[this.drag.currIndex];
|
||||||
currentDom.style.width = (currentData.width)+"px";
|
currentDom.style.width = (currentData.width)+"px";
|
||||||
//设置他的后一个的宽度
|
|
||||||
// let currentLastDom = document.getElementById("u-table-drag-thead").getElementsByTagName("div")[this.drag.currIndex+1];
|
|
||||||
// let _x = x<0?(-1*x):x;
|
|
||||||
// currentLastDom.style.left = (this.drag.initPageLeftX+x)+"px";
|
|
||||||
|
|
||||||
|
|
||||||
this.drag.x = x;
|
this.drag.x = x;
|
||||||
// console.log("--------------",this.drag);
|
|
||||||
// console.log("----------pppp----",this.props.rows[0]);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
@ -163,17 +123,9 @@ class TableHeader extends Component{
|
||||||
key={da.key} />)
|
key={da.key} />)
|
||||||
}else if(dragborder){
|
}else if(dragborder){
|
||||||
return(<th
|
return(<th
|
||||||
// onDragStart={(event)=>{this.onDragGapStart(event,da)}}
|
|
||||||
// onDragOver={(event)=>{this.onDragGapOver(event,da)}}
|
|
||||||
// onDrop={(event)=>{this.onDropGap(event,da)}}
|
|
||||||
// onDragEnter={(event)=>{this.onDragGapEnter(event,da)}}
|
|
||||||
|
|
||||||
// onMouseDown={(event)=>{onMouseDown(event,da)}}
|
|
||||||
style={{width:da.width}}
|
style={{width:da.width}}
|
||||||
onMouseMove={(event)=>{this.onThMouseMove(event,da)}}
|
onMouseMove={(event)=>{this.onThMouseMove(event,da)}}
|
||||||
onMouseUp={(event)=>{this.onThMouseUp(event,da)}}
|
onMouseUp={(event)=>{this.onThMouseUp(event,da)}}
|
||||||
// onMouseUp={(event)=>{onMouseUp(event,da)}}
|
|
||||||
// {...da}
|
|
||||||
className={`${da.className} ${clsPrefix}-thead-th `}
|
className={`${da.className} ${clsPrefix}-thead-th `}
|
||||||
key={i} >
|
key={i} >
|
||||||
{da.children}
|
{da.children}
|
||||||
|
|
|
@ -1,144 +0,0 @@
|
||||||
import React, { Component } from "react";
|
|
||||||
import Icon from "bee-icon";
|
|
||||||
import Checkbox from "bee-checkbox";
|
|
||||||
import ReactDOM from 'react-dom';
|
|
||||||
import Popover from 'bee-popover';
|
|
||||||
import {sortBy} from './util';
|
|
||||||
import createColResizable from '../resiztable'
|
|
||||||
// import Table from './Table';
|
|
||||||
/**
|
|
||||||
* 参数: 列拖拽
|
|
||||||
* @param {*} Table
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default function dragColumn(Table) {
|
|
||||||
|
|
||||||
return class dragColumn extends Component {
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
const {columns} = props;
|
|
||||||
this.dragBorderObj = {startScreenX:0,endScreenX:0};
|
|
||||||
this.mouse = false;
|
|
||||||
this.setColumOrderByIndex(columns);
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillReceiveProps(nextProps){
|
|
||||||
if(nextProps.columns != this.props.columns){
|
|
||||||
this.setColumOrderByIndex();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
const domElemTableList = document.querySelectorAll('table');
|
|
||||||
createColResizable(domElemTableList[0], {
|
|
||||||
liveDrag: true
|
|
||||||
});
|
|
||||||
createColResizable(domElemTableList[1], {
|
|
||||||
liveDrag: false,
|
|
||||||
headerOnly: false
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
setColumOrderByIndex = (columns)=>{
|
|
||||||
let _column = [];
|
|
||||||
Object.assign(_column,columns);
|
|
||||||
_column.forEach((da,i) => {
|
|
||||||
da.dragIndex = i;
|
|
||||||
da.drgHover = false;
|
|
||||||
});
|
|
||||||
this.state = {
|
|
||||||
columns:_column
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
onDragStart=(event,data)=>{
|
|
||||||
}
|
|
||||||
|
|
||||||
onDragOver=(event,data)=>{
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
onDragEnter=(event,data)=>{
|
|
||||||
const {columns:_columns} = this.state;
|
|
||||||
let columns = [];
|
|
||||||
Object.assign(columns,_columns);
|
|
||||||
columns.forEach((da)=>da.drgHover = false)
|
|
||||||
let current = columns.find((da)=>da.key == data.key);
|
|
||||||
current.drgHover = true;
|
|
||||||
this.setState({
|
|
||||||
columns
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
onDrop=(event,data)=>{
|
|
||||||
let {columns} = this.state;
|
|
||||||
const id = event.dataTransfer.getData("Text");
|
|
||||||
let objIndex = columns.findIndex((_da,i)=>_da.key == id);
|
|
||||||
let targetIndex = columns.findIndex((_da,i)=>_da.key == data.key);
|
|
||||||
|
|
||||||
columns.forEach((da,i)=>{
|
|
||||||
da.drgHover = false;
|
|
||||||
if(da.key == id){//obj
|
|
||||||
da.dragIndex = targetIndex
|
|
||||||
}
|
|
||||||
if(da.key == data.key){//targetObj
|
|
||||||
da.dragIndex = objIndex;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
let _columns = sortBy(columns,(da)=>da.dragIndex);
|
|
||||||
this.setState({
|
|
||||||
columns:_columns,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
onMouseDown=(event,data)=>{
|
|
||||||
this.mouse = true;
|
|
||||||
this.dragBorderObj.startScreenX = event.screenX;
|
|
||||||
}
|
|
||||||
onMouseMove=(event,data)=>{
|
|
||||||
if(!this.mouse)return;
|
|
||||||
let endx = (event.screenX-this.dragBorderObj.startScreenX);
|
|
||||||
let {columns:_columns} = this.state;
|
|
||||||
let columns = [];
|
|
||||||
Object.assign(columns,_columns);
|
|
||||||
// let currentIndex = columns.findIndex((_da,i)=>_da.key == data.key);
|
|
||||||
// currentIndex = currentIndex==0?currentIndex:(currentIndex-1);
|
|
||||||
|
|
||||||
let currObj = columns.find((_da,i)=>_da.key == data.key);
|
|
||||||
if(!currObj)return;
|
|
||||||
currObj.width = currObj.width?(currObj.width+endx):endx;
|
|
||||||
this.setState({
|
|
||||||
columns
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
getTarget=(evt)=>{
|
|
||||||
return evt.target || evt.srcElement;
|
|
||||||
}
|
|
||||||
|
|
||||||
onMouseUp=(event,data)=>{
|
|
||||||
let endx = (event.screenX-this.dragBorderObj.startScreenX);
|
|
||||||
this.mouse = false;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const {data,dragborder,draggable,className} = this.props;
|
|
||||||
const {columns} = this.state;
|
|
||||||
|
|
||||||
|
|
||||||
return (<Table {...this.props} columns={columns} data={data} className={`${className} u-table-drag-border`}
|
|
||||||
onDragStart={this.onDragStart} onDragOver={this.onDragOver} onDrop={this.onDrop}
|
|
||||||
onDragEnter={this.onDragEnter}
|
|
||||||
draggable={draggable}
|
|
||||||
|
|
||||||
dragborder={true}
|
|
||||||
onMouseDown={this.onMouseDown}
|
|
||||||
onMouseMove={this.onMouseMove}
|
|
||||||
onMouseUp={this.onMouseUp}
|
|
||||||
/>)
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
|
@ -1,254 +0,0 @@
|
||||||
import isFunction from 'lodash/isFunction';
|
|
||||||
import isArray from 'lodash/isArray';
|
|
||||||
import {
|
|
||||||
tryParseInt,
|
|
||||||
removeClass,
|
|
||||||
addClass
|
|
||||||
} from '../utils';
|
|
||||||
|
|
||||||
export default class ColResizable {
|
|
||||||
static defaults = {
|
|
||||||
liveDrag: true,
|
|
||||||
defaultMinWidth: 30,
|
|
||||||
headerOnly: true,
|
|
||||||
disabledColumns: [],
|
|
||||||
onResizing: null,
|
|
||||||
onResized: null
|
|
||||||
};
|
|
||||||
|
|
||||||
constructor(domElmTable, options = {}) {
|
|
||||||
this.options = { ...ColResizable.defaults, ...options };
|
|
||||||
this.domElmTable = domElmTable;
|
|
||||||
|
|
||||||
this.onGripMouseDown = this.onGripMouseDown.bind(this);
|
|
||||||
this.onMouseMove = this.onMouseMove.bind(this);
|
|
||||||
this.onMouseUp = this.onMouseUp.bind(this);
|
|
||||||
|
|
||||||
this.init();
|
|
||||||
}
|
|
||||||
|
|
||||||
init() {
|
|
||||||
addClass(this.domElmTable, 'table-col-resizer');
|
|
||||||
|
|
||||||
this.domElmHandleList = [];
|
|
||||||
this.domElmTableTheadThList = [];
|
|
||||||
this.tableWidth = `${this.domElmTable.offsetWidth}px`;
|
|
||||||
|
|
||||||
this.cellSpacing = tryParseInt(getComputedStyle(this.domElmTable).getPropertyValue('border-spacing'));
|
|
||||||
this.borderLeftWidth = tryParseInt(getComputedStyle(this.domElmTable).getPropertyValue('border-left-width'));
|
|
||||||
|
|
||||||
this.createGrips();
|
|
||||||
}
|
|
||||||
|
|
||||||
createGrips() {
|
|
||||||
const thList = this.domElmTable.querySelectorAll('thead th');
|
|
||||||
|
|
||||||
const domElmThList = [];
|
|
||||||
this.domElmHandleContainer = this.domElmTable.previousSibling;
|
|
||||||
const hasHandleContainer = this.domElmHandleContainer && this.domElmHandleContainer.className === 'col-resize-container';
|
|
||||||
|
|
||||||
if (!hasHandleContainer) {
|
|
||||||
this.domElmTable.insertAdjacentHTML('beforebegin', '<div class="col-resize-container"/>');
|
|
||||||
this.domElmHandleContainer = this.domElmTable.previousSibling;
|
|
||||||
} else {
|
|
||||||
Array.prototype.push.apply(this.domElmHandleList, this.domElmHandleContainer.childNodes);
|
|
||||||
}
|
|
||||||
|
|
||||||
Array.prototype.push.apply(domElmThList, thList);
|
|
||||||
this.thLength = domElmThList.length;
|
|
||||||
this.lastThIndex = this.thLength - 1;
|
|
||||||
|
|
||||||
let { disabledColumns } = this.options;
|
|
||||||
|
|
||||||
if (!isArray(disabledColumns)) {
|
|
||||||
disabledColumns = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
domElmThList.forEach((domElmTh, index) => {
|
|
||||||
const disabledColumn = disabledColumns.indexOf(index) !== -1;
|
|
||||||
let domElmHandle;
|
|
||||||
if (!hasHandleContainer) {
|
|
||||||
this.domElmHandleContainer.insertAdjacentHTML('beforeend',
|
|
||||||
`<div class="drag-handle">
|
|
||||||
<i class="icon icon-caret-right"></i>
|
|
||||||
<div class="col-resizer"></div>
|
|
||||||
<i class="icon icon-caret-left"></i>
|
|
||||||
</div>`
|
|
||||||
);
|
|
||||||
domElmHandle = this.domElmHandleContainer.lastChild;
|
|
||||||
} else {
|
|
||||||
domElmHandle = this.domElmHandleList[index];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (index === this.lastThIndex && !hasHandleContainer) {
|
|
||||||
addClass(domElmHandle, 'last-handle');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!disabledColumn && !hasHandleContainer) {
|
|
||||||
domElmHandle.addEventListener('mousedown', this.onGripMouseDown);
|
|
||||||
} else if (disabledColumn && !hasHandleContainer) {
|
|
||||||
addClass(domElmHandle, 'disabled-drag');
|
|
||||||
}
|
|
||||||
|
|
||||||
domElmHandle.index = index;
|
|
||||||
domElmTh.w = domElmTh.offsetWidth;
|
|
||||||
|
|
||||||
domElmTh.style.width = `${domElmTh.offsetWidth}px`;
|
|
||||||
if (!hasHandleContainer) {
|
|
||||||
this.domElmHandleList.push(domElmHandle);
|
|
||||||
}
|
|
||||||
this.domElmTableTheadThList.push(domElmTh);
|
|
||||||
});
|
|
||||||
this.syncGrips();
|
|
||||||
}
|
|
||||||
|
|
||||||
syncGrips() {
|
|
||||||
const { headerOnly } = this.options;
|
|
||||||
const theadHight = this.domElmTableTheadThList[0].offsetHeight;
|
|
||||||
|
|
||||||
let height;
|
|
||||||
if (headerOnly) {
|
|
||||||
height = theadHight;
|
|
||||||
} else {
|
|
||||||
height = this.domElmTable.offsetHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let i = 0; i < this.thLength; i += 1) {
|
|
||||||
const domElmTh = this.domElmTableTheadThList[i];
|
|
||||||
|
|
||||||
let left;
|
|
||||||
if (i === 0) {
|
|
||||||
left = domElmTh.offsetWidth + (this.cellSpacing / 2);
|
|
||||||
} else {
|
|
||||||
const handleColLeft = this.domElmHandleList[i - 1].style.left + (this.cellSpacing / 2);
|
|
||||||
left = tryParseInt(handleColLeft) + domElmTh.offsetWidth;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.domElmHandleList[i].style.left = `${left}px`;
|
|
||||||
this.domElmHandleList[i].style.height = `${height}px`;
|
|
||||||
}
|
|
||||||
|
|
||||||
const domElmIconList = [];
|
|
||||||
const iconHeight = this.domElmHandleContainer.querySelector('.col-resize-container .icon').offsetHeight;
|
|
||||||
|
|
||||||
const domElemIcons = this.domElmHandleContainer.querySelectorAll('.col-resize-container .icon');
|
|
||||||
Array.prototype.push.apply(domElmIconList, domElemIcons);
|
|
||||||
|
|
||||||
domElmIconList.forEach((el) => {
|
|
||||||
const marginTopNumber = (theadHight - iconHeight) / 2;
|
|
||||||
el.style.marginTop = `${tryParseInt(marginTopNumber)}px`;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
onGripMouseDown(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const { index } = e.currentTarget;
|
|
||||||
const domElmHandle = this.domElmHandleList[index];
|
|
||||||
|
|
||||||
addClass(domElmHandle, 'active-drag');
|
|
||||||
|
|
||||||
domElmHandle.initPageLeftX = e.pageX;
|
|
||||||
domElmHandle.initLeft = tryParseInt(domElmHandle.style.left);
|
|
||||||
domElmHandle.x = domElmHandle.initLeft;
|
|
||||||
this.drag = domElmHandle;
|
|
||||||
|
|
||||||
document.addEventListener('mousemove', this.onMouseMove);
|
|
||||||
document.addEventListener('mouseup', this.onMouseUp);
|
|
||||||
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
onMouseMove(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
if (!this.drag) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { defaultMinWidth } = this.options;
|
|
||||||
const index = this.drag.index;
|
|
||||||
|
|
||||||
const minWidth = defaultMinWidth;
|
|
||||||
const pageLeftX = e.pageX;
|
|
||||||
let x = (pageLeftX - this.drag.initPageLeftX) + this.drag.initLeft;
|
|
||||||
|
|
||||||
const l = (this.cellSpacing * 1.5) + minWidth + this.borderLeftWidth;
|
|
||||||
const min = index ? tryParseInt(this.domElmHandleList[index - 1].style.left)
|
|
||||||
+ this.cellSpacing + minWidth : l;
|
|
||||||
|
|
||||||
const max = tryParseInt(this.domElmHandleList[index + 1].style.left)
|
|
||||||
- this.cellSpacing - minWidth;
|
|
||||||
|
|
||||||
x = Math.max(min, Math.min(max, x));
|
|
||||||
|
|
||||||
const inc = x - this.drag.initLeft;
|
|
||||||
const domElmThNow = this.domElmTableTheadThList[index];
|
|
||||||
const domElmThElmNext = this.domElmTableTheadThList[index + 1];
|
|
||||||
|
|
||||||
const w = domElmThNow.w + inc;
|
|
||||||
const w2 = domElmThElmNext.w - inc;
|
|
||||||
const minWidthOne = tryParseInt(this.domElmTableTheadThList[index].getAttribute('data-min-width'));
|
|
||||||
const minWidthTwo = tryParseInt(this.domElmTableTheadThList[index + 1].getAttribute('data-min-width'));
|
|
||||||
|
|
||||||
if (minWidthOne > w) {
|
|
||||||
x = (minWidthOne - domElmThNow.w) + this.drag.initLeft;
|
|
||||||
} else if (minWidthTwo > w2) {
|
|
||||||
x = (domElmThElmNext.w - minWidthTwo) + this.drag.initLeft;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.drag.x = x;
|
|
||||||
this.drag.style.left = `${x}px`;
|
|
||||||
|
|
||||||
if (this.options.liveDrag) {
|
|
||||||
this.syncCols(index);
|
|
||||||
this.syncGrips();
|
|
||||||
const { onResizing } = this.options;
|
|
||||||
|
|
||||||
if (isFunction(onResizing)) {
|
|
||||||
onResizing(e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
syncCols(i, isOver) {
|
|
||||||
const inc = this.drag.x - this.drag.initLeft;
|
|
||||||
const domElmThNow = this.domElmTableTheadThList[i];
|
|
||||||
const domElmThNext = this.domElmTableTheadThList[i + 1];
|
|
||||||
|
|
||||||
const w = domElmThNow.w + inc;
|
|
||||||
const w2 = domElmThNext.w - inc;
|
|
||||||
|
|
||||||
domElmThNow.style.width = `${w}px`;
|
|
||||||
domElmThNext.style.width = `${w2}px`;
|
|
||||||
|
|
||||||
if (isOver) {
|
|
||||||
domElmThNow.w = w;
|
|
||||||
domElmThNext.w = w2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMouseUp(e) {
|
|
||||||
document.removeEventListener('mouseup', this.onMouseUp);
|
|
||||||
document.removeEventListener('mousemove', this.onMouseMove);
|
|
||||||
|
|
||||||
if (!this.drag) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
removeClass(this.drag, 'active-drag');
|
|
||||||
if (!(this.drag.x - this.drag.initLeft === 0)) {
|
|
||||||
const index = this.drag.index;
|
|
||||||
this.syncCols(index, true);
|
|
||||||
this.syncGrips();
|
|
||||||
|
|
||||||
const { onResized } = this.options;
|
|
||||||
if (isFunction(onResized)) {
|
|
||||||
onResized(e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.drag = null;
|
|
||||||
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,14 +0,0 @@
|
||||||
import isElement from 'lodash/isElement';
|
|
||||||
import ColResizable from './colResizable';
|
|
||||||
// import '../style/index.less';
|
|
||||||
|
|
||||||
const createColResizable = (domEleTable, options) => {
|
|
||||||
if (isElement(domEleTable) && domEleTable.nodeName === 'TABLE') {
|
|
||||||
return domEleTable.__resizable ||
|
|
||||||
(domEleTable.__resizable = new ColResizable(domEleTable, options));
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default createColResizable;
|
|
Loading…
Reference in New Issue