shineout 1.12.2 → 1.12.3

package/esm/Table/index.js

@@ -0,0 +1,360 @@
+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 deepEqual from 'deep-eql';
+import pagable from '../hoc/pagable';
+import Table from './Table';
+import { compose } from '../utils/func';
+import { isFunc } from '../utils/is';
+import treeExpand from './TreeExpand';
+var TableWithPagination = pagable(Table);
+var TableWithTree = treeExpand(Table);
+var TableWithPT = compose(pagable, treeExpand)(Table);
+
+var TableIndex =
+/*#__PURE__*/
+function (_React$Component) {
+  _inheritsLoose(TableIndex, _React$Component);
+
+  function TableIndex(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "cacheDefaultSorterList", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "oldColumns", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "cachedColumns", void 0);
+
+    _this.state = {
+      sorter: []
+    };
+    _this.handleSortChange = _this.handleSortChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.cacheDefaultSorterList = [];
+    return _this;
+  }
+
+  var _proto = TableIndex.prototype;
+
+  _proto.getTreeColumnsName = function getTreeColumnsName() {
+    var columns = this.getFilteredColumn();
+    if (!Array.isArray(columns)) return undefined;
+    var has = columns.filter(function (v) {
+      return typeof v.treeColumnsName === 'string';
+    });
+    if (has.length === 0) return undefined;
+    return has[0].treeColumnsName;
+  };
+
+  _proto.getColumns = function getColumns(columns) {
+    if (columns === void 0) {
+      columns = [];
+    }
+
+    if (deepEqual(columns, this.oldColumns)) {
+      return this.cachedColumns;
+    }
+
+    var _this$props = this.props,
+        onRowSelect = _this$props.onRowSelect,
+        datum = _this$props.datum;
+    columns = columns.filter(function (c) {
+      return typeof c === 'object';
+    });
+    var left = -1;
+    var right = -1;
+    columns.forEach(function (c, i) {
+      if (c.fixed === 'left') left = i;
+      if (c.fixed === 'right' && right < 0) right = i;
+    });
+    var setDefaultOrder = false;
+    this.cachedColumns = columns.map(function (c, i) {
+      return immer(c, function (draft) {
+        draft.index = i;
+        if (draft.key === undefined) draft.key = i;
+        if (i <= left) draft.fixed = 'left';
+        if (i === left) draft.lastFixed = true;
+        if (i >= right && right > 0) draft.fixed = 'right';
+        if (i === right) draft.firstFixed = true;
+
+        if (typeof draft.sorter !== 'object') {
+          if (draft.defaultOrder && setDefaultOrder) delete draft.defaultOrder;
+          if (draft.defaultOrder) setDefaultOrder = true;
+        } // if (draft.type === 'expand' && !draft.width) draft.width = 48
+
+      });
+    });
+
+    if (this.cachedColumns.find(function (v) {
+      return typeof v.sorter !== 'object' && v.defaultOrder;
+    })) {
+      this.cachedColumns = this.cachedColumns.map(function (v) {
+        return immer(v, function (draft) {
+          if (typeof draft.sorter === 'object' && draft.defaultOrder) delete draft.defaultOrder;
+        });
+      });
+    } // filter checkbox
+
+
+    var haveCheckbox = columns.find(function (v) {
+      return v.type === 'checkbox';
+    });
+
+    if ((onRowSelect || datum) && this.cachedColumns[0] && this.cachedColumns[0].type !== 'checkbox' && !haveCheckbox) {
+      this.cachedColumns.unshift({
+        index: -1,
+        key: 'checkbox',
+        type: 'checkbox',
+        // width: 48,
+        fixed: left >= 0 ? 'left' : undefined
+      });
+    }
+
+    this.oldColumns = columns;
+    return this.cachedColumns;
+  };
+
+  _proto.getTableSorter = function getTableSorter() {
+    var tableSorter = this.props.sorter;
+
+    if (!tableSorter) {
+      console.error('You need to specify a sorter as a sort function for the table. Default alphabetical order.');
+
+      tableSorter = function tableSorter(sorter, order) {
+        return function (a, b) {
+          var a1 = (a[sorter] || '').toString();
+          var b1 = (b[sorter] || '').toString();
+          return order === 'asc' ? a1.localeCompare(b1) : b1.localeCompare(a1);
+        };
+      };
+    }
+
+    return tableSorter;
+  };
+
+  _proto.getFilteredColumn = function getFilteredColumn() {
+    var columns = this.props.columns;
+    if (!columns) return columns;
+    return columns.filter(function (v) {
+      return !(['expand', 'row-expand'].indexOf(v.type) > -1 && v.hide);
+    });
+  };
+
+  _proto.getExternalExpandObj = function getExternalExpandObj() {
+    var columns = this.props.columns;
+    if (!columns) return undefined;
+    var obj = columns.find(function (v) {
+      return ['expand', 'row-expand'].indexOf(v.type) > -1 && v.hide;
+    });
+    if (obj && typeof obj === 'object') return obj;
+    return undefined;
+  };
+
+  _proto.handleSortChange = function handleSortChange(order, sorter, index, cancelOrder, manual) {
+    var _this2 = this;
+
+    var onSortCancel = this.props.onSortCancel; // cancel sorter
+
+    if (!order) {
+      this.setState(immer(function (state) {
+        var item = state.sorter.find(function (v) {
+          return v.index === index;
+        });
+
+        if (item) {
+          item.order = undefined;
+          item.manual = true;
+          item.deleted = true;
+        }
+      }), function () {
+        var rpm = _this2.state.sorter.filter(function (v) {
+          return v.order && !v.deleted;
+        }).map(function (v) {
+          return {
+            order: v.order,
+            index: v.index,
+            weight: v.weight,
+            manual: v.manual
+          };
+        });
+
+        if (typeof sorter === 'object' && typeof sorter.rule === 'function') {
+          sorter.rule(rpm);
+        }
+
+        if (onSortCancel) onSortCancel(cancelOrder, index, rpm, sorter);
+      });
+      return;
+    }
+
+    if (typeof sorter === 'object') {
+      this.setState(immer(function (state) {
+        var rpm = state.sorter.map(function (v) {
+          return {
+            order: v.order,
+            index: v.index,
+            weight: v.weight,
+            manual: v.manual,
+            deleted: v.deleted
+          };
+        });
+        var item = state.sorter.find(function (v) {
+          return v.index === index;
+        });
+
+        if (state.sorter.length === 1 && !state.sorter[0].multiple) {
+          state.sorter = [];
+          rpm = [];
+        }
+
+        if (item) {
+          item.order = order;
+          item.manual = manual;
+          item.deleted = false;
+          var rpmItem = rpm.find(function (v) {
+            return v.index === index;
+          });
+          rpmItem.order = order;
+          rpmItem.manual = manual;
+          rpm = rpm.filter(function (v) {
+            return v.order && !v.deleted;
+          });
+          var sort = typeof sorter.rule === 'string' ? _this2.getTableSorter()(sorter.rule, order, rpm) : undefined;
+          item.sort = sort;
+        } else {
+          if (manual) {
+            _this2.cacheDefaultSorterList = [];
+            rpm.push({
+              order: order,
+              index: index,
+              weight: sorter.weight,
+              manual: manual,
+              deleted: false
+            });
+            rpm = rpm.filter(function (v) {
+              return v.order && !v.deleted;
+            });
+          }
+
+          if (!manual) {
+            _this2.cacheDefaultSorterList.push({
+              order: order,
+              index: index,
+              weight: sorter.weight,
+              deleted: false,
+              multiple: false,
+              manual: manual
+            });
+
+            rpm = _this2.cacheDefaultSorterList;
+          }
+
+          var _sort = typeof sorter.rule === 'string' ? _this2.getTableSorter()(sorter.rule, order, rpm) : undefined;
+
+          state.sorter.push({
+            order: order,
+            index: index,
+            sort: _sort,
+            manual: manual,
+            multiple: true,
+            weight: sorter.weight,
+            deleted: false
+          });
+          state.sorter.sort(function (a, b) {
+            var a1 = (a.weight || 0).toString();
+            var b1 = (b.weight || 0).toString();
+            return a1.localeCompare(b1);
+          });
+        }
+
+        if (typeof sorter.rule === 'function') {
+          rpm = rpm.filter(function (v) {
+            return v.order && !v.deleted;
+          });
+          sorter.rule(rpm);
+        }
+      }));
+    } else {
+      var sort = typeof sorter === 'string' ? this.getTableSorter()(sorter, order, [{
+        order: order,
+        index: index
+      }]) : sorter(order);
+      this.setState(immer(function (state) {
+        state.sorter = [];
+        state.sorter.push({
+          order: order,
+          index: index,
+          sort: sort,
+          manual: manual,
+          multiple: false,
+          deleted: false
+        });
+      }));
+    }
+  };
+
+  _proto.render = function render() {
+    var _this$props2 = this.props,
+        onRowSelect = _this$props2.onRowSelect,
+        props = _objectWithoutPropertiesLoose(_this$props2, ["onRowSelect"]);
+
+    var columns = this.getFilteredColumn();
+    var sorter = this.state.sorter;
+    if (!columns) return React.createElement(Table, props);
+    var data = this.props.data;
+
+    if (!sorter.length) {
+      sorter = immer(sorter, function (draft) {
+        // @ts-ignore
+        draft.push({});
+      });
+    }
+
+    sorter.filter(function (v) {
+      return !v.deleted;
+    }).forEach(function (v) {
+      if (v.sort) data = immer(data, function (draft) {
+        return draft.sort(v.sort);
+      });
+    });
+    var treeColumnsName = this.getTreeColumnsName();
+    var Component = Table;
+
+    if (props.pagination && treeColumnsName) {
+      Component = TableWithPT;
+    } else if (props.pagination) {
+      Component = TableWithPagination;
+    } else if (treeColumnsName) {
+      Component = TableWithTree;
+    }
+
+    var externalExpandRender = (this.getExternalExpandObj() || {}).render;
+    var externalExpandOnClick = (this.getExternalExpandObj() || {}).onClick;
+    var ComponentPT = Component;
+    return React.createElement(ComponentPT, _extends({}, props, {
+      onChange: onRowSelect,
+      columns: this.getColumns(columns),
+      data: data,
+      sorter: sorter,
+      onSortChange: this.handleSortChange,
+      treeColumnsName: treeColumnsName,
+      externalExpandRender: isFunc(externalExpandRender) ? externalExpandRender : undefined,
+      externalExpandClick: externalExpandOnClick
+    }));
+  };
+
+  return TableIndex;
+}(React.Component);
+
+_defineProperty(TableIndex, "displayName", 'ShineoutTable');
+
+_defineProperty(TableIndex, "defaultProps", {
+  data: []
+});
+
+export { TableIndex as default };

