shineout 1.12.2 → 1.12.3

package/esm/Table/Tbody.js

@@ -0,0 +1,301 @@
+import _extends from "@babel/runtime/helpers/extends";
+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 from 'react';
+import immer from 'immer';
+import { PureComponent } from '../component';
+import { compareColumns } from '../utils/shallowEqual';
+import { getKey } from '../utils/uid';
+import Tr from './Tr';
+import { tableClass } from './styles';
+import { isFunc } from '../utils/is';
+export var RENDER_COL_GROUP_EVENT = 'RENDER_COL_GROUP_EVENT';
+
+function ignoreBorderRight(rows) {
+  rows.forEach(function (row) {
+    var lastColumn = row[row.length - 1];
+
+    if (lastColumn) {
+      lastColumn.ignoreBorderRight = true;
+    }
+  });
+}
+
+function format(columns, data, nextRow, index, expandKeys) {
+  var row = columns.map(function (col, i) {
+    var cell = {
+      index: index,
+      data: data,
+      expandKeys: expandKeys
+    };
+    cell.colSpan = typeof col.colSpan === 'function' ? col.colSpan(data, index) : 1;
+    if (cell.colSpan < 1) cell.colSpan = 1;
+    var rowSpan = col.rowSpan;
+
+    if (rowSpan && nextRow && nextRow[i]) {
+      if (col.type !== 'checkbox') {
+        if (typeof col.render === 'string') {
+          cell.content = data[col.render];
+        } else if (isFunc(col.render)) {
+          cell.content = col.render(data, index);
+        }
+      }
+
+      var isEqual = rowSpan === true ? nextRow[i] && cell.content === nextRow[i].content : nextRow[i] && typeof rowSpan === 'function' && rowSpan(data, nextRow[i].data);
+      var nextTd = nextRow[i];
+
+      if (isEqual && nextTd && nextTd.colSpan === cell.colSpan) {
+        cell.rowSpan = (nextTd.rowSpan || 1) + 1;
+        var j = cell.colSpan || 1;
+
+        while (j) {
+          j -= 1;
+          nextRow[i + j] = null;
+        }
+      }
+    }
+
+    return cell;
+  });
+  return row;
+}
+
+var Tbody =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Tbody, _PureComponent);
+
+  function Tbody(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "colgroupSetted", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "keys", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "body", void 0);
+
+    _this.state = {
+      expand: {}
+    };
+    _this.bodyRender = _this.bodyRender.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.bindBody = _this.bindBody.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.renderTr = _this.renderTr.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleExpand = _this.handleExpand.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.findExpandFunc = _this.findExpandFunc.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  var _proto = Tbody.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    _PureComponent.prototype.componentDidMount.call(this);
+
+    this.bodyRender();
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    var _this2 = this;
+
+    var _this$props = this.props,
+        onScrollTop = _this$props.onScrollTop,
+        data = _this$props.data;
+    if (onScrollTop && prevProps.data.length && data.length === 0) onScrollTop();
+
+    if (this.props.resize || !this.colgroupSetted || !compareColumns(prevProps.columns, this.props.columns)) {
+      setTimeout(function () {
+        _this2.bodyRender();
+      });
+    }
+  };
+
+  _proto.bodyRender = function bodyRender() {
+    var _this$props2 = this.props,
+        onBodyRender = _this$props2.onBodyRender,
+        datum = _this$props2.datum;
+    if (!onBodyRender || !this.body) return;
+    datum.unsubscribe(RENDER_COL_GROUP_EVENT, this.bodyRender);
+
+    if (this.body.clientHeight === 0) {
+      datum.subscribe(RENDER_COL_GROUP_EVENT, this.bodyRender);
+      return;
+    }
+
+    var tr = this.body.querySelector('tr');
+    if (!tr) return;
+    this.colgroupSetted = true;
+    onBodyRender(tr.querySelectorAll('td'));
+  };
+
+  _proto.bindBody = function bindBody(el) {
+    this.body = el;
+  };
+
+  _proto.handleExpand = function handleExpand(key, render) {
+    this.setState(immer(function (draft) {
+      if (render) draft.expand[key] = render;else delete draft.expand[key];
+    }));
+  };
+
+  _proto.findExpandFunc = function findExpandFunc(key, i) {
+    //
+    // (rowData: DataItem, index?: number) => ReactNode
+    var _this$props3 = this.props,
+        columns = _this$props3.columns,
+        expandKeys = _this$props3.expandKeys,
+        data = _this$props3.data,
+        externalExpandRender = _this$props3.externalExpandRender,
+        index = _this$props3.index;
+    var expandableObj = columns.find(function (c) {
+      return c.type === 'expand' || c.type === 'row-expand';
+    }) || {};
+    var idx = i + index;
+
+    if (expandKeys) {
+      var expanded = expandKeys.find(function (k) {
+        return k === key;
+      });
+      if (externalExpandRender) return expanded !== undefined ? externalExpandRender(data[i], idx) : undefined;
+      var expandObj = expanded !== undefined ? expandableObj : {};
+      var render = expandObj.render;
+      return render && isFunc(render) ? render(data[i], idx) : undefined;
+    }
+
+    if (this.state.expand[key]) {
+      var _render = expandableObj.render;
+      if (externalExpandRender) return externalExpandRender(data[i], idx);
+      return _render && isFunc(_render) ? _render(data[i], idx) : undefined;
+    }
+
+    return undefined;
+  };
+
+  _proto.renderTr = function renderTr(row, i) {
+    var _this$props4 = this.props,
+        columns = _this$props4.columns,
+        keygen = _this$props4.keygen,
+        data = _this$props4.data,
+        sorter = _this$props4.sorter,
+        index = _this$props4.index,
+        expandKeys = _this$props4.expandKeys,
+        colgroup = _this$props4.colgroup,
+        other = _objectWithoutPropertiesLoose(_this$props4, ["columns", "keygen", "data", "sorter", "index", "expandKeys", "colgroup"]);
+
+    var key = getKey(data[i], keygen, index + i);
+
+    if (this.keys[key]) {
+      var converted = key + "-" + (index + i);
+      console.warn("Tr has same key: (" + key + "). Already converted with (" + converted + "), Please check the 'keygen' property.");
+      key = converted;
+    }
+
+    this.keys[key] = true;
+    var originKey = key; // seems to be useless code
+    // if (sorter && sorter.order) {
+    //   key = `${key}-${sorter.index}-${sorter.order}`
+    // }
+
+    return React.createElement(Tr, _extends({}, other, {
+      index: i + index,
+      key: key,
+      originKey: originKey,
+      data: row,
+      rowData: data[i],
+      columns: columns,
+      rowKey: key,
+      onExpand: this.handleExpand,
+      expandRender: this.findExpandFunc(originKey, i)
+    }));
+  };
+
+  _proto.renderPlaceholderTr = function renderPlaceholderTr() {
+    var _this$props5 = this.props,
+        columns = _this$props5.columns,
+        data = _this$props5.data;
+    return React.createElement("tr", {
+      className: tableClass('placeholder-tr'),
+      key: "so-placeholder-" + new Date().getTime()
+    }, columns.map(function (v, i) {
+      if (!v) return React.createElement("td", {
+        key: i
+      });
+
+      if (v.minWidth) {
+        return React.createElement("td", {
+          key: i,
+          style: {
+            padding: 0,
+            border: 'none'
+          }
+        }, React.createElement("div", {
+          style: {
+            width: v.minWidth
+          }
+        }, v.title && typeof v.title === 'function' ? v.title(data) : v.title));
+      }
+
+      if (v.title) {
+        return React.createElement("td", {
+          key: i
+        }, React.createElement("div", null, typeof v.title === 'function' ? v.title(data) : v.title));
+      }
+
+      if (v.type === 'checkbox' || v.type === 'expand' || v.type === 'row-expand') {
+        return React.createElement("td", {
+          key: i,
+          className: tableClass('placeholder-checkbox')
+        });
+      }
+
+      return React.createElement("td", {
+        key: i
+      });
+    }));
+  };
+
+  _proto.renderTrs = function renderTrs(rows) {
+    var _this$props6 = this.props,
+        columns = _this$props6.columns,
+        colgroup = _this$props6.colgroup;
+    var minWidthSup = columns.find(function (d) {
+      return d.minWidth;
+    });
+    var trs = rows.map(this.renderTr);
+    if (!minWidthSup || colgroup) return trs;
+    return [this.renderPlaceholderTr()].concat(trs);
+  };
+
+  _proto.render = function render() {
+    var _this$props7 = this.props,
+        index = _this$props7.index,
+        data = _this$props7.data,
+        columns = _this$props7.columns,
+        expandKeys = _this$props7.expandKeys,
+        bordered = _this$props7.bordered;
+    var rows = [];
+
+    for (var i = data.length - 1; i >= 0; i--) {
+      var d = data[i];
+      rows.unshift(format(columns, d, rows[0], index + i, expandKeys).map(function (col) {
+        delete col.content;
+        return col;
+      }));
+    }
+
+    if (rows.length > 0 && bordered) {
+      ignoreBorderRight(rows);
+    }
+
+    this.keys = {};
+    return React.createElement("tbody", {
+      ref: this.bindBody
+    }, this.renderTrs(rows));
+  };
+
+  return Tbody;
+}(PureComponent);
+
+export default Tbody;

