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', '
'); - 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', '
\n \n
\n \n
'); - 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",