forgetest5
/
bee-table7
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'master' of github.com:tinper-bee/bee-table

This commit is contained in:
jonyshi 2019-03-12 09:43:03 +08:00
parent d754a6119d 66a0a05ac9
commit 554c1ca568
16 changed files with 1041 additions and 1094 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
build.zip
View File

Binary file not shown.

2
build/Table.css
View File

@ -673,7 +673,7 @@
display: none; display: none;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: #E7F2FC; } background: transparent; }
.u-row-hover2 { .u-row-hover2 {
position: absolute; position: absolute;

30
build/Table.js
View File

@ -430,6 +430,10 @@ var Table = function (_Component) {
if (index !== -1) { if (index !== -1) {
expandedRows.splice(index, 1); expandedRows.splice(index, 1);
} }
//
if (this.currentHoverKey == rowKey && this.hoverDom) {
this.hoverDom.style.display = 'none';
}
this.onExpandedRowsChange(expandedRows); this.onExpandedRowsChange(expandedRows);
}; };
@ -1278,19 +1282,21 @@ var Table = function (_Component) {
currentHoverKey: isHover ? key : null currentHoverKey: isHover ? key : null
}); });
} }
if (this.hoverDom && isHover) { if (this.hoverDom) {
this.currentHoverKey = key; if (isHover) {
var td = (0, _utils.closest)(event.target, 'td'); this.currentHoverKey = key;
if (td) { var td = (0, _utils.closest)(event.target, 'td');
var scrollTop = this.lastScrollTop ? this.lastScrollTop : 0; if (td) {
var top = td.offsetTop - scrollTop; var scrollTop = this.lastScrollTop ? this.lastScrollTop : 0;
if (this.refs.headTable) { var top = td.offsetTop - scrollTop;
top = top + this.refs.headTable.clientHeight; if (this.refs.headTable) {
top = top + this.refs.headTable.clientHeight;
}
this.hoverDom.style.top = top + 'px';
this.hoverDom.style.height = td.offsetHeight + 'px';
this.hoverDom.style.lineHeight = td.offsetHeight + 'px';
this.hoverDom.style.display = 'block';
} }
this.hoverDom.style.top = top + 'px';
this.hoverDom.style.height = td.offsetHeight + 'px';
this.hoverDom.style.lineHeight = td.offsetHeight + 'px';
this.hoverDom.style.display = 'block';
} }
} }

244
build/lib/dragColumn.js
View File

