dtable-statistic 4.0.2-test-2

package/es/components/dialog/statistic-record-dialog/index.js

@@ -0,0 +1,174 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Fragment } from 'react';
+import intl from 'react-intl-universal';
+import { Modal, ModalBody } from 'reactstrap';
+import { CellType, Views } from 'dtable-store';
+import { DtableSearchInput, Loading } from '../../index';
+import { searchRows } from '../../../utils';
+import './index.css';
+export var UNSHOWN_COLUMN_TYPES = [CellType.LINK, CellType.LONG_TEXT, CellType.FORMULA, CellType.LINK_FORMULA];
+var StatisticRecordDialog = /*#__PURE__*/function (_React$Component) {
+  _inherits(StatisticRecordDialog, _React$Component);
+  var _super = _createSuper(StatisticRecordDialog);
+  function StatisticRecordDialog(props) {
+    var _this;
+    _classCallCheck(this, StatisticRecordDialog);
+    _this = _super.call(this, props);
+    _this.onSearch = function (searchVal) {
+      var rows = _this.state.rows;
+      var searchRows = _this.getSearchRows(rows, searchVal);
+      _this.setState({
+        searchRows: searchRows,
+        searchVal: searchVal
+      });
+    };
+    _this.clearTimer = function () {
+      if (_this.timer) {
+        clearTimeout(_this.timer);
+        _this.timer = null;
+      }
+    };
+    _this.getStatisticTable = function () {
+      var _this$props = _this.props,
+        statistic = _this$props.statistic,
+        getTableById = _this$props.getTableById;
+      var table_id = statistic.table_id;
+      return getTableById(table_id);
+    };
+    _this.getStatisticView = function (table) {
+      var statistic = _this.props.statistic;
+      var view_id = statistic.view_id;
+      return Views.getViewById(table.views, view_id);
+    };
+    _this.getStatisticColumns = function () {
+      var table = _this.getStatisticTable();
+      var view = _this.getStatisticView(table);
+      return Views.getColumns(view, table);
+    };
+    _this.clearSearch = function () {
+      var rows = _this.state.rows;
+      _this.setState({
+        searchRows: _this.getSearchRows(rows),
+        searchVal: ''
+      });
+    };
+    _this.getSearchRows = function (rows, searchVal) {
+      if (searchVal) {
+        return searchRows(rows, _this.getStatisticColumns(), searchVal, function (row) {
+          return row;
+        });
+      }
+      return rows;
+    };
+    _this.toggle = function () {
+      _this.props.toggleStatisticRecordsDialog();
+    };
+    _this.renderRowsCards = function (_ref) {
+      var table = _ref.table,
+        renderedColumns = _ref.renderedColumns,
+        searchRows = _ref.searchRows,
+        unShowColumnKeyList = _ref.unShowColumnKeyList;
+      if (!window.app || !window.app.renderRowsCards) return;
+      return window.app.renderRowsCards({
+        table: table,
+        renderedColumns: renderedColumns,
+        unShowColumnKeyList: unShowColumnKeyList,
+        isShowRowCardHeader: true,
+        columns: table.columns,
+        rows: searchRows,
+        rowCardType: 'statistic'
+      });
+    };
+    _this.state = {
+      rows: [],
+      searchVal: '',
+      searchRows: []
+    };
+    return _this;
+  }
+  _createClass(StatisticRecordDialog, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      var oldLoading = prevProps.isLoading;
+      var _this$props2 = this.props,
+        isLoading = _this$props2.isLoading,
+        rows = _this$props2.rows;
+      if (oldLoading !== isLoading && !isLoading) {
+        this.setState({
+          rows: rows,
+          searchRows: this.getSearchRows(rows)
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props3 = this.props,
+        isLoading = _this$props3.isLoading,
+        currentDate = _this$props3.currentDate;
+      var searchRows = this.state.searchRows;
+      var unShowColumnKeyList = ['0000'];
+      var table;
+      var renderedColumns = [];
+      if (!isLoading) {
+        table = this.getStatisticTable();
+        renderedColumns = table.columns.filter(function (column) {
+          return !unShowColumnKeyList.includes(column.key) && !UNSHOWN_COLUMN_TYPES.includes(column.type);
+        });
+      }
+      return /*#__PURE__*/React.createElement(Modal, {
+        autoFocus: false,
+        toggle: this.toggle,
+        isOpen: true,
+        className: "statistic-records-dialog",
+        zIndex: 1048
+      }, isLoading && /*#__PURE__*/React.createElement("div", {
+        className: "py-8"
+      }, /*#__PURE__*/React.createElement(Loading, null)), !isLoading && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "search-header"
+      }, /*#__PURE__*/React.createElement("span", null, currentDate), /*#__PURE__*/React.createElement("button", {
+        type: "button",
+        className: "close",
+        "aria-label": "Close",
+        onClick: this.toggle
+      }, /*#__PURE__*/React.createElement("span", {
+        "aria-hidden": "true"
+      }, "\xD7"))), /*#__PURE__*/React.createElement("div", {
+        className: "search-input-container"
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "header-search-icon dtable-font dtable-icon-search"
+      }), /*#__PURE__*/React.createElement(DtableSearchInput, {
+        autoFocus: true,
+        isClearable: true,
+        className: "search-tables-input",
+        placeholder: intl.get('Search_records'),
+        onChange: this.onSearch,
+        clearValue: this.clearSearch,
+        components: {
+          ClearIndicator: function ClearIndicator(props) {
+            return /*#__PURE__*/React.createElement("span", {
+              className: "clear-search-text",
+              onClick: props.clearValue,
+              title: intl.get('Clear_search_text'),
+              "aria-label": intl.get('Clear_search_text')
+            }, /*#__PURE__*/React.createElement("i", {
+              className: "dtable-font dtable-icon-x-"
+            }));
+          }
+        }
+      })), /*#__PURE__*/React.createElement(ModalBody, {
+        className: "statistic-records-container"
+      }, this.renderRowsCards({
+        table: table,
+        renderedColumns: renderedColumns,
+        searchRows: searchRows,
+        unShowColumnKeyList: unShowColumnKeyList
+      }))));
+    }
+  }]);
+  return StatisticRecordDialog;
+}(React.Component);
+export default StatisticRecordDialog;

