merge
This commit is contained in:
izbz wh
commit
7a9d0929cb
42
CHANGELOG.md
42
CHANGELOG.md
|
|
@ -1,46 +1,20 @@
|
|||
<a name="2.0.6"></a>
|
||||
## [2.0.6](https://github.com/tinper-bee/bee-table/compare/v2.0.5...v2.0.6) (2019-03-15)
|
||||
<a name="2.0.9"></a>
|
||||
## [2.0.9](https://github.com/tinper-bee/bee-table/compare/v2.0.0...v2.0.9) (2019-03-27)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **行过滤、checkbox样式:** 1、行过滤点击已选的无效2、checkbox在Table中的样式 ([1a628a4](https://github.com/tinper-bee/bee-table/commit/1a628a4))
|
||||
|
||||
|
||||
|
||||
<a name="2.0.5"></a>
|
||||
## [2.0.5](https://github.com/tinper-bee/bee-table/compare/v2.0.4...v2.0.5) (2019-03-14)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 参照场景中表格首次渲染最后一列没有撑开bug ([c705539](https://github.com/tinper-bee/bee-table/commit/c705539))
|
||||
* **Table.js:** 参照场景中第一次加载表格不撑满问题 ([a9530a4](https://github.com/tinper-bee/bee-table/commit/a9530a4))
|
||||
|
||||
|
||||
|
||||
<a name="2.0.4"></a>
|
||||
## [2.0.4](https://github.com/tinper-bee/bee-table/compare/v2.0.3...v2.0.4) (2019-03-07)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **行过滤、checkbox样式:** 1、行过滤点击已选的无效2、checkbox在Table中的样式 ([1a628a4](https://github.com/tinper-bee/bee-table/commit/1a628a4))
|
||||
* Table 拖拽后同步表格整体宽度 ([ee40deb](https://github.com/tinper-bee/bee-table/commit/ee40deb))
|
||||
* 参照场景中表格首次渲染最后一列没有撑开bug ([c705539](https://github.com/tinper-bee/bee-table/commit/c705539))
|
||||
* 含有右侧固定列场景中，内容过少不需要滚动条bug ([37b9806](https://github.com/tinper-bee/bee-table/commit/37b9806))
|
||||
|
||||
|
||||
|
||||
<a name="2.0.3"></a>
|
||||
## [2.0.3](https://github.com/tinper-bee/bee-table/compare/v2.0.0...v2.0.3) (2019-03-05)
|
||||
* 表格key警告问题 ([6977e2f](https://github.com/tinper-bee/bee-table/commit/6977e2f))
|
||||
|
||||
|
||||
|
||||
<a name="2.0.0"></a>
|
||||
# [2.0.0](https://github.com/tinper-bee/bee-table/compare/v1.6.44...v2.0.0) (2019-03-01)
|
||||
|
||||
|
||||
|
||||
<a name="1.6.44"></a>
|
||||
## [1.6.44](https://github.com/tinper-bee/bee-table/compare/v1.6.43...v1.6.44) (2019-02-26)
|
||||
# [2.0.0](https://github.com/tinper-bee/bee-table/compare/v1.6.43...v2.0.0) (2019-03-01)
|
||||
|
||||
|
||||
|
||||
|
|
@ -335,7 +309,7 @@
|
|||
|
||||
|
||||
<a name="1.5.1"></a>
|
||||
## [1.5.1](https://github.com/tinper-bee/bee-table/compare/v1.5.0...v1.5.1) (2018-11-19)
|
||||
## [1.5.1](https://github.com/tinper-bee/bee-table/compare/v1.5.0...v1.5.1) (2018-11-18)
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
180
build/Table.css
180
build/Table.css
|
|
@ -1,168 +1,8 @@
|
|||
@charset "UTF-8";
|
||||
/* FormGroup */
|
||||
/* Navlayout */
|
||||
/* FormGroup */
|
||||
/* Navlayout */
|
||||
/**
|
||||
* 加载背景
|
||||
*/
|
||||
/**
|
||||
* 文字
|
||||
*/
|
||||
.u-loading-desc {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
text-align: center; }
|
||||
|
||||
/**
|
||||
* default样式 单个圆圈加载
|
||||
*/
|
||||
.u-loading.u-loading-rotate > div {
|
||||
position: absolute;
|
||||
border-radius: 100%;
|
||||
margin: 2px;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -22px;
|
||||
margin-top: -22px;
|
||||
background: transparent !important;
|
||||
display: inline-block;
|
||||
-webkit-animation: rotate 1.5s 0s linear infinite;
|
||||
animation: rotate 1.5s 0s linear infinite;
|
||||
text-align: center;
|
||||
line-height: 40px; }
|
||||
.u-loading.u-loading-rotate > div > .uf {
|
||||
color: #0084ff;
|
||||
font-size: 40px;
|
||||
padding: 0; }
|
||||
|
||||
.u-loading.u-loading-rotate.u-loading-rotate-lg > div {
|
||||
margin-left: -35px;
|
||||
margin-top: -35px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
line-height: 60px; }
|
||||
.u-loading.u-loading-rotate.u-loading-rotate-lg > div > .uf {
|
||||
font-size: 60px; }
|
||||
|
||||
.u-loading.u-loading-rotate.u-loading-rotate-sm > div {
|
||||
margin-left: -15px;
|
||||
margin-top: -15px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
line-height: 25px; }
|
||||
.u-loading.u-loading-rotate.u-loading-rotate-sm > div > .uf {
|
||||
font-size: 25px; }
|
||||
|
||||
.u-loading.u-loading-rotate.u-loading-rotate-primary > div > .uf {
|
||||
color: #3f51b5; }
|
||||
|
||||
.u-loading.u-loading-rotate.u-loading-rotate-success > div > .uf {
|
||||
color: #4caf50; }
|
||||
|
||||
.u-loading.u-loading-rotate.u-loading-rotate-warning > div > .uf {
|
||||
color: #ff9800; }
|
||||
|
||||
.u-loading-backdrop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1900;
|
||||
opacity: .7;
|
||||
filter: blur(0.5px);
|
||||
background-color: #fff; }
|
||||
.u-loading-backdrop.full-screen {
|
||||
position: fixed; }
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg) scale(1);
|
||||
transform: rotate(0deg) scale(1); }
|
||||
50% {
|
||||
-webkit-transform: rotate(180deg) scale(1);
|
||||
transform: rotate(180deg) scale(1); }
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg) scale(1);
|
||||
transform: rotate(360deg) scale(1); } }
|
||||
|
||||
.u-loading.u-loading-line {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -30px;
|
||||
margin-left: -25px; }
|
||||
.u-loading.u-loading-line > div {
|
||||
background-color: #C2C3C5;
|
||||
width: 6px;
|
||||
height: 50px;
|
||||
border-radius: 2px;
|
||||
margin: 2px;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
display: inline-block; }
|
||||
.u-loading.u-loading-line.u-loading-line-lg {
|
||||
margin-top: -50px;
|
||||
margin-left: -30px; }
|
||||
.u-loading.u-loading-line.u-loading-line-lg > div {
|
||||
width: 8px;
|
||||
height: 90px; }
|
||||
.u-loading.u-loading-line.u-loading-line-sm {
|
||||
margin-top: -22px;
|
||||
margin-left: -20px; }
|
||||
.u-loading.u-loading-line.u-loading-line-sm > div {
|
||||
width: 4px;
|
||||
height: 35px; }
|
||||
.u-loading.u-loading-line div:nth-child(1) {
|
||||
-webkit-animation: line-scale 1s 0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
|
||||
animation: line-scale 1s 0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
|
||||
background-color: #F44336; }
|
||||
.u-loading.u-loading-line div:nth-child(2) {
|
||||
-webkit-animation: line-scale 1s 0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
|
||||
animation: line-scale 1s 0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
|
||||
background-color: #7ED321; }
|
||||
.u-loading.u-loading-line div:nth-child(3) {
|
||||
-webkit-animation: line-scale 1s 0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
|
||||
animation: line-scale 1s 0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
|
||||
background-color: #0084FF; }
|
||||
.u-loading.u-loading-line div:nth-child(4) {
|
||||
-webkit-animation: line-scale 1s 0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
|
||||
animation: line-scale 1s 0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
|
||||
background-color: #FF9800; }
|
||||
.u-loading.u-loading-line div:nth-child(5) {
|
||||
-webkit-animation: line-scale 1s 0.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
|
||||
animation: line-scale 1s 0.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
|
||||
background-color: #D0021B; }
|
||||
.u-loading.u-loading-line.u-loading-line-primary > div {
|
||||
background-color: #3f51b5; }
|
||||
.u-loading.u-loading-line.u-loading-line-success > div {
|
||||
background-color: #4caf50; }
|
||||
.u-loading.u-loading-line.u-loading-line-warning > div {
|
||||
background-color: #ff9800; }
|
||||
|
||||
@keyframes line-scale {
|
||||
0% {
|
||||
-webkit-transform: scaley(1);
|
||||
transform: scaley(1); }
|
||||
50% {
|
||||
-webkit-transform: scaley(0.4);
|
||||
transform: scaley(0.4); }
|
||||
100% {
|
||||
-webkit-transform: scaley(1);
|
||||
transform: scaley(1); } }
|
||||
|
||||
.u-table {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
color: #212121;
|
||||
position: relative;
|
||||
line-height: 1.5;
|
||||
overflow: hidden; }
|
||||
|
|
@ -179,7 +19,7 @@
|
|||
border-collapse: collapse;
|
||||
text-align: left; }
|
||||
.u-table th {
|
||||
font-weight: bold;
|
||||
font-weight: normal;
|
||||
text-align: left; }
|
||||
.u-table th[colspan] {
|
||||
text-align: center; }
|
||||
|
|
@ -231,8 +71,13 @@
|
|||
overflow: hidden; }
|
||||
.u-table-header {
|
||||
overflow: hidden;
|
||||
<<<<<<< HEAD
|
||||
background: rgb(223, 225, 230);
|
||||
color: rgb(102, 102, 102); }
|
||||
=======
|
||||
background: rgb(241, 242, 245);
|
||||
color: rgb(33, 33, 33); }
|
||||
>>>>>>> d22d3eedc74d2580946a0e615dff0a862b240889
|
||||
.u-table.fixed-height td {
|
||||
padding: 0px 8px; }
|
||||
.u-table-fixed-header .u-table-body {
|
||||
|
|
@ -356,14 +201,19 @@
|
|||
.u-table-thead .filter-wrap .filter-btns {
|
||||
min-width: 58px; }
|
||||
.u-table-thead th {
|
||||
<<<<<<< HEAD
|
||||
background: rgb(223, 225, 230);
|
||||
color: rgb(102, 102, 102);
|
||||
=======
|
||||
background: rgb(241, 242, 245);
|
||||
color: rgb(33, 33, 33);
|
||||
>>>>>>> d22d3eedc74d2580946a0e615dff0a862b240889
|
||||
background-clip: padding-box;
|
||||
-moz-user-select: -moz-none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
/*
|
||||
Introduced in IE 10.
|
||||
/*
|
||||
Introduced in IE 10.
|
||||
*/
|
||||
-ms-user-select: none;
|
||||
user-select: none; }
|
||||
|
|
@ -453,7 +303,7 @@
|
|||
height: 25px;
|
||||
line-height: 25px;
|
||||
z-index: 2;
|
||||
background: #f7f7f7; }
|
||||
background: rgb(241, 242, 245); }
|
||||
.u-table-filter-column-filter-iconi.uf {
|
||||
padding: 0px; }
|
||||
.u-table-filter-column-pop-cont-item {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
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; };
|
||||
|
|
@ -36,137 +36,137 @@ var cloneDeep = require('lodash.clonedeep');
|
|||
|
||||
function dragColumn(Table) {
|
||||
|
||||
return function (_Component) {
|
||||
_inherits(DragColumn, _Component);
|
||||
return function (_Component) {
|
||||
_inherits(DragColumn, _Component);
|
||||
|
||||
function DragColumn(props) {
|
||||
_classCallCheck(this, DragColumn);
|
||||
function DragColumn(props) {
|
||||
_classCallCheck(this, DragColumn);
|
||||
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
|
||||
_this.setColumOrderByIndex = function (_column) {
|
||||
_column.forEach(function (da, i) {
|
||||
da.dragIndex = i;
|
||||
da.drgHover = false;
|
||||
});
|
||||
return _column;
|
||||
};
|
||||
_this.setColumOrderByIndex = function (_column) {
|
||||
_column.forEach(function (da, i) {
|
||||
da.dragIndex = i;
|
||||
da.drgHover = false;
|
||||
});
|
||||
return _column;
|
||||
};
|
||||
|
||||
_this.onDrop = function (event, data) {
|
||||
var dragSource = data.dragSource,
|
||||
dragTarg = data.dragTarg;
|
||||
var columns = _this.state.columns;
|
||||
_this.onDrop = function (event, data) {
|
||||
var dragSource = data.dragSource,
|
||||
dragTarg = data.dragTarg;
|
||||
var columns = _this.state.columns;
|
||||
|
||||
var sourceIndex = -1,
|
||||
targetIndex = -1;
|
||||
var sourceIndex = -1,
|
||||
targetIndex = -1;
|
||||
|
||||
sourceIndex = columns.findIndex(function (da, i) {
|
||||
return da.key == dragSource.key;
|
||||
});
|
||||
targetIndex = columns.findIndex(function (da, i) {
|
||||
return da.key == dragTarg.key;
|
||||
});
|
||||
// for (let index = 0; index < columns.length; index++) {
|
||||
// const da = columns[index];
|
||||
// if(da.key === dragSource.key){
|
||||
// columns[index] = dragTargColum;
|
||||
// }
|
||||
// if(da.key === dragTarg.key){
|
||||
// columns[index] = dragSourceColum;
|
||||
// }
|
||||
// }
|
||||
// 向前移动
|
||||
if (targetIndex < sourceIndex) {
|
||||
targetIndex = targetIndex + 1;
|
||||
sourceIndex = columns.findIndex(function (da, i) {
|
||||
return da.key == dragSource.key;
|
||||
});
|
||||
targetIndex = columns.findIndex(function (da, i) {
|
||||
return da.key == dragTarg.key;
|
||||
});
|
||||
// for (let index = 0; index < columns.length; index++) {
|
||||
// const da = columns[index];
|
||||
// if(da.key === dragSource.key){
|
||||
// columns[index] = dragTargColum;
|
||||
// }
|
||||
// if(da.key === dragTarg.key){
|
||||
// columns[index] = dragSourceColum;
|
||||
// }
|
||||
// }
|
||||
// 向前移动
|
||||
if (targetIndex < sourceIndex) {
|
||||
targetIndex = targetIndex + 1;
|
||||
}
|
||||
columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
|
||||
_this.setState({
|
||||
columns: cloneDeep(columns)
|
||||
});
|
||||
if (_this.props.onDrop) {
|
||||
_this.props.onDrop(event, data, columns);
|
||||
}
|
||||
};
|
||||
|
||||
_this.getTarget = function (evt) {
|
||||
return evt.target || evt.srcElement;
|
||||
};
|
||||
|
||||
_this.state = {
|
||||
columns: _this.setColumOrderByIndex(props.columns)
|
||||
};
|
||||
return _this;
|
||||
}
|
||||
columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
|
||||
_this.setState({
|
||||
columns: cloneDeep(columns)
|
||||
|
||||
DragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.columns != this.props.columns) {
|
||||
this.setState({
|
||||
columns: this.setColumOrderByIndex(nextProps.columns)
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
DragColumn.prototype.cloneDeep = function cloneDeep(obj) {
|
||||
if ((typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) !== 'object' || Object.keys(obj).length === 0) {
|
||||
return obj;
|
||||
}
|
||||
var resultData = {};
|
||||
return this.recursion(obj, resultData);
|
||||
};
|
||||
|
||||
DragColumn.prototype.recursion = function (_recursion) {
|
||||
function recursion(_x) {
|
||||
return _recursion.apply(this, arguments);
|
||||
}
|
||||
|
||||
recursion.toString = function () {
|
||||
return _recursion.toString();
|
||||
};
|
||||
|
||||
return recursion;
|
||||
}(function (obj) {
|
||||
var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
|
||||
for (key in obj) {
|
||||
if (_typeof(obj[key]) == 'object' && Object.keys(obj[key].length > 0)) {
|
||||
data[key] = recursion(obj[key]);
|
||||
} else {
|
||||
data[key] = obj[key];
|
||||
}
|
||||
}
|
||||
return data;
|
||||
});
|
||||
if (_this.props.onDrop) {
|
||||
_this.props.onDrop(event, data, columns);
|
||||
}
|
||||
};
|
||||
|
||||
_this.getTarget = function (evt) {
|
||||
return evt.target || evt.srcElement;
|
||||
};
|
||||
DragColumn.prototype.render = function render() {
|
||||
var _props = this.props,
|
||||
data = _props.data,
|
||||
dragborder = _props.dragborder,
|
||||
draggable = _props.draggable,
|
||||
className = _props.className,
|
||||
columns = _props.columns,
|
||||
onDragStart = _props.onDragStart,
|
||||
onDragEnter = _props.onDragEnter,
|
||||
onDragOver = _props.onDragOver,
|
||||
onDrop = _props.onDrop,
|
||||
others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className', 'columns', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDrop']);
|
||||
|
||||
_this.state = {
|
||||
columns: _this.setColumOrderByIndex(props.columns)
|
||||
};
|
||||
return _this;
|
||||
}
|
||||
var key = new Date().getTime();
|
||||
return _react2["default"].createElement(Table, _extends({}, others, {
|
||||
columns: this.state.columns,
|
||||
data: data,
|
||||
className: className + ' u-table-drag-border',
|
||||
onDragStart: this.onDragStart,
|
||||
onDragOver: this.onDragOver,
|
||||
onDrop: this.onDrop,
|
||||
onDragEnter: this.onDragEnter,
|
||||
draggable: draggable,
|
||||
dragborder: dragborder
|
||||
// dragborder={false}
|
||||
, dragborderKey: key
|
||||
}));
|
||||
};
|
||||
|
||||
DragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.columns != this.props.columns) {
|
||||
this.setState({
|
||||
columns: this.setColumOrderByIndex(nextProps.columns)
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
DragColumn.prototype.cloneDeep = function cloneDeep(obj) {
|
||||
if ((typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) !== 'object' || Object.keys(obj).length === 0) {
|
||||
return obj;
|
||||
}
|
||||
var resultData = {};
|
||||
return this.recursion(obj, resultData);
|
||||
};
|
||||
|
||||
DragColumn.prototype.recursion = function (_recursion) {
|
||||
function recursion(_x) {
|
||||
return _recursion.apply(this, arguments);
|
||||
}
|
||||
|
||||
recursion.toString = function () {
|
||||
return _recursion.toString();
|
||||
};
|
||||
|
||||
return recursion;
|
||||
}(function (obj) {
|
||||
var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
|
||||
for (key in obj) {
|
||||
if (_typeof(obj[key]) == 'object' && Object.keys(obj[key].length > 0)) {
|
||||
data[key] = recursion(obj[key]);
|
||||
} else {
|
||||
data[key] = obj[key];
|
||||
}
|
||||
}
|
||||
return data;
|
||||
});
|
||||
|
||||
DragColumn.prototype.render = function render() {
|
||||
var _props = this.props,
|
||||
data = _props.data,
|
||||
dragborder = _props.dragborder,
|
||||
draggable = _props.draggable,
|
||||
className = _props.className,
|
||||
columns = _props.columns,
|
||||
onDragStart = _props.onDragStart,
|
||||
onDragEnter = _props.onDragEnter,
|
||||
onDragOver = _props.onDragOver,
|
||||
onDrop = _props.onDrop,
|
||||
others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className', 'columns', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDrop']);
|
||||
|
||||
var key = new Date().getTime();
|
||||
return _react2["default"].createElement(Table, _extends({}, others, {
|
||||
columns: this.state.columns,
|
||||
data: data,
|
||||
className: className + ' u-table-drag-border',
|
||||
onDragStart: this.onDragStart,
|
||||
onDragOver: this.onDragOver,
|
||||
onDrop: this.onDrop,
|
||||
onDragEnter: this.onDragEnter,
|
||||
draggable: draggable,
|
||||
dragborder: dragborder
|
||||
// dragborder={false}
|
||||
, dragborderKey: key
|
||||
}));
|
||||
};
|
||||
|
||||
return DragColumn;
|
||||
}(_react.Component);
|
||||
return DragColumn;
|
||||
}(_react.Component);
|
||||
}
|
||||
module.exports = exports['default'];
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
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; };
|
||||
|
|
@ -20,29 +20,29 @@ exports.ObjectAssign = ObjectAssign;
|
|||
*/
|
||||
|
||||
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 '参数类型错误';
|
||||
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;
|
||||
}
|
||||
props.sort();
|
||||
for (i = 0; i < len; i++) {
|
||||
ret[i] = props[i]._obj;
|
||||
} else if (typeof prop == 'function') {
|
||||
for (; i < len; i++) {
|
||||
var _oI = arr[i];
|
||||
(props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
|
||||
}
|
||||
if (desc) ret.reverse();
|
||||
return ret;
|
||||
} else {
|
||||
throw '参数类型错误';
|
||||
}
|
||||
props.sort();
|
||||
for (i = 0; i < len; i++) {
|
||||
ret[i] = props[i]._obj;
|
||||
}
|
||||
if (desc) ret.reverse();
|
||||
return ret;
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -51,11 +51,11 @@ function sortBy(arr, prop, desc) {
|
|||
* @param {} property
|
||||
*/
|
||||
function compare(property) {
|
||||
return function (a, b) {
|
||||
var value1 = a[property];
|
||||
var value2 = b[property];
|
||||
return value1 - value2;
|
||||
};
|
||||
return function (a, b) {
|
||||
var value1 = a[property];
|
||||
var value2 = b[property];
|
||||
return value1 - value2;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -63,17 +63,17 @@ function compare(property) {
|
|||
* @param {*} obj 要拷贝的对象
|
||||
*/
|
||||
function ObjectAssign(obj) {
|
||||
var b = obj instanceof Array;
|
||||
var tagObj = b ? [] : {};
|
||||
if (b) {
|
||||
//数组
|
||||
obj.forEach(function (da) {
|
||||
var _da = {};
|
||||
_extends(_da, da);
|
||||
tagObj.push(_da);
|
||||
});
|
||||
} else {
|
||||
_extends(tagObj, obj);
|
||||
}
|
||||
return tagObj;
|
||||
var b = obj instanceof Array;
|
||||
var tagObj = b ? [] : {};
|
||||
if (b) {
|
||||
//数组
|
||||
obj.forEach(function (da) {
|
||||
var _da = {};
|
||||
_extends(_da, da);
|
||||
tagObj.push(_da);
|
||||
});
|
||||
} else {
|
||||
_extends(tagObj, obj);
|
||||
}
|
||||
return tagObj;
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip} from "tinper-bee";
|
||||
import {Button,Tooltip,Popconfirm} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
|
|
@ -37,15 +37,11 @@ const columns = [
|
|||
render(text, record, index) {
|
||||
return (
|
||||
<div style={{ position: 'relative' }} title={text} >
|
||||
<a
|
||||
href="javascript:;"
|
||||
tooltip={text}
|
||||
onClick={() => {
|
||||
alert('这是第' + index + '列，内容为:' + text);
|
||||
}}
|
||||
>
|
||||
一些操作
|
||||
</a>
|
||||
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
|
||||
<a href="javascript:;" tooltip={text}>
|
||||
一些操作
|
||||
</a>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -75,8 +71,8 @@ class Demo1 extends Component {
|
|||
columns={columns}
|
||||
data={data}
|
||||
parentNodeId='parent'
|
||||
height={43}
|
||||
headerHeight={42}
|
||||
height={40}
|
||||
headerHeight={40}
|
||||
onRowClick={(record, index, indent) => {
|
||||
this.setState({
|
||||
selectedRowIndex: index
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import {Button} from "tinper-bee";
|
||||
import {Button,Popconfirm} from "tinper-bee";
|
||||
|
||||
const columns17 = [
|
||||
{ title: "用户名", dataIndex: "a", key: "a", width: 100 },
|
||||
|
|
@ -19,14 +19,11 @@ const columns17 = [
|
|||
key: "d",
|
||||
render(text, record, index) {
|
||||
return (
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
alert('这是第'+index+'列，内容为:'+text);
|
||||
}}
|
||||
>
|
||||
一些操作
|
||||
</a>
|
||||
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
|
||||
<a href="javascript:;">
|
||||
一些操作
|
||||
</a>
|
||||
</Popconfirm>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Popconfirm} from 'tinper-bee';
|
||||
import Table from "../../src";
|
||||
import BigData from "../../src/lib/bigData";
|
||||
const BigDataTable = BigData(Table);
|
||||
|
|
@ -17,14 +18,11 @@ const outColumns = [
|
|||
width:200,
|
||||
render(text, record, index) {
|
||||
return (
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
alert("这是第" + index + "列，内容为:" + text);
|
||||
}}
|
||||
>
|
||||
一些操作
|
||||
</a>
|
||||
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
|
||||
<a href="javascript:;">
|
||||
一些操作
|
||||
</a>
|
||||
</Popconfirm>
|
||||
);
|
||||
}
|
||||
},
|
||||
|
|
@ -41,14 +39,11 @@ const innerColumns = [
|
|||
width:200,
|
||||
render(text, record, index) {
|
||||
return (
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
alert("这是第" + index + "列，内容为:" + text);
|
||||
}}
|
||||
>
|
||||
{'一些操作'+index}
|
||||
</a>
|
||||
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
|
||||
<a href="javascript:;">
|
||||
一些操作
|
||||
</a>
|
||||
</Popconfirm>
|
||||
);
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Icon,Checkbox,Popover} from "tinper-bee";
|
||||
import {Icon,Checkbox,Popover,Popconfirm} from "tinper-bee";
|
||||
|
||||
import Table from '../../src';
|
||||
import filterColumn from '../../src/lib/filterColumn';
|
||||
|
|
@ -63,19 +63,11 @@ class Demo21 extends Component {
|
|||
render(text, record, index){
|
||||
return (
|
||||
<div title={text} >
|
||||
<a href="#"
|
||||
tooltip={text}
|
||||
onClick={() => {
|
||||
alert('这是第'+index+'列，内容为:'+text);
|
||||
}}
|
||||
// style={{
|
||||
// position: 'absolute',
|
||||
// top: 5,
|
||||
// left: 0
|
||||
// }}
|
||||
>
|
||||
一些操作
|
||||
</a>
|
||||
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
|
||||
<a href="javascript:;" tooltip={text} >
|
||||
一些操作
|
||||
</a>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Tooltip,Button} from "tinper-bee";
|
||||
import {Tooltip,Button,Popconfirm} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
|
|
@ -36,15 +36,11 @@ const columns = [
|
|||
render(text, record, index) {
|
||||
return (
|
||||
<div style={{ position: 'relative' }} title={text} >
|
||||
<a
|
||||
href="javascript:;"
|
||||
tooltip={text}
|
||||
onClick={() => {
|
||||
alert('这是第' + index + '列，内容为:' + text);
|
||||
}}
|
||||
>
|
||||
一些操作
|
||||
</a>
|
||||
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
|
||||
<a href="javascript:;" tooltip={text} >
|
||||
一些操作
|
||||
</a>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -89,8 +85,8 @@ class Demo35 extends Component {
|
|||
columns={columns}
|
||||
data={data}
|
||||
parentNodeId='parent'
|
||||
height={43}
|
||||
headerHeight={42}
|
||||
height={40}
|
||||
headerHeight={40}
|
||||
hoverContent={this.getHoverContent}
|
||||
onRowHover={this.onRowHover}
|
||||
onRowClick={(record, index, indent) => {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
*/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Icon,Checkbox,Popover} from "tinper-bee";
|
||||
import {Icon,Checkbox,Popover,Popconfirm} from "tinper-bee";
|
||||
|
||||
import Table from '../../src';
|
||||
import multiSelect from '../../src/lib/multiSelect';
|
||||
|
|
@ -85,14 +85,11 @@ function getCloumns(){
|
|||
render(text, record, index) {
|
||||
return (
|
||||
<div className='operation-btn'>
|
||||
<a href="#"
|
||||
tooltip={text}
|
||||
onClick={() => {
|
||||
alert('这是第'+index+'列，内容为:'+text);
|
||||
}}
|
||||
>
|
||||
一些操作
|
||||
</a>
|
||||
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
|
||||
<a href="javascript:;" tooltip={text} >
|
||||
一些操作
|
||||
</a>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import { Popconfirm } from 'tinper-bee';
|
||||
import Table from "../../src";
|
||||
import dragColumn from '../../src/lib/dragColumn';
|
||||
const DragColumnTable = dragColumn(Table);
|
||||
|
|
@ -17,14 +18,11 @@ const columns16 = [
|
|||
width:200,
|
||||
render(text, record, index) {
|
||||
return (
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
alert("这是第" + index + "列，内容为:" + text);
|
||||
}}
|
||||
>
|
||||
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
|
||||
<a href="javascript:;" tooltip={text} >
|
||||
一些操作
|
||||
</a>
|
||||
</a>
|
||||
</Popconfirm>
|
||||
);
|
||||
}
|
||||
},
|
||||
|
|
@ -41,14 +39,11 @@ const columns17 = [
|
|||
width:200,
|
||||
render(text, record, index) {
|
||||
return (
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
alert("这是第" + index + "列，内容为:" + text);
|
||||
}}
|
||||
>
|
||||
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
|
||||
<a href="javascript:;" tooltip={text} >
|
||||
一些操作
|
||||
</a>
|
||||
</a>
|
||||
</Popconfirm>
|
||||
);
|
||||
}
|
||||
},
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,154 +1,8 @@
|
|||
@charset "UTF-8";
|
||||
/* FormGroup */
|
||||
/* Navlayout */
|
||||
/* FormGroup */
|
||||
/* Navlayout */
|
||||
/**
|
||||
* 加载背景
|
||||
*/
|
||||
/**
|
||||
* 文字
|
||||
*/
|
||||
.u-loading-desc {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
text-align: center; }
|
||||
|
||||
/**
|
||||
* default样式 单个圆圈加载
|
||||
*/
|
||||
.u-loading.u-loading-rotate > div {
|
||||
position: absolute;
|
||||
border-radius: 100%;
|
||||
margin: 2px;
|
||||
animation-fill-mode: both;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -22px;
|
||||
margin-top: -22px;
|
||||
background: transparent !important;
|
||||
display: inline-block;
|
||||
animation: rotate 1.5s 0s linear infinite;
|
||||
text-align: center;
|
||||
line-height: 40px; }
|
||||
.u-loading.u-loading-rotate > div > .uf {
|
||||
color: #0084ff;
|
||||
font-size: 40px;
|
||||
padding: 0; }
|
||||
|
||||
.u-loading.u-loading-rotate.u-loading-rotate-lg > div {
|
||||
margin-left: -35px;
|
||||
margin-top: -35px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
line-height: 60px; }
|
||||
.u-loading.u-loading-rotate.u-loading-rotate-lg > div > .uf {
|
||||
font-size: 60px; }
|
||||
|
||||
.u-loading.u-loading-rotate.u-loading-rotate-sm > div {
|
||||
margin-left: -15px;
|
||||
margin-top: -15px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
line-height: 25px; }
|
||||
.u-loading.u-loading-rotate.u-loading-rotate-sm > div > .uf {
|
||||
font-size: 25px; }
|
||||
|
||||
.u-loading.u-loading-rotate.u-loading-rotate-primary > div > .uf {
|
||||
color: #3f51b5; }
|
||||
|
||||
.u-loading.u-loading-rotate.u-loading-rotate-success > div > .uf {
|
||||
color: #4caf50; }
|
||||
|
||||
.u-loading.u-loading-rotate.u-loading-rotate-warning > div > .uf {
|
||||
color: #ff9800; }
|
||||
|
||||
.u-loading-backdrop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1900;
|
||||
opacity: .7;
|
||||
filter: blur(0.5px);
|
||||
background-color: #fff; }
|
||||
.u-loading-backdrop.full-screen {
|
||||
position: fixed; }
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0deg) scale(1); }
|
||||
50% {
|
||||
transform: rotate(180deg) scale(1); }
|
||||
100% {
|
||||
transform: rotate(360deg) scale(1); } }
|
||||
|
||||
.u-loading.u-loading-line {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -30px;
|
||||
margin-left: -25px; }
|
||||
.u-loading.u-loading-line > div {
|
||||
background-color: #C2C3C5;
|
||||
width: 6px;
|
||||
height: 50px;
|
||||
border-radius: 2px;
|
||||
margin: 2px;
|
||||
animation-fill-mode: both;
|
||||
display: inline-block; }
|
||||
.u-loading.u-loading-line.u-loading-line-lg {
|
||||
margin-top: -50px;
|
||||
margin-left: -30px; }
|
||||
.u-loading.u-loading-line.u-loading-line-lg > div {
|
||||
width: 8px;
|
||||
height: 90px; }
|
||||
.u-loading.u-loading-line.u-loading-line-sm {
|
||||
margin-top: -22px;
|
||||
margin-left: -20px; }
|
||||
.u-loading.u-loading-line.u-loading-line-sm > div {
|
||||
width: 4px;
|
||||
height: 35px; }
|
||||
.u-loading.u-loading-line div:nth-child(1) {
|
||||
animation: line-scale 1s 0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
|
||||
background-color: #F44336; }
|
||||
.u-loading.u-loading-line div:nth-child(2) {
|
||||
animation: line-scale 1s 0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
|
||||
background-color: #7ED321; }
|
||||
.u-loading.u-loading-line div:nth-child(3) {
|
||||
animation: line-scale 1s 0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
|
||||
background-color: #0084FF; }
|
||||
.u-loading.u-loading-line div:nth-child(4) {
|
||||
animation: line-scale 1s 0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
|
||||
background-color: #FF9800; }
|
||||
.u-loading.u-loading-line div:nth-child(5) {
|
||||
animation: line-scale 1s 0.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
|
||||
background-color: #D0021B; }
|
||||
.u-loading.u-loading-line.u-loading-line-primary > div {
|
||||
background-color: #3f51b5; }
|
||||
.u-loading.u-loading-line.u-loading-line-success > div {
|
||||
background-color: #4caf50; }
|
||||
.u-loading.u-loading-line.u-loading-line-warning > div {
|
||||
background-color: #ff9800; }
|
||||
|
||||
@keyframes line-scale {
|
||||
0% {
|
||||
transform: scaley(1); }
|
||||
50% {
|
||||
transform: scaley(0.4); }
|
||||
100% {
|
||||
transform: scaley(1); } }
|
||||
|
||||
.u-table {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
color: #212121;
|
||||
position: relative;
|
||||
line-height: 1.5;
|
||||
overflow: hidden; }
|
||||
|
|
@ -165,7 +19,7 @@
|
|||
border-collapse: collapse;
|
||||
text-align: left; }
|
||||
.u-table th {
|
||||
font-weight: bold;
|
||||
font-weight: normal;
|
||||
text-align: left; }
|
||||
.u-table th[colspan] {
|
||||
text-align: center; }
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "2.0.8",
|
||||
"version": "2.0.9",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
@import "../node_modules/tinper-bee-core/scss/minxin-variables";
|
||||
@import "../node_modules/tinper-bee-core/scss/minxin-mixins";
|
||||
@import "../node_modules/bee-loading/src/Loading";
|
||||
// @import "../node_modules/bee-loading/src/Loading";
|
||||
|
||||
$text-color: #666;
|
||||
$text-color: $font-color-base;
|
||||
$font-size-base: 12px;
|
||||
$line-height: 1.5;
|
||||
// 主题定制border：
|
||||
|
|
@ -44,7 +44,7 @@ $checkbox-height:16px;
|
|||
|
||||
th {
|
||||
// background: $table-head-background-color;
|
||||
font-weight: bold;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
// transition: background 0.3s ease;
|
||||
&[colspan] {
|
||||
|
|
|
|||
Loading…
Reference in New Issue