diff --git a/build/Table.css b/build/Table.css index b90a9c4..7b62349 100755 --- a/build/Table.css +++ b/build/Table.css @@ -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; } diff --git a/build/Table.js b/build/Table.js index ed2555d..15376aa 100755 --- a/build/Table.js +++ b/build/Table.js @@ -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', diff --git a/build/TableRow.js b/build/TableRow.js index 3e2ced4..5c265d4 100755 --- a/build/TableRow.js +++ b/build/TableRow.js @@ -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', { diff --git a/build/svg.js b/build/svg.js new file mode 100644 index 0000000..286add5 --- /dev/null +++ b/build/svg.js @@ -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"]; \ No newline at end of file diff --git a/package.json b/package.json index d49855c..874ffec 100755 --- a/package.json +++ b/package.json @@ -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",