shineout 1.12.2 → 1.12.3

package/esm/Table/Thead.js

@@ -0,0 +1,292 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { PureComponent } from 'react';
+import classnames from 'classnames';
+import { getUidStr } from '../utils/uid';
+import { tableClass } from './styles';
+import Sorter from './Sorter';
+import CheckboxAll from './CheckboxAll';
+import { getParent } from '../utils/dom/element';
+import { isNumber } from '../utils/is';
+var cacheGroup = new Map();
+var MIN_RESIZABLE_WIDTH = 20;
+
+var Thead =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Thead, _PureComponent);
+
+  function Thead(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleMouseDown", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleMouseMove", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleMouseUp", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "resizingTh", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "resizingTable", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "columnLevel", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "resizingIndex", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "resizingCol", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "lastX", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "rightBorderRecord", void 0);
+
+    _this.handleMouseDown = _this.handleResize.bind(_assertThisInitialized(_assertThisInitialized(_this)), 'mousedown');
+    _this.handleMouseMove = _this.handleResize.bind(_assertThisInitialized(_assertThisInitialized(_this)), 'mousemove');
+    _this.handleMouseUp = _this.handleResize.bind(_assertThisInitialized(_assertThisInitialized(_this)), 'mouseup');
+    return _this;
+  }
+
+  var _proto = Thead.prototype;
+
+  _proto.setColumns = function setColumns(columns, col, level, index) {
+    if (index === void 0) {
+      index = 0;
+    }
+
+    if (!col.group) {
+      columns.push(col);
+      return 1;
+    }
+
+    if (level > this.columnLevel) this.columnLevel = level;
+    var g = Array.isArray(col.group) ? col.group : [col.group];
+    var last = columns[columns.length - 1];
+
+    if (!g[level]) {
+      columns.push(col);
+      return 1;
+    }
+
+    var colSpan = 0;
+
+    if (last && last.name === g[level]) {
+      colSpan = this.setColumns(last.columns, col, level + 1, index);
+      last.colSpan += colSpan;
+      if (col.fixed) last.fixed = col.fixed;
+      if (col.lastFixed) last.lastFixed = true;
+    } else {
+      var sub = [];
+      colSpan = this.setColumns(sub, col, level + 1, index);
+      var group = g[level];
+      columns.push({
+        name: g[level],
+        key: typeof g[level] === 'string' ? index + "-" + g[level] : cacheGroup.get(group) || cacheGroup.set(group, getUidStr()).get(group),
+        colSpan: colSpan,
+        level: level,
+        fixed: col.fixed,
+        firstFixed: col.firstFixed,
+        columns: sub
+      });
+    }
+
+    return colSpan;
+  };
+
+  _proto.resizeColgroup = function resizeColgroup(deltaX) {
+    var columns = this.props.columns;
+    var item = columns[this.resizingIndex];
+    var minWidth = item.minWidth,
+        maxWidth = item.maxWidth;
+    var oWidth = parseInt(this.resizingCol.style.width, 10);
+
+    if (Number.isNaN(oWidth) || oWidth === 0) {
+      oWidth = this.resizingTh.getBoundingClientRect().width;
+    }
+
+    var w = oWidth + deltaX;
+
+    if (isNumber(minWidth)) {
+      w = Math.max(w, minWidth);
+    } else {
+      w = Math.max(w, MIN_RESIZABLE_WIDTH);
+    }
+
+    if (isNumber(maxWidth)) {
+      w = Math.min(w, maxWidth);
+    }
+
+    this.resizingCol.style.width = w + "px";
+  };
+
+  _proto.handleResize = function handleResize(type, e) {
+    if (type === 'mousedown') {
+      var target = e.target;
+      this.resizingTh = getParent(target, 'th');
+      this.resizingTable = getParent(target, 'table');
+      var thList = getParent(target, 'tr').children;
+      var indexInTr = [].indexOf.call(thList, this.resizingTh);
+      this.resizingIndex = [].slice.call(thList, 0, indexInTr).reduce(function (total, th) {
+        var count = Number(th.getAttribute('colspan')) || 1;
+        return total + count;
+      }, 0);
+      this.resizingCol = this.resizingTable.querySelectorAll('col')[this.resizingIndex];
+      this.resizingTable.classList.add(tableClass('resizing'));
+      this.resizingTh.classList.add(tableClass('resizing-item'));
+      document.addEventListener('mousemove', this.handleMouseMove);
+      document.addEventListener('mouseup', this.handleMouseUp);
+    } else if (type === 'mousemove') {
+      var x = e.clientX;
+
+      if (typeof this.lastX === 'number') {
+        var deltaX = x - this.lastX;
+        this.resizeColgroup(deltaX);
+      }
+
+      this.lastX = x;
+    } else if (type === 'mouseup') {
+      var _this$props = this.props,
+          onColChange = _this$props.onColChange,
+          colgroup = _this$props.colgroup;
+      document.removeEventListener('mousemove', this.handleMouseMove);
+      document.removeEventListener('mouseup', this.handleMouseUp);
+      this.resizingTable.classList.remove(tableClass('resizing'));
+      this.resizingTh.classList.remove(tableClass('resizing-item'));
+      this.lastX = undefined;
+      if (onColChange) onColChange(this.resizingIndex, parseInt(this.resizingCol.style.width, 10), colgroup);
+    }
+  };
+
+  _proto.createTh = function createTh(trs, col, level) {
+    var _this2 = this;
+
+    var columnResizable = this.props.columnResizable;
+    var colTemp = col;
+    var colTemp2 = col;
+    var fixed = [];
+    if (col.fixed) fixed.push("fixed-" + col.fixed);
+    if (col.firstFixed) fixed.push('fixed-first');
+    if (col.lastFixed) fixed.push('fixed-last');
+    var _this$props2 = this.props,
+        sorter = _this$props2.sorter,
+        onSortChange = _this$props2.onSortChange,
+        data = _this$props2.data,
+        datum = _this$props2.datum,
+        showSelectAll = _this$props2.showSelectAll,
+        disabled = _this$props2.disabled,
+        treeColumnsName = _this$props2.treeColumnsName,
+        treeCheckAll = _this$props2.treeCheckAll;
+    var isEmpty = !(data && data.length);
+    var align = colTemp.align && "align-" + colTemp.align;
+    var ignoreBorderRight = this.rightBorderRecord[col.key] && 'ignore-right-border';
+    var resize = level === 0 && !isEmpty && columnResizable && col.columnResizable !== false ? React.createElement("span", {
+      onMouseDown: this.handleMouseDown,
+      className: tableClass('resize-spanner')
+    }) : null;
+
+    if (colTemp.title) {
+      trs[level].push(React.createElement("th", {
+        className: classnames(tableClass.apply(void 0, [level > 0 && 'condensed', align, ignoreBorderRight].concat(fixed)), col.className),
+        rowSpan: this.columnLevel - level + 1,
+        key: col.key
+      }, React.createElement("div", {
+        className: tableClass(colTemp.sorter && 'has-sorter')
+      }, React.createElement("span", null, typeof colTemp.title === 'function' ? colTemp.title(data) : colTemp.title), colTemp.sorter && React.createElement(Sorter, _extends({}, colTemp, {
+        sorter: colTemp.sorter,
+        current: sorter,
+        onChange: onSortChange,
+        renderSorter: this.props.renderSorter
+      })), resize)));
+      return;
+    }
+
+    if (colTemp.type === 'checkbox') {
+      trs[level].push(React.createElement("th", {
+        key: "checkbox",
+        rowSpan: trs.length,
+        className: classnames(tableClass.apply(void 0, ['checkbox'].concat(fixed)), colTemp.className)
+      }, showSelectAll && React.createElement(CheckboxAll, {
+        disabled: disabled === true,
+        data: data,
+        datum: datum,
+        treeColumnsName: treeCheckAll ? treeColumnsName : undefined,
+        col: col
+      })));
+      return;
+    }
+
+    var style = typeof colTemp2.name === 'string' ? undefined : {
+      padding: 0
+    };
+    trs[level].push(React.createElement("th", {
+      className: classnames(tableClass.apply(void 0, ['center', 'condensed', ignoreBorderRight].concat(fixed)), col.className),
+      colSpan: colTemp2.colSpan,
+      key: col.key,
+      style: style
+    }, colTemp2.name, resize));
+
+    if (colTemp2.columns) {
+      colTemp2.columns.forEach(function (c) {
+        return _this2.createTh(trs, c, level + 1);
+      });
+    }
+  };
+
+  _proto.ignoreRightBorder = function ignoreRightBorder(column) {
+    var columnGroup = column;
+    this.rightBorderRecord[column.key] = true;
+    if (columnGroup.columns) this.ignoreRightBorder(columnGroup.columns[columnGroup.columns.length - 1]);
+  };
+
+  _proto.formatColumns = function formatColumns() {
+    var _this3 = this;
+
+    this.columnLevel = 0;
+    var columns = [];
+    this.props.columns.forEach(function (col, index) {
+      _this3.setColumns(columns, col, 0, index);
+    });
+    this.rightBorderRecord = {};
+
+    if (columns.length > 0 && this.props.bordered) {
+      this.ignoreRightBorder(columns[columns.length - 1]);
+    }
+
+    return columns;
+  };
+
+  _proto.formatTrs = function formatTrs() {
+    var _this4 = this;
+
+    var columns = this.formatColumns();
+    var trs = [];
+
+    for (var i = 0; i <= this.columnLevel; i++) {
+      trs.push([]);
+    }
+
+    columns.forEach(function (col) {
+      return _this4.createTh(trs, col, 0);
+    });
+    return trs;
+  };
+
+  _proto.render = function render() {
+    var trs = this.formatTrs();
+    return React.createElement("thead", null, trs.map(function (tr, i) {
+      return React.createElement("tr", {
+        key: i
+      }, tr);
+    }));
+  };
+
+  return Thead;
+}(PureComponent);
+
+_defineProperty(Thead, "defaultProps", {
+  showSelectAll: true
+});
+
+export default Thead;

