feat: feat haveExpandIcon to control hidden expandIcon

README.md

@@ -85,11 +85,12 @@ class Demo extends Component {
 | scroll                 | 横向或纵向支持滚动，也可用于指定滚动区域的宽高度：{ x: true, y: 300 } | object                                 | {}              |
 | rowRef                 | 获取行的ref                                  | Function(record, index, indent):string | () => null      |
 | getBodyWrapper         | 添加对table body的包装                         | Function(body)                         | body => body    |
-| expandedRowRender      | 额外的展开行                                   | Function                               | -               |
+| expandedRowRender      | 额外的展开行                                   | Function(record, index, indent):node | -               |
 | expandIconAsCell      | 展开按钮是否单独作为一个单元格                                   | bool                               | false               |
 | expandRowByClick       | 设置展开行是否通过点击行触发，此参数需要与上面参数搭配使用（默认是通过点击行前面的加号展开行 | bool                                   | false           |
 | footerScroll       | 表尾和body是否公用同一个横向滚动条。（ 如果footer中也是一个table组件，并且也具有滚动条，那么也需要加入footerScroll参数。 ） | bool                                   | false           |
 | loading       | 表格是否加载中 | bool|object(详情可以参考上面示例)                                   | false           |
+| haveExpandIcon       | 控制是否显示行展开icon.**注：该参数只有在和expandedRowRender同时使用才生效** | Function(record, index):bool   | () =>false |
 
 *注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
 

build/ExpandIcon.js

@@ -55,9 +55,10 @@ var ExpandIcon = function (_Component) {
         onExpand = _props.onExpand,
         needIndentSpaced = _props.needIndentSpaced,
         expanded = _props.expanded,
-        record = _props.record;
+        record = _props.record,
+        isHiddenExpandIcon = _props.isHiddenExpandIcon;
 
-    if (expandable) {
+    if (expandable && !isHiddenExpandIcon) {
       var expandClassName = expanded ? 'expanded' : 'collapsed';
       return _react2["default"].createElement('span', {
         className: clsPrefix + '-expand-icon ' + clsPrefix + '-' + expandClassName,
@@ -65,7 +66,7 @@ var ExpandIcon = function (_Component) {
           return onExpand(!expanded, record, e);
         }
       });
-    } else if (needIndentSpaced) {
+    } else if (needIndentSpaced || isHiddenExpandIcon) {
       return _react2["default"].createElement('span', { className: clsPrefix + '-expand-icon ' + clsPrefix + '-spaced' });
     }
     return null;

build/Table.css

@@ -1,5 +1,158 @@
+@charset "UTF-8";
 /* FormGroup */
 /*  Navlayout  */
+/* FormGroup */
+/*  Navlayout  */
+/**
+  * 加载背景
+  */
+/**
+  * 文字
+  */
+.u-loading-desc {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  font-size: 16px;
+  color: #000;
+  text-align: center; }
+
+/**
+  * default样式 单个圆圈加载
+  */
+.u-loading.u-loading-rotate > div {
+  position: absolute;
+  border-radius: 100%;
+  margin: 2px;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  border: 2px solid #0084ff;
+  border-bottom-color: transparent;
+  width: 40px;
+  height: 40px;
+  top: 50%;
+  left: 50%;
+  margin-left: -22px;
+  margin-top: -22px;
+  background: transparent !important;
+  display: inline-block;
+  -webkit-animation: rotate 0.75s 0s linear infinite;
+  animation: rotate 0.75s 0s linear infinite; }
+
+.u-loading.u-loading-rotate.u-loading-rotate-lg > div {
+  margin-left: -35px;
+  margin-top: -35px;
+  width: 60px;
+  height: 60px; }
+
+.u-loading.u-loading-rotate.u-loading-rotate-sm > div {
+  margin-left: -15px;
+  margin-top: -15px;
+  width: 25px;
+  height: 25px; }
+
+.u-loading.u-loading-rotate.u-loading-rotate-primary > div {
+  border: 2px solid #3f51b5;
+  border-bottom-color: transparent; }
+
+.u-loading.u-loading-rotate.u-loading-rotate-success > div {
+  border: 2px solid #4caf50;
+  border-bottom-color: transparent; }
+
+.u-loading.u-loading-rotate.u-loading-rotate-warning > div {
+  border: 2px solid #ff9800;
+  border-bottom-color: transparent; }
+
+.u-loading-backdrop {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1600;
+  opacity: .7;
+  filter: blur(0.5px);
+  background-color: #fff; }
+  .u-loading-backdrop.full-screen {
+    position: fixed; }
+
+@keyframes rotate {
+  0% {
+    -webkit-transform: rotate(0deg) scale(1);
+    transform: rotate(0deg) scale(1); }
+  50% {
+    -webkit-transform: rotate(180deg) scale(0.6);
+    transform: rotate(180deg) scale(0.6); }
+  100% {
+    -webkit-transform: rotate(360deg) scale(1);
+    transform: rotate(360deg) scale(1); } }
+
+.u-loading.u-loading-line {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -30px;
+  margin-left: -25px; }
+  .u-loading.u-loading-line > div {
+    background-color: #C2C3C5;
+    width: 6px;
+    height: 50px;
+    border-radius: 2px;
+    margin: 2px;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+    display: inline-block; }
+  .u-loading.u-loading-line.u-loading-line-lg {
+    margin-top: -50px;
+    margin-left: -30px; }
+    .u-loading.u-loading-line.u-loading-line-lg > div {
+      width: 8px;
+      height: 90px; }
+  .u-loading.u-loading-line.u-loading-line-sm {
+    margin-top: -22px;
+    margin-left: -20px; }
+    .u-loading.u-loading-line.u-loading-line-sm > div {
+      width: 4px;
+      height: 35px; }
+  .u-loading.u-loading-line div:nth-child(1) {
+    -webkit-animation: line-scale 1s 0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+    animation: line-scale 1s 0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+    background-color: #F44336; }
+  .u-loading.u-loading-line div:nth-child(2) {
+    -webkit-animation: line-scale 1s 0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+    animation: line-scale 1s 0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+    background-color: #7ED321; }
+  .u-loading.u-loading-line div:nth-child(3) {
+    -webkit-animation: line-scale 1s 0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+    animation: line-scale 1s 0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+    background-color: #0084FF; }
+  .u-loading.u-loading-line div:nth-child(4) {
+    -webkit-animation: line-scale 1s 0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+    animation: line-scale 1s 0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+    background-color: #FF9800; }
+  .u-loading.u-loading-line div:nth-child(5) {
+    -webkit-animation: line-scale 1s 0.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+    animation: line-scale 1s 0.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+    background-color: #D0021B; }
+  .u-loading.u-loading-line.u-loading-line-primary > div {
+    background-color: #3f51b5; }
+  .u-loading.u-loading-line.u-loading-line-success > div {
+    background-color: #4caf50; }
+  .u-loading.u-loading-line.u-loading-line-warning > div {
+    background-color: #ff9800; }
+
+@keyframes line-scale {
+  0% {
+    -webkit-transform: scaley(1);
+    transform: scaley(1); }
+  50% {
+    -webkit-transform: scaley(0.4);
+    transform: scaley(0.4); }
+  100% {
+    -webkit-transform: scaley(1);
+    transform: scaley(1); } }
+
 .u-table {
   font-size: 12px;
   color: #666;

build/Table.js

@@ -40,6 +40,10 @@ var _createStore = require('./createStore');
 
 var _createStore2 = _interopRequireDefault(_createStore);
 
+var _beeLoading = require('bee-loading');
+
+var _beeLoading2 = _interopRequireDefault(_beeLoading);
+
 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; }
@@ -386,6 +390,7 @@ var Table = function (_Component) {
     var fixedColumnsBodyRowsHeight = this.state.fixedColumnsBodyRowsHeight;
 
     var rst = [];
+    var isHiddenExpandIcon = void 0;
     var rowClassName = props.rowClassName;
     var rowRef = props.rowRef;
     var expandedRowClassName = props.expandedRowClassName;
@@ -407,6 +412,10 @@ var Table = function (_Component) {
       if (expandedRowRender && isRowExpanded) {
         expandedRowContent = expandedRowRender(record, i, indent);
       }
+      //只有当使用expandedRowRender参数的时候才去识别isHiddenExpandIcon（隐藏行展开的icon）
+      if (expandedRowRender && typeof props.haveExpandIcon == 'function') {
+        isHiddenExpandIcon = props.haveExpandIcon(record, i);
+      }
       var className = rowClassName(record, i, indent);
 
       var onHoverProps = {};
@@ -445,7 +454,8 @@ var Table = function (_Component) {
         expandIconColumnIndex: expandIconColumnIndex,
         onRowClick: onRowClick,
         onRowDoubleClick: onRowDoubleClick,
-        height: height
+        height: height,
+        isHiddenExpandIcon: isHiddenExpandIcon
       }, onHoverProps, {
         key: key,
         hoverKey: key,
@@ -811,6 +821,12 @@ var Table = function (_Component) {
     className += ' ' + clsPrefix + '-scroll-position-' + this.state.scrollPosition;
 
     var isTableScroll = this.columnManager.isAnyColumnsFixed() || props.scroll.x || props.scroll.y;
+    var loading = props.loading;
+    if (typeof loading === 'boolean') {
+      loading = {
+        show: loading
+      };
+    }
     return _react2["default"].createElement(
       'div',
       { className: className, style: props.style },
@@ -835,7 +851,10 @@ var Table = function (_Component) {
           { className: clsPrefix + '-fixed-right' },
           this.getRightFixedTable()
         )
-      )
+      ),
+      _react2["default"].createElement(_beeLoading2["default"], _extends({
+        container: this
+      }, loading))
     );
   };
 

build/TableRow.js

@@ -169,7 +169,8 @@ var TableRow = function (_Component) {
         onExpand = _props7.onExpand,
         needIndentSpaced = _props7.needIndentSpaced,
         indent = _props7.indent,
-        indentSize = _props7.indentSize;
+        indentSize = _props7.indentSize,
+        isHiddenExpandIcon = _props7.isHiddenExpandIcon;
     var className = this.props.className;
 
 
@@ -185,7 +186,8 @@ var TableRow = function (_Component) {
       onExpand: onExpand,
       needIndentSpaced: needIndentSpaced,
       expanded: expanded,
-      record: record
+      record: record,
+      isHiddenExpandIcon: isHiddenExpandIcon
     });
 
     for (var i = 0; i < columns.length; i++) {

build/lib/sum.js

@@ -73,7 +73,7 @@ function sum(Table) {
           }
           return item;
         });
-        return _react2["default"].createElement(Table, _extends({}, _this.props, { footerScroll: true, showHeader: false, columns: columns_sum, data: obj }));
+        return _react2["default"].createElement(Table, _extends({}, _this.props, { loading: false, footerScroll: true, showHeader: false, columns: columns_sum, data: obj }));
       };
 
       return _this;

build/render/InputRender.js

@@ -71,6 +71,7 @@ var InputRender = function (_Component) {
       var value = e;
       _this.setState({ value: value });
     }, _this.check = function () {
+      console.log('1');
       if (typeof _this.flag === "undefined" || _this.flag) {
         _this.props.check(_this.flag, _this.obj);
         _this.setState({ editable: false });
@@ -87,6 +88,8 @@ var InputRender = function (_Component) {
     }, _this.handleKeydown = function (event) {
       if (event.keyCode == 13) {
         _this.check();
+      } else if (event.keyCode == 9) {
+        debugger;
       }
     }, _this.formatCurrency = function (money) {
       if (money && money != null && !!Number(money)) {

demo/demolist/Demo16.js

@@ -72,12 +72,18 @@ class Demo16 extends Component {
         })
       }
     }
-    
+  }
-    
+  haveExpandIcon=(record, index)=>{
+    //控制是否显示行展开icon，该参数只有在和expandedRowRender同时使用才生效
+    if(index == 0){
+      return true;
+    }
+    return false;
   }
   render() {
     return (
       <Table
+        haveExpandIcon={this.haveExpandIcon}
         columns={columns16}
         data={data16}
         onExpand={this.getData}

docs/api.md

@@ -43,12 +43,12 @@ import 'bee-table/build/Table.css';
 | scroll                 | 横向或纵向支持滚动，也可用于指定滚动区域的宽高度：{ x: true, y: 300 } | object                                 | {}              |
 | rowRef                 | 获取行的ref                                  | Function(record, index, indent):string | () => null      |
 | getBodyWrapper         | 添加对table body的包装                         | Function(body)                         | body => body    |
-| expandedRowRender      | 额外的展开行                                   | Function                               | -               |
+| expandedRowRender      | 额外的展开行                                   | Function(record, index, indent):node | -               |
 | expandIconAsCell      | 展开按钮是否单独作为一个单元格                                   | bool                               | false               |
 | expandRowByClick       | 设置展开行是否通过点击行触发，此参数需要与上面参数搭配使用（默认是通过点击行前面的加号展开行 | bool                                   | false           |
 | footerScroll       | 表尾和body是否公用同一个横向滚动条。（ 如果footer中也是一个table组件，并且也具有滚动条，那么也需要加入footerScroll参数。 ） | bool                                   | false           |
 | loading       | 表格是否加载中 | bool|object(详情可以参考上面示例)                                   | false           |
-
+| haveExpandIcon       | 控制是否显示行展开icon.**注：该参数只有在和expandedRowRender同时使用才生效** | Function(record, index):bool   | () =>false |
 
 
 *注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bee-table",
-  "version": "1.0.12",
+ "version": "1.0.13",
  "description": "Table ui component for react",
  "keywords": [
   "react",
@@ -49,6 +49,7 @@
   "bee-loading": "^1.0.3",
   "classnames": "^2.2.5",
   "object-path": "^0.11.3",
+  "shallowequal": "^1.0.2",
   "tinper-bee-core": "latest",
   "warning": "^3.0.0"
  },

src/ExpandIcon.js

@@ -19,8 +19,8 @@ class ExpandIcon extends Component{
     return !shallowequal(nextProps, this.props);
   }
   render() {
-    const { expandable, clsPrefix, onExpand, needIndentSpaced, expanded, record } = this.props;
+    const { expandable, clsPrefix, onExpand, needIndentSpaced, expanded, record, isHiddenExpandIcon } = this.props;
-    if (expandable) {
+    if (expandable && !isHiddenExpandIcon) {
       const expandClassName = expanded ? 'expanded' : 'collapsed';
       return (
         <span
@@ -28,7 +28,7 @@ class ExpandIcon extends Component{
           onClick={(e) => onExpand(!expanded, record, e)}
         />
       );
-    } else if (needIndentSpaced) {
+    } else if (needIndentSpaced || isHiddenExpandIcon) {
       return <span className={`${clsPrefix}-expand-icon ${clsPrefix}-spaced`} />;
     }
     return null;

src/Table.js

@@ -318,6 +318,7 @@ class Table extends Component{
     const expandRowByClick = props.expandRowByClick;
     const { fixedColumnsBodyRowsHeight } = this.state;
     let rst = [];
+    let isHiddenExpandIcon;
     const rowClassName = props.rowClassName;
     const rowRef = props.rowRef;
     const expandedRowClassName = props.expandedRowClassName;
@@ -337,6 +338,10 @@ class Table extends Component{
       if (expandedRowRender && isRowExpanded) {
         expandedRowContent = expandedRowRender(record, i, indent);
       }
+      //只有当使用expandedRowRender参数的时候才去识别isHiddenExpandIcon（隐藏行展开的icon）
+      if(expandedRowRender && typeof props.haveExpandIcon == 'function'){
+          isHiddenExpandIcon = props.haveExpandIcon(record, i);
+      }
       const className = rowClassName(record, i, indent);
 
       const onHoverProps = {};
@@ -357,6 +362,7 @@ class Table extends Component{
         leafColumns = this.columnManager.leafColumns();
       }
       
+      
       rst.push(
         <TableRow
           indent={indent}
@@ -379,6 +385,7 @@ class Table extends Component{
           onRowClick={onRowClick}
           onRowDoubleClick={onRowDoubleClick}
           height={height}
+          isHiddenExpandIcon={isHiddenExpandIcon}
           {...onHoverProps}
           key={key}
           hoverKey={key}

src/TableRow.js

@@ -108,7 +108,7 @@ class TableRow extends Component{
     const {
       clsPrefix, columns, record, height, visible, index,
       expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,
-      expandable, onExpand, needIndentSpaced, indent, indentSize,
+      expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon
     } = this.props;
 
     let { className } = this.props;
@@ -127,6 +127,7 @@ class TableRow extends Component{
         needIndentSpaced={needIndentSpaced}
         expanded={expanded}
         record={record}
+        isHiddenExpandIcon={isHiddenExpandIcon}
       />
     );
 
@@ -152,7 +153,7 @@ class TableRow extends Component{
           index={index}
           column={columns[i]}
           key={columns[i].key}
-          expandIcon={isColumnHaveExpandIcon ? expandIcon : null}
+          expandIcon={(isColumnHaveExpandIcon) ? expandIcon : null}
         />
       );
     }

src/render/InputRender.js

@@ -44,6 +44,8 @@ export default class InputRender extends Component {
   handleKeydown = event => {
     if (event.keyCode == 13) {
       this.check();
+    }else if(event.keyCode == 9){
+      debugger;
     }
   };
   //货币的格式化方法