JavaScript
/
bee-table
3
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

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

This commit is contained in:
“jonyshi” 2018-12-04 09:02:45 +08:00
parent ccc5bbc89a 54897a4da4
commit 2e5803815b
8 changed files with 137 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
CHANGELOG.md
View File

@ -1,3 +1,18 @@
<a name="1.6.4"></a>
## [1.6.4](https://github.com/tinper-bee/bee-table/compare/v1.6.3...v1.6.4) (2018-12-03)
<a name="1.6.3"></a>
## [1.6.3](https://github.com/tinper-bee/bee-table/compare/v1.6.2...v1.6.3) (2018-12-03)
<a name="1.6.2"></a>
## [1.6.2](https://github.com/tinper-bee/bee-table/compare/v1.6.1...v1.6.2) (2018-12-03)
<a name="1.6.1"></a>
## [1.6.1](https://github.com/tinper-bee/bee-table/compare/v1.5.19...v1.6.1) (2018-12-03)
@ -99,7 +114,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-18)
## [1.5.1](https://github.com/tinper-bee/bee-table/compare/v1.5.0...v1.5.1) (2018-11-19)

36
build/Table.js
View File

@ -14,6 +14,10 @@ var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _componentClasses = require('component-classes');
var _componentClasses2 = _interopRequireDefault(_componentClasses);
var _TableRow = require('./TableRow');
var _TableRow2 = _interopRequireDefault(_TableRow);
@ -364,8 +368,8 @@ var Table = function (_Component) {
Table.prototype.getHeader = function getHeader(columns, fixed) {
var _props = this.props,
filterDelay = _props.filterDelay,
onFilterChange = _props.onFilterChange,
onFilterClear = _props.onFilterClear,
onFilterRowsDropChange = _props.onFilterRowsDropChange,
onFilterRowsChange = _props.onFilterRowsChange,
filterable = _props.filterable,
showHeader = _props.showHeader,
expandIconAsCell = _props.expandIconAsCell,
@ -417,9 +421,9 @@ var Table = function (_Component) {
rowStyle: trStyle,
fixed: fixed,
filterable: filterable,
onFilterChange: onFilterChange //过滤行输入或下拉之后回调
, onFilterClear: onFilterClear //过滤行清除后回调
, filterDelay: filterDelay,
onFilterRowsChange: onFilterRowsChange,
onFilterRowsDropChange: onFilterRowsDropChange,
filterDelay: filterDelay,
afterDragColWidth: afterDragColWidth,
contentDomWidth: this.contentDomWidth,
scrollbarWidth: this.scrollbarWidth,
@ -745,8 +749,7 @@ var Table = function (_Component) {
scroll = _props3$scroll === undefined ? {} : _props3$scroll,
getBodyWrapper = _props3.getBodyWrapper,
footerScroll = _props3.footerScroll,
headerScroll = _props3.headerScroll,
hideBodyScroll = _props3.hideBodyScroll;
headerScroll = _props3.headerScroll;
var useFixedHeader = this.props.useFixedHeader;
var bodyStyle = _extends({}, this.props.bodyStyle);
@ -782,6 +785,7 @@ var Table = function (_Component) {
//显示表头滚动条
if (headerScroll) {
if (fixed) {
//内容少，不用显示滚动条
if (this.domWidthDiff <= 0) {
headStyle.marginBottom = scrollbarWidth + 'px';
bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
@ -792,8 +796,6 @@ var Table = function (_Component) {
//内容少，不用显示滚动条
if (this.domWidthDiff > 0) {
headStyle.overflowX = 'hidden';
} else if (hideBodyScroll) {
bodyStyle.overflowX = 'hidden';
}
headStyle.marginBottom = '0px';
}
@ -1020,8 +1022,10 @@ var Table = function (_Component) {
};
Table.prototype.handleBodyScroll = function handleBodyScroll(e) {
var _props$scroll = this.props.scroll,
scroll = _props$scroll === undefined ? {} : _props$scroll;
var _props8 = this.props,
_props8$scroll = _props8.scroll,
scroll = _props8$scroll === undefined ? {} : _props8$scroll,
clsPrefix = _props8.clsPrefix;
var _refs = this.refs,
headTable = _refs.headTable,
bodyTable = _refs.bodyTable,
@ -1034,17 +1038,21 @@ var Table = function (_Component) {
return;
}
if (e.target.scrollLeft !== this.lastScrollLeft) {
var position = '';
if (e.target === bodyTable && headTable) {
headTable.scrollLeft = e.target.scrollLeft;
} else if (e.target === headTable && bodyTable) {
bodyTable.scrollLeft = e.target.scrollLeft;
}
if (e.target.scrollLeft === 0) {
this.setState({ scrollPosition: 'left' });
position = 'left';
} else if (e.target.scrollLeft + 1 >= e.target.children[0].getBoundingClientRect().width - e.target.getBoundingClientRect().width) {
this.setState({ scrollPosition: 'right' });
position = 'right';
} else if (this.state.scrollPosition !== 'middle') {
this.setState({ scrollPosition: 'middle' });
position = 'middle';
}
if (position) {
(0, _componentClasses2["default"])(this.contentTable).remove(new RegExp('^' + clsPrefix + '-scroll-position-.+$')).add(clsPrefix + '-scroll-position-' + position);
}
}
if (scroll.y) {

2
build/TableHeader.js
View File

@ -469,7 +469,7 @@ var TableHeader = function (_Component) {
// if(this.drag.option === 'border'){return;}
// let data = this.getCurrentEventData(e);
// if (!this.currentObj || this.currentObj.key == data.key) return;
// };
// };
/**
* 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

145
dist/demo.js vendored
View File

@ -7237,7 +7237,7 @@
duration: _propTypes2["default"].number,
onClose: _propTypes2["default"].func,
children: _propTypes2["default"].any,
color: _propTypes2["default"].oneOf(['info', 'success', 'danger', 'warning', 'light', 'dark', 'news', 'infolight', 'successlight', 'dangerlight', 'warninglight']),
color: _propTypes2["default"].oneOf(['light']),
title: _propTypes2["default"].any
};
@ -7336,7 +7336,7 @@
;
Notice.propTypes = propTypes;
Notice.PropTypes = _propTypes2["default"];
Notice.defaultProps = defaultProps;
exports["default"] = Notice;
@ -10582,6 +10582,10 @@
var _propTypes2 = _interopRequireDefault(_propTypes);
var _componentClasses = __webpack_require__(46);
var _componentClasses2 = _interopRequireDefault(_componentClasses);
var _TableRow = __webpack_require__(106);
var _TableRow2 = _interopRequireDefault(_TableRow);
@ -10932,8 +10936,8 @@
Table.prototype.getHeader = function getHeader(columns, fixed) {
var _props = this.props,
filterDelay = _props.filterDelay,
onFilterChange = _props.onFilterChange,
onFilterClear = _props.onFilterClear,
onFilterRowsDropChange = _props.onFilterRowsDropChange,
onFilterRowsChange = _props.onFilterRowsChange,
filterable = _props.filterable,
showHeader = _props.showHeader,
expandIconAsCell = _props.expandIconAsCell,
@ -10985,9 +10989,9 @@
rowStyle: trStyle,
fixed: fixed,
filterable: filterable,
onFilterChange: onFilterChange //过滤行输入或下拉之后回调
, onFilterClear: onFilterClear //过滤行清除后回调
, filterDelay: filterDelay,
onFilterRowsChange: onFilterRowsChange,
onFilterRowsDropChange: onFilterRowsDropChange,
filterDelay: filterDelay,
afterDragColWidth: afterDragColWidth,
contentDomWidth: this.contentDomWidth,
scrollbarWidth: this.scrollbarWidth,
@ -11313,8 +11317,7 @@
scroll = _props3$scroll === undefined ? {} : _props3$scroll,
getBodyWrapper = _props3.getBodyWrapper,
footerScroll = _props3.footerScroll,
headerScroll = _props3.headerScroll,
hideBodyScroll = _props3.hideBodyScroll;
headerScroll = _props3.headerScroll;
var useFixedHeader = this.props.useFixedHeader;
var bodyStyle = _extends({}, this.props.bodyStyle);
@ -11350,6 +11353,7 @@
//显示表头滚动条
if (headerScroll) {
if (fixed) {
//内容少，不用显示滚动条
if (this.domWidthDiff <= 0) {
headStyle.marginBottom = scrollbarWidth + 'px';
bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
@ -11360,8 +11364,6 @@
//内容少，不用显示滚动条
if (this.domWidthDiff > 0) {
headStyle.overflowX = 'hidden';
} else if (hideBodyScroll) {
bodyStyle.overflowX = 'hidden';
}
headStyle.marginBottom = '0px';
}
@ -11588,8 +11590,10 @@
};
Table.prototype.handleBodyScroll = function handleBodyScroll(e) {
var _props$scroll = this.props.scroll,
scroll = _props$scroll === undefined ? {} : _props$scroll;
var _props8 = this.props,
_props8$scroll = _props8.scroll,
scroll = _props8$scroll === undefined ? {} : _props8$scroll,
clsPrefix = _props8.clsPrefix;
var _refs = this.refs,
headTable = _refs.headTable,
bodyTable = _refs.bodyTable,
@ -11602,17 +11606,21 @@
return;
}
if (e.target.scrollLeft !== this.lastScrollLeft) {
var position = '';
if (e.target === bodyTable && headTable) {
headTable.scrollLeft = e.target.scrollLeft;
} else if (e.target === headTable && bodyTable) {
bodyTable.scrollLeft = e.target.scrollLeft;
}
if (e.target.scrollLeft === 0) {
this.setState({ scrollPosition: 'left' });
position = 'left';
} else if (e.target.scrollLeft + 1 >= e.target.children[0].getBoundingClientRect().width - e.target.getBoundingClientRect().width) {
this.setState({ scrollPosition: 'right' });
position = 'right';
} else if (this.state.scrollPosition !== 'middle') {
this.setState({ scrollPosition: 'middle' });
position = 'middle';
}
if (position) {
(0, _componentClasses2['default'])(this.contentTable).remove(new RegExp('^' + clsPrefix + '-scroll-position-.+$')).add(clsPrefix + '-scroll-position-' + position);
}
}
if (scroll.y) {
@ -12709,7 +12717,10 @@
if (_this.drag.option === 'border') {
return;
}
var currentIndex = parseInt(_utils.Event.getTarget(event).getAttribute("data-line-index"));
// console.log('-------onDragStart----------',event.target);
var th = _this.getThDome(event.target);
if (!th) return;
var currentIndex = parseInt(th.getAttribute("data-line-index"));
var currentKey = event.target.getAttribute('data-line-key');
event.dataTransfer.effectAllowed = "move";
@ -12729,6 +12740,7 @@
}
var data = _this.getCurrentEventData(e);
if (!data) return;
// console.log('-------onDrop----------',event.target);
if (!_this.currentObj || _this.currentObj.key == data.key) return;
if (!_this.props.onDrop) return;
_this.props.onDrop(event, { dragSource: _this.currentObj, dragTarg: data });
@ -13020,7 +13032,7 @@
// if(this.drag.option === 'border'){return;}
// let data = this.getCurrentEventData(e);
// if (!this.currentObj || this.currentObj.key == data.key) return;
// };
// };
/**
* 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】
@ -13030,7 +13042,12 @@
TableHeader.prototype.getCurrentEventData = function getCurrentEventData(e) {
var event = _utils.Event.getEvent(e);
var key = event.target.getAttribute('data-line-key');
var th = this.getThDome(event.target);
if (!th) {
console.log(" event target is not th ! ");
return null;
}
var key = th.getAttribute('data-line-key');
var data = this.props.rows[0].find(function (da) {
return da.key == key;
});
@ -13041,7 +13058,27 @@
return null;
}
};
/**
*根据拖拽，获取当前的Th属性
* @param {*} element
* @returns
* @memberof TableHeader
*/
TableHeader.prototype.getThDome = function getThDome(element) {
var _tagName = element.tagName.toLowerCase();
if (_tagName === 'i') return null;
if (_tagName != 'th') {
return this.getThDome(element.parentElement);
} else {
return element;
}
};
//---拖拽列交换----end-----
/**
* 过滤输入后或下拉条件的回调函数
*/
@ -21620,15 +21657,15 @@
InputNumber.prototype.ComponentWillMount = function ComponentWillMount() {};
InputNumber.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
if (!nextProps.hasOwnProperty('precision')) {
var data = judgeValue(nextProps);
this.setState({
value: data.value,
minusDisabled: data.minusDisabled,
plusDisabled: data.plusDisabled
});
this.tempStorage = data.value;
}
// if(!nextProps.hasOwnProperty('precision')){//如果没有 precision
var data = judgeValue(nextProps);
this.setState({
value: data.value,
minusDisabled: data.minusDisabled,
plusDisabled: data.plusDisabled
});
this.tempStorage = data.value;
// }
};
InputNumber.prototype.ComponentWillUnMount = function ComponentWillUnMount() {
@ -59411,18 +59448,18 @@
}
};
Popconfirm.prototype.handleClose = function handleClose(e) {
Popconfirm.prototype.handleClose = function handleClose() {
var onClose = this.props.onClose;
this.hide();
onClose && onClose(e);
onClose && onClose();
};
Popconfirm.prototype.handleCancel = function handleCancel(e) {
Popconfirm.prototype.handleCancel = function handleCancel() {
var onCancel = this.props.onCancel;
this.hide();
onCancel && onCancel(e);
onCancel && onCancel();
};
Popconfirm.prototype.handleHide = function handleHide() {
@ -59458,8 +59495,7 @@
content = _props.content,
children = _props.children,
onClick = _props.onClick,
stopbubble = _props.stopbubble,
props = _objectWithoutProperties(_props, ['content', 'children', 'onClick', 'stopbubble']);
props = _objectWithoutProperties(_props, ['content', 'children', 'onClick']);
delete props.defaultOverlayShown;
@ -59476,7 +59512,6 @@
_extends({}, confirmProps, {
onClose: this.handleClose,
onCancel: this.handleCancel,
stopbubble: stopbubble,
placement: props.placement }),
content
);
@ -59591,11 +59626,6 @@
*/
arrowOffsetLeft: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string]),
/**
* 阻止冒泡
*/
stopbubble: _propTypes2["default"].number,
/**
* Title content
*/
@ -59606,7 +59636,6 @@
};
var defaultProps = {
stopbubble: 0,
placement: 'right',
clsPrefix: 'u-popconfirm',
locale: {}
@ -59618,27 +59647,7 @@
function Confirm(props) {
_classCallCheck(this, Confirm);
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
_this.cancel = function (e) {
var _this$props = _this.props,
stopbubble = _this$props.stopbubble,
onCancel = _this$props.onCancel;
stopbubble && e.stopPropagation();
onCancel(e);
};
_this.close = function (e) {
var _this$props2 = _this.props,
stopbubble = _this$props2.stopbubble,
onClose = _this$props2.onClose;
stopbubble && e.stopPropagation();
onClose(e);
};
return _this;
return _possibleConstructorReturn(this, _React$Component.call(this, props));
}
Confirm.prototype.render = function render() {
@ -59660,8 +59669,7 @@
onClose = _props.onClose,
color = _props.color,
onCancel = _props.onCancel,
stopbubble = _props.stopbubble,
props = _objectWithoutProperties(_props, ['placement', 'positionTop', 'positionLeft', 'arrowOffsetTop', 'arrowOffsetLeft', 'clsPrefix', 'trigger', 'title', 'className', 'style', 'children', 'locale', 'onClose', 'color', 'onCancel', 'stopbubble']);
props = _objectWithoutProperties(_props, ['placement', 'positionTop', 'positionLeft', 'arrowOffsetTop', 'arrowOffsetLeft', 'clsPrefix', 'trigger', 'title', 'className', 'style', 'children', 'locale', 'onClose', 'color', 'onCancel']);
var local = (0, _tool.getComponentLocale)(this.props, this.context, 'Popconfirm', function () {
return _i18n2["default"];
@ -59687,10 +59695,7 @@
_extends({}, props, {
role: 'tooltip',
className: (0, _classnames2["default"])(className, classes),
style: outerStyle,
onClick: function onClick(e) {
return stopbubble && e.stopPropagation();
}
style: outerStyle
}),
_react2["default"].createElement('div', { className: 'arrow', style: arrowStyle }),
_react2["default"].createElement(
@ -59703,13 +59708,13 @@
{ className: (0, _classnames2["default"])(clsPrefix + '-confirm') },
_react2["default"].createElement(
_beeButton2["default"],
{ onClick: this.cancel, size: 'sm', style: { minWidth: 50 },
{ onClick: onCancel, size: 'sm', style: { minWidth: 50 },
shape: 'border' },
local['cancel']
),
_react2["default"].createElement(
_beeButton2["default"],
{ onClick: this.close, size: 'sm', style: { minWidth: 50 }, colors: 'primary' },
{ onClick: onClose, size: 'sm', style: { minWidth: 50 }, colors: 'primary' },
local['ok']
)
)

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

3
package.json
View File

@ -1,6 +1,6 @@
{
"name": "bee-table",
"version": "1.6.2",
"version": "1.6.4",
"description": "Table ui component for react",
"keywords": [
"react",
@ -64,6 +64,7 @@
"shallowequal": "^1.0.2",
"throttle-debounce": "^2.0.1",
"tinper-bee-core": "latest",
"component-classes": "^1.2.6",
"warning": "^3.0.0"
},
"peerDependencies": {

32
src/Table.js
View File

@ -1,5 +1,6 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classes from 'component-classes';
import TableRow from './TableRow';
import TableHeader from './TableHeader';
import { measureScrollbar, debounce, warningOnce ,getMaxColChildrenLength} from './utils';
@ -293,7 +294,7 @@ class Table extends Component {
}
getHeader(columns, fixed) {
const { filterDelay, onFilterChange, onFilterClear, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop, draggable,
const { filterDelay, onFilterRowsDropChange, onFilterRowsChange, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop, draggable,
onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered} = this.props;
const rows = this.getHeaderRows(columns);
if (expandIconAsCell && fixed !== 'right') {
@ -328,8 +329,8 @@ class Table extends Component {
rowStyle={trStyle}
fixed={fixed}
filterable={filterable}
onFilterChange={onFilterChange}//过滤行输入或下拉之后回调
onFilterClear={onFilterClear}//过滤行清除后回调
onFilterRowsChange={onFilterRowsChange}
onFilterRowsDropChange={onFilterRowsDropChange}
filterDelay={filterDelay}
afterDragColWidth = {afterDragColWidth}
contentDomWidth={this.contentDomWidth}
@ -646,7 +647,7 @@ class Table extends Component {
getTable(options = {}) {
const { columns, fixed } = options;
const { clsPrefix, scroll = {}, getBodyWrapper, footerScroll,headerScroll,hideBodyScroll } = this.props;
const { clsPrefix, scroll = {}, getBodyWrapper, footerScroll,headerScroll } = this.props;
let { useFixedHeader } = this.props;
const bodyStyle = { ...this.props.bodyStyle };
const headStyle = {};
@ -681,6 +682,7 @@ class Table extends Component {
//显示表头滚动条
if(headerScroll){
if(fixed){
//内容少，不用显示滚动条
if(this.domWidthDiff <= 0){
headStyle.marginBottom = `${scrollbarWidth}px`;
bodyStyle.marginBottom = `-${scrollbarWidth}px`;
@ -689,14 +691,11 @@ class Table extends Component {
}
}else{
//内容少，不用显示滚动条
if(this.domWidthDiff > 0){
if(this.domWidthDiff > 0){
headStyle.overflowX = 'hidden';
}else if(hideBodyScroll){
bodyStyle.overflowX = 'hidden';
}
headStyle.marginBottom = `0px`;
}
}else{
if(fixed){
if(this.domWidthDiff > 0){
@ -898,7 +897,7 @@ class Table extends Component {
handleBodyScroll(e) {
const { scroll = {} } = this.props;
const { scroll = {},clsPrefix } = this.props;
const { headTable, bodyTable, fixedColumnsBodyLeft, fixedColumnsBodyRight } = this.refs;
// Prevent scrollTop setter trigger onScroll event
// http://stackoverflow.com/q/1386696
@ -906,20 +905,27 @@ class Table extends Component {
return;
}
if (e.target.scrollLeft !== this.lastScrollLeft) {
let position = '';
if (e.target === bodyTable && headTable) {
headTable.scrollLeft = e.target.scrollLeft;
} else if (e.target === headTable && bodyTable) {
bodyTable.scrollLeft = e.target.scrollLeft;
}
if (e.target.scrollLeft === 0) {
this.setState({ scrollPosition: 'left' });
position='left';
} else if (e.target.scrollLeft + 1 >=
e.target.children[0].getBoundingClientRect().width -
e.target.getBoundingClientRect().width) {
this.setState({ scrollPosition: 'right' });
position='right';
} else if (this.state.scrollPosition !== 'middle') {
this.setState({ scrollPosition: 'middle' });
position='middle';
}
if(position){
classes(this.contentTable)
.remove(new RegExp(`^${clsPrefix}-scroll-position-.+$`))
.add(`${clsPrefix}-scroll-position-${position}`);
}
}
if (scroll.y) {
if (fixedColumnsBodyLeft && e.target !== fixedColumnsBodyLeft) {
@ -972,7 +978,7 @@ class Table extends Component {
{this.getTitle()}
<div className={`${clsPrefix}-content`}>
<div className={isTableScroll ? `${clsPrefix}-scroll` : ''} >
<div className={isTableScroll ? `${clsPrefix}-scroll` : ''}>
{this.getTable({ columns: this.columnManager.groupedColumns() })}
{this.getEmptyText()}
{this.getFooter()}