package/esm/Table/Tr.d.ts

@@ -0,0 +1,30 @@
+import React, { Component, ReactNode } from 'react';
+import { TrProps } from './Props';
+export declare const ROW_HEIGHT_UPDATE_EVENT = "ROW_HEIGHT_UPDATE_EVENT_NAME";
+declare class Tr<DataItem, Value> extends Component<TrProps<DataItem, Value>> {
+    static displayName: string;
+    static defaultProps: {
+        rowClickAttr: string[];
+        lazy: boolean;
+    };
+    manualExpand: boolean;
+    expandHeight: number;
+    element: HTMLElement;
+    lastRowHeight: number;
+    lastExpandHeight: number;
+    lastIndex: number;
+    lastExpandRender: TrProps<DataItem, Value>['expandRender'];
+    cachedExpand: ReactNode;
+    constructor(props: TrProps<DataItem, Value>);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: TrProps<DataItem, Value>): void;
+    setRowHeight(expand?: boolean): void;
+    setExpandHeight(height: number): void;
+    getRowClickAttr(): string[];
+    bindElement(el: HTMLTableRowElement): void;
+    isFireElement(el: HTMLElement): string | true | undefined;
+    handleRowClick(e: React.MouseEvent): void;
+    renderExpand(): React.ReactNode;
+    render(): JSX.Element[];
+}
+export default Tr;

