From 435a0100066ca62f17429d7f255497fe5aa94552 Mon Sep 17 00:00:00 2001
From: jonyshi <jonyshi@126.com>
Date: Mon, 14 May 2018 10:01:06 +0800
Subject: [PATCH] publish 1.1.6
---
build/ResizableTh.js | 104 ------------
build/Table.css | 2 +-
build/Table.js | 24 ++-
build/TableHeader.js | 71 +++++---
build/lib/dragColumn.1.js | 214 ------------------------
build/lib/dragColumn.js | 62 +------
build/resiztable/colResizable.js | 276 -------------------------------
build/resiztable/index.js | 28 ----
package.json | 5 +-
9 files changed, 70 insertions(+), 716 deletions(-)
delete mode 100644 build/ResizableTh.js
delete mode 100644 build/lib/dragColumn.1.js
delete mode 100644 build/resiztable/colResizable.js
delete mode 100644 build/resiztable/index.js
diff --git a/build/ResizableTh.js b/build/ResizableTh.js
deleted file mode 100644
index cd63afc..0000000
--- a/build/ResizableTh.js
+++ /dev/null
@@ -1,104 +0,0 @@
-"use strict";
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require("react");
-
-var _react2 = _interopRequireDefault(_react);
-
-var _beeIcon = require("bee-icon");
-
-var _beeIcon2 = _interopRequireDefault(_beeIcon);
-
-var _beeCheckbox = require("bee-checkbox");
-
-var _beeCheckbox2 = _interopRequireDefault(_beeCheckbox);
-
-var _reactDom = require("react-dom");
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
-var _beePopover = require("bee-popover");
-
-var _beePopover2 = _interopRequireDefault(_beePopover);
-
-var _util = require("./util");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-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); }
-
-var ResizableTh = function (_Component) {
- _inherits(ResizableTh, _Component);
-
- function ResizableTh(props) {
- _classCallCheck(this, ResizableTh);
-
- var _this = _possibleConstructorReturn(this, _Component.call(this, props));
-
- _this.onMouseDown = function (event, data) {
- _this.mouse = true;
- _this.dragBorderObj.startScreenX = event.screenX;
- };
-
- _this.onMouseMove = function (event, data) {
- if (!_this.mouse) return;
- var endx = event.screenX - _this.dragBorderObj.startScreenX;
- var _columns = _this.state.columns;
-
- var columns = [];
- _extends(columns, _columns);
- // let currentIndex = columns.findIndex((_da,i)=>_da.key == data.key);
- // currentIndex = currentIndex==0?currentIndex:(currentIndex-1);
-
- var currObj = columns.find(function (_da, i) {
- return _da.key == data.key;
- });
- if (!currObj) return;
- currObj.width = currObj.width ? currObj.width + endx : endx;
- _this.setState({
- columns: columns
- });
- };
-
- _this.getTarget = function (evt) {
- return evt.target || evt.srcElement;
- };
-
- _this.onMouseUp = function (event, data) {
- var endx = event.screenX - _this.dragBorderObj.startScreenX;
- _this.mouse = false;
- };
-
- _this.state = {
- width: 0
- };
- return _this;
- }
-
- ResizableTh.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
- if (nextProps.columns != this.props.columns) {}
- };
-
- ResizableTh.prototype.render = function render() {
- var className = this.props.className;
-
-
- return _react2["default"].createElement("th", _extends({}, this.props, { className: className + " u-table-drag-border"
- // onDragStart={this.onDragStart} onDragOver={this.onDragOver} onDrop={this.onDrop}
- // onDragEnter={this.onDragEnter}
- // draggable={draggable}
- , onMouseDown: this.onMouseDown,
- onMouseMove: this.onMouseMove,
- onMouseUp: this.onMouseUp
- }));
- };
-
- return ResizableTh;
-}(_react.Component);
\ No newline at end of file
diff --git a/build/Table.css b/build/Table.css
index 342962f..f7259f4 100644
--- a/build/Table.css
+++ b/build/Table.css
@@ -332,7 +332,7 @@
.u-table-thead-th .th-drag-gap {
background: transparent; }
.u-table-thead-th .th-drag-gap-hover {
- background: red; }
+ background: #ccc; }
.u-table-thead-th:last-child-drag-gap {
border: none; }
diff --git a/build/Table.js b/build/Table.js
index 1319a01..66f5a98 100644
--- a/build/Table.js
+++ b/build/Table.js
@@ -137,12 +137,16 @@ var Table = function (_Component) {
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.renderDragHideTable = function () {
- var columns = _this.props.columns;
+ var _this$props = _this.props,
+ columns = _this$props.columns,
+ dragborder = _this$props.dragborder,
+ dragborderKey = _this$props.dragborderKey;
+ if (!dragborder) return null;
var sum = 0;
return _react2["default"].createElement(
'div',
- { className: _this.props.clsPrefix + '-hiden-drag' },
+ { id: 'u-table-drag-hide-table-' + dragborderKey, className: _this.props.clsPrefix + '-hiden-drag' },
columns.map(function (da, i) {
sum += da.width ? da.width : 0;
return _react2["default"].createElement('div', { className: _this.props.clsPrefix + '-hiden-drag-li', key: da + "_hiden_" + i, style: { left: sum + "px" } });
@@ -303,7 +307,9 @@ var Table = function (_Component) {
onMouseDown = _props.onMouseDown,
onMouseMove = _props.onMouseMove,
onMouseUp = _props.onMouseUp,
- dragborder = _props.dragborder;
+ dragborder = _props.dragborder,
+ onThMouseMove = _props.onThMouseMove,
+ dragborderKey = _props.dragborderKey;
var rows = this.getHeaderRows(columns);
if (expandIconAsCell && fixed !== 'right') {
@@ -317,7 +323,8 @@ var Table = function (_Component) {
var trStyle = fixed ? this.getHeaderRowStyle(columns, rows) : null;
var drop = draggable ? { onDragStart: onDragStart, onDragOver: onDragOver, onDrop: onDrop, onDragEnter: onDragEnter, draggable: draggable } : {};
- var dragBorder = dragborder ? { onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, dragborder: dragborder } : {};
+ var dragBorder = dragborder ? { onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, dragborder: dragborder, onThMouseMove: onThMouseMove, dragborderKey: dragborderKey } : {};
+
return showHeader ? _react2["default"].createElement(_TableHeader2["default"], _extends({}, drop, dragBorder, {
clsPrefix: clsPrefix,
rows: rows,
@@ -417,7 +424,8 @@ var Table = function (_Component) {
clsPrefix: clsPrefix + '-expanded-row',
indent: 1,
expandable: false,
- store: this.store
+ store: this.store,
+ dragborderKey: this.props.dragborderKey
});
};
@@ -620,10 +628,11 @@ var Table = function (_Component) {
{ className: clsPrefix + '-tbody' },
_this3.getRows(columns, fixed)
)) : null;
+ var _drag_class = _this3.props.dragborder ? "table-drag-bordered" : "";
return _react2["default"].createElement(
'table',
- { className: ' ' + tableClassName + ' table table-bordered ', style: tableStyle },
- _this3.getColGroup(columns, fixed),
+ { className: ' ' + tableClassName + ' table table-bordered ' + _drag_class + ' ', style: tableStyle },
+ _this3.props.dragborder ? null : _this3.getColGroup(columns, fixed),
hasHead ? _this3.getHeader(columns, fixed) : null,
tableBody
);
@@ -645,7 +654,6 @@ var Table = function (_Component) {
renderTable(true, false)
);
}
-
var BodyTable = _react2["default"].createElement(
'div',
{
diff --git a/build/TableHeader.js b/build/TableHeader.js
index d75fef6..0330704 100644
--- a/build/TableHeader.js
+++ b/build/TableHeader.js
@@ -30,8 +30,6 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
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 = {
clsPrefix: _propTypes2["default"].string,
rowStyle: _propTypes2["default"].object,
@@ -74,11 +72,7 @@ var TableHeader = function (_Component) {
if (_this.border) return;
var clsPrefix = _this.props.clsPrefix;
- if (_this.border) {
- var x = event.pageX - _this.drag.initPageLeftX + _this.drag.initLeft;
- } 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) {
@@ -92,11 +86,13 @@ var TableHeader = function (_Component) {
_this.border = true;
var clsPrefix = _this.props.clsPrefix;
- event.target.className = clsPrefix + '-thead-th-drag-gap th-drag-gap-hover';
-
_this.drag.initPageLeftX = event.pageX;
_this.drag.initLeft = (0, _utils.tryParseInt)(event.target.style.left);
_this.drag.x = _this.drag.initLeft;
+ _this.drag.currIndex = _this.props.rows[0].findIndex(function (da) {
+ return da.key == data.key;
+ });
+ _this.drag.width = _this.drag.data[_this.drag.currIndex].width;
};
_this.onMouseUp = function (event, data) {
@@ -104,20 +100,46 @@ var TableHeader = function (_Component) {
var clsPrefix = _this.props.clsPrefix;
event.target.className = clsPrefix + '-thead-th-drag-gap th-drag-gap';
- var endx = event.pageX - _this.dragBorderObj.initPageLeftX;
- // event.target.offsetWidth
+ };
+
+ _this.onThMouseUp = function (event, data) {
+ _this.border = false;
+ };
+
+ _this.onThMouseMove = function (event, data) {
+ if (!_this.border) return;
+ var dragborderKey = _this.props.dragborderKey;
+
+ console.log(data);
+ var x = event.pageX - _this.drag.initPageLeftX + _this.drag.initLeft - 0;
+ //设置hiden的left
+ //"u-table-drag-hide-table"
+ var currentHideDom = document.getElementById("u-table-drag-hide-table-" + dragborderKey).getElementsByTagName("div")[_this.drag.currIndex];
+ currentHideDom.style.left = _this.drag.initPageLeftX + x - 16 + "px";
+ //设置当前的宽度
+ var currentData = _this.drag.data[_this.drag.currIndex];
+ currentData.width = _this.drag.width + x;
+ var currentDom = document.getElementById("u-table-drag-thead-" + _this.theadKey).getElementsByTagName("th")[_this.drag.currIndex];
+ currentDom.style.width = currentData.width + "px";
+ _this.drag.x = x;
};
_this.currentObj = null;
+ _this.state = {
+ border: false
+ //拖拽宽度处理
+ };if (!props.dragborder) return _possibleConstructorReturn(_this);
_this.border = false;
+ _this.theadKey = new Date().getTime();
_this.drag = {
initPageLeftX: 0,
initLeft: 0,
- x: 0
- };
- _this.state = {
- border: false
+ x: 0,
+ width: 0
};
+ var _da = {};
+ _extends(_da, _this.props.rows[0]);
+ _this.drag.data = JSON.parse(JSON.stringify(_this.props.rows[0]));
return _this;
}
@@ -142,9 +164,10 @@ var TableHeader = function (_Component) {
dragborder = _props.dragborder,
onMouseOut = _props.onMouseOut;
+ var attr = dragborder ? { id: 'u-table-drag-thead-' + this.theadKey } : {};
return _react2["default"].createElement(
'thead',
- { className: clsPrefix + '-thead' },
+ _extends({ className: clsPrefix + '-thead' }, attr),
rows.map(function (row, index) {
return _react2["default"].createElement(
'tr',
@@ -173,15 +196,13 @@ var TableHeader = function (_Component) {
return _react2["default"].createElement(
'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)}}
-
- // onMouseUp={(event)=>{onMouseUp(event,da)}}
- // {...da}
+ style: { width: da.width },
+ onMouseMove: function onMouseMove(event) {
+ _this2.onThMouseMove(event, da);
+ },
+ onMouseUp: function onMouseUp(event) {
+ _this2.onThMouseUp(event, da);
+ },
className: da.className + ' ' + clsPrefix + '-thead-th ',
key: i },
da.children,
diff --git a/build/lib/dragColumn.1.js b/build/lib/dragColumn.1.js
deleted file mode 100644
index b4884f7..0000000
--- a/build/lib/dragColumn.1.js
+++ /dev/null
@@ -1,214 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
- value: true
-});
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-exports["default"] = dragColumn;
-
-var _react = require("react");
-
-var _react2 = _interopRequireDefault(_react);
-
-var _beeIcon = require("bee-icon");
-
-var _beeIcon2 = _interopRequireDefault(_beeIcon);
-
-var _beeCheckbox = require("bee-checkbox");
-
-var _beeCheckbox2 = _interopRequireDefault(_beeCheckbox);
-
-var _reactDom = require("react-dom");
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
-var _beePopover = require("bee-popover");
-
-var _beePopover2 = _interopRequireDefault(_beePopover);
-
-var _util = require("./util");
-
-var _resiztable = require("../resiztable");
-
-var _resiztable2 = _interopRequireDefault(_resiztable);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-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 Table from './Table';
-/**
- * 参数: 列拖拽
- * @param {*} Table
- */
-
-function dragColumn(Table) {
- var _class, _temp, _initialiseProps;
-
- return _temp = _class = function (_Component) {
- _inherits(dragColumn, _Component);
-
- function dragColumn(props) {
- _classCallCheck(this, dragColumn);
-
- var _this = _possibleConstructorReturn(this, _Component.call(this, props));
-
- _initialiseProps.call(_this);
-
- var columns = props.columns;
-
- _this.dragBorderObj = { startScreenX: 0, endScreenX: 0 };
- _this.mouse = false;
- _this.setColumOrderByIndex(columns);
- return _this;
- }
-
- dragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
- if (nextProps.columns != this.props.columns) {
- this.setColumOrderByIndex();
- }
- };
-
- dragColumn.prototype.componentDidMount = function componentDidMount() {
- var domElemTableList = document.querySelectorAll('table');
- (0, _resiztable2["default"])(domElemTableList[0], {
- liveDrag: true
- });
- (0, _resiztable2["default"])(domElemTableList[1], {
- liveDrag: false,
- headerOnly: false
- });
- };
-
- dragColumn.prototype.render = function render() {
- var _props = this.props,
- data = _props.data,
- dragborder = _props.dragborder,
- draggable = _props.draggable,
- className = _props.className;
- var columns = this.state.columns;
-
-
- return _react2["default"].createElement(Table, _extends({}, 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
- }));
- };
-
- return dragColumn;
- }(_react.Component), _initialiseProps = function _initialiseProps() {
- var _this2 = this;
-
- this.setColumOrderByIndex = function (columns) {
- var _column = [];
- _extends(_column, columns);
- _column.forEach(function (da, i) {
- da.dragIndex = i;
- da.drgHover = false;
- });
- _this2.state = {
- columns: _column
- };
- };
-
- this.onDragStart = function (event, data) {};
-
- this.onDragOver = function (event, data) {};
-
- this.onDragEnter = function (event, data) {
- var _columns = _this2.state.columns;
-
- var columns = [];
- _extends(columns, _columns);
- columns.forEach(function (da) {
- return da.drgHover = false;
- });
- var current = columns.find(function (da) {
- return da.key == data.key;
- });
- current.drgHover = true;
- _this2.setState({
- columns: columns
- });
- };
-
- this.onDrop = function (event, data) {
- var columns = _this2.state.columns;
-
- var id = event.dataTransfer.getData("Text");
- var objIndex = columns.findIndex(function (_da, i) {
- return _da.key == id;
- });
- var targetIndex = columns.findIndex(function (_da, i) {
- return _da.key == data.key;
- });
-
- columns.forEach(function (da, i) {
- da.drgHover = false;
- if (da.key == id) {
- //obj
- da.dragIndex = targetIndex;
- }
- if (da.key == data.key) {
- //targetObj
- da.dragIndex = objIndex;
- }
- });
- var _columns = (0, _util.sortBy)(columns, function (da) {
- return da.dragIndex;
- });
- _this2.setState({
- columns: _columns
- });
- };
-
- this.onMouseDown = function (event, data) {
- _this2.mouse = true;
- _this2.dragBorderObj.startScreenX = event.screenX;
- };
-
- this.onMouseMove = function (event, data) {
- if (!_this2.mouse) return;
- var endx = event.screenX - _this2.dragBorderObj.startScreenX;
- var _columns = _this2.state.columns;
-
- var columns = [];
- _extends(columns, _columns);
- // let currentIndex = columns.findIndex((_da,i)=>_da.key == data.key);
- // currentIndex = currentIndex==0?currentIndex:(currentIndex-1);
-
- var currObj = columns.find(function (_da, i) {
- return _da.key == data.key;
- });
- if (!currObj) return;
- currObj.width = currObj.width ? currObj.width + endx : endx;
- _this2.setState({
- columns: columns
- });
- };
-
- this.getTarget = function (evt) {
- return evt.target || evt.srcElement;
- };
-
- this.onMouseUp = function (event, data) {
- var endx = event.screenX - _this2.dragBorderObj.startScreenX;
- _this2.mouse = false;
- };
- }, _temp;
-}
-module.exports = exports["default"];
\ No newline at end of file
diff --git a/build/lib/dragColumn.js b/build/lib/dragColumn.js
index edea45e..6592422 100644
--- a/build/lib/dragColumn.js
+++ b/build/lib/dragColumn.js
@@ -16,18 +16,10 @@ var _beeIcon = require("bee-icon");
var _beeIcon2 = _interopRequireDefault(_beeIcon);
-var _beeCheckbox = require("bee-checkbox");
-
-var _beeCheckbox2 = _interopRequireDefault(_beeCheckbox);
-
var _reactDom = require("react-dom");
var _reactDom2 = _interopRequireDefault(_reactDom);
-var _beePopover = require("bee-popover");
-
-var _beePopover2 = _interopRequireDefault(_beePopover);
-
var _util = require("./util");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -40,8 +32,6 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
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 createColResizable from '../resiztable'
-// import Table from './Table';
/**
* 参数: 列拖拽
* @param {*} Table
@@ -62,8 +52,6 @@ function dragColumn(Table) {
var columns = props.columns;
- _this.dragBorderObj = { startScreenX: 0, endScreenX: 0 };
- _this.mouse = false;
_this.setColumOrderByIndex(columns);
return _this;
}
@@ -74,35 +62,23 @@ function dragColumn(Table) {
}
};
- // componentDidMount() {
- // const domElemTableList = document.querySelectorAll('table');
- // createColResizable(domElemTableList[0], {
- // liveDrag: true
- // });
- // createColResizable(domElemTableList[1], {
- // liveDrag: false,
- // headerOnly: false
- // });
- // }
-
dragColumn.prototype.render = function render() {
var _props = this.props,
data = _props.data,
dragborder = _props.dragborder,
draggable = _props.draggable,
className = _props.className;
- var columns = this.state.columns;
+ var key = new Date().getTime();
+ var columns = this.state.columns;
return _react2["default"].createElement(Table, _extends({}, 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
+ dragborder: dragborder,
+ dragborderKey: key
}));
};
@@ -173,39 +149,9 @@ function dragColumn(Table) {
});
};
- this.onMouseDown = function (event, data) {
- _this2.mouse = true;
- _this2.dragBorderObj.startScreenX = event.screenX;
- };
-
- this.onMouseMove = function (event, data) {
- if (!_this2.mouse) return;
- var endx = event.screenX - _this2.dragBorderObj.startScreenX;
- var _columns = _this2.state.columns;
-
- var columns = [];
- _extends(columns, _columns);
- // let currentIndex = columns.findIndex((_da,i)=>_da.key == data.key);
- // currentIndex = currentIndex==0?currentIndex:(currentIndex-1);
-
- var currObj = columns.find(function (_da, i) {
- return _da.key == data.key;
- });
- if (!currObj) return;
- currObj.width = currObj.width ? currObj.width + endx : endx;
- _this2.setState({
- columns: columns
- });
- };
-
this.getTarget = function (evt) {
return evt.target || evt.srcElement;
};
-
- this.onMouseUp = function (event, data) {
- var endx = event.screenX - _this2.dragBorderObj.startScreenX;
- _this2.mouse = false;
- };
}, _temp;
}
module.exports = exports["default"];
\ No newline at end of file
diff --git a/build/resiztable/colResizable.js b/build/resiztable/colResizable.js
deleted file mode 100644
index 7a53ce5..0000000
--- a/build/resiztable/colResizable.js
+++ /dev/null
@@ -1,276 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
- value: true
-});
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _isFunction = require('lodash/isFunction');
-
-var _isFunction2 = _interopRequireDefault(_isFunction);
-
-var _isArray = require('lodash/isArray');
-
-var _isArray2 = _interopRequireDefault(_isArray);
-
-var _utils = require('../utils');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-var ColResizable = function () {
- function ColResizable(domElmTable) {
- var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
- _classCallCheck(this, ColResizable);
-
- this.options = _extends({}, 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();
- }
-
- ColResizable.prototype.init = function init() {
- (0, _utils.addClass)(this.domElmTable, 'table-col-resizer');
-
- this.domElmHandleList = [];
- this.domElmTableTheadThList = [];
- this.tableWidth = this.domElmTable.offsetWidth + 'px';
-
- this.cellSpacing = (0, _utils.tryParseInt)(getComputedStyle(this.domElmTable).getPropertyValue('border-spacing'));
- this.borderLeftWidth = (0, _utils.tryParseInt)(getComputedStyle(this.domElmTable).getPropertyValue('border-left-width'));
-
- this.createGrips();
- };
-
- ColResizable.prototype.createGrips = function createGrips() {
- var _this = this;
-
- var thList = this.domElmTable.querySelectorAll('thead th');
-
- var domElmThList = [];
- this.domElmHandleContainer = this.domElmTable.previousSibling;
- var 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;
-
- var disabledColumns = this.options.disabledColumns;
-
-
- if (!(0, _isArray2["default"])(disabledColumns)) {
- disabledColumns = [];
- }
-
- domElmThList.forEach(function (domElmTh, index) {
- var disabledColumn = disabledColumns.indexOf(index) !== -1;
- var domElmHandle = void 0;
- if (!hasHandleContainer) {
- _this.domElmHandleContainer.insertAdjacentHTML('beforeend', '<div class="drag-handle">\n <i class="icon icon-caret-right"></i>\n <div class="col-resizer"></div>\n <i class="icon icon-caret-left"></i>\n </div>');
- domElmHandle = _this.domElmHandleContainer.lastChild;
- } else {
- domElmHandle = _this.domElmHandleList[index];
- }
-
- if (index === _this.lastThIndex && !hasHandleContainer) {
- (0, _utils.addClass)(domElmHandle, 'last-handle');
- }
-
- if (!disabledColumn && !hasHandleContainer) {
- domElmHandle.addEventListener('mousedown', _this.onGripMouseDown);
- } else if (disabledColumn && !hasHandleContainer) {
- (0, _utils.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();
- };
-
- ColResizable.prototype.syncGrips = function syncGrips() {
- var headerOnly = this.options.headerOnly;
-
- var theadHight = this.domElmTableTheadThList[0].offsetHeight;
-
- var height = void 0;
- if (headerOnly) {
- height = theadHight;
- } else {
- height = this.domElmTable.offsetHeight;
- }
-
- for (var i = 0; i < this.thLength; i += 1) {
- var domElmTh = this.domElmTableTheadThList[i];
-
- var left = void 0;
- if (i === 0) {
- left = domElmTh.offsetWidth + this.cellSpacing / 2;
- } else {
- var handleColLeft = this.domElmHandleList[i - 1].style.left + this.cellSpacing / 2;
- left = (0, _utils.tryParseInt)(handleColLeft) + domElmTh.offsetWidth;
- }
-
- this.domElmHandleList[i].style.left = left + 'px';
- this.domElmHandleList[i].style.height = height + 'px';
- }
-
- var domElmIconList = [];
- var iconHeight = this.domElmHandleContainer.querySelector('.col-resize-container .icon').offsetHeight;
-
- var domElemIcons = this.domElmHandleContainer.querySelectorAll('.col-resize-container .icon');
- Array.prototype.push.apply(domElmIconList, domElemIcons);
-
- domElmIconList.forEach(function (el) {
- var marginTopNumber = (theadHight - iconHeight) / 2;
- el.style.marginTop = (0, _utils.tryParseInt)(marginTopNumber) + 'px';
- });
- };
-
- ColResizable.prototype.onGripMouseDown = function onGripMouseDown(e) {
- e.preventDefault();
- var index = e.currentTarget.index;
-
- var domElmHandle = this.domElmHandleList[index];
-
- (0, _utils.addClass)(domElmHandle, 'active-drag');
-
- domElmHandle.initPageLeftX = e.pageX;
- domElmHandle.initLeft = (0, _utils.tryParseInt)(domElmHandle.style.left);
- domElmHandle.x = domElmHandle.initLeft;
- this.drag = domElmHandle;
-
- document.addEventListener('mousemove', this.onMouseMove);
- document.addEventListener('mouseup', this.onMouseUp);
-
- return false;
- };
-
- ColResizable.prototype.onMouseMove = function onMouseMove(e) {
- e.preventDefault();
- if (!this.drag) {
- return false;
- }
-
- var defaultMinWidth = this.options.defaultMinWidth;
-
- var index = this.drag.index;
-
- var minWidth = defaultMinWidth;
- var pageLeftX = e.pageX;
- var x = pageLeftX - this.drag.initPageLeftX + this.drag.initLeft;
-
- var l = this.cellSpacing * 1.5 + minWidth + this.borderLeftWidth;
- var min = index ? (0, _utils.tryParseInt)(this.domElmHandleList[index - 1].style.left) + this.cellSpacing + minWidth : l;
-
- var max = (0, _utils.tryParseInt)(this.domElmHandleList[index + 1].style.left) - this.cellSpacing - minWidth;
-
- x = Math.max(min, Math.min(max, x));
-
- var inc = x - this.drag.initLeft;
- var domElmThNow = this.domElmTableTheadThList[index];
- var domElmThElmNext = this.domElmTableTheadThList[index + 1];
-
- var w = domElmThNow.w + inc;
- var w2 = domElmThElmNext.w - inc;
- var minWidthOne = (0, _utils.tryParseInt)(this.domElmTableTheadThList[index].getAttribute('data-min-width'));
- var minWidthTwo = (0, _utils.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();
- var onResizing = this.options.onResizing;
-
-
- if ((0, _isFunction2["default"])(onResizing)) {
- onResizing(e);
- }
- }
-
- return false;
- };
-
- ColResizable.prototype.syncCols = function syncCols(i, isOver) {
- var inc = this.drag.x - this.drag.initLeft;
- var domElmThNow = this.domElmTableTheadThList[i];
- var domElmThNext = this.domElmTableTheadThList[i + 1];
-
- var w = domElmThNow.w + inc;
- var w2 = domElmThNext.w - inc;
-
- domElmThNow.style.width = w + 'px';
- domElmThNext.style.width = w2 + 'px';
-
- if (isOver) {
- domElmThNow.w = w;
- domElmThNext.w = w2;
- }
- };
-
- ColResizable.prototype.onMouseUp = function onMouseUp(e) {
- document.removeEventListener('mouseup', this.onMouseUp);
- document.removeEventListener('mousemove', this.onMouseMove);
-
- if (!this.drag) {
- return false;
- }
-
- (0, _utils.removeClass)(this.drag, 'active-drag');
- if (!(this.drag.x - this.drag.initLeft === 0)) {
- var index = this.drag.index;
- this.syncCols(index, true);
- this.syncGrips();
-
- var onResized = this.options.onResized;
-
- if ((0, _isFunction2["default"])(onResized)) {
- onResized(e);
- }
- }
- this.drag = null;
-
- return true;
- };
-
- return ColResizable;
-}();
-
-ColResizable.defaults = {
- liveDrag: true,
- defaultMinWidth: 30,
- headerOnly: true,
- disabledColumns: [],
- onResizing: null,
- onResized: null
-};
-exports["default"] = ColResizable;
-module.exports = exports['default'];
\ No newline at end of file
diff --git a/build/resiztable/index.js b/build/resiztable/index.js
deleted file mode 100644
index bb30597..0000000
--- a/build/resiztable/index.js
+++ /dev/null
@@ -1,28 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
- value: true
-});
-
-var _isElement = require('lodash/isElement');
-
-var _isElement2 = _interopRequireDefault(_isElement);
-
-var _colResizable = require('./colResizable');
-
-var _colResizable2 = _interopRequireDefault(_colResizable);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-// import '../style/index.less';
-
-var createColResizable = function createColResizable(domEleTable, options) {
- if ((0, _isElement2["default"])(domEleTable) && domEleTable.nodeName === 'TABLE') {
- return domEleTable.__resizable || (domEleTable.__resizable = new _colResizable2["default"](domEleTable, options));
- }
-
- return null;
-};
-
-exports["default"] = createColResizable;
-module.exports = exports['default'];
\ No newline at end of file
diff --git a/package.json b/package.json
index 7007c57..e27a575 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "bee-table",
- "version": "1.1.5",
+ "version": "1.1.6",
"description": "Table ui component for react",
"keywords": [
"react",
@@ -19,7 +19,8 @@
"jsx"
],
"transform": {
- "^.+\\.js$": "babel-jest"}
+ "^.+\\.js$": "babel-jest"
+ }
},
"homepage": "https://github.com/tinper-bee/bee-table.git",
"author": "Yonyou FED",