package/es/components/dialog/table-select-dialog.js

@@ -0,0 +1,93 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import intl from 'react-intl-universal';
+import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Label, FormGroup } from 'reactstrap';
+import { DTableSelect } from '../../components';
+import { KeyCodes } from '../../constants';
+var TableSelectDialog = /*#__PURE__*/function (_Component) {
+  _inherits(TableSelectDialog, _Component);
+  var _super = _createSuper(TableSelectDialog);
+  function TableSelectDialog(props) {
+    var _this;
+    _classCallCheck(this, TableSelectDialog);
+    _this = _super.call(this, props);
+    _this.createTableOptions = function (tables) {
+      if (!Array.isArray(tables) || tables.length === 0) return [];
+      return tables.map(function (table) {
+        var name = table.name,
+          value = table._id;
+        var label = /*#__PURE__*/React.createElement("span", {
+          className: "select-module select-module-name"
+        }, name);
+        return {
+          value: value,
+          label: label
+        };
+      });
+    };
+    _this.onHotKey = function (e) {
+      if (e.keyCode === KeyCodes.Enter) {
+        e.preventDefault();
+        _this.handleSubmit();
+      }
+    };
+    _this.toggle = function () {
+      _this.props.toggle();
+    };
+    _this.onSelectTable = function (selectedTable) {
+      if (selectedTable.value === _this.state.selectedTable.value) return;
+      _this.setState({
+        selectedTable: selectedTable
+      });
+    };
+    _this.handleSubmit = function () {
+      var selectedTable = _this.state.selectedTable;
+      _this.props.onSelectTable(selectedTable.value);
+    };
+    var _tables = props.tables;
+    _this.tables = _this.createTableOptions(_tables);
+    _this.state = {
+      selectedTable: _this.tables[0]
+    };
+    return _this;
+  }
+  _createClass(TableSelectDialog, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      document.addEventListener('keydown', this.onHotKey);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener('keydown', this.onHotKey);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var title = this.props.title;
+      return /*#__PURE__*/React.createElement(Modal, {
+        isOpen: true,
+        toggle: this.toggle,
+        autoFocus: false
+      }, /*#__PURE__*/React.createElement(ModalHeader, {
+        toggle: this.toggle
+      }, title), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, null, intl.get('Select_table')), /*#__PURE__*/React.createElement(DTableSelect, {
+        options: this.tables,
+        value: this.state.selectedTable,
+        onChange: this.onSelectTable,
+        menuPortalTarget: '#wrapper'
+      }))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+        color: "secondary",
+        onClick: this.toggle
+      }, intl.get('Cancel')), /*#__PURE__*/React.createElement(Button, {
+        color: "primary",
+        onClick: this.handleSubmit
+      }, intl.get('Submit'))));
+    }
+  }]);
+  return TableSelectDialog;
+}(Component);
+export default TableSelectDialog;