package/esm/Table/interface.d.ts

@@ -0,0 +1 @@
+export { TableIndexProps as Props, ColumnOrder, ColumnFix, ColumnType, RenderSorterParam, ColumnItem, CommonColumn, SummaryItem, TableRef as Ref, } from './Props';

package/esm/Table/interface.js

@@ -0,0 +1 @@
+export {};

package/esm/Table/resizable.d.ts

@@ -0,0 +1,43 @@
+import React, { ComponentType } from 'react';
+import PropTypes from 'prop-types';
+import { GetResizeProps, SimpleTableProps } from './Props';
+interface ScrollState<DataItem, Value> {
+    columns: SimpleTableProps<DataItem, Value>['columns'];
+    delta: number;
+}
+declare const _default: <DataItem, Value, Props extends SimpleTableProps<DataItem, Value>>(Table: React.ComponentType<Props>) => {
+    new (props: GetResizeProps<Props, DataItem>): {
+        componentDidUpdate(prevProps: Props): void;
+        getWidth(): number | GetResizeProps<Props, DataItem>["width"] | undefined;
+        handleResize(index: number, width: number, colgroup: number[]): void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends keyof ScrollState<DataItem, Value>>(state: ScrollState<DataItem, Value> | ((prevState: Readonly<ScrollState<DataItem, Value>>, props: Readonly<GetResizeProps<Props, DataItem>>) => ScrollState<DataItem, Value> | Pick<ScrollState<DataItem, Value>, K> | null) | Pick<ScrollState<DataItem, Value>, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<GetResizeProps<Props, DataItem>> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<ScrollState<DataItem, Value>>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<GetResizeProps<Props, DataItem>>, nextState: Readonly<ScrollState<DataItem, Value>>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<GetResizeProps<Props, DataItem>>, prevState: Readonly<ScrollState<DataItem, Value>>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<GetResizeProps<Props, DataItem>>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<GetResizeProps<Props, DataItem>>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<GetResizeProps<Props, DataItem>>, nextState: Readonly<ScrollState<DataItem, Value>>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<GetResizeProps<Props, DataItem>>, nextState: Readonly<ScrollState<DataItem, Value>>, nextContext: any): void;
+    };
+    propTypes: {
+        columns: PropTypes.Validator<any[]>;
+        onColumnResize: PropTypes.Requireable<(...args: any[]) => any>;
+        width: PropTypes.Requireable<number>;
+    };
+    contextType?: React.Context<any> | undefined;
+};
+export default _default;