package/esm/Table/Td.d.ts

@@ -0,0 +1,18 @@
+import React, { PureComponent, ReactNode } from 'react';
+import { TdProps } from './Props';
+export declare const CLASS_FIXED_LEFT = "fixed-left";
+export declare const CLASS_FIXED_RIGHT = "fixed-right";
+declare class Td<DataItem, Value> extends PureComponent<TdProps<DataItem, Value>> {
+    static defaultProps: any;
+    cachedRender: ReactNode;
+    constructor(props: TdProps<DataItem, Value>);
+    handleExpandClick(): void;
+    handleTreeExpand(): void;
+    renderCheckbox(): React.ReactNode;
+    renderExpand(index: number): JSX.Element | null;
+    renderTreeExpand(content: ReactNode): JSX.Element;
+    renderResult(): React.ReactNode;
+    renderContent(): React.ReactNode;
+    render(): JSX.Element;
+}
+export default Td;

package/esm/Table/Td.js

@@ -0,0 +1,200 @@
+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 { tableClass } from './styles';
+import Checkbox from './Checkbox';
+export var CLASS_FIXED_LEFT = 'fixed-left';
+export var CLASS_FIXED_RIGHT = 'fixed-right';
+var DefaultProps = {
+  fixed: '',
+  style: {},
+  align: 'left'
+};
+
+var Td =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Td, _PureComponent);
+
+  function Td(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "cachedRender", void 0);
+
+    _this.handleExpandClick = _this.handleExpandClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleTreeExpand = _this.handleTreeExpand.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  var _proto = Td.prototype;
+
+  _proto.handleExpandClick = function handleExpandClick() {
+    var _this$props = this.props,
+        originKey = _this$props.originKey,
+        expanded = _this$props.expanded,
+        data = _this$props.data,
+        expandKeys = _this$props.expandKeys,
+        expandClick = _this$props.expandClick,
+        resetFixAuto = _this$props.resetFixAuto;
+
+    if (expandKeys) {
+      if (expandClick) expandClick(data, !expanded);
+    } else {
+      this.props.onExpand(originKey, expanded ? undefined : this.cachedRender);
+    }
+
+    resetFixAuto(true);
+  };
+
+  _proto.handleTreeExpand = function handleTreeExpand() {
+    var _this$props2 = this.props,
+        data = _this$props2.data,
+        onTreeExpand = _this$props2.onTreeExpand,
+        index = _this$props2.index;
+    onTreeExpand(data, index);
+  };
+
+  _proto.renderCheckbox = function renderCheckbox() {
+    var _this$props3 = this.props,
+        index = _this$props3.index,
+        data = _this$props3.data,
+        datum = _this$props3.datum,
+        treeColumnsName = _this$props3.treeColumnsName,
+        treeCheckAll = _this$props3.treeCheckAll,
+        disabled = _this$props3.disabled,
+        render = _this$props3.render;
+    var checkbox = React.createElement(Checkbox, {
+      force: datum.check(data),
+      data: data,
+      index: index,
+      datum: datum,
+      disabled: disabled,
+      treeColumnsName: treeCheckAll ? treeColumnsName : undefined
+    });
+
+    if (render && typeof render === 'function') {
+      return render(data, index, checkbox);
+    }
+
+    return checkbox;
+  };
+
+  _proto.renderExpand = function renderExpand(index) {
+    var _this$props4 = this.props,
+        expanded = _this$props4.expanded,
+        render = _this$props4.render,
+        data = _this$props4.data;
+    if (typeof render !== 'function') return null;
+
+    var _cachedRender = render(data, index);
+
+    if (!_cachedRender) return null;
+
+    if (typeof _cachedRender !== 'function') {
+      _cachedRender = function cachedRender() {
+        return _cachedRender;
+      };
+    }
+
+    this.cachedRender = _cachedRender;
+    return React.createElement("span", {
+      className: tableClass('expand-indicator', "icon-expand-" + (expanded ? 'sub' : 'plus')),
+      onClick: this.handleExpandClick
+    });
+  };
+
+  _proto.renderTreeExpand = function renderTreeExpand(content) {
+    var _this$props5 = this.props,
+        data = _this$props5.data,
+        treeRoot = _this$props5.treeRoot,
+        treeColumnsName = _this$props5.treeColumnsName,
+        treeExpand = _this$props5.treeExpand,
+        originKey = _this$props5.originKey,
+        treeExpandLevel = _this$props5.treeExpandLevel,
+        treeIndent = _this$props5.treeIndent,
+        treeEmptyExpand = _this$props5.treeEmptyExpand;
+    var level = treeExpandLevel.get(originKey) || 0;
+    var className = tableClass('expand-wrapped');
+
+    if (!treeColumnsName || !data[treeColumnsName] || data[treeColumnsName].length === 0 && !treeEmptyExpand) {
+      return React.createElement("span", {
+        className: className,
+        style: {
+          marginLeft: level * treeIndent,
+          paddingLeft: treeRoot ? 0 : 25
+        }
+      }, content);
+    }
+
+    return React.createElement("span", {
+      className: className,
+      style: {
+        marginLeft: level * treeIndent
+      }
+    }, React.createElement("span", {
+      key: "expand-icon",
+      onClick: this.handleTreeExpand,
+      className: tableClass('icon-tree-expand', "icon-tree-" + (treeExpand ? 'sub' : 'plus'))
+    }), content);
+  };
+
+  _proto.renderResult = function renderResult() {
+    var _this$props6 = this.props,
+        render = _this$props6.render,
+        data = _this$props6.data,
+        index = _this$props6.index,
+        treeColumnsName = _this$props6.treeColumnsName,
+        treeExpandShow = _this$props6.treeExpandShow;
+    var content = typeof render === 'function' ? render(data, index) : data[render];
+    if (!treeColumnsName || !treeExpandShow) return content;
+    return this.renderTreeExpand(content);
+  };
+
+  _proto.renderContent = function renderContent() {
+    var _this$props7 = this.props,
+        type = _this$props7.type,
+        index = _this$props7.index;
+
+    switch (type) {
+      case 'checkbox':
+        return this.renderCheckbox();
+
+      case 'expand':
+      case 'row-expand':
+        return this.renderExpand(index);
+
+      default:
+        return this.renderResult();
+    }
+  };
+
+  _proto.render = function render() {
+    var _this$props8 = this.props,
+        rowSpan = _this$props8.rowSpan,
+        colSpan = _this$props8.colSpan,
+        fixed = _this$props8.fixed,
+        style = _this$props8.style,
+        firstFixed = _this$props8.firstFixed,
+        lastFixed = _this$props8.lastFixed,
+        type = _this$props8.type,
+        align = _this$props8.align,
+        ignoreBorderRight = _this$props8.ignoreBorderRight;
+    var className = classnames(this.props.className, tableClass(fixed === 'left' && CLASS_FIXED_LEFT, fixed === 'right' && CLASS_FIXED_RIGHT, firstFixed && 'fixed-first', lastFixed && 'fixed-last', (type === 'checkbox' || type === 'expand' || type === 'row-expand') && 'checkbox', align !== 'left' && "align-" + align, ignoreBorderRight && 'ignore-right-border'));
+    return React.createElement("td", {
+      style: style,
+      className: className,
+      rowSpan: rowSpan,
+      colSpan: colSpan
+    }, this.renderContent());
+  };
+
+  return Td;
+}(PureComponent);
+
+_defineProperty(Td, "defaultProps", DefaultProps);
+
+export default Td;

