dtable-statistic 4.2.1 → 4.3.0

package/es/components/popover/color-rules-popover.js

@@ -1,8 +1,3 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-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 classnames from 'classnames';
 import intl from 'react-intl-universal';
@@ -11,25 +6,22 @@ import { CommonAddTool, DTablePopover } from '../index';
 import ColorRules from './color-rules';
 import { COLOR_RULE_FILTER_TYPE_MAP, DISPLAY_COLOR_RULE_FILTER_TYPE, EMPTY_PREDICATE } from '../../constants/color-rules';
 import '../../assets/css/color-rules-popover.css';
-var SAFE_DISTANCE_2_BOTTOM = 30; // Keep the distance to the bottom
-var ColorRulesPopover = /*#__PURE__*/function (_Component) {
-  _inherits(ColorRulesPopover, _Component);
-  var _super = _createSuper(ColorRulesPopover);
-  function ColorRulesPopover(props) {
-    var _this;
-    _classCallCheck(this, ColorRulesPopover);
-    _this = _super.call(this, props);
-    _this.getColorConfigByColor = function (color) {
-      return _this.props.labelColorConfigs.find(function (colorConfig) {
-        return colorConfig.color === color;
-      }) || {};
+const SAFE_DISTANCE_2_BOTTOM = 30; // Keep the distance to the bottom
+
+class ColorRulesPopover extends Component {
+  constructor(props) {
+    super(props);
+    this.getColorConfigByColor = color => {
+      return this.props.labelColorConfigs.find(colorConfig => colorConfig.color === color) || {};
     };
-    _this.getFilterDisplay = function (filter) {
-      var filter_type = filter.filter_type,
-        filter_predicate = filter.filter_predicate,
-        filter_term = filter.filter_term;
-      var name = DISPLAY_COLOR_RULE_FILTER_TYPE[filter_type];
-      var template = "".concat(intl.get(name), " ").concat(intl.get(filter_predicate));
+    this.getFilterDisplay = filter => {
+      const {
+        filter_type,
+        filter_predicate,
+        filter_term
+      } = filter;
+      const name = DISPLAY_COLOR_RULE_FILTER_TYPE[filter_type];
+      const template = "".concat(intl.get(name), " ").concat(intl.get(filter_predicate));
       if (EMPTY_PREDICATE.includes(filter_predicate)) {
         return template;
       }
@@ -50,28 +42,32 @@ var ColorRulesPopover = /*#__PURE__*/function (_Component) {
           }
       }
     };
-    _this.getRuleName = function (filters, filterConjunction) {
+    this.getRuleName = (filters, filterConjunction) => {
       if (filters.length === 0) return '';
-      var contentText = '';
+      let contentText = '';
       filterConjunction = filterConjunction || 'And';
-      filters.forEach(function (filter, index) {
-        var filterContentText = index === 0 ? '' : " ".concat(filterConjunction === 'And' ? intl.get('And') : intl.get('Or'));
-        var filterDisplay = _this.getFilterDisplay(filter);
+      filters.forEach((filter, index) => {
+        let filterContentText = index === 0 ? '' : " ".concat(filterConjunction === 'And' ? intl.get('And') : intl.get('Or'));
+        let filterDisplay = this.getFilterDisplay(filter);
         if (filterDisplay) {
           contentText = contentText + filterContentText + " ".concat(filterDisplay);
         }
       });
       return contentText;
     };
-    _this.getRulesName = function () {
-      var colorRules = _this.state.colorRules;
-      return colorRules.map(function (rule) {
-        var filters = rule.filters,
-          filter_conjunction = rule.filter_conjunction;
-        return _this.getRuleName(filters, filter_conjunction);
+    this.getRulesName = () => {
+      const {
+        colorRules
+      } = this.state;
+      return colorRules.map(rule => {
+        const {
+          filters,
+          filter_conjunction
+        } = rule;
+        return this.getRuleName(filters, filter_conjunction);
       });
     };
-    _this.getFilterConfigByType = function (filterType) {
+    this.getFilterConfigByType = filterType => {
       if (!filterType) {
         return {};
       }
@@ -86,128 +82,128 @@ var ColorRulesPopover = /*#__PURE__*/function (_Component) {
           }
       }
     };
-    _this.generateDefaultFilter = function (filterType) {
-      var _this$getFilterConfig = _this.getFilterConfigByType(filterType),
-        filterPredicateList = _this$getFilterConfig.filterPredicateList;
+    this.generateDefaultFilter = filterType => {
+      const {
+        filterPredicateList
+      } = this.getFilterConfigByType(filterType);
       if (!filterPredicateList) {
         return null;
       }
-      var filterPredicate = filterPredicateList[0];
+      const filterPredicate = filterPredicateList[0];
       return {
         filter_type: filterType,
         filter_predicate: filterPredicate,
         filter_term: null
       };
     };
-    _this.addRule = function () {
-      var _this$props = _this.props,
-        colorRuleTypes = _this$props.colorRuleTypes,
-        labelColorConfigs = _this$props.labelColorConfigs;
-      var colorRules = _this.state.colorRules;
-      var defaultRuleType = colorRuleTypes[0];
-      var defaultFilter = defaultRuleType && _this.generateDefaultFilter(defaultRuleType);
+    this.addRule = () => {
+      const {
+        colorRuleTypes,
+        labelColorConfigs
+      } = this.props;
+      const {
+        colorRules
+      } = this.state;
+      const defaultRuleType = colorRuleTypes[0];
+      const defaultFilter = defaultRuleType && this.generateDefaultFilter(defaultRuleType);
       if (!defaultFilter) return;
-      var updatedColorRules = _toConsumableArray(colorRules);
-      var defaultColorConfig = labelColorConfigs[colorRules.length] || labelColorConfigs[0];
+      let updatedColorRules = [...colorRules];
+      const defaultColorConfig = labelColorConfigs[colorRules.length] || labelColorConfigs[0];
       updatedColorRules.push({
         color: defaultColorConfig.color,
         filters: [defaultFilter],
         filter_conjunction: 'And'
       });
-      _this.updateColorRules({
+      this.updateColorRules({
         colorRules: updatedColorRules,
-        callback: function callback() {
-          _this.resetPopoverPosition();
+        callback: () => {
+          this.resetPopoverPosition();
         }
       });
     };
-    _this.resetPopoverPosition = function () {
+    this.resetPopoverPosition = () => {
       // keep the popover is visible in current window
-      var popoverWrapper = _this.popover && _this.popover.dtablePopoverRef && _this.popover.dtablePopoverRef.parentNode.parentNode;
+      const popoverWrapper = this.popover && this.popover.dtablePopoverRef && this.popover.dtablePopoverRef.parentNode.parentNode;
       if (!popoverWrapper) return;
-      var bodyHeight = document.body.clientHeight;
-      var _popoverWrapper$getBo = popoverWrapper.getBoundingClientRect(),
-        top = _popoverWrapper$getBo.top,
-        height = _popoverWrapper$getBo.height;
-      var offsetTop = popoverWrapper.offsetTop;
-      var offsetHeight = top + height + SAFE_DISTANCE_2_BOTTOM - bodyHeight;
+      const bodyHeight = document.body.clientHeight;
+      const {
+        top,
+        height
+      } = popoverWrapper.getBoundingClientRect();
+      const offsetTop = popoverWrapper.offsetTop;
+      const offsetHeight = top + height + SAFE_DISTANCE_2_BOTTOM - bodyHeight;
 
       // popover within the current window
       if (offsetHeight < 0) {
         return;
       }
-      setTimeout(function () {
+      setTimeout(() => {
         if (popoverWrapper) {
           popoverWrapper.style.top = "".concat(-offsetHeight + offsetTop, "px");
         }
       }, 300);
     };
-    _this.updateColorRules = function (_ref) {
-      var colorRules = _ref.colorRules,
-        callback = _ref.callback;
-      _this.setState({
-        colorRules: colorRules
-      }, function () {
+    this.updateColorRules = _ref => {
+      let {
+        colorRules,
+        callback
+      } = _ref;
+      this.setState({
+        colorRules
+      }, () => {
         callback && callback();
       });
     };
-    _this.hideColorRulesPopover = function () {
-      _this.props.updateColorRules(_this.state.colorRules);
-      _this.props.hideColorRulesPopover();
+    this.hideColorRulesPopover = () => {
+      this.props.updateColorRules(this.state.colorRules);
+      this.props.hideColorRulesPopover();
     };
-    _this.state = {
+    this.state = {
       colorRules: props.colorRules || []
     };
-    return _this;
   }
-  _createClass(ColorRulesPopover, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props2 = this.props,
-        target = _this$props2.target,
-        labelColorConfigs = _this$props2.labelColorConfigs,
-        colorRuleTypes = _this$props2.colorRuleTypes;
-      var colorRules = this.state.colorRules;
-      var hasRules = colorRules && colorRules.length > 0;
-      var rulesName = this.getRulesName();
-      var canAddRule = !rulesName.some(function (ruleName) {
-        return !ruleName;
-      });
-      return /*#__PURE__*/React.createElement(DTablePopover, {
-        hideArrow: true,
-        target: target,
-        placement: "left-end",
-        ref: function ref(_ref2) {
-          return _this2.popover = _ref2;
-        },
-        boundariesElement: document.body,
-        popoverClassName: "statistic-color-rules-popover",
-        hideDTablePopover: this.hideColorRulesPopover,
-        hideDTablePopoverWithEsc: this.hideColorRulesPopover
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "statistic-color-rules-wrapper"
-      }, !hasRules && /*#__PURE__*/React.createElement("div", {
-        className: "no-color-rules"
-      }, intl.get('No_rules')), /*#__PURE__*/React.createElement(ColorRules, {
-        rules: colorRules,
-        rulesName: rulesName,
-        labelColorConfigs: labelColorConfigs,
-        colorRuleTypes: colorRuleTypes,
-        getColorConfigByColor: this.getColorConfigByColor,
-        getFilterConfigByType: this.getFilterConfigByType,
-        generateDefaultFilter: this.generateDefaultFilter,
-        updateRules: this.updateColorRules,
-        resetPopoverPosition: this.resetPopoverPosition
-      }), /*#__PURE__*/React.createElement(CommonAddTool, {
-        className: classnames('statistic-btn-add-color-rule', {
-          'disabled': !canAddRule
-        }),
-        footerName: intl.get('Add_rule'),
-        callBack: canAddRule ? this.addRule : function () {}
-      })));
-    }
-  }]);
-  return ColorRulesPopover;
-}(Component);
+  render() {
+    const {
+      target,
+      labelColorConfigs,
+      colorRuleTypes
+    } = this.props;
+    const {
+      colorRules
+    } = this.state;
+    const hasRules = colorRules && colorRules.length > 0;
+    const rulesName = this.getRulesName();
+    const canAddRule = !rulesName.some(ruleName => !ruleName);
+    return /*#__PURE__*/React.createElement(DTablePopover, {
+      hideArrow: true,
+      target: target,
+      placement: "left-end",
+      ref: ref => this.popover = ref,
+      boundariesElement: document.body,
+      popoverClassName: "statistic-color-rules-popover",
+      hideDTablePopover: this.hideColorRulesPopover,
+      hideDTablePopoverWithEsc: this.hideColorRulesPopover
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "statistic-color-rules-wrapper"
+    }, !hasRules && /*#__PURE__*/React.createElement("div", {
+      className: "no-color-rules"
+    }, intl.get('No_rules')), /*#__PURE__*/React.createElement(ColorRules, {
+      rules: colorRules,
+      rulesName: rulesName,
+      labelColorConfigs: labelColorConfigs,
+      colorRuleTypes: colorRuleTypes,
+      getColorConfigByColor: this.getColorConfigByColor,
+      getFilterConfigByType: this.getFilterConfigByType,
+      generateDefaultFilter: this.generateDefaultFilter,
+      updateRules: this.updateColorRules,
+      resetPopoverPosition: this.resetPopoverPosition
+    }), /*#__PURE__*/React.createElement(CommonAddTool, {
+      className: classnames('statistic-btn-add-color-rule', {
+        'disabled': !canAddRule
+      }),
+      footerName: intl.get('Add_rule'),
+      callBack: canAddRule ? this.addRule : () => {}
+    })));
+  }
+}
 export default ColorRulesPopover;

package/es/components/popover/color-selector-popover.js

@@ -1,84 +1,74 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-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 { DTablePopover } from '../index';
 import { hexToRgb } from '../../utils';
-var ColorSelectorPopover = /*#__PURE__*/function (_Component) {
-  _inherits(ColorSelectorPopover, _Component);
-  var _super = _createSuper(ColorSelectorPopover);
-  function ColorSelectorPopover(props) {
-    var _this;
-    _classCallCheck(this, ColorSelectorPopover);
-    _this = _super.call(this, props);
-    _this.initColorOptions = function () {
-      var colorConfigs = _this.props.colorConfigs;
-      _this.colorOptions = colorConfigs.map(function (colorOption) {
+class ColorSelectorPopover extends Component {
+  constructor(props) {
+    super(props);
+    this.initColorOptions = () => {
+      const {
+        colorConfigs
+      } = this.props;
+      this.colorOptions = colorConfigs.map(colorOption => {
         if (!colorOption.border_color) {
-          var _hexToRgb = hexToRgb(colorOption.color),
-            r = _hexToRgb.r,
-            g = _hexToRgb.g,
-            b = _hexToRgb.b;
-          return _objectSpread(_objectSpread({}, colorOption), {}, {
+          const {
+            r,
+            g,
+            b
+          } = hexToRgb(colorOption.color);
+          return {
+            ...colorOption,
             border_color: "rgb(".concat(Math.max(r - 20, 0), ", ").concat(Math.max(g - 20, 0), ", ").concat(Math.max(b - 20, 0), ")")
-          });
+          };
         }
         return colorOption;
       });
     };
-    _this.onSelectColor = function (color) {
-      _this.props.onSelectColor(color);
-      _this.props.toggle();
+    this.onSelectColor = color => {
+      this.props.onSelectColor(color);
+      this.props.toggle();
     };
-    _this.initColorOptions();
-    return _this;
+    this.initColorOptions();
   }
-  _createClass(ColorSelectorPopover, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props = this.props,
-        target = _this$props.target,
-        placement = _this$props.placement,
-        hideArrow = _this$props.hideArrow,
-        selectedColor = _this$props.selectedColor;
-      var upperCaseSelectedColor = selectedColor.toUpperCase();
-      return /*#__PURE__*/React.createElement(DTablePopover, {
-        target: target,
-        placement: placement || 'auto-start',
-        hideArrow: hideArrow,
-        popoverClassName: "statistic-color-selector",
-        hideDTablePopover: this.props.toggle,
-        hideDTablePopoverWithEsc: this.props.toggle
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "statistic-color-selector-wrapper"
-      }, this.colorOptions.map(function (colorOption) {
-        var color = colorOption.color,
-          border_color = colorOption.border_color,
-          text_color = colorOption.text_color;
-        return /*#__PURE__*/React.createElement("div", {
-          key: "statistic-color-option-".concat(color),
-          className: "statistic-color-option",
-          onClick: function onClick() {
-            return _this2.onSelectColor(color);
-          },
-          style: {
-            backgroundColor: color,
-            borderColor: border_color
-          }
-        }, color === upperCaseSelectedColor && /*#__PURE__*/React.createElement("i", {
-          className: "dtable-font dtable-icon-check-mark",
-          style: {
-            color: text_color
-          }
-        }));
-      })));
-    }
-  }]);
-  return ColorSelectorPopover;
-}(Component);
+  render() {
+    const {
+      target,
+      placement,
+      hideArrow,
+      selectedColor
+    } = this.props;
+    const upperCaseSelectedColor = selectedColor.toUpperCase();
+    return /*#__PURE__*/React.createElement(DTablePopover, {
+      target: target,
+      placement: placement || 'auto-start',
+      hideArrow: hideArrow,
+      popoverClassName: "statistic-color-selector",
+      hideDTablePopover: this.props.toggle,
+      hideDTablePopoverWithEsc: this.props.toggle
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "statistic-color-selector-wrapper"
+    }, this.colorOptions.map(colorOption => {
+      const {
+        color,
+        border_color,
+        text_color
+      } = colorOption;
+      return /*#__PURE__*/React.createElement("div", {
+        key: "statistic-color-option-".concat(color),
+        className: "statistic-color-option",
+        onClick: () => this.onSelectColor(color),
+        style: {
+          backgroundColor: color,
+          borderColor: border_color
+        }
+      }, color === upperCaseSelectedColor && /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-check-mark",
+        style: {
+          color: text_color
+        }
+      }));
+    })));
+  }
+}
 ColorSelectorPopover.defaultProps = {
   hideArrow: true
 };

package/es/components/seatable-radio/index.js

@@ -8,7 +8,7 @@ function SeaTableRadio(props) {
     type: "radio",
     className: "seatable-radio-input",
     checked: props.isChecked,
-    onChange: props.disabled ? function () {} : props.onCheckedChange,
+    onChange: props.disabled ? () => {} : props.onCheckedChange,
     name: props.name,
     value: props.value
   }), /*#__PURE__*/React.createElement("span", {
@@ -23,6 +23,6 @@ function SeaTableRadio(props) {
 SeaTableRadio.defaultProps = {
   disabled: false,
   name: 'seatable-radio-input',
-  onCheckedChange: function onCheckedChange() {}
+  onCheckedChange: () => {}
 };
 export default SeaTableRadio;