补充hover显示菜单示例

2019-02-18 14:54:33 +08:00 · 2019-02-18 14:54:33 +08:00 · d767e1af81
parent ebdcaa5563
commit d767e1af81
13 changed files with 162 additions and 61 deletions
--- a/build/Table.css
+++ b/build/Table.css
@ -180,11 +180,11 @@
  .u-table td {
    border-bottom: 1px solid #e9e9e9; }
  .u-table tr:hover {
-    background: rgb(227,242,253); }
+    background: #E7F2FC; }
    .u-table tr:hover td .uf-eye {
      visibility: visible !important; }
  .u-table tr.tr-row-hover {
-    background: rgb(227,242,253); }
+    background: #E7F2FC; }
  .u-table th,
  .u-table td {
    padding: 12px 8px;
@ -322,6 +322,8 @@
    .u-table-fixed-right-expanded-row {
      color: transparent;
      pointer-events: none; }
+  .u-table-scroll-position-left .u-table-fixed-left {
+    box-shadow: none; }
  .u-table-scroll-position-right .u-table-fixed-right {
    box-shadow: none; }
  .u-table-thead .filter-text, .u-table-thead .filter-dropdown, .u-table-thead .filter-date {
@ -637,3 +639,15 @@
    height: 32px;
    padding: 0px 16px 0 16px;
    cursor: pointer; }
+
+.u-row-hover {
+  position: absolute;
+  right: 24px;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  background: #E7F2FC; }
+
+.u-row-hover2 {
+  position: absolute;
+  left: 100; }
--- a/build/Table.js
+++ b/build/Table.js
@ -77,6 +77,7 @@ var propTypes = {
  expandedRowClassName: _propTypes2["default"].func,
  childrenColumnName: _propTypes2["default"].string,
  onExpand: _propTypes2["default"].func,
+  onRowHover: _propTypes2["default"].func,
  onExpandedRowsChange: _propTypes2["default"].func,
  indentSize: _propTypes2["default"].number,
  onRowClick: _propTypes2["default"].func,
@ -171,6 +172,16 @@ var Table = function (_Component) {
      );
    };

+    _this.onRowHoverMouseEnter = function () {
+
+      _this.store.setState({
+        currentHoverKey: _this.currentHoverKey
+      });
+      _this.hoverDom.style.display = 'block';
+    };
+
+    _this.onRowHoverMouseLeave = function () {};
+
    _this.onFocus = function (e) {
      _this.props.onKeyTab && _this.props.onKeyTab();
    };
@ -239,6 +250,7 @@ var Table = function (_Component) {
    _this.handleBodyScroll = _this.handleBodyScroll.bind(_this);
    _this.handleRowHover = _this.handleRowHover.bind(_this);
    _this.computeTableWidth = _this.computeTableWidth.bind(_this);
+    _this.onBodyMouseLeave = _this.onBodyMouseLeave.bind(_this);
    return _this;
  }

@ -676,9 +688,9 @@ var Table = function (_Component) {
      var className = rowClassName(record, i, indent);

      var onHoverProps = {};
-      if (this.columnManager.isAnyColumnsFixed()) {
-        onHoverProps.onHover = this.handleRowHover;
-      }
+
+      onHoverProps.onHover = this.handleRowHover;
+
      //fixedIndex一般是跟index是一个值的，只有是树结构时，会讲子节点的值也累计上
      var fixedIndex = i;
      //判断是否是tree结构
@ -748,8 +760,8 @@ var Table = function (_Component) {
        setRowParentIndex: props.setRowParentIndex,
        treeType: childrenColumn || this.treeType ? true : false,
        fixedIndex: fixedIndex + lazyCurrentIndex,
-        rootIndex: rootIndex
-
+        rootIndex: rootIndex,
+        hoverContent: props.hoverContent
      })));
      this.treeRowIndex++;
      var subVisible = visible && isRowExpanded;
@ -940,7 +952,7 @@ var Table = function (_Component) {
      }
      var tableBody = hasBody ? getBodyWrapper(_react2["default"].createElement(
        'tbody',
-        { className: clsPrefix + '-tbody' },
+        { className: clsPrefix + '-tbody', onMouseLeave: _this4.onBodyMouseLeave },
        _this4.getRows(columns, fixed)
      )) : null;
      var _drag_class = _this4.props.dragborder ? "table-drag-bordered" : "";
@ -977,7 +989,8 @@ var Table = function (_Component) {
        ref: 'bodyTable',
        onMouseOver: this.detectScrollTarget,
        onTouchStart: this.detectScrollTarget,
-        onScroll: this.handleBodyScroll
+        onScroll: this.handleBodyScroll,
+        onMouseLeave: this.onBodyMouseLeave
      },
      this.renderDragHideTable(),
      renderTable(!useFixedHeader)
@ -1128,12 +1141,22 @@ var Table = function (_Component) {
    return typeof this.findExpandedRow(record, index) !== 'undefined';
  };

+  Table.prototype.onBodyMouseLeave = function onBodyMouseLeave(e) {
+    this.hideHoverDom(e);
+  };
+
  Table.prototype.detectScrollTarget = function detectScrollTarget(e) {
    if (this.scrollTarget !== e.currentTarget) {
      this.scrollTarget = e.currentTarget;
    }
  };

+  Table.prototype.hideHoverDom = function hideHoverDom(e) {
+    if (this.hoverDom) {
+      this.hoverDom.style.display = 'none';
+    }
+  };
+
  Table.prototype.handleBodyScroll = function handleBodyScroll(e) {
    var _props8 = this.props,
        _props8$scroll = _props8.scroll,
@ -1194,15 +1217,30 @@ var Table = function (_Component) {
    this.lastScrollLeft = e.target.scrollLeft;
  };

-  Table.prototype.handleRowHover = function handleRowHover(isHover, key) {
+  Table.prototype.handleRowHover = function handleRowHover(isHover, key, event, currentIndex) {
    //增加新的API，设置是否同步Hover状态，提高性能，避免无关的渲染
-    var syncHover = this.props.syncHover;
+    var _props9 = this.props,
+        syncHover = _props9.syncHover,
+        onRowHover = _props9.onRowHover;
+    // 固定列、或者含有hoverdom时情况下同步hover状态

-    if (syncHover) {
+    if (this.columnManager.isAnyColumnsFixed() && syncHover) {
+      this.hoverKey = key;
      this.store.setState({
        currentHoverKey: isHover ? key : null
      });
    }
+    if (this.hoverDom && isHover) {
+      this.currentHoverKey = key;
+      var td = (0, _utils.closest)(event.target, 'td');
+      if (td) {
+        this.hoverDom.style.top = td.offsetTop + 'px';
+        this.hoverDom.style.height = td.offsetHeight + 'px';
+        this.hoverDom.style.lineHeight = td.offsetHeight + 'px';
+        this.hoverDom.style.display = 'block';
+      }
+    }
+    onRowHover && onRowHover(currentIndex);
  };

  Table.prototype.render = function render() {
@ -1264,7 +1302,15 @@ var Table = function (_Component) {
      ),
      _react2["default"].createElement(_beeLoading2["default"], _extends({
        container: this
-      }, loading))
+      }, loading)),
+      props.hoverContent && _react2["default"].createElement(
+        'div',
+        { className: 'u-row-hover',
+          onMouseEnter: this.onRowHoverMouseEnter, onMouseLeave: this.onRowHoverMouseLeave, ref: function ref(el) {
+            return _this6.hoverDom = el;
+          } },
+        props.hoverContent
+      )
    );
  };