package/esm/Table/Tr.js

@@ -0,0 +1,327 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { Component } from 'react';
+import classnames from 'classnames';
+import { setTranslate } from '../utils/dom/translate';
+import { tableClass } from './styles';
+import { inputClass } from '../Input/styles';
+import { checkinputClass } from '../Checkbox/styles';
+import Td, { CLASS_FIXED_LEFT, CLASS_FIXED_RIGHT } from './Td';
+import Expand from './Expand';
+import { isFunc } from '../utils/is';
+export var ROW_HEIGHT_UPDATE_EVENT = 'ROW_HEIGHT_UPDATE_EVENT_NAME';
+var preventClasses = [inputClass('_'), checkinputClass('_'), tableClass('icon-tree-plus'), tableClass('icon-tree-sub')];
+
+var isExpandableElement = function isExpandableElement(el) {
+  var tagName = el.tagName;
+  if (tagName === 'TD' || tagName === 'TR') return true;
+  if (tagName === 'A' || tagName === 'BUTTON' || tagName === 'INPUT') return false;
+  if (preventClasses.find(function (c) {
+    return el.classList.contains(c);
+  })) return false;
+  if (!el.parentElement) return false;
+  return isExpandableElement(el.parentElement);
+};
+
+var DefaultProps = {
+  rowClickAttr: ['*'],
+  lazy: true
+};
+
+var Tr =
+/*#__PURE__*/
+function (_Component) {
+  _inheritsLoose(Tr, _Component);
+
+  function Tr(props) {
+    var _this;
+
+    _this = _Component.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "manualExpand", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "expandHeight", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "element", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "lastRowHeight", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "lastExpandHeight", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "lastIndex", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "lastExpandRender", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "cachedExpand", void 0);
+
+    _this.manualExpand = false;
+    _this.bindElement = _this.bindElement.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleRowClick = _this.handleRowClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.setRowHeight = _this.setRowHeight.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.setExpandHeight = _this.setExpandHeight.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.expandHeight = 0;
+    return _this;
+  }
+
+  var _proto = Tr.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    var _this$props = this.props,
+        offsetLeft = _this$props.offsetLeft,
+        offsetRight = _this$props.offsetRight;
+
+    if (offsetLeft) {
+      ;
+      [].forEach.call(this.element.querySelectorAll("." + tableClass(CLASS_FIXED_LEFT)), function (td) {
+        setTranslate(td, offsetLeft + "px", '0');
+      });
+    }
+
+    if (offsetRight) {
+      ;
+      [].forEach.call(this.element.querySelectorAll("." + tableClass(CLASS_FIXED_RIGHT)), function (td) {
+        setTranslate(td, "-" + offsetRight + "px", '0');
+      });
+    }
+
+    this.manualExpand = true;
+    this.setRowHeight();
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    var _this2 = this;
+
+    var _this$props2 = this.props,
+        hasNotRenderRows = _this$props2.hasNotRenderRows,
+        dataUpdated = _this$props2.dataUpdated,
+        columnResizable = _this$props2.columnResizable,
+        resize = _this$props2.resize;
+
+    if (hasNotRenderRows || dataUpdated || prevProps.resize !== resize) {
+      var exec = columnResizable ? setTimeout : function (func) {
+        return func();
+      };
+      exec(function () {
+        _this2.setRowHeight();
+      });
+    }
+  };
+
+  _proto.setRowHeight = function setRowHeight(expand) {
+    var _this$props3 = this.props,
+        setRowHeight = _this$props3.setRowHeight,
+        dataUpdated = _this$props3.dataUpdated,
+        datum = _this$props3.datum,
+        lazy = _this$props3.lazy;
+    if (!lazy || !setRowHeight || !this.element) return;
+
+    var _this$element$getBoun = this.element.getBoundingClientRect(),
+        height = _this$element$getBoun.height;
+
+    if (Number.isNaN(height)) height = this.lastRowHeight || 0;
+    datum.unsubscribe(ROW_HEIGHT_UPDATE_EVENT, this.setRowHeight);
+
+    if (height === 0) {
+      datum.subscribe(ROW_HEIGHT_UPDATE_EVENT, this.setRowHeight);
+      return;
+    }
+
+    if (height === this.lastRowHeight && this.expandHeight === this.lastExpandHeight && !dataUpdated && this.lastIndex === this.props.index) return;
+    this.lastRowHeight = height;
+    this.lastIndex = this.props.index;
+    this.lastExpandHeight = this.expandHeight;
+    setRowHeight(height + this.expandHeight, this.props.index, !!expand);
+  };
+
+  _proto.setExpandHeight = function setExpandHeight(height) {
+    this.expandHeight = height;
+    this.setRowHeight(this.manualExpand);
+  };
+
+  _proto.getRowClickAttr = function getRowClickAttr() {
+    var rowClickAttr = this.props.rowClickAttr;
+    var res = Array.isArray(rowClickAttr) ? rowClickAttr : [];
+
+    if (typeof rowClickAttr === 'string') {
+      res.push(rowClickAttr);
+    }
+
+    return res.map(function (v) {
+      return v === '*' ? '' : v;
+    });
+  };
+
+  _proto.bindElement = function bindElement(el) {
+    this.element = el;
+  };
+
+  _proto.isFireElement = function isFireElement(el) {
+    var rowClickAttr = this.props.rowClickAttr;
+    if (rowClickAttr === true) return true;
+    return this.getRowClickAttr().find(function (v) {
+      return el.hasAttribute(v);
+    });
+  };
+
+  _proto.handleRowClick = function handleRowClick(e) {
+    var _this$props4 = this.props,
+        columns = _this$props4.columns,
+        rowData = _this$props4.rowData,
+        index = _this$props4.index,
+        onRowClick = _this$props4.onRowClick,
+        externalExpandRender = _this$props4.externalExpandRender,
+        externalExpandClick = _this$props4.externalExpandClick,
+        onExpand = _this$props4.onExpand,
+        originKey = _this$props4.originKey,
+        expandRender = _this$props4.expandRender;
+    var target = e.target; // business needed #row click to modal drawer
+
+    var fireAttr = this.isFireElement(target);
+
+    if (fireAttr && onRowClick) {
+      onRowClick(rowData, index, fireAttr);
+      return;
+    }
+
+    if (externalExpandRender) {
+      var expanded = typeof expandRender === 'function'; // @ts-ignore seems to be useless because expandKeys always undefined
+
+      if (this.props.expandKeys) {
+        if (externalExpandClick) externalExpandClick(rowData, !expanded);
+      } else {
+        onExpand(originKey, expanded ? undefined : externalExpandRender(rowData, index));
+      }
+    }
+
+    if (isExpandableElement(target)) {
+      var el = this.element.querySelector("." + tableClass('expand-indicator'));
+      if (el && el !== target && columns.some(function (c) {
+        return c.type === 'row-expand';
+      })) el.click();
+      var matchBlank = this.getRowClickAttr().indexOf('') >= 0;
+      if (onRowClick && e.target !== el && matchBlank) onRowClick(rowData, index);
+    }
+  };
+
+  _proto.renderExpand = function renderExpand() {
+    var _this$props5 = this.props,
+        expandRender = _this$props5.expandRender,
+        rowData = _this$props5.rowData;
+    if (!expandRender) return null;
+
+    if (this.lastExpandRender !== expandRender && isFunc(expandRender)) {
+      this.lastExpandRender = expandRender;
+      this.cachedExpand = expandRender(rowData);
+    }
+
+    return this.cachedExpand;
+  };
+
+  _proto.render = function render() {
+    var _this$props6 = this.props,
+        columns = _this$props6.columns,
+        data = _this$props6.data,
+        rowData = _this$props6.rowData,
+        striped = _this$props6.striped,
+        index = _this$props6.index,
+        expandRender = _this$props6.expandRender,
+        offsetLeft = _this$props6.offsetLeft,
+        offsetRight = _this$props6.offsetRight,
+        hasNotRenderRows = _this$props6.hasNotRenderRows,
+        rowClassName = _this$props6.rowClassName,
+        treeExpandKeys = _this$props6.treeExpandKeys,
+        rowEvents = _this$props6.rowEvents,
+        reset = _objectWithoutPropertiesLoose(_this$props6, ["columns", "data", "rowData", "striped", "index", "expandRender", "offsetLeft", "offsetRight", "hasNotRenderRows", "rowClassName", "treeExpandKeys", "rowEvents"]);
+
+    var other = Object.keys(reset).filter(function (key) {
+      return !['format', 'prediction', 'onChange'].includes(key);
+    }).reduce(function (r, key) {
+      var _objectSpread2;
+
+      return _objectSpread({}, r, (_objectSpread2 = {}, _objectSpread2[key] = reset[key], _objectSpread2));
+    }, {});
+    var tds = [];
+    var skip = 0;
+
+    for (var i = 0, c = columns.length; i < c; i++) {
+      if (skip > 0) {
+        skip -= 1;
+      } else if (data[i]) {
+        var _columns$i = columns[i],
+            _className = _columns$i.className,
+            style = _columns$i.style,
+            key = _columns$i.key,
+            fixed = _columns$i.fixed,
+            lastFixed = _columns$i.lastFixed,
+            firstFixed = _columns$i.firstFixed,
+            type = _columns$i.type,
+            render = _columns$i.render,
+            onClick = _columns$i.onClick,
+            align = _columns$i.align,
+            treeColumnsName = _columns$i.treeColumnsName;
+        var treeExpand = false;
+
+        if (treeExpandKeys instanceof Map) {
+          treeExpand = treeExpandKeys.has(other.originKey);
+        }
+
+        var td = React.createElement(Td, _extends({}, other, {
+          expanded: typeof expandRender === 'function',
+          key: key,
+          treeExpand: treeExpand,
+          treeExpandShow: !!treeColumnsName,
+          type: type,
+          expandClick: onClick,
+          className: _className,
+          style: style,
+          fixed: fixed,
+          firstFixed: firstFixed,
+          lastFixed: lastFixed,
+          align: align,
+          render: render // @ts-ignore  这儿重复了
+          ,
+          index: index
+        }, data[i]));
+        tds.push(td);
+        if (data[i].colSpan) skip = data[i].colSpan - 1;
+      }
+    }
+
+    var className = tableClass('normal', striped && (index % 2 === 1 ? 'even' : 'odd'));
+
+    if (rowClassName) {
+      className = classnames(className, rowClassName(rowData, index));
+    }
+
+    var mc = classnames(className, other.datum.check(rowData) && tableClass('selected'));
+    var result = [React.createElement("tr", _extends({
+      key: "0"
+    }, rowEvents, {
+      onClick: this.handleRowClick,
+      className: mc,
+      ref: this.bindElement
+    }), tds)];
+
+    if (expandRender) {
+      result.push(React.createElement(Expand, {
+        key: "1",
+        setExpandHeight: this.setExpandHeight,
+        colSpan: columns.length
+      }, this.renderExpand()));
+    }
+
+    return result;
+  };
+
+  return Tr;
+}(Component);
+
+_defineProperty(Tr, "displayName", 'ShineoutTr');
+
+_defineProperty(Tr, "defaultProps", DefaultProps);
+
+export default Tr;

