拖拽宽度
This commit is contained in:
jonyshi
parent
3ae749f913
commit
d804ddd34b
|
|
@ -165,7 +165,6 @@
|
|||
border-collapse: collapse;
|
||||
text-align: left; }
|
||||
.u-table th {
|
||||
background: #f7f7f7;
|
||||
font-weight: bold;
|
||||
transition: background 0.3s ease; }
|
||||
.u-table th[colspan] {
|
||||
|
|
@ -187,12 +186,15 @@
|
|||
.u-table-scroll {
|
||||
overflow: auto; }
|
||||
.u-table-bordered table {
|
||||
border: 1px solid #e9e9e9; }
|
||||
border: 1px solid #e9e9e9;
|
||||
box-sizing: border-box; }
|
||||
.u-table-bordered th {
|
||||
border-bottom: 1px solid #e9e9e9; }
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
box-sizing: border-box; }
|
||||
.u-table-bordered th,
|
||||
.u-table-bordered td {
|
||||
border-right: 1px solid #e9e9e9; }
|
||||
border-right: 1px solid #e9e9e9;
|
||||
box-sizing: border-box; }
|
||||
.u-table-header {
|
||||
overflow: hidden;
|
||||
background: #f7f7f7; }
|
||||
|
|
@ -300,6 +302,12 @@
|
|||
box-shadow: none; }
|
||||
.u-table-scroll-position-right .u-table-fixed-right {
|
||||
box-shadow: none; }
|
||||
.u-table-thead th {
|
||||
background: #f7f7f7; }
|
||||
.u-table-thead .th-drag {
|
||||
cursor: move; }
|
||||
.u-table-thead .th-drag-hover {
|
||||
background: #ccc; }
|
||||
|
||||
.u-table.bordered table {
|
||||
border-collapse: collapse; }
|
||||
|
|
@ -477,3 +485,75 @@
|
|||
color: #999;
|
||||
-webkit-transition: all 0.3s;
|
||||
transition: all 0.3s; }
|
||||
|
||||
.bee-table-column-filter-cont {
|
||||
position: relative; }
|
||||
|
||||
.bee-table-column-filter {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 3px;
|
||||
width: 30px;
|
||||
height: 30px; }
|
||||
|
||||
.pop .u-modal-dialog {
|
||||
border: 1px solid #ccc;
|
||||
background: #fff; }
|
||||
|
||||
.clear-setting {
|
||||
border-bottom: 1px solid #ccc;
|
||||
cursor: pointer; }
|
||||
|
||||
.pop-cont {
|
||||
margin: 10px;
|
||||
margin-top: 0px; }
|
||||
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
line-height: 30px;
|
||||
cursor: pointer; }
|
||||
|
||||
.item > span {
|
||||
margin-left: 5px;
|
||||
width: 100px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; }
|
||||
|
||||
.col-resize-container {
|
||||
height: 0px;
|
||||
position: relative; }
|
||||
.col-resize-container + .table-col-resizer:first-of-type {
|
||||
table-layout: fixed; }
|
||||
.col-resize-container .active-drag .icon {
|
||||
visibility: visible; }
|
||||
.col-resize-container .last-handle {
|
||||
display: none; }
|
||||
.col-resize-container .drag-handle {
|
||||
margin-left: -5px;
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
width: 10px;
|
||||
cursor: col-resize; }
|
||||
.col-resize-container .drag-handle .icon {
|
||||
color: #40b0dc;
|
||||
top: -1px;
|
||||
position: absolute;
|
||||
visibility: hidden; }
|
||||
.col-resize-container .drag-handle .icon:first-child {
|
||||
left: -2px; }
|
||||
.col-resize-container .drag-handle .icon:last-child {
|
||||
left: 6px; }
|
||||
.col-resize-container .drag-handle:hover .icon {
|
||||
visibility: visible; }
|
||||
.col-resize-container .drag-handle:hover .col-resizer {
|
||||
border: 1px solid; }
|
||||
.col-resize-container .drag-handle.disabled-drag {
|
||||
cursor: default;
|
||||
display: none; }
|
||||
.col-resize-container .drag-handle .col-resizer {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 3px; }
|
||||
|
|
|
|||
|
|
@ -86,7 +86,9 @@ var propTypes = {
|
|||
scroll: _propTypes2["default"].object,
|
||||
rowRef: _propTypes2["default"].func,
|
||||
getBodyWrapper: _propTypes2["default"].func,
|
||||
children: _propTypes2["default"].node
|
||||
children: _propTypes2["default"].node,
|
||||
|
||||
draggable: _propTypes2["default"].bool
|
||||
};
|
||||
|
||||
var defaultProps = {
|
||||
|
|
@ -278,10 +280,18 @@ var Table = function (_Component) {
|
|||
var _props = this.props,
|
||||
showHeader = _props.showHeader,
|
||||
expandIconAsCell = _props.expandIconAsCell,
|
||||
clsPrefix = _props.clsPrefix;
|
||||
clsPrefix = _props.clsPrefix,
|
||||
onDragStart = _props.onDragStart,
|
||||
onDragEnter = _props.onDragEnter,
|
||||
onDragOver = _props.onDragOver,
|
||||
onDrop = _props.onDrop,
|
||||
draggable = _props.draggable,
|
||||
onMouseDown = _props.onMouseDown,
|
||||
onMouseMove = _props.onMouseMove,
|
||||
onMouseUp = _props.onMouseUp,
|
||||
dragborder = _props.dragborder;
|
||||
|
||||
var rows = this.getHeaderRows(columns);
|
||||
|
||||
if (expandIconAsCell && fixed !== 'right') {
|
||||
rows[0].unshift({
|
||||
key: 'u-table-expandIconAsCell',
|
||||
|
|
@ -292,12 +302,13 @@ var Table = function (_Component) {
|
|||
}
|
||||
|
||||
var trStyle = fixed ? this.getHeaderRowStyle(columns, rows) : null;
|
||||
|
||||
return showHeader ? _react2["default"].createElement(_TableHeader2["default"], {
|
||||
var drop = draggable ? { onDragStart: onDragStart, onDragOver: onDragOver, onDrop: onDrop, onDragEnter: onDragEnter, draggable: draggable } : {};
|
||||
var dragBorder = dragborder ? { onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, dragborder: dragborder } : {};
|
||||
return showHeader ? _react2["default"].createElement(_TableHeader2["default"], _extends({}, drop, dragBorder, {
|
||||
clsPrefix: clsPrefix,
|
||||
rows: rows,
|
||||
rowStyle: trStyle
|
||||
}) : null;
|
||||
})) : null;
|
||||
};
|
||||
|
||||
Table.prototype.getHeaderRows = function getHeaderRows(columns) {
|
||||
|
|
@ -318,7 +329,9 @@ var Table = function (_Component) {
|
|||
var cell = {
|
||||
key: column.key,
|
||||
className: column.className || '',
|
||||
children: column.title
|
||||
children: column.title,
|
||||
drgHover: column.drgHover,
|
||||
width: column.width
|
||||
};
|
||||
if (column.children) {
|
||||
_this2.getHeaderRows(column.children, currentRow + 1, rows);
|
||||
|
|
@ -592,7 +605,7 @@ var Table = function (_Component) {
|
|||
)) : null;
|
||||
return _react2["default"].createElement(
|
||||
'table',
|
||||
{ className: tableClassName, style: tableStyle },
|
||||
{ className: ' ' + tableClassName + ' table table-bordered ', style: tableStyle },
|
||||
_this3.getColGroup(columns, fixed),
|
||||
hasHead ? _this3.getHeader(columns, fixed) : null,
|
||||
tableBody
|
||||
|
|
|
|||
|
|
@ -40,7 +40,34 @@ var TableHeader = function (_Component) {
|
|||
function TableHeader(props) {
|
||||
_classCallCheck(this, TableHeader);
|
||||
|
||||
return _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
|
||||
_this.onDragStart = function (event, data) {
|
||||
event.dataTransfer.effectAllowed = "move";
|
||||
event.dataTransfer.setData("Text", data.key);
|
||||
_this.currentObj = data;
|
||||
event.dataTransfer.setDragImage(event.target, 0, 0);
|
||||
_this.props.onDragStart(event, data);
|
||||
};
|
||||
|
||||
_this.onDragOver = function (event, data) {
|
||||
if (_this.currentObj.key == data.key) return;
|
||||
event.preventDefault();
|
||||
_this.props.onDragOver(event, data);
|
||||
};
|
||||
|
||||
_this.onDragEnter = function (event, data) {
|
||||
if (_this.currentObj.key == data.key) return;
|
||||
_this.props.onDragEnter(event, data);
|
||||
};
|
||||
|
||||
_this.onDrop = function (event, data) {
|
||||
if (_this.currentObj.key == data.key) return;
|
||||
_this.props.onDrop(event, data);
|
||||
};
|
||||
|
||||
_this.currentObj = null;
|
||||
return _this;
|
||||
}
|
||||
|
||||
TableHeader.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
|
||||
|
|
@ -48,10 +75,20 @@ var TableHeader = function (_Component) {
|
|||
};
|
||||
|
||||
TableHeader.prototype.render = function render() {
|
||||
var _this2 = this;
|
||||
|
||||
var _props = this.props,
|
||||
clsPrefix = _props.clsPrefix,
|
||||
rowStyle = _props.rowStyle,
|
||||
rows = _props.rows;
|
||||
onDragStart = _props.onDragStart,
|
||||
onDragOver = _props.onDragOver,
|
||||
onDrop = _props.onDrop,
|
||||
draggable = _props.draggable,
|
||||
rows = _props.rows,
|
||||
onMouseDown = _props.onMouseDown,
|
||||
onMouseMove = _props.onMouseMove,
|
||||
onMouseUp = _props.onMouseUp,
|
||||
dragborder = _props.dragborder;
|
||||
|
||||
return _react2["default"].createElement(
|
||||
'thead',
|
||||
|
|
@ -60,8 +97,33 @@ var TableHeader = function (_Component) {
|
|||
return _react2["default"].createElement(
|
||||
'tr',
|
||||
{ key: index, style: rowStyle },
|
||||
row.map(function (cellProps, i) {
|
||||
return _react2["default"].createElement('th', _extends({}, cellProps, { key: i }));
|
||||
row.map(function (da, i) {
|
||||
var thHover = da.drgHover ? ' ' + clsPrefix + '-thead th-drag-hover' : "";
|
||||
if (draggable) {
|
||||
return _react2["default"].createElement('th', {
|
||||
onDragStart: function onDragStart(event) {
|
||||
_this2.onDragStart(event, da);
|
||||
},
|
||||
onDragOver: function onDragOver(event) {
|
||||
_this2.onDragOver(event, da);
|
||||
},
|
||||
onDrop: function onDrop(event) {
|
||||
_this2.onDrop(event, da);
|
||||
},
|
||||
onDragEnter: function onDragEnter(event) {
|
||||
_this2.onDragEnter(event, da);
|
||||
},
|
||||
draggable: draggable,
|
||||
className: da.className + ' ' + clsPrefix + '-thead th-drag ' + thHover,
|
||||
key: i });
|
||||
} else if (dragborder) {
|
||||
console.log(da);
|
||||
return _react2["default"].createElement('th', _extends({}, da, {
|
||||
className: da.className + ' ' + clsPrefix + '-thead th-drag-gap ' + thHover + ' ',
|
||||
key: i }));
|
||||
} else {
|
||||
return _react2["default"].createElement('th', _extends({}, da, { key: i }));
|
||||
}
|
||||
})
|
||||
);
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,145 @@
|
|||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _react = require("react");
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
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 Table = function (_React$PureComponent) {
|
||||
_inherits(Table, _React$PureComponent);
|
||||
|
||||
function Table() {
|
||||
_classCallCheck(this, Table);
|
||||
|
||||
return _possibleConstructorReturn(this, _React$PureComponent.apply(this, arguments));
|
||||
}
|
||||
|
||||
Table.prototype.render = function render() {
|
||||
return _react2["default"].createElement(
|
||||
"table",
|
||||
{ className: "table table-bordered" },
|
||||
_react2["default"].createElement(
|
||||
"thead",
|
||||
null,
|
||||
_react2["default"].createElement(
|
||||
"tr",
|
||||
null,
|
||||
_react2["default"].createElement(
|
||||
"th",
|
||||
null,
|
||||
"#"
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
"th",
|
||||
null,
|
||||
"First Name"
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
"th",
|
||||
null,
|
||||
"Last Name"
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
"th",
|
||||
null,
|
||||
"Username"
|
||||
)
|
||||
)
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
"tbody",
|
||||
null,
|
||||
_react2["default"].createElement(
|
||||
"tr",
|
||||
null,
|
||||
_react2["default"].createElement(
|
||||
"th",
|
||||
{ scope: "row" },
|
||||
"1"
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
"td",
|
||||
null,
|
||||
"Mark"
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
"td",
|
||||
null,
|
||||
"Otto"
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
"td",
|
||||
null,
|
||||
"@mdo"
|
||||
)
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
"tr",
|
||||
null,
|
||||
_react2["default"].createElement(
|
||||
"th",
|
||||
{ scope: "row" },
|
||||
"2"
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
"td",
|
||||
null,
|
||||
"Jacob"
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
"td",
|
||||
null,
|
||||
"Thornton"
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
"td",
|
||||
null,
|
||||
"@fat"
|
||||
)
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
"tr",
|
||||
null,
|
||||
_react2["default"].createElement(
|
||||
"th",
|
||||
{ scope: "row" },
|
||||
"3"
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
"td",
|
||||
null,
|
||||
"Larry"
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
"td",
|
||||
null,
|
||||
"the Bird"
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
"td",
|
||||
null,
|
||||
"@twitter"
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
return Table;
|
||||
}(_react2["default"].PureComponent);
|
||||
|
||||
exports["default"] = Table;
|
||||
module.exports = exports["default"];
|
||||
|
|
@ -0,0 +1,217 @@
|
|||
"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;
|
||||
console.log(event.screenX);
|
||||
_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;
|
||||
console.log("currObj.width--", currObj.width);
|
||||
_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;
|
||||
console.log("onmouseup-", endx);
|
||||
_this2.mouse = false;
|
||||
};
|
||||
}, _temp;
|
||||
}
|
||||
module.exports = exports["default"];
|
||||
|
|
@ -0,0 +1,189 @@
|
|||
"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"] = filterColumn;
|
||||
|
||||
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);
|
||||
|
||||
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); }
|
||||
|
||||
/**
|
||||
* 参数: 过滤表头
|
||||
* @param {*} Table
|
||||
*/
|
||||
|
||||
function filterColumn(Table) {
|
||||
var _class, _temp, _initialiseProps;
|
||||
|
||||
return _temp = _class = function (_Component) {
|
||||
_inherits(filterColumn, _Component);
|
||||
|
||||
function filterColumn(props) {
|
||||
_classCallCheck(this, filterColumn);
|
||||
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
|
||||
_initialiseProps.call(_this);
|
||||
|
||||
var columns = props.columns;
|
||||
|
||||
var _column = [];
|
||||
_extends(_column, columns);
|
||||
_column.forEach(function (da) {
|
||||
da.checked = true;
|
||||
da.disable = true;
|
||||
});
|
||||
_this.state = {
|
||||
columns: _column,
|
||||
showModal: false,
|
||||
width: props.width ? props.width : 150,
|
||||
screenX: 0,
|
||||
screenY: 0
|
||||
};
|
||||
return _this;
|
||||
}
|
||||
|
||||
filterColumn.prototype.render = function render() {
|
||||
var data = this.props.data;
|
||||
var _state = this.state,
|
||||
columns = _state.columns,
|
||||
showModal = _state.showModal,
|
||||
width = _state.width,
|
||||
screenX = _state.screenX,
|
||||
screenY = _state.screenY;
|
||||
|
||||
var _columns = [];
|
||||
columns.forEach(function (da) {
|
||||
if (da.disable) {
|
||||
_columns.push(da);
|
||||
}
|
||||
});
|
||||
|
||||
var content = _react2["default"].createElement(
|
||||
"div",
|
||||
{ className: "pop-cont" },
|
||||
_react2["default"].createElement(
|
||||
"span",
|
||||
{ className: "clear-setting", onClick: this.clear },
|
||||
"\u6E05\u9664\u8BBE\u7F6E"
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
"div",
|
||||
null,
|
||||
this.getCloumItem()
|
||||
)
|
||||
);
|
||||
|
||||
return _react2["default"].createElement(
|
||||
"div",
|
||||
{ className: "bee-table-column-filter-cont" },
|
||||
_react2["default"].createElement(Table, _extends({}, this.props, { columns: _columns, data: data })),
|
||||
_react2["default"].createElement(
|
||||
_beePopover2["default"],
|
||||
{
|
||||
placement: "leftTop",
|
||||
content: content, id: "aa",
|
||||
show: showModal },
|
||||
_react2["default"].createElement(
|
||||
"div",
|
||||
{ className: "bee-table-column-filter" },
|
||||
_react2["default"].createElement(_beeIcon2["default"], { type: "uf-navmenu", onClick: this.openCloumList })
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
return filterColumn;
|
||||
}(_react.Component), _initialiseProps = function _initialiseProps() {
|
||||
var _this2 = this;
|
||||
|
||||
this.getShowModal = function (event) {
|
||||
var showModal = _this2.state.showModal;
|
||||
|
||||
if (showModal) {
|
||||
_this2.setState({
|
||||
showModal: false
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
this.checkedColumItemClick = function (da) {
|
||||
var columns = _this2.state.columns;
|
||||
|
||||
da.checked = da.checked ? false : true;
|
||||
da.disable = da.checked ? true : false;
|
||||
_this2.setState(_extends({}, _this2.state));
|
||||
};
|
||||
|
||||
this.openCloumList = function (ev) {
|
||||
var oEvent = ev || event;
|
||||
_this2.setState({
|
||||
screenX: oEvent.clientX,
|
||||
screenY: oEvent.clientY,
|
||||
showModal: true
|
||||
});
|
||||
};
|
||||
|
||||
this.getCloumItem = function () {
|
||||
var columns = _this2.state.columns;
|
||||
|
||||
return columns.map(function (da, i) {
|
||||
return _react2["default"].createElement(
|
||||
"div",
|
||||
{ key: da.key + "_" + i, className: "item", onClick: function onClick() {
|
||||
_this2.checkedColumItemClick(da);
|
||||
} },
|
||||
_react2["default"].createElement(_beeCheckbox2["default"], { id: da.key, checked: da.checked }),
|
||||
_react2["default"].createElement(
|
||||
"span",
|
||||
null,
|
||||
da.title
|
||||
)
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
this.clear = function () {
|
||||
var columns = _this2.state.columns;
|
||||
// let _chek = columns[0].checked?false:true;
|
||||
|
||||
columns.forEach(function (da) {
|
||||
da.checked = true;
|
||||
da.disable = true;
|
||||
});
|
||||
_this2.setState(_extends({}, _this2.state));
|
||||
};
|
||||
}, _temp;
|
||||
}
|
||||
module.exports = exports["default"];
|
||||
|
|
@ -1 +1,41 @@
|
|||
"use strict";
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.sortBy = sortBy;
|
||||
/*
|
||||
* 快速排序，按某个属性，或按“获取排序依据的函数”，来排序.
|
||||
* @method soryBy
|
||||
* @static
|
||||
* @param {array} arr 待处理数组
|
||||
* @param {string|function} prop 排序依据属性，获取
|
||||
* @param {boolean} desc 降序
|
||||
* @return {array} 返回排序后的新数组
|
||||
*/
|
||||
|
||||
function sortBy(arr, prop, desc) {
|
||||
var props = [],
|
||||
ret = [],
|
||||
i = 0,
|
||||
len = arr.length;
|
||||
if (typeof prop == 'string') {
|
||||
for (; i < len; i++) {
|
||||
var oI = arr[i];
|
||||
(props[i] = new String(oI && oI[prop] || ''))._obj = oI;
|
||||
}
|
||||
} else if (typeof prop == 'function') {
|
||||
for (; i < len; i++) {
|
||||
var _oI = arr[i];
|
||||
(props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
|
||||
}
|
||||
} else {
|
||||
throw '参数类型错误';
|
||||
}
|
||||
props.sort();
|
||||
for (i = 0; i < len; i++) {
|
||||
ret[i] = props[i]._obj;
|
||||
}
|
||||
if (desc) ret.reverse();
|
||||
return ret;
|
||||
};
|
||||
|
|
@ -0,0 +1,276 @@
|
|||
'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'];
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
'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'];
|
||||
|
|
@ -3,14 +3,21 @@
|
|||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.tryParseInt = undefined;
|
||||
exports.measureScrollbar = measureScrollbar;
|
||||
exports.debounce = debounce;
|
||||
exports.warningOnce = warningOnce;
|
||||
exports.addClass = addClass;
|
||||
exports.removeClass = removeClass;
|
||||
|
||||
var _warning = require('warning');
|
||||
|
||||
var _warning2 = _interopRequireDefault(_warning);
|
||||
|
||||
var _parseInt = require('lodash/parseInt');
|
||||
|
||||
var _parseInt2 = _interopRequireDefault(_parseInt);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
var scrollbarWidth = void 0;
|
||||
|
|
@ -74,4 +81,43 @@ function warningOnce(condition, format, args) {
|
|||
(0, _warning2["default"])(condition, format, args);
|
||||
warned[format] = true;
|
||||
}
|
||||
}
|
||||
|
||||
var tryParseInt = exports.tryParseInt = function tryParseInt(value) {
|
||||
var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
||||
|
||||
var resultValue = (0, _parseInt2["default"])(value);
|
||||
|
||||
if (isNaN(resultValue)) {
|
||||
return defaultValue;
|
||||
}
|
||||
return resultValue;
|
||||
};
|
||||
|
||||
function addClass(elm, className) {
|
||||
if (!className) return;
|
||||
|
||||
var els = Array.isArray(elm) ? elm : [elm];
|
||||
|
||||
els.forEach(function (el) {
|
||||
if (el.classList) {
|
||||
el.classList.add(className.split(' '));
|
||||
} else {
|
||||
el.className += ' ' + className;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function removeClass(elm, className) {
|
||||
if (!className) return;
|
||||
|
||||
var els = Array.isArray(elm) ? elm : [elm];
|
||||
|
||||
els.forEach(function (el) {
|
||||
if (el.classList) {
|
||||
el.classList.remove(className.split(' '));
|
||||
} else {
|
||||
el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -6,9 +6,10 @@
|
|||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
import dragColumn from '../../src/lib/dragColumn';
|
||||
|
||||
import Icon from "bee-icon";
|
||||
|
||||
const columns22 = [
|
||||
const columns23 = [
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
|
|
@ -19,7 +20,7 @@ const columns22 = [
|
|||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 100
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
|
|
@ -32,11 +33,12 @@ const columns22 = [
|
|||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d"
|
||||
key: "d",
|
||||
width: 200,
|
||||
}
|
||||
];
|
||||
|
||||
const data22 = [
|
||||
const data23 = [
|
||||
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
|
||||
|
|
@ -44,20 +46,23 @@ const data22 = [
|
|||
|
||||
const DragColumnTable = dragColumn(Table);
|
||||
|
||||
const defaultProps22 = {
|
||||
const defaultProps23 = {
|
||||
prefixCls: "bee-table"
|
||||
};
|
||||
|
||||
class Demo22 extends Component {
|
||||
class Demo23 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
return <DragColumnTable columns={columns22} data={data22} />;
|
||||
return <DragColumnTable columns={columns23} data={data23} bordered
|
||||
draggable={false}
|
||||
dragborder={true}
|
||||
/>;
|
||||
}
|
||||
}
|
||||
Demo22.defaultProps = defaultProps22;
|
||||
Demo23.defaultProps = defaultProps23;
|
||||
|
||||
|
||||
export default Demo22;
|
||||
export default Demo23;
|
||||
|
|
@ -11,7 +11,7 @@ const CARET = <i className="uf uf-arrow-down"></i>;
|
|||
const CARETUP = <i className="uf uf-arrow-up"></i>;
|
||||
|
||||
|
||||
var Demo22 = require("./demolist/Demo22");var DemoArray = [{"example":<Demo22 />,"title":" 列的拖拽","code":"/**\n*\n* @title 列的拖拽\n* @description 点击列的表头，进行左右拖拽\n*/\nimport React, { Component } from 'react';\nimport { Table, Icon } from 'tinper-bee';\nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\nimport sum from \"tinper-bee/lib/sum\";;\n\nconst columns22 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst data22 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(sum(Table));\n\nconst defaultProps22 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo22 extends Component {\n constructor(props) {\n super(props);\n }\n \n render() {\n \n return <DragColumnTable columns={columns22} data={data22} />;\n }\n}\nDemo22.defaultProps = defaultProps22;\n\n\n","desc":" 点击列的表头，进行左右拖拽"}]
|
||||
var Demo23 = require("./demolist/Demo23");var DemoArray = [{"example":<Demo23 />,"title":" 列的拖拽","code":"/**\n*\n* @title 列的拖拽\n* @description 点击列的表头，进行左右拖拽\n*/\nimport React, { Component } from 'react';\nimport { Table, Icon } from 'tinper-bee'; \nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\n\n\nconst columns23 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 200\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 200,\n }\n];\n\nconst data23 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(Table);\n\nconst defaultProps23 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo23 extends Component {\n constructor(props) {\n super(props); \n }\n \n render() {\n return <DragColumnTable columns={columns23} data={data23} bordered\n draggable={false}\n dragborder={true}\n />;\n }\n}\nDemo23.defaultProps = defaultProps23;\n\n\n","desc":" 点击列的表头，进行左右拖拽"}]
|
||||
|
||||
|
||||
class Demo extends Component {
|
||||
|
|
|
|||
|
|
@ -7858,12 +7858,21 @@ ul {
|
|||
position: relative;
|
||||
line-height: 1.5;
|
||||
overflow: hidden; }
|
||||
.u-table-body {
|
||||
position: relative; }
|
||||
.u-table-hiden-drag {
|
||||
position: relative; }
|
||||
.u-table-hiden-drag-li {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 10px;
|
||||
border: 1px solid; }
|
||||
.u-table table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: left; }
|
||||
.u-table th {
|
||||
background: #f7f7f7;
|
||||
font-weight: bold;
|
||||
transition: background 0.3s ease; }
|
||||
.u-table th[colspan] {
|
||||
|
|
@ -7885,12 +7894,16 @@ ul {
|
|||
.u-table-scroll {
|
||||
overflow: auto; }
|
||||
.u-table-bordered table {
|
||||
border: 1px solid #e9e9e9; }
|
||||
border: 1px solid #e9e9e9;
|
||||
box-sizing: border-box;
|
||||
table-layout: fixed; }
|
||||
.u-table-bordered th {
|
||||
border-bottom: 1px solid #e9e9e9; }
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
box-sizing: border-box; }
|
||||
.u-table-bordered th,
|
||||
.u-table-bordered td {
|
||||
border-right: 1px solid #e9e9e9; }
|
||||
border-right: 1px solid #e9e9e9;
|
||||
box-sizing: border-box; }
|
||||
.u-table-header {
|
||||
overflow: hidden;
|
||||
background: #f7f7f7; }
|
||||
|
|
@ -8001,6 +8014,29 @@ ul {
|
|||
box-shadow: none; }
|
||||
.u-table-scroll-position-right .u-table-fixed-right {
|
||||
box-shadow: none; }
|
||||
.u-table-thead th {
|
||||
background: #f7f7f7; }
|
||||
.u-table-thead .th-drag {
|
||||
cursor: move; }
|
||||
.u-table-thead .th-drag-hover {
|
||||
background: #ccc; }
|
||||
.u-table-thead-th {
|
||||
position: relative; }
|
||||
.u-table-thead-th-drag-gap {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0;
|
||||
background: transparent;
|
||||
width: 2px;
|
||||
cursor: col-resize;
|
||||
box-sizing: border-box; }
|
||||
.u-table-thead-th .th-drag-gap {
|
||||
background: transparent; }
|
||||
.u-table-thead-th .th-drag-gap-hover {
|
||||
background: red; }
|
||||
.u-table-thead-th:last-child-drag-gap {
|
||||
border: none; }
|
||||
|
||||
.u-table.bordered table {
|
||||
border-collapse: collapse; }
|
||||
|
|
@ -8209,6 +8245,44 @@ ul {
|
|||
text-overflow: ellipsis;
|
||||
white-space: nowrap; }
|
||||
|
||||
.col-resize-container {
|
||||
height: 0px;
|
||||
position: relative; }
|
||||
.col-resize-container + .table-col-resizer:first-of-type {
|
||||
table-layout: fixed; }
|
||||
.col-resize-container .active-drag .icon {
|
||||
visibility: visible; }
|
||||
.col-resize-container .last-handle {
|
||||
display: none; }
|
||||
.col-resize-container .drag-handle {
|
||||
margin-left: -5px;
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
width: 10px;
|
||||
cursor: col-resize; }
|
||||
.col-resize-container .drag-handle .icon {
|
||||
color: #40b0dc;
|
||||
top: -1px;
|
||||
position: absolute;
|
||||
visibility: hidden; }
|
||||
.col-resize-container .drag-handle .icon:first-child {
|
||||
left: -2px; }
|
||||
.col-resize-container .drag-handle .icon:last-child {
|
||||
left: 6px; }
|
||||
.col-resize-container .drag-handle:hover .icon {
|
||||
visibility: visible; }
|
||||
.col-resize-container .drag-handle:hover .col-resizer {
|
||||
border: 1px solid; }
|
||||
.col-resize-container .drag-handle.disabled-drag {
|
||||
cursor: default;
|
||||
display: none; }
|
||||
.col-resize-container .drag-handle .col-resizer {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 3px; }
|
||||
|
||||
/* FormGroup */
|
||||
/* Navlayout */
|
||||
/* FormGroup */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -4,7 +4,8 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<title>tinper-bee demo</title>
|
||||
<link rel="stylesheet" href="./dist/demo.css">
|
||||
<link rel="stylesheet" href="./demo/atom-one-dark.css">
|
||||
<link rel="stylesheet" href="./demo/atom-one-dark.css">
|
||||
<!-- <link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"> -->
|
||||
</head>
|
||||
<body style="background: #eceff1">
|
||||
<div id="tinperBeeDemo"></div>
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@
|
|||
"bee-select": "^1.0.8",
|
||||
"classnames": "^2.2.5",
|
||||
"object-path": "^0.11.3",
|
||||
"re-resizable": "^4.4.8",
|
||||
"react-dnd": "^2.6.0",
|
||||
"shallowequal": "^1.0.2",
|
||||
"tinper-bee-core": "latest",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,73 @@
|
|||
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';
|
||||
|
||||
|
||||
class ResizableTh extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
width:0
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
componentWillReceiveProps(nextProps){
|
||||
if(nextProps.columns != this.props.columns){
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onMouseDown=(event,data)=>{
|
||||
this.mouse = true;
|
||||
console.log(event.screenX);
|
||||
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;
|
||||
console.log("currObj.width--",currObj.width);
|
||||
this.setState({
|
||||
columns
|
||||
});
|
||||
}
|
||||
|
||||
getTarget=(evt)=>{
|
||||
return evt.target || evt.srcElement;
|
||||
}
|
||||
|
||||
onMouseUp=(event,data)=>{
|
||||
let endx = (event.screenX-this.dragBorderObj.startScreenX);
|
||||
console.log("onmouseup-",endx);
|
||||
this.mouse = false;
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
const {className} = this.props;
|
||||
|
||||
return (<th {...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}
|
||||
/>)
|
||||
}
|
||||
}
|
||||
26
src/Table.js
26
src/Table.js
|
|
@ -148,7 +148,6 @@ class Table extends Component{
|
|||
expandedRowKeys: nextProps.expandedRowKeys,
|
||||
});
|
||||
}
|
||||
debugger;
|
||||
if (nextProps.columns && nextProps.columns !== this.props.columns) {
|
||||
this.columnManager.reset(nextProps.columns);
|
||||
} else if (nextProps.children !== this.props.children) {
|
||||
|
|
@ -221,7 +220,8 @@ class Table extends Component{
|
|||
}
|
||||
|
||||
getHeader(columns, fixed) {
|
||||
const { showHeader, expandIconAsCell, clsPrefix ,onDragStart,onDragEnter,onDragOver,onDrop,draggable} = this.props;
|
||||
const { showHeader, expandIconAsCell, clsPrefix ,onDragStart,onDragEnter,onDragOver,onDrop,draggable,
|
||||
onMouseDown,onMouseMove,onMouseUp,dragborder} = this.props;
|
||||
const rows = this.getHeaderRows(columns);
|
||||
if (expandIconAsCell && fixed !== 'right') {
|
||||
rows[0].unshift({
|
||||
|
|
@ -234,9 +234,11 @@ class Table extends Component{
|
|||
|
||||
const trStyle = fixed ? this.getHeaderRowStyle(columns, rows) : null;
|
||||
let drop = draggable?{onDragStart,onDragOver,onDrop,onDragEnter,draggable}:{};
|
||||
let dragBorder = dragborder?{onMouseDown,onMouseMove,onMouseUp,dragborder}:{};
|
||||
return showHeader ? (
|
||||
<TableHeader
|
||||
{...drop}
|
||||
{...dragBorder}
|
||||
clsPrefix={clsPrefix}
|
||||
rows={rows}
|
||||
rowStyle={trStyle}
|
||||
|
|
@ -258,7 +260,8 @@ class Table extends Component{
|
|||
key: column.key,
|
||||
className: column.className || '',
|
||||
children: column.title,
|
||||
drgHover: column.drgHover
|
||||
drgHover: column.drgHover,
|
||||
width:column.width,
|
||||
};
|
||||
if (column.children) {
|
||||
this.getHeaderRows(column.children, currentRow + 1, rows);
|
||||
|
|
@ -453,6 +456,20 @@ class Table extends Component{
|
|||
return <colgroup>{cols}</colgroup>;
|
||||
}
|
||||
|
||||
renderDragHideTable=()=>{
|
||||
const {columns,} = this.props;
|
||||
debugger;
|
||||
let sum = 0;
|
||||
return(<div className={`${this.props.clsPrefix}-hiden-drag`} >
|
||||
{
|
||||
columns.map((da,i)=>{
|
||||
sum += da.width?da.width:0;
|
||||
return(<div className={`${this.props.clsPrefix}-hiden-drag-li`} key={da+"_hiden_"+i} style={{left:sum+"px"}}></div>);
|
||||
})
|
||||
}
|
||||
</div>);
|
||||
}
|
||||
|
||||
getLeftFixedTable() {
|
||||
return this.getTable({
|
||||
columns: this.columnManager.leftColumns(),
|
||||
|
|
@ -517,7 +534,7 @@ class Table extends Component{
|
|||
</tbody>
|
||||
) : null;
|
||||
return (
|
||||
<table className={tableClassName} style={tableStyle}>
|
||||
<table className={` ${tableClassName} table table-bordered `} style={tableStyle}>
|
||||
{this.getColGroup(columns, fixed)}
|
||||
{hasHead ? this.getHeader(columns, fixed) : null}
|
||||
{tableBody}
|
||||
|
|
@ -551,6 +568,7 @@ class Table extends Component{
|
|||
onTouchStart={this.detectScrollTarget}
|
||||
onScroll={this.handleBodyScroll}
|
||||
>
|
||||
{this.renderDragHideTable()}
|
||||
{renderTable(!useFixedHeader)}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
103
src/Table.scss
103
src/Table.scss
|
|
@ -23,6 +23,18 @@ $table-move-in-color: $bg-color-base;
|
|||
overflow: hidden;
|
||||
&-body{
|
||||
// overflow: hidden!important;
|
||||
position: relative;
|
||||
}
|
||||
&-hiden-drag{
|
||||
position: relative;
|
||||
|
||||
&-li{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 10px;
|
||||
border: 1px solid;
|
||||
}
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
|
|
@ -70,6 +82,7 @@ $table-move-in-color: $bg-color-base;
|
|||
table {
|
||||
border: 1px solid #e9e9e9;
|
||||
box-sizing: border-box;
|
||||
table-layout: fixed;
|
||||
}
|
||||
th {
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
|
|
@ -259,11 +272,35 @@ $table-move-in-color: $bg-color-base;
|
|||
}
|
||||
.th-drag{
|
||||
cursor: move;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.th-drag-hover{
|
||||
background: #ccc;
|
||||
}
|
||||
&-th{
|
||||
position: relative;
|
||||
|
||||
&-drag-gap{
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0;
|
||||
background:transparent;
|
||||
width: 2px;
|
||||
cursor: col-resize;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.th-drag-gap{
|
||||
background:transparent;
|
||||
}
|
||||
.th-drag-gap-hover{
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
&-th:last-child {
|
||||
&-drag-gap{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -512,3 +549,67 @@ $table-move-in-color: $bg-color-base;
|
|||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.col-resize-container {
|
||||
height: 0px;
|
||||
position: relative;
|
||||
|
||||
& + .table-col-resizer:first-of-type {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.active-drag .icon{
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.last-handle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
margin-left: -5px;
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
width: 10px;
|
||||
cursor: col-resize;
|
||||
|
||||
.icon {
|
||||
color: #40b0dc;
|
||||
top: -1px;
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
|
||||
&:first-child {
|
||||
left: -2px
|
||||
}
|
||||
&:last-child {
|
||||
left: 6px
|
||||
}
|
||||
}
|
||||
|
||||
&:hover{
|
||||
.icon{
|
||||
visibility: visible;
|
||||
}
|
||||
.col-resizer {
|
||||
border: 1px solid;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled-drag {
|
||||
cursor: default;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.col-resizer {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import shallowequal from 'shallowequal';
|
||||
import {tryParseInt} from './utils';
|
||||
// import ResizableTh from './ResizableTh';
|
||||
|
||||
const propTypes = {
|
||||
clsPrefix: PropTypes.string,
|
||||
|
|
@ -13,6 +15,15 @@ class TableHeader extends Component{
|
|||
constructor(props){
|
||||
super(props);
|
||||
this.currentObj = null;
|
||||
this.border = false;
|
||||
this.drag = {
|
||||
initPageLeftX:0,
|
||||
initLeft:0,
|
||||
x:0
|
||||
}
|
||||
this.state = {
|
||||
border:false
|
||||
}
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps) {
|
||||
|
|
@ -42,26 +53,89 @@ class TableHeader extends Component{
|
|||
if(this.currentObj.key == data.key)return;
|
||||
this.props.onDrop(event,data);
|
||||
}
|
||||
|
||||
|
||||
|
||||
onMouseMove=(event,data)=>{
|
||||
if(this.border)return;
|
||||
const {clsPrefix} = this.props;
|
||||
console.log("00-----");
|
||||
if(this.border){
|
||||
let x = (event.pageX - this.drag.initPageLeftX) + this.drag.initLeft;
|
||||
console.log("00-----",x);
|
||||
}else{
|
||||
event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`;
|
||||
}
|
||||
}
|
||||
|
||||
onMouseOut=(event,data)=>{
|
||||
if(this.border)return;
|
||||
const {clsPrefix} = this.props;
|
||||
event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap`;
|
||||
}
|
||||
|
||||
onMouseDown=(event,data)=>{
|
||||
this.border = true;
|
||||
const {clsPrefix} = this.props;
|
||||
event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`;
|
||||
|
||||
this.drag.initPageLeftX = event.pageX;
|
||||
this.drag.initLeft = tryParseInt(event.target.style.left);
|
||||
this.drag.x = this.drag.initLeft;
|
||||
}
|
||||
|
||||
onMouseUp=(event,data)=>{
|
||||
this.border = false;
|
||||
const {clsPrefix} = this.props;
|
||||
event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap`;
|
||||
let endx = (event.pageX-this.dragBorderObj.initPageLeftX);
|
||||
// event.target.offsetWidth
|
||||
}
|
||||
|
||||
render() {
|
||||
const { clsPrefix, rowStyle ,onDragStart,onDragOver,onDrop,draggable,rows} = this.props;
|
||||
const { clsPrefix, rowStyle ,onDragStart,onDragOver,onDrop,draggable,rows,
|
||||
onMouseDown,onMouseMove,onMouseUp,dragborder,onMouseOut
|
||||
} = this.props;
|
||||
return (
|
||||
<thead className={`${clsPrefix}-thead`}>
|
||||
{
|
||||
rows.map((row, index) => (
|
||||
<tr key={index} style={rowStyle}>
|
||||
{row.map((da, i) => {
|
||||
let thHover = da.drgHover?` ${clsPrefix}-thead th-drag-hover`:"";
|
||||
return draggable?(
|
||||
<th
|
||||
onDragStart={(event)=>{this.onDragStart(event,da)}}
|
||||
onDragOver={(event)=>{this.onDragOver(event,da)}}
|
||||
onDrop={(event)=>{this.onDrop(event,da)}}
|
||||
onDragEnter={(event)=>{this.onDragEnter(event,da)}}
|
||||
draggable={draggable}
|
||||
className={`${da.className} ${clsPrefix}-thead th-drag ${thHover}`}
|
||||
key={i}
|
||||
>{da.children}</th>):(<th {...da} key={i} />);
|
||||
let thHover = da.drgHover?` ${clsPrefix}-thead th-drag-hover`:"";
|
||||
if(draggable){
|
||||
return ( <th
|
||||
onDragStart={(event)=>{this.onDragStart(event,da)}}
|
||||
onDragOver={(event)=>{this.onDragOver(event,da)}}
|
||||
onDrop={(event)=>{this.onDrop(event,da)}}
|
||||
onDragEnter={(event)=>{this.onDragEnter(event,da)}}
|
||||
draggable={draggable}
|
||||
className={`${da.className} ${clsPrefix}-thead th-drag ${thHover}`}
|
||||
key={i} />)
|
||||
}else if(dragborder){
|
||||
console.log(da);
|
||||
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)}}
|
||||
|
||||
// onMouseUp={(event)=>{onMouseUp(event,da)}}
|
||||
{...da}
|
||||
className={`${da.className} ${clsPrefix}-thead-th `}
|
||||
key={i} >
|
||||
{da.children}
|
||||
<div ref={el=>this.gap = el }
|
||||
onMouseMove={(event)=>{this.onMouseMove(event,da)}}
|
||||
onMouseOut={(event)=>{this.onMouseOut(event,da)}}
|
||||
onMouseDown={(event)=>{this.onMouseDown(event,da)}}
|
||||
onMouseUp={(event)=>{this.onMouseUp(event,da)}}
|
||||
className={`${clsPrefix}-thead-th-drag-gap `}></div>
|
||||
</th>)
|
||||
}else{
|
||||
return (<th {...da} key={i} />);
|
||||
}
|
||||
})}
|
||||
</tr>
|
||||
))
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
import React from 'react';
|
||||
|
||||
export default class Table extends React.PureComponent {
|
||||
render() {
|
||||
return (
|
||||
<table className="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
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;
|
||||
console.log(event.screenX);
|
||||
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;
|
||||
console.log("currObj.width--",currObj.width);
|
||||
this.setState({
|
||||
columns
|
||||
});
|
||||
}
|
||||
|
||||
getTarget=(evt)=>{
|
||||
return evt.target || evt.srcElement;
|
||||
}
|
||||
|
||||
onMouseUp=(event,data)=>{
|
||||
let endx = (event.screenX-this.dragBorderObj.startScreenX);
|
||||
console.log("onmouseup-",endx);
|
||||
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}
|
||||
/>)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -4,7 +4,8 @@ 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
|
||||
|
|
@ -17,7 +18,8 @@ export default function dragColumn(Table) {
|
|||
constructor(props) {
|
||||
super(props);
|
||||
const {columns} = props;
|
||||
const { clsPrefix} = props;
|
||||
this.dragBorderObj = {startScreenX:0,endScreenX:0};
|
||||
this.mouse = false;
|
||||
this.setColumOrderByIndex(columns);
|
||||
}
|
||||
|
||||
|
|
@ -27,6 +29,17 @@ export default function dragColumn(Table) {
|
|||
}
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
|
@ -80,13 +93,54 @@ export default function dragColumn(Table) {
|
|||
});
|
||||
}
|
||||
|
||||
onMouseDown=(event,data)=>{
|
||||
this.mouse = true;
|
||||
console.log(event.screenX);
|
||||
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;
|
||||
console.log("currObj.width--",currObj.width);
|
||||
this.setState({
|
||||
columns
|
||||
});
|
||||
}
|
||||
|
||||
getTarget=(evt)=>{
|
||||
return evt.target || evt.srcElement;
|
||||
}
|
||||
|
||||
onMouseUp=(event,data)=>{
|
||||
let endx = (event.screenX-this.dragBorderObj.startScreenX);
|
||||
console.log("onmouseup-",endx);
|
||||
this.mouse = false;
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
const {data} = this.props;
|
||||
const {data,dragborder,draggable,className} = this.props;
|
||||
const {columns} = this.state;
|
||||
return (<Table {...this.props} columns={columns} data={data}
|
||||
|
||||
|
||||
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={true}
|
||||
draggable={draggable}
|
||||
|
||||
dragborder={true}
|
||||
onMouseDown={this.onMouseDown}
|
||||
onMouseMove={this.onMouseMove}
|
||||
onMouseUp={this.onMouseUp}
|
||||
/>)
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,254 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
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;
|
||||
54
src/utils.js
54
src/utils.js
|
|
@ -1,4 +1,6 @@
|
|||
import warning from 'warning';
|
||||
import parseInt from 'lodash/parseInt';
|
||||
|
||||
|
||||
let scrollbarWidth;
|
||||
|
||||
|
|
@ -62,3 +64,55 @@ export function warningOnce(condition, format, args) {
|
|||
warned[format] = true;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export const tryParseInt = (value, defaultValue = 0) => {
|
||||
const resultValue = parseInt(value);
|
||||
|
||||
if (isNaN(resultValue)) {
|
||||
return defaultValue;
|
||||
}
|
||||
return resultValue;
|
||||
};
|
||||
|
||||
|
||||
export function addClass(elm, className) {
|
||||
if (!className) return;
|
||||
|
||||
const els = Array.isArray(elm) ? elm : [elm];
|
||||
|
||||
els.forEach((el) => {
|
||||
if (el.classList) {
|
||||
el.classList.add(className.split(' '));
|
||||
} else {
|
||||
el.className += ` ${className}`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function removeClass(elm, className) {
|
||||
if (!className) return;
|
||||
|
||||
const els = Array.isArray(elm) ? elm : [elm];
|
||||
|
||||
els.forEach((el) => {
|
||||
if (el.classList) {
|
||||
el.classList.remove(className.split(' '));
|
||||
} else {
|
||||
el.className = el.className.replace(new RegExp(`(^|\\b)${className.split(' ').join('|')}(\\b|$)`, 'gi'), ' ');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export const tryParseInt = (value, defaultValue = 0) => {
|
||||
const resultValue = parseInt(value);
|
||||
|
||||
if (isNaN(resultValue)) {
|
||||
return defaultValue;
|
||||
}
|
||||
return resultValue;
|
||||
};
|
||||
Loading…
Reference in New Issue