--- a/build/TableHeader.js
+++ b/build/TableHeader.js
@ -661,10 +661,10 @@ var TableHeader = function (_Component) {
            var thDefaultObj = {};

            if (draggable) {
-              thClassName += clsPrefix + "-thead th-drag " + thHover + " ";
+              thClassName += " " + clsPrefix + "-thead th-drag " + thHover + " ";
            }
            if (dragborder) {
-              thClassName += clsPrefix + "-thead-th " + canDotDrag;
+              thClassName += " " + clsPrefix + "-thead-th " + canDotDrag;
            }
            thClassName += " " + fixedStyle;

--- a/build/TableRow.js
+++ b/build/TableRow.js
@ -195,20 +195,24 @@ var TableRow = function (_Component) {
    onRowDoubleClick(record, index, event);
  };

-  TableRow.prototype.onMouseEnter = function onMouseEnter() {
+  TableRow.prototype.onMouseEnter = function onMouseEnter(e) {
    var _props7 = this.props,
        onHover = _props7.onHover,
-        hoverKey = _props7.hoverKey;
+        hoverKey = _props7.hoverKey,
+        fixedIndex = _props7.fixedIndex;

-    onHover(true, hoverKey);
+    this.setState({ hovered: true });
+    onHover(true, hoverKey, e, fixedIndex);
  };

-  TableRow.prototype.onMouseLeave = function onMouseLeave() {
+  TableRow.prototype.onMouseLeave = function onMouseLeave(e) {
    var _props8 = this.props,
        onHover = _props8.onHover,
-        hoverKey = _props8.hoverKey;
+        hoverKey = _props8.hoverKey,
+        fixedIndex = _props8.fixedIndex;

-    onHover(false, hoverKey);
+    this.setState({ hovered: false });
+    onHover(false, hoverKey, e, fixedIndex);
  };

  TableRow.prototype.render = function render() {
@ -229,8 +233,7 @@ var TableRow = function (_Component) {
        indent = _props9.indent,
        indentSize = _props9.indentSize,
        isHiddenExpandIcon = _props9.isHiddenExpandIcon,
-        fixed = _props9.fixed,
-        hoverKey = _props9.hoverKey;
+        fixed = _props9.fixed;

    var showSum = false;
    var className = this.props.className;
@ -239,7 +242,7 @@ var TableRow = function (_Component) {
    if (this.state.hovered) {
      className += ' ' + clsPrefix + '-hover';
    }
-
+    // console.log('className--'+className,index);
    //判断是否为合计行
    if (className.indexOf('sumrow') > -1) {
      showSum = true;
@ -297,7 +300,8 @@ var TableRow = function (_Component) {
        // key={hoverKey}
        , ref: this.bindElement
      },
-      cells.length > 0 ? cells : _react2["default"].createElement('td', null)
+      cells.length > 0 ? cells : _react2["default"].createElement('td', null),
+      _react2["default"].createElement('div', { className: 'u-row-hover2' })
    );
  };

--- a/build/utils.js
+++ b/build/utils.js
@ -10,6 +10,7 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 exports.measureScrollbar = measureScrollbar;
 exports.debounce = debounce;
 exports.warningOnce = warningOnce;
+exports.getOffset = getOffset;
 exports.addClass = addClass;
 exports.removeClass = removeClass;
 exports.ObjectAssign = ObjectAssign;
@ -97,6 +98,19 @@ function warningOnce(condition, format, args) {
    warned[format] = true;
  }
 }
+function getOffset(Node, offset) {
+  if (!offset) {
+    offset = {};
+    offset.top = 0;
+    offset.left = 0;
+  }
+  if (Node == document.body) {
+    return offset;
+  }
+  offset.top += Node.offsetTop;
+  offset.left += Node.offsetLeft;
+  if (Node.offsetParent) return getOffset(Node.offsetParent, offset);else return offset;
+};

 var tryParseInt = exports.tryParseInt = function tryParseInt(value) {
  var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
--- a/demo/demolist/Demo35.js
+++ b/demo/demolist/Demo35.js
@ -68,14 +68,22 @@ class Demo35 extends Component {
    }
  }

- clickFun=()=>{
+  delFun=()=>{
  //  console.log('click'+this.currentIndex);
+  let {data} = this.state;
+  data.splice(this.currentIndex,1);
+  this.setState({
+    data
+  });
 }
- onRowHover=(index)=>{
+ onRowHover=(index,record)=>{
  this.currentIndex = index;
+  this.currentRecord = record;
 }
+  getHoverContent=()=>{
+    return <div className="opt-btns"><button  onClick={this.delFun}>删除</button> </div>
+  }
  render() {
-    let hoverContent = <div className="opt-btns"><button  onClick={this.clickFun}>删除</button> </div>
    return (
        
        <Table
@ -84,7 +92,7 @@ class Demo35 extends Component {
          parentNodeId='parent'
          height={43}
          headerHeight={42}
-          hoverContent={hoverContent}
+          hoverContent={this.getHoverContent}
          onRowHover={this.onRowHover}
          onRowClick={(record, index, indent) => {
            this.setState({
--- a/demo/index.js
+++ b/demo/index.js
--- a/dist/demo.js
+++ b/dist/demo.js
--- a/dist/demo.js.map
+++ b/dist/demo.js.map
--- a/docs/api.md
+++ b/docs/api.md
@ -57,6 +57,8 @@ import 'bee-table/build/Table.css';
 | syncHover       | 是否同步Hover状态到左侧Checkbox，关闭此功能有助于提升性能 | bool| true
 | loadBuffer       | 使用BigData高阶组件实现大数据加载时，上下加载的缓存 | number| 5
 | resetScroll       | 将表格横向滚动条位置还原 | bool| false
+| hoverContent       | hover某行时，动态渲染行菜单元素，此方法需返回行菜单元素的内容 | Function| 
+| onRowHover       | 行hover时的回调函数 | Function| 

 > 快捷键部分参考示例 (快捷键在table中的简单使用应用)

--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
 "name": "bee-table",
- "version": "1.6.38",
+ "version": "1.6.39",
 "description": "Table ui component for react",
 "keywords": [
  "react",
--- a/src/Table.js
+++ b/src/Table.js
@ -51,6 +51,7 @@ const propTypes = {
  onFilterClear: PropTypes.func,
  syncHover: PropTypes.bool,
  tabIndex:PropTypes.string,
+  hoverContent:PropTypes.func
 };

 const defaultProps = {
@ -83,7 +84,7 @@ const defaultProps = {
  syncHover: true,
  setRowHeight:()=>{},
  setRowParentIndex:()=>{},
-  tabIndex:'0'
+  tabIndex:'0',
 };

 class Table extends Component {
@ -625,7 +626,6 @@ class Table extends Component {
          treeType={childrenColumn||this.treeType?true:false}
          fixedIndex={fixedIndex+lazyCurrentIndex}
          rootIndex = {rootIndex}
-          hoverContent={props.hoverContent}
        />
      );
      this.treeRowIndex++;
@ -1060,7 +1060,8 @@ class Table extends Component {

  handleRowHover(isHover, key,event,currentIndex) {
    //增加新的API，设置是否同步Hover状态，提高性能，避免无关的渲染
-    let { syncHover,onRowHover } = this.props;
+    let { syncHover,onRowHover,data } = this.props;
+    const record = data[currentIndex];
    // 固定列、或者含有hoverdom时情况下同步hover状态
    if(this.columnManager.isAnyColumnsFixed() && syncHover ){
      this.hoverKey = key;
@ -1078,7 +1079,8 @@ class Table extends Component {
        this.hoverDom.style.display = 'block';
      }
    }
-    onRowHover && onRowHover(currentIndex);
+
+    onRowHover && onRowHover(currentIndex,record);

  }

@ -1164,7 +1166,7 @@ class Table extends Component {
          container={this}
          {...loading} />
        { props.hoverContent && <div className="u-row-hover"
-                                     onMouseEnter={this.onRowHoverMouseEnter} onMouseLeave={this.onRowHoverMouseLeave} ref={el=> this.hoverDom = el }>{props.hoverContent}</div>}
+                                     onMouseEnter={this.onRowHoverMouseEnter} onMouseLeave={this.onRowHoverMouseLeave} ref={el=> this.hoverDom = el }>{props.hoverContent()}</div>}
      </div>
    );
  }
--- a/src/TableRow.js
+++ b/src/TableRow.js
@ -230,7 +230,6 @@ class TableRow extends Component{
        ref={this.bindElement}
      >
        {cells.length>0?cells:<td></td>}
-        <div className="u-row-hover2" >{}</div>
      </tr>
    );
  }