package/esm/Table/resizable.js

@@ -0,0 +1,108 @@
+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 PropTypes from 'prop-types';
+export default (function (Table) {
+  var _class, _temp;
+
+  return _temp = _class =
+  /*#__PURE__*/
+  function (_React$Component) {
+    _inheritsLoose(_class, _React$Component);
+
+    function _class(props) {
+      var _this;
+
+      _this = _React$Component.call(this, props) || this;
+      _this.handleResize = _this.handleResize.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+      _this.state = {
+        columns: props.columns,
+        delta: 0
+      };
+      return _this;
+    }
+
+    var _proto = _class.prototype;
+
+    _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+      var _this2 = this;
+
+      var prevColumns = prevProps.columns;
+      var _this$props = this.props,
+          columns = _this$props.columns,
+          onColumnResize = _this$props.onColumnResize;
+
+      if (prevColumns !== columns) {
+        if (prevColumns.length !== columns.length) {
+          // eslint-disable-next-line react/no-did-update-set-state
+          this.setState({
+            columns: columns
+          });
+        } else {
+          var widthed = onColumnResize ? columns : immer(columns, function (draft) {
+            draft.forEach(function (column, index) {
+              column.width = _this2.state.columns[index].width;
+            });
+          }); // eslint-disable-next-line react/no-did-update-set-state
+
+          this.setState({
+            columns: widthed
+          });
+        }
+      }
+    };
+
+    _proto.getWidth = function getWidth() {
+      var width = this.props.width;
+      if (typeof width === 'number') return width + this.state.delta;
+      return width;
+    };
+
+    _proto.handleResize = function handleResize(index, width, colgroup) {
+      if (colgroup === undefined) return;
+      var onColumnResize = this.props.onColumnResize;
+      var changed = immer(this.state, function (draft) {
+        var column = draft.columns[index]; // @ts-ignore
+
+        draft.delta += parseFloat(width - (column.width || colgroup[index] || 0));
+        colgroup[index] = width;
+        draft.columns.forEach(function (col, i) {
+          var w = colgroup[i];
+          if (w) col.width = w;
+        });
+      });
+
+      if (onColumnResize) {
+        onColumnResize(changed.columns);
+        return;
+      }
+
+      this.setState(changed);
+    };
+
+    _proto.render = function render() {
+      var columns = this.state.columns;
+
+      var _this$props2 = this.props,
+          onColumnResize = _this$props2.onColumnResize,
+          other = _objectWithoutPropertiesLoose(_this$props2, ["onColumnResize"]);
+
+      var width = this.getWidth();
+      return React.createElement(Table, _extends({}, other, {
+        width: width,
+        columns: columns,
+        onResize: this.handleResize
+      }));
+    };
+
+    return _class;
+  }(React.Component), _defineProperty(_class, "propTypes", {
+    columns: PropTypes.array.isRequired,
+    onColumnResize: PropTypes.func,
+    width: PropTypes.number
+  }), _temp;
+});