package/es/components/dropdown-menu/statistic-dropdown-menu.js

@@ -0,0 +1,94 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Fragment } from 'react';
+import intl from 'react-intl-universal';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+import { STAT_TYPE } from '../../constants';
+var StatisticDropdownMenu = /*#__PURE__*/function (_React$Component) {
+  _inherits(StatisticDropdownMenu, _React$Component);
+  var _super = _createSuper(StatisticDropdownMenu);
+  function StatisticDropdownMenu(props) {
+    var _this;
+    _classCallCheck(this, StatisticDropdownMenu);
+    _this = _super.call(this, props);
+    _this.onDropdownToggleClick = function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      _this.setState({
+        isItemMenuShow: !_this.state.isItemMenuShow
+      });
+    };
+    _this.deleteStatItem = function () {
+      _this.props.deleteStatItem();
+    };
+    _this.editStatItem = function () {
+      _this.props.editStatItem();
+    };
+    _this.state = {
+      isItemMenuShow: false
+    };
+    return _this;
+  }
+  _createClass(StatisticDropdownMenu, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        isTableReadOnly = _this$props.isTableReadOnly,
+        chartType = _this$props.chartType;
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Dropdown, {
+        isOpen: this.state.isItemMenuShow,
+        toggle: this.onDropdownToggleClick,
+        className: "dtable-dropdown-menu"
+      }, /*#__PURE__*/React.createElement(DropdownToggle, {
+        tag: "span",
+        "data-toggle": "dropdown",
+        "aria-expanded": this.state.isItemMenuShow
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "toggle-icon dtable-font dtable-icon-more-level"
+      })), /*#__PURE__*/React.createElement(DropdownMenu, {
+        className: "stat-item-dropdown-menu",
+        right: true
+      }, !isTableReadOnly && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(DropdownItem, {
+        onMouseDown: this.editStatItem
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "item-icon dtable-font dtable-icon-rename"
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "item-text"
+      }, intl.get('Edit'))), /*#__PURE__*/React.createElement(DropdownItem, {
+        onMouseDown: this.props.copyStatItem
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "item-icon dtable-font dtable-icon-copy"
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "item-text"
+      }, intl.get('Copy')))), chartType === STAT_TYPE.PIVOT_TABLE && !isTableReadOnly && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(DropdownItem, {
+        onClick: this.props.onNewTableDialogToggle
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "item-icon dtable-font dtable-icon-export"
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "item-text"
+      }, intl.get('Export_to_a_new_table'))), /*#__PURE__*/React.createElement(DropdownItem, {
+        onClick: this.props.onUpdateTableDialogToggle
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "item-icon dtable-font dtable-icon-update"
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "item-text"
+      }, intl.get('Update_to_a_table')))), /*#__PURE__*/React.createElement(DropdownItem, {
+        onMouseDown: this.props.onExportChart
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "item-icon dtable-font dtable-icon-download"
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "item-text"
+      }, intl.get('Export_as_picture'))), !isTableReadOnly && /*#__PURE__*/React.createElement(DropdownItem, {
+        onMouseDown: this.deleteStatItem
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "item-icon dtable-font dtable-icon-delete"
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "item-text"
+      }, intl.get('Delete'))))));
+    }
+  }]);
+  return StatisticDropdownMenu;
+}(React.Component);
+export default StatisticDropdownMenu;

