publish 2.2.10

build/ColumnManager.js

@@ -51,12 +51,15 @@ var ColumnManager = function () {
       columns = dragHandleColumn.concat(columns);
     }
     columns = this.addOrderColumn(columns, showRowNum);
-
+    columns = this.deleteColumnNotShow(columns);
     this.columns = columns || this.normalize(elements);
 
     this.originWidth = originWidth;
   }
 
+  // delete the column which does not show
+
+
   // 向数据列中添加一列:序号
 
 
@@ -234,6 +237,7 @@ var ColumnManager = function () {
 
   ColumnManager.prototype.reset = function reset(columns, elements, showRowNum) {
     columns = this.addOrderColumn(columns, showRowNum);
+    columns = this.deleteColumnNotShow(columns);
     this.columns = columns || this.normalize(elements);
     this._cached = {};
   };
@@ -337,6 +341,17 @@ var ColumnManager = function () {
 var _initialiseProps = function _initialiseProps() {
   this._cached = {};
 
+  this.deleteColumnNotShow = function (columns) {
+    var len = columns.length;
+    for (var i = 0; i < len; i++) {
+      if (columns && columns[i] && columns[i].isShow === false) {
+        columns.splice(i, 1);
+        i--;
+      }
+    }
+    return columns;
+  };
+
   this.addOrderColumn = function (columns, showRowNum) {
     if (!showRowNum) {
       return columns;

build/Table.css

@@ -236,6 +236,21 @@
         width: 2px; }
     .u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) .u-checkbox {
       margin: 0; }
+  .u-table tr td.u-table-inline-icon {
+    position: relative;
+    padding-right: 24px; }
+    .u-table tr td.u-table-inline-icon span.u-table-inline-op-icon {
+      position: absolute;
+      right: 0; }
+      .u-table tr td.u-table-inline-icon span.u-table-inline-op-icon .uf {
+        display: block;
+        vertical-align: top; }
+    .u-table tr td.u-table-inline-icon span.u-table-inline-op-icon-hover {
+      visibility: hidden; }
+  .u-table tr.u-table-row-hover td.u-table-inline-icon span.u-table-inline-op-icon-hover {
+    visibility: visible; }
+  .u-table .u-table-inline-op-icon-hidden {
+    visibility: hidden; }
   .u-table tr.tr-row-hover {
     background: rgb(235, 236, 240); }
   .u-table th,
@@ -875,3 +890,10 @@
 
 .u-editable-table-tp .tooltip-inner {
   border-color: #F44336 !important; }
+
+.u-dropdown ul.u-table-inline-op-dropdowm li.u-dropdown-menu-item {
+  padding: 0 20px 0 10px;
+  height: 30px;
+  line-height: 30px; }
+  .u-dropdown ul.u-table-inline-op-dropdowm li.u-dropdown-menu-item i.uf {
+    font-size: 12px; }

build/TableCell.js

@@ -26,6 +26,14 @@ var _tool = require('bee-locale/build/tool');
 
 var _utils = require('./lib/utils');
 
+var _beeDropdown = require('bee-dropdown');
+
+var _beeDropdown2 = _interopRequireDefault(_beeDropdown);
+
+var _beeMenus = require('bee-menus');
+
+var _beeMenus2 = _interopRequireDefault(_beeMenus);
+
 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; }
@@ -36,6 +44,8 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
 
+var Item = _beeMenus2["default"].Item;
+
 var propTypes = {
   record: _propTypes2["default"].object,
   clsPrefix: _propTypes2["default"].string,
@@ -170,8 +180,84 @@ var TableCell = function (_Component) {
       return moment(data).format(format || 'YYYY-MM-DD');
     };
 
+    _this.renderSelect = function (data) {
+      var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+      if (config.options) {
+        data = config.options[data] || config.defaultShow;
+      }
+      return data;
+    };
+
+    _this.renderColumnMenu = function (colMenu, text, record, index) {
+      if (!colMenu) return null;
+      var menu = colMenu.menu,
+          _colMenu$trigger = colMenu.trigger,
+          trigger = _colMenu$trigger === undefined ? 'hover' : _colMenu$trigger,
+          _colMenu$className = colMenu.className,
+          className = _colMenu$className === undefined ? '' : _colMenu$className,
+          _colMenu$icon = colMenu.icon,
+          icon = _colMenu$icon === undefined ? _react2["default"].createElement('i', { className: 'uf uf-3dot-h' }) : _colMenu$icon,
+          _colMenu$iconSize = colMenu.iconSize,
+          iconSize = _colMenu$iconSize === undefined ? 21 : _colMenu$iconSize;
+
+      var items = [];
+      items = menu.map(function (item) {
+        return _react2["default"].createElement(
+          Item,
+          { key: item.key, onClick: function onClick() {
+              _this.onClickColMenu(item.callback, text, record, index);
+            } },
+          item.icon,
+          item.text
+        );
+      });
+      if (items.length === 0) return null;
+      className += ' u-table-inline-op-dropdowm';
+      var menus = _react2["default"].createElement(
+        _beeMenus2["default"],
+        { className: className },
+        items
+      );
+      var top = 'calc(50% - ' + iconSize / 2 + 'px)';
+      var visibility = _this.state.showDropdowm ? 'visible' : '';
+      var iconClassName = 'u-table-inline-op-icon u-table-inline-op-icon-hover';
+      return _react2["default"].createElement(
+        _beeDropdown2["default"],
+        {
+          trigger: [trigger],
+          overlay: menus,
+          animation: 'slide-up',
+          onVisibleChange: _this.changeShowDropdowm
+        },
+        _react2["default"].createElement(
+          'span',
+          { className: iconClassName, style: { fontSize: iconSize, top: top, visibility: visibility } },
+          icon
+        )
+      );
+    };
+
+    _this.changeShowDropdowm = function (val) {
+      _this.setState({
+        showDropdowm: val
+      });
+    };
+
+    _this.onClickColMenu = function (callback, text, record, index) {
+      if (callback) {
+        callback(text, record, index);
+      }
+      _this.setState({
+        showDropdowm: false
+      });
+    };
+
     _this.isInvalidRenderCellText = _this.isInvalidRenderCellText.bind(_this);
     _this.handleClick = _this.handleClick.bind(_this);
+    _this.state = {
+      showDropdowm: false
+    };
     return _this;
   }
 
@@ -198,7 +284,19 @@ var TableCell = function (_Component) {
   // 渲染整数/货币类型
 
 
-  // 渲染时间类型
+  // 渲染时间类型-l
+
+
+  // 渲染下拉类型，主要为编辑表格铺垫
+
+
+  // 渲染行内菜单
+
+
+  // 下拉按钮状态改变，点击后保持图标常驻
+
+
+  // 菜单点击事件
 
 
   TableCell.prototype.render = function render() {
@@ -241,6 +339,7 @@ var TableCell = function (_Component) {
       }
     }
 
+    var colMenu = this.renderColumnMenu(column.cellMenu, text, record, index);
     // 根据 fieldType 来渲染数据
     if (!render) {
       switch (column.fieldType) {
@@ -283,6 +382,11 @@ var TableCell = function (_Component) {
             text = this.renderDate(text, column.dateConfig);
             break;
           }
+        case 'select':
+          {
+            text = this.renderSelect(text, column.selectConfig);
+            break;
+          }
         default:
           {
             break;
@@ -321,6 +425,9 @@ var TableCell = function (_Component) {
     if (expandIcon && expandIcon.props.expandable) {
       className = className + (' ' + clsPrefix + '-has-expandIcon');
     }
+    if (colMenu) {
+      className += ' u-table-inline-icon';
+    }
     return _react2["default"].createElement(
       'td',
       {
@@ -333,7 +440,8 @@ var TableCell = function (_Component) {
       },
       indentText,
       expandIcon,
-      text
+      text,
+      colMenu
     );
   };
 

build/TableHeader.js

@@ -754,7 +754,7 @@ var _initialiseProps = function _initialiseProps() {
     // }
     if (!_this3.props.onDrop) return;
     // this.props.onDrop(event,target);
-    _this3.props.onDrop(event, { dragSource: _this3.currentObj, dragTarg: colum });
+    _this3.props.onDrop(event, { dragSource: _this3.currentObj, dragTarg: e.column });
   };
 
   this.onDragEnter = function (e) {

dist/demo.css

@@ -223,6 +223,21 @@
         width: 2px; }
     .u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) .u-checkbox {
       margin: 0; }
+  .u-table tr td.u-table-inline-icon {
+    position: relative;
+    padding-right: 24px; }
+    .u-table tr td.u-table-inline-icon span.u-table-inline-op-icon {
+      position: absolute;
+      right: 0; }
+      .u-table tr td.u-table-inline-icon span.u-table-inline-op-icon .uf {
+        display: block;
+        vertical-align: top; }
+    .u-table tr td.u-table-inline-icon span.u-table-inline-op-icon-hover {
+      visibility: hidden; }
+  .u-table tr.u-table-row-hover td.u-table-inline-icon span.u-table-inline-op-icon-hover {
+    visibility: visible; }
+  .u-table .u-table-inline-op-icon-hidden {
+    visibility: hidden; }
   .u-table tr.tr-row-hover {
     background: rgb(235, 236, 240); }
   .u-table th,
@@ -867,6 +882,13 @@
 .u-editable-table-tp .tooltip-inner {
   border-color: #F44336 !important; }
 
+.u-dropdown ul.u-table-inline-op-dropdowm li.u-dropdown-menu-item {
+  padding: 0 20px 0 10px;
+  height: 30px;
+  line-height: 30px; }
+  .u-dropdown ul.u-table-inline-op-dropdowm li.u-dropdown-menu-item i.uf {
+    font-size: 12px; }
+
 .selected {
   background: #FFF7E7; }
 

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bee-table",
- "version": "2.2.9",
+ "version": "2.2.10",
  "description": "Table ui component for react",
  "keywords": [
   "react",

src/TableHeader.js

@@ -504,7 +504,7 @@ class TableHeader extends Component {
     // }
     if(!this.props.onDrop)return;
     // this.props.onDrop(event,target);
-    this.props.onDrop(event,{dragSource:this.currentObj,dragTarg:colum});
+    this.props.onDrop(event,{dragSource:this.currentObj,dragTarg:e.column});
   };