dtable-statistic 4.2.2 → 4.3.1

package/es/components/select/option-group.js

@@ -1,225 +1,207 @@
-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 DtableSearchInput from '../dtable-search-input';
 import Option from './option';
 import { CommonEventTypes, KeyCodes } from '../../constants';
 import './option-group.css';
-var OPTION_HEIGHT = 32;
-var OptGroup = /*#__PURE__*/function (_Component) {
-  _inherits(OptGroup, _Component);
-  var _super = _createSuper(OptGroup);
-  function OptGroup(props) {
-    var _this;
-    _classCallCheck(this, OptGroup);
-    _this = _super.call(this, props);
-    _this.resetMenuStyle = function () {
-      var _this$props = _this.props,
-        isInModal = _this$props.isInModal,
-        position = _this$props.position;
-      var _this$optionGroupRef$ = _this.optionGroupRef.getBoundingClientRect(),
-        top = _this$optionGroupRef$.top,
-        height = _this$optionGroupRef$.height;
+const OPTION_HEIGHT = 32;
+class OptGroup extends Component {
+  constructor(props) {
+    super(props);
+    this.resetMenuStyle = () => {
+      const {
+        isInModal,
+        position
+      } = this.props;
+      const {
+        top,
+        height
+      } = this.optionGroupRef.getBoundingClientRect();
       if (isInModal) {
         if (position.y + position.height + height > window.innerHeight) {
-          _this.optionGroupRef.style.top = position.y - height + 'px';
+          this.optionGroupRef.style.top = position.y - height + 'px';
         }
-        _this.optionGroupRef.style.opacity = 1;
+        this.optionGroupRef.style.opacity = 1;
       } else {
         if (height + top > window.innerHeight) {
-          var borderWidth = 2;
-          _this.optionGroupRef.style.top = -1 * (height + borderWidth) + 'px';
+          const borderWidth = 2;
+          this.optionGroupRef.style.top = -1 * (height + borderWidth) + 'px';
         }
       }
     };
-    _this.onHotKey = function (event) {
-      var keyCode = event.keyCode;
+    this.onHotKey = event => {
+      const keyCode = event.keyCode;
       if (keyCode === KeyCodes.UpArrow) {
-        _this.onPressUp();
+        this.onPressUp();
       } else if (keyCode === KeyCodes.DownArrow) {
-        _this.onPressDown();
+        this.onPressDown();
       } else if (keyCode === KeyCodes.Enter) {
-        var option = _this.filterOptions && _this.filterOptions[_this.state.activeIndex];
+        let option = this.filterOptions && this.filterOptions[this.state.activeIndex];
         if (option) {
-          _this.props.onSelectOption(option.value);
-          if (!_this.props.supportMultipleSelect) {
-            _this.props.closeSelect();
+          this.props.onSelectOption(option.value);
+          if (!this.props.supportMultipleSelect) {
+            this.props.closeSelect();
           }
         }
       } else if (keyCode === KeyCodes.Tab || keyCode === KeyCodes.Escape) {
-        _this.props.closeSelect();
+        this.props.closeSelect();
         window.app.eventBus.dispatch(CommonEventTypes.OPEN_SELECT, false);
       }
     };
-    _this.onPressUp = function () {
-      if (_this.state.activeIndex > 0) {
-        _this.setState({
-          activeIndex: _this.state.activeIndex - 1
-        }, function () {
-          _this.scrollContent();
+    this.onPressUp = () => {
+      if (this.state.activeIndex > 0) {
+        this.setState({
+          activeIndex: this.state.activeIndex - 1
+        }, () => {
+          this.scrollContent();
         });
       }
     };
-    _this.onPressDown = function () {
-      if (_this.filterOptions && _this.state.activeIndex < _this.filterOptions.length - 1) {
-        _this.setState({
-          activeIndex: _this.state.activeIndex + 1
-        }, function () {
-          _this.scrollContent();
+    this.onPressDown = () => {
+      if (this.filterOptions && this.state.activeIndex < this.filterOptions.length - 1) {
+        this.setState({
+          activeIndex: this.state.activeIndex + 1
+        }, () => {
+          this.scrollContent();
         });
       }
     };
-    _this.scrollContent = function () {
-      var _this$optionGroupCont = _this.optionGroupContentRef,
-        offsetHeight = _this$optionGroupCont.offsetHeight,
-        scrollTop = _this$optionGroupCont.scrollTop;
-      _this.setState({
+    this.scrollContent = () => {
+      const {
+        offsetHeight,
+        scrollTop
+      } = this.optionGroupContentRef;
+      this.setState({
         disableHover: true
       });
-      _this.timer = setTimeout(function () {
-        _this.setState({
+      this.timer = setTimeout(() => {
+        this.setState({
           disableHover: false
         });
       }, 500);
-      if (_this.state.activeIndex * OPTION_HEIGHT === 0) {
-        _this.optionGroupContentRef.scrollTop = 0;
+      if (this.state.activeIndex * OPTION_HEIGHT === 0) {
+        this.optionGroupContentRef.scrollTop = 0;
         return;
       }
-      if (_this.state.activeIndex * OPTION_HEIGHT < scrollTop) {
-        _this.optionGroupContentRef.scrollTop = scrollTop - OPTION_HEIGHT;
-      } else if (_this.state.activeIndex * OPTION_HEIGHT > offsetHeight + scrollTop) {
-        _this.optionGroupContentRef.scrollTop = scrollTop + OPTION_HEIGHT;
+      if (this.state.activeIndex * OPTION_HEIGHT < scrollTop) {
+        this.optionGroupContentRef.scrollTop = scrollTop - OPTION_HEIGHT;
+      } else if (this.state.activeIndex * OPTION_HEIGHT > offsetHeight + scrollTop) {
+        this.optionGroupContentRef.scrollTop = scrollTop + OPTION_HEIGHT;
       }
     };
-    _this.changeIndex = function (index) {
-      _this.setState({
+    this.changeIndex = index => {
+      this.setState({
         activeIndex: index
       });
     };
-    _this.onChangeSearch = function (searchVal) {
-      var value = searchVal || '';
-      if (value !== _this.state.searchVal) {
-        _this.setState({
+    this.onChangeSearch = searchVal => {
+      let value = searchVal || '';
+      if (value !== this.state.searchVal) {
+        this.setState({
           searchVal: value,
           activeIndex: -1
         });
       }
     };
-    _this.renderOptGroup = function (searchVal) {
-      var _this$props2 = _this.props,
-        noOptionsPlaceholder = _this$props2.noOptionsPlaceholder,
-        onSelectOption = _this$props2.onSelectOption;
-      _this.filterOptions = _this.props.getFilterOptions(searchVal);
-      if (_this.filterOptions.length === 0) {
+    this.renderOptGroup = searchVal => {
+      let {
+        noOptionsPlaceholder,
+        onSelectOption
+      } = this.props;
+      this.filterOptions = this.props.getFilterOptions(searchVal);
+      if (this.filterOptions.length === 0) {
         return /*#__PURE__*/React.createElement("div", {
           className: "none-search-result"
         }, noOptionsPlaceholder);
       }
-      return _this.filterOptions.map(function (opt, i) {
-        var key = opt.value.column ? opt.value.column.key : i;
-        var isActive = _this.state.activeIndex === i;
+      return this.filterOptions.map((opt, i) => {
+        let key = opt.value.column ? opt.value.column.key : i;
+        let isActive = this.state.activeIndex === i;
         return /*#__PURE__*/React.createElement(Option, {
           key: key,
           index: i,
           isActive: isActive,
           value: opt.value,
           onSelectOption: onSelectOption,
-          changeIndex: _this.changeIndex,
-          supportMultipleSelect: _this.props.supportMultipleSelect,
-          disableHover: _this.state.disableHover
+          changeIndex: this.changeIndex,
+          supportMultipleSelect: this.props.supportMultipleSelect,
+          disableHover: this.state.disableHover
         }, opt.label);
       });
     };
-    _this.state = {
+    this.state = {
       searchVal: '',
       activeIndex: -1,
       disableHover: false
     };
-    _this.filterOptions = null;
-    _this.timer = null;
-    return _this;
+    this.filterOptions = null;
+    this.timer = null;
   }
-  _createClass(OptGroup, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-      window.addEventListener('keydown', this.onHotKey);
-      // Make sure child component is rendered, so current component can be stretched out, then get the correct size
-      setTimeout(function () {
-        _this2.resetMenuStyle();
-      }, 1);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.filterOptions = null;
-      this.timer && clearTimeout(this.timer);
-      window.removeEventListener('keydown', this.onHotKey);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
-      var _this$props3 = this.props,
-        searchable = _this$props3.searchable,
-        searchPlaceholder = _this$props3.searchPlaceholder,
-        top = _this$props3.top,
-        left = _this$props3.left,
-        minWidth = _this$props3.minWidth,
-        value = _this$props3.value,
-        isShowSelected = _this$props3.isShowSelected,
-        isInModal = _this$props3.isInModal,
-        position = _this$props3.position,
-        className = _this$props3.className;
-      var searchVal = this.state.searchVal;
-      var style = {
+  componentDidMount() {
+    window.addEventListener('keydown', this.onHotKey);
+    // Make sure child component is rendered, so current component can be stretched out, then get the correct size
+    setTimeout(() => {
+      this.resetMenuStyle();
+    }, 1);
+  }
+  componentWillUnmount() {
+    this.filterOptions = null;
+    this.timer && clearTimeout(this.timer);
+    window.removeEventListener('keydown', this.onHotKey);
+  }
+  render() {
+    const {
+      searchable,
+      searchPlaceholder,
+      top,
+      left,
+      minWidth,
+      value,
+      isShowSelected,
+      isInModal,
+      position,
+      className
+    } = this.props;
+    let {
+      searchVal
+    } = this.state;
+    let style = {
+      top: top || 0,
+      left: left || 0
+    };
+    if (minWidth) {
+      style = {
         top: top || 0,
-        left: left || 0
+        left: left || 0,
+        minWidth
       };
-      if (minWidth) {
-        style = {
-          top: top || 0,
-          left: left || 0,
-          minWidth: minWidth
-        };
-      }
-      if (isInModal) {
-        style = {
-          position: 'fixed',
-          left: position.x,
-          top: position.y + position.height,
-          minWidth: position.width,
-          opacity: 0
-        };
-      }
-      return /*#__PURE__*/React.createElement("div", {
-        className: "option-group ".concat(isShowSelected ? 'pt-0' : '', " ").concat(className ? 'option-group-' + className : ''),
-        ref: function ref(_ref2) {
-          return _this3.optionGroupRef = _ref2;
-        },
-        style: style
-      }, isShowSelected && /*#__PURE__*/React.createElement("div", {
-        className: "editor-list-delete mb-2",
-        onClick: function onClick(e) {
-          return e.stopPropagation();
-        }
-      }, value.label || ''), searchable && /*#__PURE__*/React.createElement("div", {
-        className: "option-group-search"
-      }, /*#__PURE__*/React.createElement(DtableSearchInput, {
-        className: "option-search-control",
-        placeholder: searchPlaceholder,
-        onChange: this.onChangeSearch,
-        autoFocus: true
-      })), /*#__PURE__*/React.createElement("div", {
-        className: "option-group-content",
-        ref: function ref(_ref) {
-          return _this3.optionGroupContentRef = _ref;
-        }
-      }, this.renderOptGroup(searchVal)));
     }
-  }]);
-  return OptGroup;
-}(Component);
+    if (isInModal) {
+      style = {
+        position: 'fixed',
+        left: position.x,
+        top: position.y + position.height,
+        minWidth: position.width,
+        opacity: 0
+      };
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: "option-group ".concat(isShowSelected ? 'pt-0' : '', " ").concat(className ? 'option-group-' + className : ''),
+      ref: ref => this.optionGroupRef = ref,
+      style: style
+    }, isShowSelected && /*#__PURE__*/React.createElement("div", {
+      className: "editor-list-delete mb-2",
+      onClick: e => e.stopPropagation()
+    }, value.label || ''), searchable && /*#__PURE__*/React.createElement("div", {
+      className: "option-group-search"
+    }, /*#__PURE__*/React.createElement(DtableSearchInput, {
+      className: "option-search-control",
+      placeholder: searchPlaceholder,
+      onChange: this.onChangeSearch,
+      autoFocus: true
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "option-group-content",
+      ref: ref => this.optionGroupContentRef = ref
+    }, this.renderOptGroup(searchVal)));
+  }
+}
 export default OptGroup;

package/es/components/select/option.js

@@ -1,51 +1,37 @@
-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';
-var Option = /*#__PURE__*/function (_Component) {
-  _inherits(Option, _Component);
-  var _super = _createSuper(Option);
-  function Option() {
-    var _this;
-    _classCallCheck(this, Option);
-    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.onSelectOption = function (value, event) {
-      if (_this.props.supportMultipleSelect) {
+class Option extends Component {
+  constructor() {
+    super(...arguments);
+    this.onSelectOption = (value, event) => {
+      if (this.props.supportMultipleSelect) {
         event.stopPropagation();
       }
-      _this.props.onSelectOption(value, event);
+      this.props.onSelectOption(value, event);
     };
-    _this.onMouseEnter = function () {
-      if (!_this.props.disableHover) {
-        _this.props.changeIndex(_this.props.index);
+    this.onMouseEnter = () => {
+      if (!this.props.disableHover) {
+        this.props.changeIndex(this.props.index);
       }
     };
-    _this.onMouseLeave = function () {
-      if (!_this.props.disableHover) {
-        _this.props.changeIndex(-1);
+    this.onMouseLeave = () => {
+      if (!this.props.disableHover) {
+        this.props.changeIndex(-1);
       }
     };
-    return _this;
   }
-  _createClass(Option, [{
-    key: "render",
-    value: function render() {
-      var isActive = this.props.isActive;
-      return /*#__PURE__*/React.createElement("div", {
-        className: classnames('option', {
-          'option-active': isActive
-        }),
-        onClick: this.onSelectOption.bind(this, this.props.value),
-        onMouseEnter: this.onMouseEnter,
-        onMouseLeave: this.onMouseLeave
-      }, this.props.children);
-    }
-  }]);
-  return Option;
-}(Component);
+  render() {
+    const {
+      isActive
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames('option', {
+        'option-active': isActive
+      }),
+      onClick: this.onSelectOption.bind(this, this.props.value),
+      onMouseEnter: this.onMouseEnter,
+      onMouseLeave: this.onMouseLeave
+    }, this.props.children);
+  }
+}
 export default Option;