package/esm/Table/Tfoot.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TfootProps, SummaryItem } from './Props';
+declare class Tfoot<DataItem, Value> extends React.PureComponent<TfootProps<DataItem, Value>> {
+    getTrs(): React.ReactNode[][];
+    renderTd(item: SummaryItem, index: number): JSX.Element;
+    render(): JSX.Element;
+}
+export default Tfoot;

package/esm/Table/Tfoot.js

@@ -0,0 +1,89 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React from 'react';
+import { tableClass } from './styles';
+import { isArray } from '../utils/is';
+
+var Tfoot =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  _inheritsLoose(Tfoot, _React$PureComponent);
+
+  function Tfoot() {
+    return _React$PureComponent.apply(this, arguments) || this;
+  }
+
+  var _proto = Tfoot.prototype;
+
+  _proto.getTrs = function getTrs() {
+    var _this$props$summary = this.props.summary,
+        summary = _this$props$summary === void 0 ? [] : _this$props$summary;
+
+    if (!isArray(summary[0])) {
+      summary = [summary];
+    }
+
+    var summarys = summary;
+    var trs = [];
+
+    for (var i = 0; i < summarys.length; i++) {
+      var row = summarys[i];
+      trs[i] = [];
+      var index = 0;
+
+      for (var j = 0; j < row.length; j++) {
+        var item = row[j];
+        var nextIndex = index + (item.colSpan || 1);
+        trs[i].push(this.renderTd(item, index));
+        index = nextIndex;
+      }
+    }
+
+    return trs;
+  };
+
+  _proto.renderTd = function renderTd(item, index) {
+    var render = item.render,
+        _item$colSpan = item.colSpan,
+        colSpan = _item$colSpan === void 0 ? 1 : _item$colSpan;
+    var columns = this.props.columns;
+    var content = render();
+    var fixed = {};
+    var isLast = index + colSpan - 1 >= columns.length - 1;
+
+    for (var i = 0; i < colSpan; i++) {
+      var col = columns[index + i] || {};
+
+      if (col.fixed) {
+        fixed["fixed-" + col.fixed] = true;
+      }
+
+      if (col.firstFixed) {
+        fixed['fixed-first'] = true;
+      }
+
+      if (col.lastFixed) {
+        fixed['fixed-last'] = true;
+      }
+    }
+
+    return React.createElement("td", {
+      key: index,
+      colSpan: colSpan,
+      className: tableClass.apply(void 0, Object.keys(fixed).concat([isLast && 'ignore-right-border']))
+    }, content);
+  };
+
+  _proto.render = function render() {
+    var trs = this.getTrs();
+    return React.createElement("tfoot", null, trs.map(function (tr, index) {
+      return React.createElement("tr", {
+        key: index,
+        className: tableClass('normal')
+      }, tr);
+    }));
+  };
+
+  return Tfoot;
+}(React.PureComponent);
+
+export default Tfoot;

