dtable-statistic 4.2.2 → 4.3.0

package/es/tabs/index.js

@@ -1,8 +1,3 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-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 NewViewDialog from '../components/dialog/new-view-dialog';
@@ -10,41 +5,44 @@ import RenameViewDialog from '../components/dialog/rename-view-dialog';
 import DeleteConfirmationDialog from '../components/dialog/delete-confirmation-dialog';
 import Tab from './tab';
 import styles from './statistic-tabs.module.css';
-var SCROLL_TYPE = {
+const SCROLL_TYPE = {
   PREV: 'prev',
   NEXT: 'next'
 };
-var DashboardTabs = /*#__PURE__*/function (_Component) {
-  _inherits(DashboardTabs, _Component);
-  var _super = _createSuper(DashboardTabs);
-  function DashboardTabs(_props) {
-    var _this;
-    _classCallCheck(this, DashboardTabs);
-    _this = _super.call(this, _props);
-    _this.initSelectedViewScroll = function (props) {
-      if (_this.views.length === 0) {
+class DashboardTabs extends Component {
+  constructor(_props) {
+    super(_props);
+    this.initSelectedViewScroll = props => {
+      if (this.views.length === 0) {
         return;
       }
-      var selectedDashboardIdx = props.selectedDashboardIdx;
-      var _this$views$selectedD = _this.views[selectedDashboardIdx].getBoundingClientRect(),
-        left = _this$views$selectedD.left;
-      var offsetWidth = _this.viewsTabsScroll.offsetWidth;
+      const {
+        selectedDashboardIdx
+      } = props;
+      const {
+        left
+      } = this.views[selectedDashboardIdx].getBoundingClientRect();
+      const {
+        offsetWidth
+      } = this.viewsTabsScroll;
       if (left > offsetWidth) {
-        _this.viewsTabsScroll.scrollLeft = left - offsetWidth;
+        this.viewsTabsScroll.scrollLeft = left - offsetWidth;
       } else {
-        _this.checkAvailableScrollType();
+        this.checkAvailableScrollType();
       }
     };
-    _this.checkAvailableScrollType = function () {
-      var _this$state = _this.state,
-        canScrollPrev = _this$state.canScrollPrev,
-        canScrollNext = _this$state.canScrollNext;
-      var _this$viewsTabsScroll = _this.viewsTabsScroll,
-        offsetWidth = _this$viewsTabsScroll.offsetWidth,
-        scrollWidth = _this$viewsTabsScroll.scrollWidth,
-        scrollLeft = _this$viewsTabsScroll.scrollLeft;
-      var _canScrollPrev = false;
-      var _canScrollNext = false;
+    this.checkAvailableScrollType = () => {
+      const {
+        canScrollPrev,
+        canScrollNext
+      } = this.state;
+      let {
+        offsetWidth,
+        scrollWidth,
+        scrollLeft
+      } = this.viewsTabsScroll;
+      let _canScrollPrev = false;
+      let _canScrollNext = false;
       if (scrollLeft > 0) {
         _canScrollPrev = true;
       }
@@ -52,18 +50,19 @@ var DashboardTabs = /*#__PURE__*/function (_Component) {
         _canScrollNext = true;
       }
       if (_canScrollPrev !== canScrollPrev || _canScrollNext !== canScrollNext) {
-        _this.setState({
+        this.setState({
           canScrollPrev: _canScrollPrev,
           canScrollNext: _canScrollNext
         });
       }
     };
-    _this.onScrollWithControl = function (type) {
-      var _this$viewsTabsScroll2 = _this.viewsTabsScroll,
-        offsetWidth = _this$viewsTabsScroll2.offsetWidth,
-        scrollWidth = _this$viewsTabsScroll2.scrollWidth,
-        scrollLeft = _this$viewsTabsScroll2.scrollLeft;
-      var targetScrollLeft;
+    this.onScrollWithControl = type => {
+      const {
+        offsetWidth,
+        scrollWidth,
+        scrollLeft
+      } = this.viewsTabsScroll;
+      let targetScrollLeft;
       if (type === SCROLL_TYPE.PREV) {
         if (scrollLeft === 0) {
           return;
@@ -78,98 +77,104 @@ var DashboardTabs = /*#__PURE__*/function (_Component) {
         targetScrollLeft = scrollLeft + offsetWidth;
         targetScrollLeft = targetScrollLeft > scrollWidth - offsetWidth ? scrollWidth - offsetWidth : targetScrollLeft;
       }
-      if (_this.state.canViewsScroll) {
-        _this.setState({
+      if (this.state.canViewsScroll) {
+        this.setState({
           canViewsScroll: false
         });
-        var timer = null;
-        timer = setInterval(function () {
-          var step = (targetScrollLeft - scrollLeft) / 10;
+        let timer = null;
+        timer = setInterval(() => {
+          let step = (targetScrollLeft - scrollLeft) / 10;
           step = step > 0 ? Math.ceil(step) : Math.floor(step);
-          _this.viewsTabsScroll.scrollLeft = _this.viewsTabsScroll.scrollLeft + step;
-          if (Math.abs(targetScrollLeft - _this.viewsTabsScroll.scrollLeft) <= Math.abs(step)) {
-            _this.viewsTabsScroll.scrollLeft = targetScrollLeft;
+          this.viewsTabsScroll.scrollLeft = this.viewsTabsScroll.scrollLeft + step;
+          if (Math.abs(targetScrollLeft - this.viewsTabsScroll.scrollLeft) <= Math.abs(step)) {
+            this.viewsTabsScroll.scrollLeft = targetScrollLeft;
             clearInterval(timer);
-            _this.setState({
+            this.setState({
               canViewsScroll: true
             });
           }
         }, 15);
       }
     };
-    _this.setViewItem = function (idx, viewItem) {
-      _this.views[idx] = viewItem;
+    this.setViewItem = (idx, viewItem) => {
+      this.views[idx] = viewItem;
     };
-    _this.selectDashboard = function (index, event) {
+    this.selectDashboard = (index, event) => {
       event.stopPropagation();
       event.preventDefault();
-      var selectedDashboardIdx = _this.props.selectedDashboardIdx;
+      const {
+        selectedDashboardIdx
+      } = this.props;
       if (index === selectedDashboardIdx) return;
-      _this.props.selectDashboard(index);
+      this.props.selectDashboard(index);
     };
-    _this.onViewsScroll = function () {
-      _this.checkAvailableScrollType();
+    this.onViewsScroll = () => {
+      this.checkAvailableScrollType();
     };
-    _this.setViewsTabsScroll = function () {
-      if (!_this.viewsTabsScroll) return;
-      var _this$viewsTabsScroll3 = _this.viewsTabsScroll,
-        offsetWidth = _this$viewsTabsScroll3.offsetWidth,
-        scrollWidth = _this$viewsTabsScroll3.scrollWidth;
+    this.setViewsTabsScroll = () => {
+      if (!this.viewsTabsScroll) return;
+      let {
+        offsetWidth,
+        scrollWidth
+      } = this.viewsTabsScroll;
       if (scrollWidth > offsetWidth) {
-        _this.viewsTabsScroll.scrollLeft = scrollWidth - offsetWidth;
+        this.viewsTabsScroll.scrollLeft = scrollWidth - offsetWidth;
       }
     };
-    _this.onNewViewToggle = function () {
-      if (_this.props.isMobile) return;
-      _this.setState({
-        isShowNewViewDialog: !_this.state.isShowNewViewDialog
+    this.onNewViewToggle = () => {
+      if (this.props.isMobile) return;
+      this.setState({
+        isShowNewViewDialog: !this.state.isShowNewViewDialog
       });
     };
-    _this.onNewViewCancel = function () {
-      _this.setState({
+    this.onNewViewCancel = () => {
+      this.setState({
         isShowNewViewDialog: false
       });
     };
-    _this.onToggleRenameView = function () {
-      if (_this.props.isMobile) return;
-      _this.setState({
-        isShowRenameViewDialog: !_this.state.isShowRenameViewDialog
+    this.onToggleRenameView = () => {
+      if (this.props.isMobile) return;
+      this.setState({
+        isShowRenameViewDialog: !this.state.isShowRenameViewDialog
       });
     };
-    _this.onToggleDeleteView = function () {
-      if (_this.props.isMobile) return;
-      _this.setState({
-        isShowDeleteViewDialog: !_this.state.isShowDeleteViewDialog
+    this.onToggleDeleteView = () => {
+      if (this.props.isMobile) return;
+      this.setState({
+        isShowDeleteViewDialog: !this.state.isShowDeleteViewDialog
       });
     };
-    _this.onDeleteDashBoard = function () {
-      var selectedDashboardIdx = _this.props.selectedDashboardIdx;
-      _this.props.deleteDashboard(selectedDashboardIdx);
-      _this.setState({
+    this.onDeleteDashBoard = () => {
+      const {
+        selectedDashboardIdx
+      } = this.props;
+      this.props.deleteDashboard(selectedDashboardIdx);
+      this.setState({
         isShowDeleteViewDialog: false
       });
     };
-    _this.hideRenameViewDialog = function () {
-      _this.setState({
+    this.hideRenameViewDialog = () => {
+      this.setState({
         isShowRenameViewDialog: false
       });
     };
-    _this.onAddDashboard = function (viewName) {
-      _this.props.addDashboard(viewName, function () {
-        _this.setViewsTabsScroll();
+    this.onAddDashboard = viewName => {
+      this.props.addDashboard(viewName, () => {
+        this.setViewsTabsScroll();
       });
-      _this.onNewViewToggle();
+      this.onNewViewToggle();
     };
-    _this.renderTabs = function () {
-      var _this$props = _this.props,
-        statistics = _this$props.statistics,
-        selectedDashboardIdx = _this$props.selectedDashboardIdx,
-        theme = _this$props.theme;
+    this.renderTabs = () => {
+      const {
+        statistics,
+        selectedDashboardIdx,
+        theme
+      } = this.props;
       if (!statistics) {
         return null;
       }
-      var canDelete = statistics.length > 1;
-      return statistics.map(function (item, index) {
+      const canDelete = statistics.length > 1;
+      return statistics.map((item, index) => {
         return /*#__PURE__*/React.createElement(Tab, {
           key: "statistic-view-".concat(index),
           item: item,
@@ -177,17 +182,15 @@ var DashboardTabs = /*#__PURE__*/function (_Component) {
           canDelete: canDelete,
           selectedDashboardIdx: selectedDashboardIdx,
           selected: index === selectedDashboardIdx,
-          setViewItem: function setViewItem(ref) {
-            return _this.setViewItem(index, ref);
-          },
-          onSelectDashboard: _this.selectDashboard.bind(_assertThisInitialized(_this), index),
-          onToggleRenameView: _this.onToggleRenameView,
-          onDeleteDashboard: _this.onToggleDeleteView,
-          onMoveDashboard: _this.props.moveDashboard
+          setViewItem: ref => this.setViewItem(index, ref),
+          onSelectDashboard: this.selectDashboard.bind(this, index),
+          onToggleRenameView: this.onToggleRenameView,
+          onDeleteDashboard: this.onToggleDeleteView,
+          onMoveDashboard: this.props.moveDashboard
         });
       });
     };
-    _this.state = {
+    this.state = {
       isShowNewViewDialog: false,
       isShowRenameViewDialog: false,
       isShowDeleteViewDialog: false,
@@ -195,79 +198,71 @@ var DashboardTabs = /*#__PURE__*/function (_Component) {
       canScrollNext: false,
       canViewsScroll: true
     };
-    _this.views = [];
-    return _this;
+    this.views = [];
   }
-  _createClass(DashboardTabs, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
+  componentDidMount() {
+    this.initSelectedViewScroll(this.props);
+  }
+  componentDidUpdate(prevProps) {
+    const {
+      statistics
+    } = this.props;
+    if (!prevProps.statistics && statistics !== prevProps.statistics) {
       this.initSelectedViewScroll(this.props);
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var statistics = this.props.statistics;
-      if (!prevProps.statistics && statistics !== prevProps.statistics) {
-        this.initSelectedViewScroll(this.props);
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$state2 = this.state,
-        isShowNewViewDialog = _this$state2.isShowNewViewDialog,
-        isShowRenameViewDialog = _this$state2.isShowRenameViewDialog,
-        isShowDeleteViewDialog = _this$state2.isShowDeleteViewDialog,
-        canScrollPrev = _this$state2.canScrollPrev,
-        canScrollNext = _this$state2.canScrollNext;
-      var _this$props2 = this.props,
-        isMobile = _this$props2.isMobile,
-        statistics = _this$props2.statistics,
-        selectedDashboardIdx = _this$props2.selectedDashboardIdx;
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles['tabs-container']
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "".concat(styles['views-tabs-scroll'], " d-flex pr-1"),
-        ref: function ref(_ref) {
-          return _this2.viewsTabsScroll = _ref;
-        },
-        onScroll: this.onViewsScroll
-      }, this.renderTabs()), (canScrollPrev || canScrollNext) && !isMobile && /*#__PURE__*/React.createElement("div", {
-        className: styles['views-scroll-control']
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "".concat(styles['scroll-control-btn'], " ").concat(styles['scroll-prev'], " ").concat(canScrollPrev && styles['scroll-active']),
-        onClick: this.onScrollWithControl.bind(this, SCROLL_TYPE.PREV)
-      }, /*#__PURE__*/React.createElement("i", {
-        className: "dtable-font dtable-icon-left-slide ".concat(styles['btn-scroll-icon'])
-      })), /*#__PURE__*/React.createElement("span", {
-        className: "".concat(styles['scroll-control-btn'], " ").concat(styles['scroll-next'], " ").concat(canScrollNext && styles['scroll-active']),
-        onClick: this.onScrollWithControl.bind(this, SCROLL_TYPE.NEXT)
-      }, /*#__PURE__*/React.createElement("i", {
-        className: "dtable-font dtable-icon-right-slide ".concat(styles['btn-scroll-icon'])
-      }))), !isMobile && /*#__PURE__*/React.createElement("div", {
-        className: styles['btn-add-view'],
-        key: 'btn-add-view',
-        onClick: this.onNewViewToggle
-      }, /*#__PURE__*/React.createElement("i", {
-        className: "".concat(styles['add-map-view-icon'], " dtable-font dtable-icon-add-table")
-      })), isShowNewViewDialog && /*#__PURE__*/React.createElement(NewViewDialog, {
-        onNewViewConfirm: this.onAddDashboard,
-        onNewViewCancel: this.onNewViewCancel
-      }), isShowRenameViewDialog && /*#__PURE__*/React.createElement(RenameViewDialog, {
-        viewName: statistics[selectedDashboardIdx].name,
-        onRenameDashboard: this.props.renameDashboard,
-        hideRenameViewDialog: this.hideRenameViewDialog
-      }), isShowDeleteViewDialog && /*#__PURE__*/React.createElement(DeleteConfirmationDialog, {
-        header: intl.get('Delete_dashboard'),
-        name: statistics[selectedDashboardIdx].name,
-        onToggle: this.onToggleDeleteView,
-        onDelete: this.onDeleteDashBoard
-      }));
-    }
-  }]);
-  return DashboardTabs;
-}(Component);
+  }
+  render() {
+    const {
+      isShowNewViewDialog,
+      isShowRenameViewDialog,
+      isShowDeleteViewDialog,
+      canScrollPrev,
+      canScrollNext
+    } = this.state;
+    const {
+      isMobile,
+      statistics,
+      selectedDashboardIdx
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles['tabs-container']
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(styles['views-tabs-scroll'], " d-flex pr-1"),
+      ref: ref => this.viewsTabsScroll = ref,
+      onScroll: this.onViewsScroll
+    }, this.renderTabs()), (canScrollPrev || canScrollNext) && !isMobile && /*#__PURE__*/React.createElement("div", {
+      className: styles['views-scroll-control']
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "".concat(styles['scroll-control-btn'], " ").concat(styles['scroll-prev'], " ").concat(canScrollPrev && styles['scroll-active']),
+      onClick: this.onScrollWithControl.bind(this, SCROLL_TYPE.PREV)
+    }, /*#__PURE__*/React.createElement("i", {
+      className: "dtable-font dtable-icon-left-slide ".concat(styles['btn-scroll-icon'])
+    })), /*#__PURE__*/React.createElement("span", {
+      className: "".concat(styles['scroll-control-btn'], " ").concat(styles['scroll-next'], " ").concat(canScrollNext && styles['scroll-active']),
+      onClick: this.onScrollWithControl.bind(this, SCROLL_TYPE.NEXT)
+    }, /*#__PURE__*/React.createElement("i", {
+      className: "dtable-font dtable-icon-right-slide ".concat(styles['btn-scroll-icon'])
+    }))), !isMobile && /*#__PURE__*/React.createElement("div", {
+      className: styles['btn-add-view'],
+      key: 'btn-add-view',
+      onClick: this.onNewViewToggle
+    }, /*#__PURE__*/React.createElement("i", {
+      className: "".concat(styles['add-map-view-icon'], " dtable-font dtable-icon-add-table")
+    })), isShowNewViewDialog && /*#__PURE__*/React.createElement(NewViewDialog, {
+      onNewViewConfirm: this.onAddDashboard,
+      onNewViewCancel: this.onNewViewCancel
+    }), isShowRenameViewDialog && /*#__PURE__*/React.createElement(RenameViewDialog, {
+      viewName: statistics[selectedDashboardIdx].name,
+      onRenameDashboard: this.props.renameDashboard,
+      hideRenameViewDialog: this.hideRenameViewDialog
+    }), isShowDeleteViewDialog && /*#__PURE__*/React.createElement(DeleteConfirmationDialog, {
+      header: intl.get('Delete_dashboard'),
+      name: statistics[selectedDashboardIdx].name,
+      onToggle: this.onToggleDeleteView,
+      onDelete: this.onDeleteDashBoard
+    }));
+  }
+}
 DashboardTabs.defaultProps = {
   isMobile: false
 };