package/esm/Table/TreeExpand.d.ts

@@ -0,0 +1,45 @@
+import React, { ComponentType } from 'react';
+import { KeygenResult } from '../@types/common';
+import { TableProps, GetTreeExpandProps } from './Props';
+interface treeExpandState {
+    expandKeys: Map<KeygenResult, boolean>;
+}
+declare const _default: <DataItem, Value>(WrappedComponent: React.ComponentType<TableProps<DataItem, Value>>) => {
+    new (props: GetTreeExpandProps<TableProps<DataItem, Value>, DataItem>): {
+        changedByExpand: boolean;
+        expandLevel: Map<KeygenResult, number>;
+        componentDidUpdate(): void;
+        getTreeIndent(): number | undefined;
+        getExpandKeys(): Map<KeygenResult, boolean>;
+        getExpandData(): DataItem[];
+        handleTreeExpand(data: DataItem, index: number): void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends "expandKeys">(state: treeExpandState | ((prevState: Readonly<treeExpandState>, props: Readonly<GetTreeExpandProps<TableProps<DataItem, Value>, DataItem>>) => treeExpandState | Pick<treeExpandState, K> | null) | Pick<treeExpandState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<GetTreeExpandProps<TableProps<DataItem, Value>, DataItem>> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<treeExpandState>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<GetTreeExpandProps<TableProps<DataItem, Value>, DataItem>>, nextState: Readonly<treeExpandState>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<GetTreeExpandProps<TableProps<DataItem, Value>, DataItem>>, prevState: Readonly<treeExpandState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<GetTreeExpandProps<TableProps<DataItem, Value>, DataItem>>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<GetTreeExpandProps<TableProps<DataItem, Value>, DataItem>>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<GetTreeExpandProps<TableProps<DataItem, Value>, DataItem>>, nextState: Readonly<treeExpandState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<GetTreeExpandProps<TableProps<DataItem, Value>, DataItem>>, nextState: Readonly<treeExpandState>, nextContext: any): void;
+    };
+    defaultProps: {
+        defaultTreeExpandKeys: never[];
+    };
+    getMapFromArray(arr: KeygenResult[]): Map<KeygenResult, boolean>;
+    contextType?: React.Context<any> | undefined;
+};
+export default _default;