package/esm/Table/Thead.d.ts

@@ -0,0 +1,28 @@
+import React, { PureComponent, ReactElement } from 'react';
+import { ColumnItemWithFixed, TheadColumn, TheadProps } from './Props';
+import { ObjectType } from '../@types/common';
+declare class Thead<DataItem, Value> extends PureComponent<TheadProps<DataItem, Value>> {
+    static defaultProps: {
+        showSelectAll: boolean;
+    };
+    handleMouseDown: (e: React.MouseEvent) => void;
+    handleMouseMove: () => void;
+    handleMouseUp: () => void;
+    resizingTh: HTMLTableHeaderCellElement;
+    resizingTable: HTMLTableElement;
+    columnLevel: number;
+    resizingIndex: number;
+    resizingCol: HTMLTableColElement;
+    lastX?: number;
+    rightBorderRecord: ObjectType<boolean>;
+    constructor(props: TheadProps<DataItem, Value>);
+    setColumns(columns: TheadColumn<DataItem>[], col: ColumnItemWithFixed<DataItem>, level: number, index?: number): number;
+    resizeColgroup(deltaX: number): void;
+    handleResize(type: 'mousedown' | 'mousemove' | 'mouseup', e: MouseEvent): void;
+    createTh(trs: ReactElement[][], col: TheadColumn<DataItem>, level: number): void;
+    ignoreRightBorder(column: TheadColumn<DataItem>): void;
+    formatColumns(): TheadColumn<DataItem>[];
+    formatTrs(): React.ReactElement<any, string | React.JSXElementConstructor<any>>[][];
+    render(): JSX.Element;
+}
+export default Thead;