publish 2.0.8-nc.9

2019-11-11 17:22:12 +08:00 · 2019-11-11 17:22:12 +08:00 · 35dd46006e
parent 9a40f28b16
commit 35dd46006e
5 changed files with 202 additions and 15 deletions
--- 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; }
--- 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',
--- 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',
      {
--- a/build/svg.js
+++ 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"];
--- 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",