package/esm/Table/select.d.ts

@@ -0,0 +1,54 @@
+import React, { ComponentType } from 'react';
+import PropTypes from 'prop-types';
+import { GetSelectProps, OriginTableProps } from './Props';
+interface CacheType {
+    xIndex?: number;
+    yIndex?: number;
+    dom?: HTMLTableCellElement;
+}
+declare const _default: <DataItem, Value, Props extends OriginTableProps<DataItem, Value>>(Table: React.ComponentType<Props>) => {
+    new (props: GetSelectProps<Props>): {
+        doc: null | {
+            remove: () => void;
+        };
+        isFirefox: boolean;
+        events: Props["events"];
+        move: boolean;
+        cache: CacheType;
+        prevDom: null | HTMLTableCellElement;
+        componentDidMount(): void;
+        componentWillUnmount(): void;
+        readonly selection: GetSelectProps<Props>["selection"] | GetSelectProps<Props>["cellSelectable"] | undefined;
+        isEventCombination(event: MouseEvent | React.MouseEvent): boolean | undefined;
+        handleMouseDown(event: React.MouseEvent): void;
+        handleMouseUp(event: React.MouseEvent<HTMLDivElement>): void;
+        handleMouseMove(event: React.MouseEvent): void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<GetSelectProps<Props>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<GetSelectProps<Props>> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<GetSelectProps<Props>>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<GetSelectProps<Props>>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<GetSelectProps<Props>>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<GetSelectProps<Props>>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<GetSelectProps<Props>>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<GetSelectProps<Props>>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<GetSelectProps<Props>>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    propTypes: {
+        selection: PropTypes.Requireable<boolean>;
+        cellSelectable: PropTypes.Requireable<boolean>;
+    };
+    contextType?: React.Context<any> | undefined;
+};
+export default _default;