package/es/components/dtable-popover.js

@@ -0,0 +1,109 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import { Popover } from 'reactstrap';
+import { getEventClassName } from '../utils';
+import { CommonEventTypes, KeyCodes } from '../constants';
+var DTablePopover = /*#__PURE__*/function (_React$Component) {
+  _inherits(DTablePopover, _React$Component);
+  var _super = _createSuper(DTablePopover);
+  function DTablePopover() {
+    var _this;
+    _classCallCheck(this, DTablePopover);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.dtablePopoverRef = null;
+    _this.isSelectOpen = false;
+    _this.onHistoryState = function (e) {
+      e.preventDefault();
+      _this.props.hideDTablePopover(e);
+    };
+    _this.onKeyDown = function (e) {
+      var _this$props = _this.props,
+        canHideDTablePopover = _this$props.canHideDTablePopover,
+        hideDTablePopoverWithEsc = _this$props.hideDTablePopoverWithEsc;
+      if (e.keyCode === KeyCodes.Escape && typeof hideDTablePopoverWithEsc === 'function' && !_this.isSelectOpen) {
+        e.preventDefault();
+        hideDTablePopoverWithEsc();
+      } else if (e.keyCode === KeyCodes.Enter) {
+        // Resolve the default behavior of the enter key when entering formulas is blocked
+        if (canHideDTablePopover) return;
+        e.stopImmediatePropagation();
+      }
+    };
+    _this.setSelectStatus = function (status) {
+      _this.isSelectOpen = status;
+    };
+    _this.onMouseDown = function (e) {
+      var canHideDTablePopover = _this.props.canHideDTablePopover;
+      if (!canHideDTablePopover) return;
+      if (_this.dtablePopoverRef && e && getEventClassName(e).indexOf('popover') === -1 && !_this.dtablePopoverRef.contains(e.target)) {
+        _this.props.hideDTablePopover(e);
+      }
+    };
+    _this.onPopoverInsideClick = function (e) {
+      e.stopPropagation();
+    };
+    return _this;
+  }
+  _createClass(DTablePopover, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      document.addEventListener('mousedown', this.onMouseDown);
+      document.addEventListener('keydown', this.onKeyDown);
+      window.addEventListener('popstate', this.onHistoryState);
+      this.unsubscribeOpenSelect = window.app.eventBus.subscribe(CommonEventTypes.OPEN_SELECT, this.setSelectStatus);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener('mousedown', this.onMouseDown);
+      document.removeEventListener('keydown', this.onKeyDown);
+      window.removeEventListener('popstate', this.onHistoryState);
+      this.unsubscribeOpenSelect();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props2 = this.props,
+        target = _this$props2.target,
+        boundariesElement = _this$props2.boundariesElement,
+        innerClassName = _this$props2.innerClassName,
+        popoverClassName = _this$props2.popoverClassName,
+        hideArrow = _this$props2.hideArrow,
+        modifiers = _this$props2.modifiers,
+        placement = _this$props2.placement;
+      var additionalProps = {};
+      if (boundariesElement) {
+        additionalProps.boundariesElement = boundariesElement;
+      }
+      return /*#__PURE__*/React.createElement(Popover, Object.assign({
+        placement: placement,
+        isOpen: true,
+        target: target,
+        fade: false,
+        hideArrow: hideArrow,
+        innerClassName: innerClassName,
+        className: popoverClassName,
+        modifiers: modifiers
+      }, additionalProps), /*#__PURE__*/React.createElement("div", {
+        ref: function ref(_ref) {
+          return _this2.dtablePopoverRef = _ref;
+        },
+        onClick: this.onPopoverInsideClick
+      }, this.props.children));
+    }
+  }]);
+  return DTablePopover;
+}(React.Component);
+DTablePopover.defaultProps = {
+  placement: 'bottom-start',
+  hideArrow: true,
+  canHideDTablePopover: true
+};
+export default DTablePopover;

package/es/components/dtable-search-input.js

