p47502813
/
bee-table
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

拖拽宽度

This commit is contained in:
jonyshi 2018-05-11 09:29:43 +08:00
parent 3ae749f913
commit d804ddd34b
28 changed files with 2486 additions and 16729 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
build/Table.css
View File

@ -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; }

29
build/Table.js
View File

@ -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

70
build/TableHeader.js
View File

@ -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 }));
}
})
);
})

145
build/lib/Table.js Normal file
View File

@ -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"];

217
build/lib/dragColumn.js Normal file
View File

@ -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"];

189
build/lib/filterColumn.js Normal file
View File

@ -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"];

42
build/lib/util.js
View File

@ -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;
};

276
build/resiztable/colResizable.js Normal file
View File

@ -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'];

28
build/resiztable/index.js Normal file
View File

@ -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'];

46
build/utils.js
View File

@ -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'), ' ');
}
});
}

25
demo/demolist/Demo22.js → demo/demolist/Demo23.js
View File

@ -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;

2
demo/index.js
View File

@ -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 {

82
dist/demo.css vendored
View File

@ -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 */

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

17095
dist/demo.js vendored
View File

File diff suppressed because it is too large Load Diff

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

3
index.html
View File

@ -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>

1
package.json
View File

@ -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",

73
src/ResizableTh.js Normal file
View File

@ -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
View File

@ -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
View File

@ -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;
}
}
}

100
src/TableHeader.js
View File

@ -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>
))

38
src/lib/Table.js Normal file
View File

@ -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>
)
}
}

147
src/lib/dragColumn.1.js Normal file
View File

@ -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}
/>)
}
};
}

64
src/lib/dragColumn.js
View File

@ -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}
/>)
}
};

254
src/resiztable/colResizable.js Normal file
View File

@ -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;
}
}

14
src/resiztable/index.js Normal file
View File

@ -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
View File

@ -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;
};