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

publish 2.0.8-nc.9

This commit is contained in:
yangchch6 2019-11-11 17:22:12 +08:00
parent 9a40f28b16
commit 35dd46006e
5 changed files with 202 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
build/Table.css
View File

@ -246,6 +246,8 @@
color: rgb(33, 33, 33); }
.u-table.fixed-height td {
padding: 0px 8px; }
.u-table.fixed-height th {
padding: 0px 8px; }
.u-table-fixed-header .u-table-body {
background: #fff;
position: relative; }
@ -714,3 +716,22 @@
::-webkit-scrollbar-track-piece {
display: none; }
.u-table-adjustSize-btn.u-button {
min-width: 0;
padding: 4px 12px; }
.u-table-adjustSize-btn.u-button .uf {
padding: 0; }
.u-table-adjustSize-btn.u-button .uf:first-child {
margin-right: 8px; }
.u-table-adjustSize-btn.u-button .uf:last-child {
font-size: 12px; }
.u-table-adjustSize-menus.u-dropdown-menu > .u-dropdown-menu-item {
display: flex;
align-items: center;
padding: 0 8px;
line-height: 32px;
height: 32px; }
.u-table-adjustSize-menus.u-dropdown-menu > .u-dropdown-menu-item svg {
margin-right: 4px; }

151
build/Table.js
View File