@ -1,7 +1,7 @@
'use strict'; 'use strict';
Object.defineProperty(exports, "__esModule", { 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; }; 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) { function dragColumn(Table) {
return function (_Component) { return function (_Component) {
_inherits(DragColumn, _Component); _inherits(DragColumn, _Component);
function DragColumn(props) { function DragColumn(props) {
_classCallCheck(this, DragColumn); _classCallCheck(this, DragColumn);
var _this = _possibleConstructorReturn(this, _Component.call(this, props)); var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.setColumOrderByIndex = function (_column) { _this.setColumOrderByIndex = function (_column) {
_column.forEach(function (da, i) { _column.forEach(function (da, i) {
da.dragIndex = i; da.dragIndex = i;
da.drgHover = false; da.drgHover = false;
}); });
return _column; return _column;
}; };
_this.onDrop = function (event, data) { _this.onDrop = function (event, data) {
var dragSource = data.dragSource, var dragSource = data.dragSource,
dragTarg = data.dragTarg; dragTarg = data.dragTarg;
var columns = _this.state.columns; var columns = _this.state.columns;
var sourceIndex = -1, var sourceIndex = -1,
targetIndex = -1; targetIndex = -1;
sourceIndex = columns.findIndex(function (da, i) { sourceIndex = columns.findIndex(function (da, i) {
return da.key == dragSource.key; return da.key == dragSource.key;
}); });
targetIndex = columns.findIndex(function (da, i) { targetIndex = columns.findIndex(function (da, i) {
return da.key == dragTarg.key; return da.key == dragTarg.key;
}); });
// for (let index = 0; index < columns.length; index++) { // for (let index = 0; index < columns.length; index++) {
// const da = columns[index]; // const da = columns[index];
// if(da.key === dragSource.key){ // if(da.key === dragSource.key){
// columns[index] = dragTargColum; // columns[index] = dragTargColum;
// } // }
// if(da.key === dragTarg.key){ // if(da.key === dragTarg.key){
// columns[index] = dragSourceColum; // columns[index] = dragSourceColum;
// } // }
// } // }
// 向前移动 // 向前移动
if (targetIndex < sourceIndex) { if (targetIndex < sourceIndex) {
targetIndex = targetIndex + 1; 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({ DragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
columns: cloneDeep(columns) 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) { DragColumn.prototype.render = function render() {
return evt.target || evt.srcElement; 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 = { var key = new Date().getTime();
columns: _this.setColumOrderByIndex(props.columns) return _react2["default"].createElement(Table, _extends({}, others, {
}; columns: this.state.columns,
return _this; 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) { return DragColumn;
if (nextProps.columns != this.props.columns) { }(_react.Component);
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);
} }
module.exports = exports['default']; module.exports = exports['default'];

80
build/lib/util.js
View File

@ -1,7 +1,7 @@
'use strict'; 'use strict';
Object.defineProperty(exports, "__esModule", { 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; }; 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) { function sortBy(arr, prop, desc) {
var props = [], var props = [],
ret = [], ret = [],
i = 0, i = 0,
len = arr.length; len = arr.length;
if (typeof prop == 'string') { if (typeof prop == 'string') {
for (; i < len; i++) { for (; i < len; i++) {
var oI = arr[i]; var oI = arr[i];
(props[i] = new String(oI && oI[prop] || ''))._obj = oI; (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(); } else if (typeof prop == 'function') {
for (i = 0; i < len; i++) { for (; i < len; i++) {
ret[i] = props[i]._obj; var _oI = arr[i];
(props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
} }
if (desc) ret.reverse(); } else {
return ret; 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 * @param {} property
*/ */
function compare(property) { function compare(property) {
return function (a, b) { return function (a, b) {
var value1 = a[property]; var value1 = a[property];
var value2 = b[property]; var value2 = b[property];
return value1 - value2; return value1 - value2;
}; };
} }
/** /**
@ -63,17 +63,17 @@ function compare(property) {
* @param {*} obj 要拷贝的对象 * @param {*} obj 要拷贝的对象
*/ */
function ObjectAssign(obj) { function ObjectAssign(obj) {
var b = obj instanceof Array; var b = obj instanceof Array;
var tagObj = b ? [] : {}; var tagObj = b ? [] : {};
if (b) { if (b) {
//数组 //数组
obj.forEach(function (da) { obj.forEach(function (da) {
var _da = {}; var _da = {};
_extends(_da, da); _extends(_da, da);
tagObj.push(_da); tagObj.push(_da);
}); });
} else { } else {
_extends(tagObj, obj); _extends(tagObj, obj);
} }
return tagObj; return tagObj;
} }

1
demo/TableDemo.scss
View File

@ -26,7 +26,6 @@
} }
.demo25{ .demo25{
width: 700px;
height: 100%; height: 100%;
.u-table-filter-column-filter-icon{ .u-table-filter-column-filter-icon{

2
demo/demolist/Demo35.js
View File

@ -81,7 +81,7 @@ class Demo35 extends Component {
this.currentRecord = record; this.currentRecord = record;
} }
getHoverContent=()=>{ getHoverContent=()=>{
return <div className="opt-btns"><button onClick={this.delFun}>删除</button> </div> return <div className="opt-btns"><Button colors="primary" size="sm" onClick={this.delFun}>删除</Button> </div>
} }
render() { render() {
return ( return (

8
demo/demolist/Demo35.scss
View File

@ -1,8 +0,0 @@
.opt-btns{
button{
background: #505F79 ;
height: 26px;
color:#FFFFFF;
line-height: 26px;
}
}

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

182
dist/demo.css vendored
View File

@ -6013,12 +6013,18 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
.u-button.colored:focus:not(:active) { .u-button.colored:focus:not(:active) {
background-color: rgb(238,238,238); background-color: rgb(238,238,238);
border-color: rgb(189,189,189); } border-color: rgb(189,189,189); }
.u-button.disable { .u-button.disable, .u-button.u-button[disabled] {
-webkit-box-shadow: none;
filter: alpha(opacity=65);
box-shadow: none;
cursor: not-allowed; cursor: not-allowed;
opacity: .65; } background-color: #DFE1E6;
border-color: #DFE1E6;
color: #fff; }
.u-button.disable:hover, .u-button.disable:active, .u-button.disable:focus, .u-button.u-button[disabled]:hover, .u-button.u-button[disabled]:active, .u-button.u-button[disabled]:focus {
background-color: #DFE1E6;
border-color: #DFE1E6;
color: #fff; }
.u-button:not(.u-button-icon) i.uf {
padding-left: 0;
line-height: normal; }
input.u-button[type="submit"] { input.u-button[type="submit"] {
-webkit-appearance: none; } -webkit-appearance: none; }
@ -6046,9 +6052,9 @@ input.u-button[type="submit"] {
.u-button.disabled, .u-button[disabled] { .u-button.disabled, .u-button[disabled] {
cursor: not-allowed; cursor: not-allowed;
opacity: .65; background-color: #DFE1E6;
filter: alpha(opacity=65); border-color: #DFE1E6;
box-shadow: none; } color: #fff; }
.u-button-default { .u-button-default {
color: #333; color: #333;
@ -6075,12 +6081,9 @@ input.u-button[type="submit"] {
color: rgb(255,255,255); color: rgb(255,255,255);
background-color: rgb(245, 60, 50); background-color: rgb(245, 60, 50);
border: 1px rgb(245, 60, 50) solid; } border: 1px rgb(245, 60, 50) solid; }
.u-button.u-button-primary:hover { .u-button.u-button-primary.focus, .u-button.u-button-primary:focus, .u-button.u-button-primary:hover {
background-color: rgb(230, 0, 18); background-color: rgb(230, 0, 18);
border-color: rgb(230, 0, 18); } border-color: rgb(230, 0, 18); }
.u-button.u-button-primary.focus, .u-button.u-button-primary:focus:hover {
background-color: rgb(245, 60, 50);
border-color: rgb(245, 60, 50); }
.u-button.u-button-primary.active, .u-button.u-button-primary:active { .u-button.u-button-primary.active, .u-button.u-button-primary:active {
background-color: rgb(230, 0, 18); background-color: rgb(230, 0, 18);
border-color: rgb(230, 0, 18); } border-color: rgb(230, 0, 18); }
@ -6089,12 +6092,9 @@ input.u-button[type="submit"] {
color: rgb(33,33,33); color: rgb(33,33,33);
background-color: rgb(224,224,224); background-color: rgb(224,224,224);
border: 1px rgb(224,224,224) solid; } border: 1px rgb(224,224,224) solid; }
.u-button.u-button-secondary:hover { .u-button.u-button-secondary.focus, .u-button.u-button-secondary:focus, .u-button.u-button-secondary:hover {
background-color: rgb(189,189,189); background-color: rgb(189,189,189);
border-color: rgb(189,189,189); } border-color: rgb(189,189,189); }
.u-button.u-button-secondary.focus, .u-button.u-button-secondary:focus:hover {
background-color: rgb(224,224,224);
border-color: rgb(224,224,224); }
.u-button.u-button-secondary.active, .u-button.u-button-secondary:active { .u-button.u-button-secondary.active, .u-button.u-button-secondary:active {
background-color: rgb(189,189,189); background-color: rgb(189,189,189);
border-color: rgb(189,189,189); } border-color: rgb(189,189,189); }
@ -6103,12 +6103,9 @@ input.u-button[type="submit"] {
color: rgb(255,255,255); color: rgb(255,255,255);
background-color: rgb(244,67,54); background-color: rgb(244,67,54);
border: 1px rgb(244,67,54) solid; } border: 1px rgb(244,67,54) solid; }
.u-button.u-button-danger:hover { .u-button.u-button-danger.focus, .u-button.u-button-danger:focus, .u-button.u-button-danger:hover {
background-color: rgb(211,47,47); background-color: rgb(211,47,47);
border-color: rgb(211,47,47); } border-color: rgb(211,47,47); }
.u-button.u-button-danger.focus, .u-button.u-button-danger:focus:hover {
background-color: rgb(244,67,54);
border-color: rgb(244,67,54); }
.u-button.u-button-danger.active, .u-button.u-button-danger:active { .u-button.u-button-danger.active, .u-button.u-button-danger:active {
background-color: rgb(211,47,47); background-color: rgb(211,47,47);
border-color: rgb(211,47,47); } border-color: rgb(211,47,47); }
@ -6117,12 +6114,9 @@ input.u-button[type="submit"] {
color: rgb(255,255,255); color: rgb(255,255,255);
background-color: rgb(0,188,212); background-color: rgb(0,188,212);
border: 1px rgb(0,188,212) solid; } border: 1px rgb(0,188,212) solid; }
.u-button.u-button-info:hover { .u-button.u-button-info.focus, .u-button.u-button-info:focus, .u-button.u-button-info:hover {
background-color: rgb(0,151,167); background-color: rgb(0,151,167);
border-color: rgb(0,151,167); } border-color: rgb(0,151,167); }
.u-button.u-button-info.focus, .u-button.u-button-info:focus:hover {
background-color: rgb(0,188,212);
border-color: rgb(0,188,212); }
.u-button.u-button-info.active, .u-button.u-button-info:active { .u-button.u-button-info.active, .u-button.u-button-info:active {
background-color: rgb(0,151,167); background-color: rgb(0,151,167);
border-color: rgb(0,151,167); } border-color: rgb(0,151,167); }
@ -6131,12 +6125,9 @@ input.u-button[type="submit"] {
color: rgb(255,255,255); color: rgb(255,255,255);
background-color: rgb(255,152,0); background-color: rgb(255,152,0);
border: 1px rgb(255,152,0) solid; } border: 1px rgb(255,152,0) solid; }
.u-button.u-button-warning:hover { .u-button.u-button-warning.focus, .u-button.u-button-warning:focus, .u-button.u-button-warning:hover {
background-color: rgb(245,124,0); background-color: rgb(245,124,0);
border-color: rgb(245,124,0); } border-color: rgb(245,124,0); }
.u-button.u-button-warning.focus, .u-button.u-button-warning:focus:hover {
background-color: rgb(255,152,0);
border-color: rgb(255,152,0); }
.u-button.u-button-warning.active, .u-button.u-button-warning:active { .u-button.u-button-warning.active, .u-button.u-button-warning:active {
background-color: rgb(245,124,0); background-color: rgb(245,124,0);
border-color: rgb(245,124,0); } border-color: rgb(245,124,0); }
@ -6145,12 +6136,9 @@ input.u-button[type="submit"] {
color: rgb(255,255,255); color: rgb(255,255,255);
background-color: rgb(76,175,80); background-color: rgb(76,175,80);
border: 1px rgb(76,175,80) solid; } border: 1px rgb(76,175,80) solid; }
.u-button.u-button-success:hover { .u-button.u-button-success.focus, .u-button.u-button-success:focus, .u-button.u-button-success:hover {
background-color: rgb(56,142,60); background-color: rgb(56,142,60);
border-color: rgb(56,142,60); } border-color: rgb(56,142,60); }
.u-button.u-button-success.focus, .u-button.u-button-success:focus:hover {
background-color: rgb(76,175,80);
border-color: rgb(76,175,80); }
.u-button.u-button-success.active, .u-button.u-button-success:active { .u-button.u-button-success.active, .u-button.u-button-success:active {
background-color: rgb(56,142,60); background-color: rgb(56,142,60);
border-color: rgb(56,142,60); } border-color: rgb(56,142,60); }
@ -6159,12 +6147,9 @@ input.u-button[type="submit"] {
color: rgb(255,255,255); color: rgb(255,255,255);
background-color: rgb(97,97,97); background-color: rgb(97,97,97);
border: 1px rgb(97,97,97) solid; } border: 1px rgb(97,97,97) solid; }
.u-button.u-button-dark:hover { .u-button.u-button-dark.focus, .u-button.u-button-dark:focus, .u-button.u-button-dark:hover {
background-color: rgb(66,66,66); background-color: rgb(66,66,66);
border-color: rgb(66,66,66); } border-color: rgb(66,66,66); }
.u-button.u-button-dark.focus, .u-button.u-button-dark:focus:hover {
background-color: rgb(97,97,97);
border-color: rgb(97,97,97); }
.u-button.u-button-dark.active, .u-button.u-button-dark:active { .u-button.u-button-dark.active, .u-button.u-button-dark:active {
background-color: rgb(66,66,66); background-color: rgb(66,66,66);
border-color: rgb(66,66,66); } border-color: rgb(66,66,66); }
@ -6173,12 +6158,9 @@ input.u-button[type="submit"] {
color: rgb(97,97,97); color: rgb(97,97,97);
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 1px rgb(255,255,255) solid; } border: 1px rgb(255,255,255) solid; }
.u-button.u-button-light:hover { .u-button.u-button-light.focus, .u-button.u-button-light:focus, .u-button.u-button-light:hover {
background-color: rgb(189,189,189); background-color: rgb(189,189,189);
border-color: rgb(189,189,189); } border-color: rgb(189,189,189); }
.u-button.u-button-light.focus, .u-button.u-button-light:focus:hover {
background-color: rgb(255,255,255);
border-color: rgb(255,255,255); }
.u-button.u-button-light.active, .u-button.u-button-light:active { .u-button.u-button-light.active, .u-button.u-button-light:active {
background-color: rgb(189,189,189); background-color: rgb(189,189,189);
border-color: rgb(189,189,189); } border-color: rgb(189,189,189); }
@ -6187,14 +6169,10 @@ input.u-button[type="submit"] {
color: rgb(76,175,80); color: rgb(76,175,80);
background-color: #fff; background-color: #fff;
border: 1px rgb(76,175,80) solid; } border: 1px rgb(76,175,80) solid; }
.u-button-border.u-button-success:hover { .u-button-border.u-button-success.focus, .u-button-border.u-button-success:focus, .u-button-border.u-button-success:hover {
background-color: rgb(56,142,60); background-color: rgb(56,142,60);
border-color: rgb(56,142,60); border-color: rgb(56,142,60);
color: #fff; } color: #fff; }
.u-button-border.u-button-success.focus, .u-button-border.u-button-success:focus:hover {
color: rgb(76,175,80);
background-color: #fff;
border-color: rgb(76,175,80); }
.u-button-border.u-button-success.active, .u-button-border.u-button-success:active { .u-button-border.u-button-success.active, .u-button-border.u-button-success:active {
color: #fff; color: #fff;
background-color: rgb(56,142,60); background-color: rgb(56,142,60);
@ -6204,14 +6182,10 @@ input.u-button[type="submit"] {
color: rgb(255,152,0); color: rgb(255,152,0);
background-color: #fff; background-color: #fff;
border: 1px rgb(255,152,0) solid; } border: 1px rgb(255,152,0) solid; }
.u-button-border.u-button-warning:hover { .u-button-border.u-button-warning.focus, .u-button-border.u-button-warning:focus, .u-button-border.u-button-warning:hover {
background-color: rgb(245,124,0); background-color: rgb(245,124,0);
border-color: rgb(245,124,0); border-color: rgb(245,124,0);
color: #fff; } color: #fff; }
.u-button-border.u-button-warning.focus, .u-button-border.u-button-warning:focus:hover {
color: rgb(255,152,0);
background-color: #fff;
border-color: rgb(255,152,0); }
.u-button-border.u-button-warning.active, .u-button-border.u-button-warning:active { .u-button-border.u-button-warning.active, .u-button-border.u-button-warning:active {
color: #fff; color: #fff;
background-color: rgb(245,124,0); background-color: rgb(245,124,0);
@ -6221,14 +6195,10 @@ input.u-button[type="submit"] {
color: rgb(244,67,54); color: rgb(244,67,54);
background-color: #fff; background-color: #fff;
border: 1px rgb(244,67,54) solid; } border: 1px rgb(244,67,54) solid; }
.u-button-border.u-button-danger:hover { .u-button-border.u-button-danger.focus, .u-button-border.u-button-danger:focus, .u-button-border.u-button-danger:hover {
background-color: rgb(211,47,47); background-color: rgb(211,47,47);
border-color: rgb(211,47,47); border-color: rgb(211,47,47);
color: #fff; } color: #fff; }
.u-button-border.u-button-danger.focus, .u-button-border.u-button-danger:focus:hover {
color: rgb(244,67,54);
background-color: #fff;
border-color: rgb(244,67,54); }
.u-button-border.u-button-danger.active, .u-button-border.u-button-danger:active { .u-button-border.u-button-danger.active, .u-button-border.u-button-danger:active {
color: #fff; color: #fff;
background-color: rgb(211,47,47); background-color: rgb(211,47,47);
@ -6238,14 +6208,10 @@ input.u-button[type="submit"] {
color: rgb(0,188,212); color: rgb(0,188,212);
background-color: #fff; background-color: #fff;
border: 1px rgb(0,188,212) solid; } border: 1px rgb(0,188,212) solid; }
.u-button-border.u-button-info:hover { .u-button-border.u-button-info.focus, .u-button-border.u-button-info:focus, .u-button-border.u-button-info:hover {
background-color: rgb(0,151,167); background-color: rgb(0,151,167);
border-color: rgb(0,151,167); border-color: rgb(0,151,167);
color: #fff; } color: #fff; }
.u-button-border.u-button-info.focus, .u-button-border.u-button-info:focus:hover {
color: rgb(0,188,212);
background-color: #fff;
border-color: rgb(0,188,212); }
.u-button-border.u-button-info.active, .u-button-border.u-button-info:active { .u-button-border.u-button-info.active, .u-button-border.u-button-info:active {
color: #fff; color: #fff;
background-color: rgb(0,151,167); background-color: rgb(0,151,167);
@ -6255,14 +6221,10 @@ input.u-button[type="submit"] {
color: rgb(245, 60, 50); color: rgb(245, 60, 50);
background-color: #fff; background-color: #fff;
border: 1px rgb(245, 60, 50) solid; } border: 1px rgb(245, 60, 50) solid; }
.u-button-border.u-button-primary:hover { .u-button-border.u-button-primary.focus, .u-button-border.u-button-primary:focus, .u-button-border.u-button-primary:hover {
background-color: rgb(230, 0, 18); background-color: rgb(230, 0, 18);
border-color: rgb(230, 0, 18); border-color: rgb(230, 0, 18);
color: #fff; } color: #fff; }
.u-button-border.u-button-primary.focus, .u-button-border.u-button-primary:focus:hover {
color: rgb(245, 60, 50);
background-color: #fff;
border-color: rgb(245, 60, 50); }
.u-button-border.u-button-primary.active, .u-button-border.u-button-primary:active { .u-button-border.u-button-primary.active, .u-button-border.u-button-primary:active {
color: #fff; color: #fff;
background-color: rgb(230, 0, 18); background-color: rgb(230, 0, 18);
@ -6272,14 +6234,10 @@ input.u-button[type="submit"] {
color: rgb(224,224,224); color: rgb(224,224,224);
background-color: #fff; background-color: #fff;
border: 1px rgb(224,224,224) solid; } border: 1px rgb(224,224,224) solid; }
.u-button-border.u-button-secondary:hover { .u-button-border.u-button-secondary.focus, .u-button-border.u-button-secondary:focus, .u-button-border.u-button-secondary:hover {
background-color: rgb(189,189,189); background-color: rgb(189,189,189);
border-color: rgb(189,189,189); border-color: rgb(189,189,189);
color: #fff; } color: #fff; }
.u-button-border.u-button-secondary.focus, .u-button-border.u-button-secondary:focus:hover {
color: rgb(224,224,224);
background-color: #fff;
border-color: rgb(224,224,224); }
.u-button-border.u-button-secondary.active, .u-button-border.u-button-secondary:active { .u-button-border.u-button-secondary.active, .u-button-border.u-button-secondary:active {
color: #fff; color: #fff;
background-color: rgb(189,189,189); background-color: rgb(189,189,189);
@ -6289,14 +6247,10 @@ input.u-button[type="submit"] {
color: rgb(97,97,97); color: rgb(97,97,97);
background-color: #fff; background-color: #fff;
border: 1px rgb(97,97,97) solid; } border: 1px rgb(97,97,97) solid; }
.u-button-border.u-button-dark:hover { .u-button-border.u-button-dark.focus, .u-button-border.u-button-dark:focus, .u-button-border.u-button-dark:hover {
background-color: rgb(66,66,66); background-color: rgb(66,66,66);
border-color: rgb(66,66,66); border-color: rgb(66,66,66);
color: #fff; } color: #fff; }
.u-button-border.u-button-dark.focus, .u-button-border.u-button-dark:focus:hover {
color: rgb(97,97,97);
background-color: #fff;
border-color: rgb(97,97,97); }
.u-button-border.u-button-dark.active, .u-button-border.u-button-dark:active { .u-button-border.u-button-dark.active, .u-button-border.u-button-dark:active {
color: #fff; color: #fff;
background-color: rgb(66,66,66); background-color: rgb(66,66,66);
@ -6306,14 +6260,10 @@ input.u-button[type="submit"] {
color: rgb(97,97,97); color: rgb(97,97,97);
background-color: #fff; background-color: #fff;
border: 1px rgb(255,255,255) solid; } border: 1px rgb(255,255,255) solid; }
.u-button-border.u-button-light:hover { .u-button-border.u-button-light.focus, .u-button-border.u-button-light:focus, .u-button-border.u-button-light:hover {
background-color: rgb(189,189,189); background-color: rgb(189,189,189);
border-color: rgb(189,189,189); border-color: rgb(189,189,189);
color: #fff; } color: #fff; }
.u-button-border.u-button-light.focus, .u-button-border.u-button-light:focus:hover {
color: rgb(97,97,97);
background-color: #fff;
border-color: rgb(255,255,255); }
.u-button-border.u-button-light.active, .u-button-border.u-button-light:active { .u-button-border.u-button-light.active, .u-button-border.u-button-light:active {
color: #fff; color: #fff;
background-color: rgb(189,189,189); background-color: rgb(189,189,189);
@ -6523,14 +6473,14 @@ input.u-button[type="submit"] {
display: inline-block; display: inline-block;
padding: 0 12px; padding: 0 12px;
width: 100%; width: 100%;
height: 32px; height: 30px;
cursor: text; cursor: text;
font-size: 14px; font-size: 14px;
line-height: 1.5; line-height: 1.5;
color: #424242; color: #424242;
background-color: #fff; background-color: #fff;
background-image: none; background-image: none;
border: 1px solid rgb(165, 173, 186); border: 1px solid #bdbdbd;
border-radius: 3px; border-radius: 3px;
transition: all .3s; } transition: all .3s; }
.u-form-control:focus { .u-form-control:focus {
@ -6540,18 +6490,18 @@ input.u-button[type="submit"] {
display: none; } display: none; }
.u-form-control[disabled] { .u-form-control[disabled] {
background: #F7F9FB; background: #eee;
border-color: #DFE1E6; border-color: #e0e0e0;
color: #909090; color: #BDBDBD;
cursor: not-allowed; } cursor: not-allowed; }
.u-form-control.lg { .u-form-control.lg {
height: 40px; height: 38px;
font-size: 14px; } font-size: 14px; }
.u-form-control.sm { .u-form-control.sm {
font-size: 12px; font-size: 12px;
height: 26px; } height: 24px; }
.u-form-control-search-wrapper { .u-form-control-search-wrapper {
position: absolute; position: absolute;
@ -6734,7 +6684,7 @@ input.u-button[type="submit"] {
border-radius: 3px; border-radius: 3px;
width: 50px; width: 50px;
text-align: center; text-align: center;
border: 1px solid rgb(165, 173, 186); } border: 1px solid #d7d7d7; }
.u-pagination .page_jump_btn, .u-pagination .page_jump_btn,
.u-pagination .page_jump_value { .u-pagination .page_jump_value {
margin: 0 8px; margin: 0 8px;
@ -7306,8 +7256,8 @@ ul {
box-sizing: border-box; box-sizing: border-box;
display: block; display: block;
background-color: #fff; background-color: #fff;
border-radius: 3px; border-radius: 4px;
border: 1px solid rgb(165, 173, 186); border: 1px solid #d9d9d9;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }
.u-select .u-select-selection :hover { .u-select .u-select-selection :hover {
border-color: #40a5ed; } border-color: #40a5ed; }
@ -7424,7 +7374,7 @@ ul {
line-height: 24px; } line-height: 24px; }
.u-select-sm .u-select-selection { .u-select-sm .u-select-selection {
border-radius: 3px; } border-radius: 4px; }
.u-select-sm .u-select-selection--single { .u-select-sm .u-select-selection--single {
height: 26px; } height: 26px; }
@ -7475,7 +7425,7 @@ ul {
width: 100%; width: 100%;
background: transparent; background: transparent;
outline: 0; outline: 0;
border-radius: 3px; } border-radius: 4px; }
.u-select-search--inline .u-select-search-field-mirror { .u-select-search--inline .u-select-search-field-mirror {
position: absolute; position: absolute;
top: 0; top: 0;
@ -7514,7 +7464,7 @@ ul {
line-height: 24px; } line-height: 24px; }
.u-select-selection--multiple .u-select-selection-choice { .u-select-selection--multiple .u-select-selection-choice {
background-color: #f3f3f3; background-color: #f3f3f3;
border-radius: 3px; border-radius: 4px;
cursor: default; cursor: default;
float: left; float: left;
padding: 0 16px; padding: 0 16px;
@ -7609,7 +7559,7 @@ ul {
.u-select-dropdown { .u-select-dropdown {
background-color: white; background-color: white;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
border-radius: 3px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
z-index: 1800; z-index: 1800;
left: -9999px; left: -9999px;
@ -7748,7 +7698,7 @@ ul {
vertical-align: middle; } vertical-align: middle; }
.u-search-input.u-input-group .u-input:first-child, .u-search-input.u-input-group .u-select:first-child { .u-search-input.u-input-group .u-input:first-child, .u-search-input.u-input-group .u-select:first-child {
border-radius: 3px; border-radius: 4px;
position: absolute; position: absolute;
top: -1px; top: -1px;
width: 100%; } width: 100%; }
@ -8236,7 +8186,7 @@ ul {
border-top-width: 0; border-top-width: 0;
border-bottom-color: #fff; } border-bottom-color: #fff; }
.u-tooltip.inverse.bottom .tooltip-arrow { .u-tooltip.inverse.bottom .tooltip-arrow {
border-bottom-color: rgb(165, 173, 186); } border-bottom-color: rgb(224,224,224); }
.u-tooltip.inverse-arrow.inverse.top .tooltip-arrow::after { .u-tooltip.inverse-arrow.inverse.top .tooltip-arrow::after {
top: 1px; top: 1px;
margin-left: -5px; margin-left: -5px;
@ -8244,14 +8194,14 @@ ul {
border-bottom-color: #fff; border-bottom-color: #fff;
border-bottom-width: inherit; } border-bottom-width: inherit; }
.u-tooltip.inverse-arrow.inverse.top .tooltip-arrow { .u-tooltip.inverse-arrow.inverse.top .tooltip-arrow {
border-bottom-color: rgb(165, 173, 186); } border-bottom-color: rgb(224,224,224); }
.u-tooltip.inverse.left .tooltip-arrow::after { .u-tooltip.inverse.left .tooltip-arrow::after {
border-right-width: 0; border-right-width: 0;
top: -5px; top: -5px;
margin-left: -6px; margin-left: -6px;
border-left-color: #fff; } border-left-color: #fff; }
.u-tooltip.inverse.left .tooltip-arrow { .u-tooltip.inverse.left .tooltip-arrow {
border-left-color: rgb(165, 173, 186); } border-left-color: rgb(224,224,224); }
.u-tooltip.inverse-arrow.inverse.right .tooltip-arrow::after { .u-tooltip.inverse-arrow.inverse.right .tooltip-arrow::after {
border-right-width: 0; border-right-width: 0;
top: -5px; top: -5px;
@ -8259,14 +8209,14 @@ ul {
border-left-color: #fff; border-left-color: #fff;
border-left-width: inherit; } border-left-width: inherit; }
.u-tooltip.inverse-arrow.inverse.right .tooltip-arrow { .u-tooltip.inverse-arrow.inverse.right .tooltip-arrow {
border-left-color: rgb(165, 173, 186); } border-left-color: rgb(224,224,224); }
.u-tooltip.inverse.right .tooltip-arrow::after { .u-tooltip.inverse.right .tooltip-arrow::after {
border-left-width: 0; border-left-width: 0;
top: -5px; top: -5px;
margin-left: 1px; margin-left: 1px;
border-right-color: #fff; } border-right-color: #fff; }
.u-tooltip.inverse.right .tooltip-arrow { .u-tooltip.inverse.right .tooltip-arrow {
border-right-color: rgb(165, 173, 186); } border-right-color: rgb(224,224,224); }
.u-tooltip.inverse-arrow.inverse.left .tooltip-arrow::after { .u-tooltip.inverse-arrow.inverse.left .tooltip-arrow::after {
border-left-width: 0; border-left-width: 0;
top: -5px; top: -5px;
@ -8274,7 +8224,7 @@ ul {
border-right-color: #fff; border-right-color: #fff;
border-right-width: inherit; } border-right-width: inherit; }
.u-tooltip.inverse-arrow.inverse.left .tooltip-arrow { .u-tooltip.inverse-arrow.inverse.left .tooltip-arrow {
border-right-color: rgb(165, 173, 186); } border-right-color: rgb(224,224,224); }
.u-tooltip.inverse.top .tooltip-arrow::after { .u-tooltip.inverse.top .tooltip-arrow::after {
top: -6px; top: -6px;
margin-left: -5px; margin-left: -5px;
@ -8282,7 +8232,7 @@ ul {
border-bottom-color: #d9d9d9; border-bottom-color: #d9d9d9;
border-top-color: #fff; } border-top-color: #fff; }
.u-tooltip.inverse.top .tooltip-arrow { .u-tooltip.inverse.top .tooltip-arrow {
border-top-color: rgb(165, 173, 186); } border-top-color: rgb(224,224,224); }
.u-tooltip.inverse-arrow.inverse.bottom .tooltip-arrow::after { .u-tooltip.inverse-arrow.inverse.bottom .tooltip-arrow::after {
top: -6px; top: -6px;
margin-left: -5px; margin-left: -5px;
@ -8291,11 +8241,11 @@ ul {
border-top-color: #fff; border-top-color: #fff;
border-top-width: inherit; } border-top-width: inherit; }
.u-tooltip.inverse-arrow.inverse.bottom .tooltip-arrow { .u-tooltip.inverse-arrow.inverse.bottom .tooltip-arrow {
border-top-color: rgb(165, 173, 186); } border-top-color: rgb(224,224,224); }
.u-tooltip.inverse .tooltip-inner { .u-tooltip.inverse .tooltip-inner {
background-color: #fff; background-color: #fff;
color: #333333; color: #333333;
border: 1px solid rgb(165, 173, 186); } border: 1px solid rgb(224,224,224); }
.u-tooltip.inverse .tooltip-arrow::after { .u-tooltip.inverse .tooltip-arrow::after {
position: absolute; position: absolute;
display: block; display: block;
@ -8968,7 +8918,7 @@ ul {
align-items: center; align-items: center;
-ms-flex-pack: center; -ms-flex-pack: center;
justify-content: center; justify-content: center;
background: #E7F2FC; } background: transparent; }
.u-row-hover2 { .u-row-hover2 {
position: absolute; position: absolute;
@ -9005,14 +8955,14 @@ ul {
display: inline-block; display: inline-block;
padding: 0 12px; padding: 0 12px;
width: 100%; width: 100%;
height: 32px; height: 30px;
cursor: text; cursor: text;
font-size: 14px; font-size: 14px;
line-height: 1.5; line-height: 1.5;
color: #424242; color: #424242;
background-color: #fff; background-color: #fff;
background-image: none; background-image: none;
border: 1px solid rgb(165, 173, 186); border: 1px solid #bdbdbd;
border-radius: 3px; border-radius: 3px;
transition: all .3s; } transition: all .3s; }
.u-form-control:focus { .u-form-control:focus {
@ -9022,18 +8972,18 @@ ul {
display: none; } display: none; }
.u-form-control[disabled] { .u-form-control[disabled] {
background: #F7F9FB; background: #eee;
border-color: #DFE1E6; border-color: #e0e0e0;
color: #909090; color: #BDBDBD;
cursor: not-allowed; } cursor: not-allowed; }
.u-form-control.lg { .u-form-control.lg {
height: 40px; height: 38px;
font-size: 14px; } font-size: 14px; }
.u-form-control.sm { .u-form-control.sm {
font-size: 12px; font-size: 12px;
height: 26px; } height: 24px; }
.u-form-control-search-wrapper { .u-form-control-search-wrapper {
position: absolute; position: absolute;
@ -9376,7 +9326,7 @@ ul {
border-radius: 3px; border-radius: 3px;
box-shadow: 0 1px 5px #ccc; box-shadow: 0 1px 5px #ccc;
background-clip: padding-box; background-clip: padding-box;
border: 1px solid rgb(165, 173, 186); border: 1px solid rgb(224,224,224);
line-height: 1.5; } line-height: 1.5; }
.rc-calendar-date-panel, .rc-calendar-date-panel,
@ -10521,7 +10471,6 @@ li.rc-time-picker-panel-select-option-disabled:hover {
background: #e3f2fd; } background: #e3f2fd; }
.demo25 { .demo25 {
width: 700px;
height: 100%; } height: 100%; }
.demo25 .u-table-filter-column-filter-icon { .demo25 .u-table-filter-column-filter-icon {
right: 15px; } right: 15px; }
@ -10539,11 +10488,6 @@ th:hover .uf {
padding-bottom: 0px; } padding-bottom: 0px; }
.opt-btns button {
background: #505F79;
height: 26px;
color: #FFFFFF;
line-height: 26px; }
.demo8 .u-table { .demo8 .u-table {
margin-bottom: 11px; } margin-bottom: 11px; }

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

723
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "bee-table", "name": "bee-table",
"version": "2.0.4", "version": "2.0.5-beta.0",
"description": "Table ui component for react", "description": "Table ui component for react",
"keywords": [ "keywords": [
"react", "react",

31
src/Table.js
View File

@ -320,6 +320,10 @@ class Table extends Component {
if (index !== -1) { if (index !== -1) {
expandedRows.splice(index, 1); expandedRows.splice(index, 1);
} }
//
if(this.currentHoverKey == rowKey && this.hoverDom){
this.hoverDom.style.display = 'none';
}
this.onExpandedRowsChange(expandedRows); this.onExpandedRowsChange(expandedRows);
} }
@ -1114,20 +1118,23 @@ class Table extends Component {
currentHoverKey: isHover ? key : null, currentHoverKey: isHover ? key : null,
}); });
} }
if(this.hoverDom && isHover){ if(this.hoverDom){
this.currentHoverKey = key; if(isHover){
const td = closest(event.target,'td'); this.currentHoverKey = key;
if(td){ const td = closest(event.target,'td');
const scrollTop = this.lastScrollTop ?this.lastScrollTop:0 if(td){
let top = td.offsetTop - scrollTop; const scrollTop = this.lastScrollTop ?this.lastScrollTop:0
if(this.refs.headTable){ let top = td.offsetTop - scrollTop;
top = top + this.refs.headTable.clientHeight; if(this.refs.headTable){
top = top + this.refs.headTable.clientHeight;
}
this.hoverDom.style.top = top + 'px';
this.hoverDom.style.height = td.offsetHeight + 'px';
this.hoverDom.style.lineHeight = td.offsetHeight + 'px';
this.hoverDom.style.display = 'block';
} }
this.hoverDom.style.top = top + 'px';
this.hoverDom.style.height = td.offsetHeight + 'px';
this.hoverDom.style.lineHeight = td.offsetHeight + 'px';
this.hoverDom.style.display = 'block';
} }
} }
onRowHover && onRowHover(currentIndex,record); onRowHover && onRowHover(currentIndex,record);

2
src/Table.scss
View File

@ -786,7 +786,7 @@ $checkbox-height:16px;
display: none; display: none;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: $table-hover-color background: transparent;
} }
.u-row-hover2{ .u-row-hover2{