feat: feat haveExpandIcon to control hidden expandIcon

2018-01-31 19:46:40 +08:00 · 2018-01-31 19:46:40 +08:00 · 98a403db30
parent 92c6468549
commit 98a403db30
18 changed files with 341 additions and 115 deletions
--- a/README.md
+++ b/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*

--- a/build/ExpandIcon.js
+++ b/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;
--- a/build/Table.css
+++ b/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;
--- a/build/Table.js
+++ b/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))
    );
  };

--- a/build/TableRow.js
+++ b/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++) {
--- a/build/lib/sum.js
+++ b/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;
--- a/build/render/InputRender.js
+++ b/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)) {
--- a/demo/demolist/Demo16.js
+++ b/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}
--- a/demo/index.js
+++ b/demo/index.js
--- a/dist/demo.css.map
+++ b/dist/demo.css.map
--- 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
@ -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*
--- a/package.json
+++ b/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"
 },
--- a/src/ExpandIcon.js
+++ b/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;
-    if (expandable) {
+    const { expandable, clsPrefix, onExpand, needIndentSpaced, expanded, record, isHiddenExpandIcon } = this.props;
+    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;
--- a/src/Table.js
+++ b/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}
--- a/src/TableRow.js
+++ b/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}
        />
      );
    }
--- a/src/render/InputRender.js
+++ b/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;
    }
  };
  //货币的格式化方法