@@ -0,0 +1,137 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component, Fragment } from 'react';
+import classnames from 'classnames';
+import { isFunction } from '../utils';
+var DtableSearchInput = /*#__PURE__*/function (_Component) {
+  _inherits(DtableSearchInput, _Component);
+  var _super = _createSuper(DtableSearchInput);
+  function DtableSearchInput(props) {
+    var _this;
+    _classCallCheck(this, DtableSearchInput);
+    _this = _super.call(this, props);
+    _this.onCompositionStart = function () {
+      _this.isInputtingChinese = true;
+    };
+    _this.onChange = function (e) {
+      _this.timer && clearTimeout(_this.timer);
+      var _this$props = _this.props,
+        onChange = _this$props.onChange,
+        wait = _this$props.wait;
+      var text = e.target.value;
+      _this.setState({
+        searchValue: text || ''
+      }, function () {
+        if (_this.isInputtingChinese) return;
+        _this.timer = setTimeout(function () {
+          onChange && onChange(_this.state.searchValue.trim());
+        }, wait);
+      });
+    };
+    _this.onCompositionEnd = function (e) {
+      _this.isInputtingChinese = false;
+      _this.onChange(e);
+    };
+    _this.clearSearch = function () {
+      var clearValue = _this.props.clearValue;
+      _this.setState({
+        searchValue: ''
+      }, function () {
+        clearValue && clearValue();
+      });
+    };
+    _this.setFocus = function (isSelectAllText) {
+      if (_this.inputRef === document.activeElement) return;
+      _this.inputRef.focus();
+      if (isSelectAllText) {
+        var txtLength = _this.state.searchValue.length;
+        _this.inputRef.setSelectionRange(0, txtLength);
+      }
+    };
+    _this.renderClear = function () {
+      var _this$props2 = _this.props,
+        isClearable = _this$props2.isClearable,
+        clearClassName = _this$props2.clearClassName,
+        _this$props2$componen = _this$props2.components,
+        components = _this$props2$componen === void 0 ? {} : _this$props2$componen;
+      var searchValue = _this.state.searchValue;
+      if (!isClearable || !searchValue) return null;
+      var ClearIndicator = components.ClearIndicator;
+      if (React.isValidElement(ClearIndicator)) {
+        return React.cloneElement(ClearIndicator, {
+          clearValue: _this.clearSearch
+        });
+      } else if (isFunction(ClearIndicator)) {
+        return /*#__PURE__*/React.createElement(ClearIndicator, {
+          clearValue: _this.clearSearch
+        });
+      }
+      return /*#__PURE__*/React.createElement("i", {
+        className: classnames('search-text-clear input-icon-addon', clearClassName),
+        onClick: _this.clearSearch
+      }, "\xD7");
+    };
+    _this.state = {
+      searchValue: props.value
+    };
+    _this.isInputtingChinese = false;
+    _this.timer = null;
+    _this.inputRef = null;
+    return _this;
+  }
+  _createClass(DtableSearchInput, [{
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      if (nextProps.value !== this.props.value) {
+        this.setState({
+          searchValue: nextProps.value
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.timer && clearTimeout(this.timer);
+      this.timer = null;
+      this.inputRef = null;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props3 = this.props,
+        placeholder = _this$props3.placeholder,
+        autoFocus = _this$props3.autoFocus,
+        className = _this$props3.className,
+        onKeyDown = _this$props3.onKeyDown,
+        disabled = _this$props3.disabled,
+        style = _this$props3.style;
+      var searchValue = this.state.searchValue;
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("input", {
+        type: "text",
+        value: searchValue,
+        className: classnames('form-control', className),
+        onChange: this.onChange,
+        autoFocus: autoFocus,
+        placeholder: placeholder,
+        onCompositionStart: this.onCompositionStart,
+        onCompositionEnd: this.onCompositionEnd,
+        onKeyDown: onKeyDown,
+        disabled: disabled,
+        style: style,
+        ref: function ref(_ref) {
+          return _this2.inputRef = _ref;
+        }
+      }), this.renderClear());
+    }
+  }]);
+  return DtableSearchInput;
+}(Component);
+DtableSearchInput.defaultProps = {
+  wait: 100,
+  disabled: false,
+  value: ''
+};
+export default DtableSearchInput;