@ -48,6 +48,30 @@ var _beeLoading = require('bee-loading');
var _beeLoading2 = _interopRequireDefault(_beeLoading);
var _beeDropdown = require('bee-dropdown');
var _beeDropdown2 = _interopRequireDefault(_beeDropdown);
var _beeMenus = require('bee-menus');
var _beeMenus2 = _interopRequireDefault(_beeMenus);
var _beeButton = require('bee-button');
var _beeButton2 = _interopRequireDefault(_beeButton);
var _beeIcon = require('bee-icon');
var _beeIcon2 = _interopRequireDefault(_beeIcon);
var _svg = require('./svg');
var _svg2 = _interopRequireDefault(_svg);
var _Portal = require('bee-overlay/build/Portal');
var _Portal2 = _interopRequireDefault(_Portal);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
@ -100,7 +124,9 @@ var propTypes = {
onFilterClear: _propTypes2["default"].func,
syncHover: _propTypes2["default"].bool,
tabIndex: _propTypes2["default"].string,
hoverContent: _propTypes2["default"].func
hoverContent: _propTypes2["default"].func,
canConfigureTableSize: _propTypes2["default"].bool,
getToolbarContainer: _propTypes2["default"].func
};
var defaultProps = {
@ -145,7 +171,8 @@ var defaultProps = {
setRowHeight: function setRowHeight() {},
setRowParentIndex: function setRowParentIndex() {},
tabIndex: '0',
heightConsistent: false
heightConsistent: false,
canConfigureTableSize: false
};
var Table = function (_Component) {
@ -203,6 +230,75 @@ var Table = function (_Component) {
_this.props.onTableKeyDown && _this.props.onTableKeyDown();
};
_this.getTableToolbar = function () {
var clsPrefix = _this.props.clsPrefix;
var menu = _react2["default"].createElement(
_beeMenus2["default"],
{ className: clsPrefix + '-adjustSize-menus', onSelect: _this.onConfigMenuSelect },
_react2["default"].createElement(
_beeMenus2["default"].Item,
{ key: 'sm' },
_svg2["default"].compact,
'\u7D27\u51D1\u578B'
),
_react2["default"].createElement(
_beeMenus2["default"].Item,
{ key: 'md' },
_svg2["default"].moderate,
'\u9002\u4E2D'
),
_react2["default"].createElement(
_beeMenus2["default"].Item,
{ key: 'lg' },
_svg2["default"].easy,
'\u5BBD\u677E\u578B'
)
);
return _react2["default"].createElement(
_beeDropdown2["default"],
{
trigger: ['hover'],
overlay: menu,
placement: 'bottomRight',
animation: 'slide-up' },
_react2["default"].createElement(
_beeButton2["default"],
{ bordered: true, className: clsPrefix + '-adjustSize-btn' },
_react2["default"].createElement(_beeIcon2["default"], { type: 'uf-table' }),
_react2["default"].createElement(_beeIcon2["default"], { type: 'uf-arrow-down' })
)
);
};
_this.onConfigMenuSelect = function (_ref) {
var key = _ref.key;
var tableSizeConf = _this.state.tableSizeConf;
if (key === 'sm') {
tableSizeConf = {
height: 30,
headerHeight: 35,
fontSize: 12
};
} else if (key === 'lg') {
tableSizeConf = {
height: 50,
headerHeight: 50,
fontSize: 14
};
} else if (key === 'md') {
tableSizeConf = {
height: 40,
headerHeight: 40,
fontSize: 12
};
}
_this.setState({
tableSizeConf: tableSizeConf
});
};
var expandedRowKeys = [];
var rows = [].concat(_toConsumableArray(props.data));
_this.columnManager = new _ColumnManager2["default"](props.columns, props.children, props.originWidth);
@ -223,7 +319,8 @@ var Table = function (_Component) {
currentHoverKey: null,
scrollPosition: 'left',
fixedColumnsHeadRowsHeight: [],
fixedColumnsBodyRowsHeight: []
fixedColumnsBodyRowsHeight: [],
tableSizeConf: null //实现表格动态缩放
};
_this.onExpandedRowsChange = _this.onExpandedRowsChange.bind(_this);
@ -449,6 +546,7 @@ var Table = function (_Component) {
};
Table.prototype.getHeader = function getHeader(columns, fixed) {
var tableSizeConf = this.state.tableSizeConf;
var _props = this.props,
filterDelay = _props.filterDelay,
onFilterChange = _props.onFilterChange,
@ -485,7 +583,11 @@ var Table = function (_Component) {
});
}
var trStyle = headerHeight && !fixed ? { height: headerHeight } : fixed ? this.getHeaderRowStyle(columns, rows) : null;
// const trStyle = headerHeight&&!fixed ? { height: headerHeight } : (fixed ? this.getHeaderRowStyle(columns, rows) : null);
var trStyle = fixed ? this.getHeaderRowStyle(columns, rows) : headerHeight ? { height: headerHeight } : null;
if (!fixed && tableSizeConf && tableSizeConf.headerHeight) {
trStyle = { height: tableSizeConf.headerHeight };
}
var drop = draggable ? { onDragStart: onDragStart, onDragOver: onDragOver, onDrop: onDrop, onDragEnter: onDragEnter, draggable: draggable } : {};
var dragBorder = dragborder ? { onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, dragborder: dragborder, onThMouseMove: onThMouseMove, dragborderKey: dragborderKey, onDropBorder: onDropBorder } : {};
var contentWidthDiff = 0;
@ -674,7 +776,9 @@ var Table = function (_Component) {
var childrenColumnName = props.childrenColumnName;
var expandedRowRender = props.expandedRowRender;
var expandRowByClick = props.expandRowByClick;
var fixedColumnsBodyRowsHeight = this.state.fixedColumnsBodyRowsHeight;
var _state2 = this.state,
fixedColumnsBodyRowsHeight = _state2.fixedColumnsBodyRowsHeight,
tableSizeConf = _state2.tableSizeConf;
var rst = [];
@ -727,6 +831,10 @@ var Table = function (_Component) {
} else if (fixed || props.heightConsistent) {
height = fixedColumnsBodyRowsHeight[fixedIndex];
}
// 如果切换了配置，以自定义配置的高度为准
if (!fixed && !props.heightConsistent && tableSizeConf && tableSizeConf.headerHeight) {
height = tableSizeConf.height;
}
var leafColumns = void 0;
if (fixed === 'left') {
@ -786,7 +894,8 @@ var Table = function (_Component) {
treeType: childrenColumn || this.treeType ? true : false,
fixedIndex: fixedIndex + lazyCurrentIndex,
rootIndex: rootIndex,
syncHover: props.syncHover
syncHover: props.syncHover,
tableSizeConf: tableSizeConf
})));
this.treeRowIndex++;
var subVisible = visible && isRowExpanded;
@ -819,11 +928,11 @@ var Table = function (_Component) {
var cols = [];
var self = this;
var _state2 = this.state,
_state2$contentWidthD = _state2.contentWidthDiff,
contentWidthDiff = _state2$contentWidthD === undefined ? 0 : _state2$contentWidthD,
_state2$lastShowIndex = _state2.lastShowIndex,
lastShowIndex = _state2$lastShowIndex === undefined ? 0 : _state2$lastShowIndex;
var _state3 = this.state,
_state3$contentWidthD = _state3.contentWidthDiff,
contentWidthDiff = _state3$contentWidthD === undefined ? 0 : _state3$contentWidthD,
_state3$lastShowIndex = _state3.lastShowIndex,
lastShowIndex = _state3$lastShowIndex === undefined ? 0 : _state3$lastShowIndex;
if (this.props.expandIconAsCell && fixed !== 'right') {
cols.push(_react2["default"].createElement('col', {
@ -1304,9 +1413,16 @@ var Table = function (_Component) {
onRowHover && onRowHover(currentIndex, record);
};
/**
* 自定义设置表格行高、字体大小
*/
Table.prototype.render = function render() {
var _this6 = this;
var tableSizeConf = this.state.tableSizeConf;
var props = this.props;
var clsPrefix = props.clsPrefix;
@ -1322,7 +1438,7 @@ var Table = function (_Component) {
}
className += ' ' + clsPrefix + '-scroll-position-' + this.state.scrollPosition;
//如果传入height说明是固定高度
if (props.height) {
if (props.height || tableSizeConf) {
className += ' fixed-height';
}
var isTableScroll = this.columnManager.isAnyColumnsFixed() || props.scroll.x || props.scroll.y;
@ -1332,13 +1448,22 @@ var Table = function (_Component) {
show: loading
};
}
var portal = props.canConfigureTableSize && typeof window !== 'undefined' && props.getToolbarContainer ? _react2["default"].createElement(
_Portal2["default"],
{ container: props.getToolbarContainer },
this.getTableToolbar()
) : this.getTableToolbar();
return _react2["default"].createElement(
'div',
{ className: className, style: props.style, ref: function ref(el) {
return _this6.contentTable = el;
},
tabIndex: props.focusable && (props.tabIndex ? props.tabIndex : '0') },
props.canConfigureTableSize && _react2["default"].createElement(
'div',
{ className: clsPrefix + '-toolbar' },
portal
),
this.getTitle(),
_react2["default"].createElement(
'div',

18
build/TableRow.js
View File

@ -93,7 +93,8 @@ var TableRow = function (_Component) {
_this._timeout = null;
_this.state = {
hovered: false
hovered: false,
tableSizeConf: {}
};
_this.onRowClick = _this.onRowClick.bind(_this);
_this.onRowDoubleClick = _this.onRowDoubleClick.bind(_this);
@ -125,6 +126,17 @@ var TableRow = function (_Component) {
}
};
TableRow.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
var newTableSizeConf = nextProps.tableSizeConf;
var oldTableSizeConf = this.props.tableSizeConf;
if (newTableSizeConf !== oldTableSizeConf) {
this.setState({
tableSizeConf: newTableSizeConf
});
}
};
TableRow.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
if (this.props.treeType) {
this.setRowParentIndex();
@ -224,6 +236,7 @@ var TableRow = function (_Component) {
};
TableRow.prototype.render = function render() {
var tableSizeConf = this.state.tableSizeConf;
var _props9 = this.props,
clsPrefix = _props9.clsPrefix,
columns = _props9.columns,
@ -295,6 +308,9 @@ var TableRow = function (_Component) {
if (!visible) {
style.display = 'none';
}
if (tableSizeConf && tableSizeConf.fontSize) {
style.fontSize = tableSizeConf.fontSize;
}
return _react2["default"].createElement(
'tr',
{

25
build/svg.js Normal file
View File

@ -0,0 +1,25 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
// 紧凑、适中、宽松型图标，后续更新 iconfont 资源后，可以删掉该文件
exports["default"] = {
compact: React.createElement(
"svg",
{ width: "24", height: "24", xmlns: "http://www.w3.org/2000/svg" },
React.createElement("path", { d: "M5 7.554h13.999V6H5v1.554zm0 2.816h13.999V8.814H5v1.556zm0 2.814h13.999v-1.556H5v1.556zm0 2.814h13.999v-1.555H5v1.555zm0 2.815h13.999v-1.554H5v1.554z", fill: "#505F79", "fill-rule": "evenodd" })
),
moderate: React.createElement(
"svg",
{ width: "24", height: "24", xmlns: "http://www.w3.org/2000/svg" },
React.createElement("path", { d: "M5 9.163h14V6H5v3.163zm0 4.825h14v-3.163H5v3.163zm0 4.825h14v-3.164H5v3.164z", fill: "#505F79", "fill-rule": "evenodd" })
),
easy: React.createElement(
"svg",
{ width: "24", height: "24", xmlns: "http://www.w3.org/2000/svg" },
React.createElement("path", { d: "M5 11.075h14V6H5v5.075zm0 7.739h14v-5.075H5v5.075z", fill: "#505F79", "fill-rule": "evenodd" })
)
};
module.exports = exports["default"];

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "bee-table",
"version": "2.0.8-nc.7",
"version": "2.0.8-nc.9",
"description": "Table ui component for react",
"keywords": [
"react",