dtable-ui-component 4.3.6 → 4.3.8

package/lib/NotificationPopover/index.js

@@ -1,112 +1,85 @@
-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 './index.css';
-var NotificationPopover = /*#__PURE__*/function (_React$Component) {
-  _inherits(NotificationPopover, _React$Component);
-  var _super = _createSuper(NotificationPopover);
-  function NotificationPopover() {
-    var _this;
-    _classCallCheck(this, NotificationPopover);
-    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.handleOutsideClick = function (e) {
-      if (!_this.notificationContainerRef.contains(e.target)) {
-        document.removeEventListener('mousedown', _this.handleOutsideClick);
+export default class NotificationPopover extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.handleOutsideClick = e => {
+      if (!this.notificationContainerRef.contains(e.target)) {
+        document.removeEventListener('mousedown', this.handleOutsideClick);
         if (e.target.className === 'tool notification' || e.target.parentNode.className === 'tool notification') {
           return;
         }
-        _this.props.onNotificationListToggle();
+        this.props.onNotificationListToggle();
       }
     };
-    _this.onNotificationDialogToggle = function () {
-      _this.props.onNotificationDialogToggle();
-      _this.props.onNotificationListToggle();
+    this.onNotificationDialogToggle = () => {
+      this.props.onNotificationDialogToggle();
+      this.props.onNotificationListToggle();
     };
-    _this.onWeixinQRCodeDialogToggle = function () {
-      _this.props.onOpenWeixinQRCodeDialog();
-      _this.props.onNotificationListToggle();
+    this.onWeixinQRCodeDialogToggle = () => {
+      this.props.onOpenWeixinQRCodeDialog();
+      this.props.onNotificationListToggle();
     };
-    _this.onHandleScroll = function () {
-      if (_this.notificationListRef.offsetHeight + _this.notificationListRef.scrollTop + 1 >= _this.notificationsWrapperRef.offsetHeight) {
-        _this.props.listNotifications && _this.props.listNotifications();
+    this.onHandleScroll = () => {
+      if (this.notificationListRef.offsetHeight + this.notificationListRef.scrollTop + 1 >= this.notificationsWrapperRef.offsetHeight) {
+        this.props.listNotifications && this.props.listNotifications();
       }
     };
-    return _this;
   }
-  _createClass(NotificationPopover, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      document.addEventListener('mousedown', this.handleOutsideClick);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      document.removeEventListener('mousedown', this.handleOutsideClick);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props = this.props,
-        headerText = _this$props.headerText,
-        bodyText = _this$props.bodyText,
-        footerText = _this$props.footerText;
-      return /*#__PURE__*/React.createElement(Popover, {
-        className: "notification-wrapper",
-        target: "notification-popover",
-        isOpen: true,
-        fade: false,
-        hideArrow: true,
-        placement: "bottom"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "notification-container",
-        ref: function ref(_ref3) {
-          return _this2.notificationContainerRef = _ref3;
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "notification-header"
-      }, headerText, /*#__PURE__*/React.createElement("span", {
-        className: "dtable-font dtable-icon-x notification-close-icon",
-        onClick: this.props.onNotificationListToggle
-      })), /*#__PURE__*/React.createElement("div", {
-        className: "notification-body"
-      }, this.props.enableWeixin && /*#__PURE__*/React.createElement("div", {
-        className: "show-weixin-qrcode",
-        onClick: this.onWeixinQRCodeDialogToggle
-      }, /*#__PURE__*/React.createElement("i", {
-        className: "dtable-font dtable-icon-wechat weixin-icon"
-      }), /*#__PURE__*/React.createElement("span", {
-        className: "ml-2"
-      }, "\u5173\u6CE8\u516C\u4F17\u53F7\u83B7\u53D6\u5B9E\u65F6\u901A\u77E5")), /*#__PURE__*/React.createElement("div", {
-        className: "mark-notifications",
-        onClick: this.props.onMarkAllNotifications
-      }, bodyText), /*#__PURE__*/React.createElement("div", {
-        className: "notification-list-container",
-        onScroll: this.onHandleScroll,
-        ref: function ref(_ref2) {
-          return _this2.notificationListRef = _ref2;
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        ref: function ref(_ref) {
-          return _this2.notificationsWrapperRef = _ref;
-        }
-      }, this.props.children)), /*#__PURE__*/React.createElement("div", {
-        className: "notification-footer",
-        onClick: this.onNotificationDialogToggle
-      }, footerText))));
-    }
-  }]);
-  return NotificationPopover;
-}(React.Component);
+  componentDidMount() {
+    document.addEventListener('mousedown', this.handleOutsideClick);
+  }
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.handleOutsideClick);
+  }
+  render() {
+    const {
+      headerText,
+      bodyText,
+      footerText
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Popover, {
+      className: "notification-wrapper",
+      target: "notification-popover",
+      isOpen: true,
+      fade: false,
+      hideArrow: true,
+      placement: "bottom"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "notification-container",
+      ref: ref => this.notificationContainerRef = ref
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "notification-header"
+    }, headerText, /*#__PURE__*/React.createElement("span", {
+      className: "dtable-font dtable-icon-x notification-close-icon",
+      onClick: this.props.onNotificationListToggle
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "notification-body"
+    }, this.props.enableWeixin && /*#__PURE__*/React.createElement("div", {
+      className: "show-weixin-qrcode",
+      onClick: this.onWeixinQRCodeDialogToggle
+    }, /*#__PURE__*/React.createElement("i", {
+      className: "dtable-font dtable-icon-wechat weixin-icon"
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "ml-2"
+    }, "\u5173\u6CE8\u516C\u4F17\u53F7\u83B7\u53D6\u5B9E\u65F6\u901A\u77E5")), /*#__PURE__*/React.createElement("div", {
+      className: "mark-notifications",
+      onClick: this.props.onMarkAllNotifications
+    }, bodyText), /*#__PURE__*/React.createElement("div", {
+      className: "notification-list-container",
+      onScroll: this.onHandleScroll,
+      ref: ref => this.notificationListRef = ref
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: ref => this.notificationsWrapperRef = ref
+    }, this.props.children)), /*#__PURE__*/React.createElement("div", {
+      className: "notification-footer",
+      onClick: this.onNotificationDialogToggle
+    }, footerText))));
+  }
+}
 NotificationPopover.defaultProps = {
   headerText: '',
   bodyText: '',
   footerText: ''
-};
-export { NotificationPopover as default };
+};

package/lib/NumberEditor/index.js

@@ -1,132 +1,125 @@
-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 isHotkey from 'is-hotkey';
 import { getNumberDisplayString, formatStringToNumber, replaceNumberNotAllowInput } from 'dtable-utils';
 import { NUMBER_TYPES } from '../constants';
 import { isMac } from '../utils/utils';
-var NumberEditor = /*#__PURE__*/function (_React$Component) {
-  _inherits(NumberEditor, _React$Component);
-  var _super = _createSuper(NumberEditor);
-  function NumberEditor(props) {
-    var _this;
-    _classCallCheck(this, NumberEditor);
-    _this = _super.call(this, props);
-    _this.onEditorHandle = function () {
-      if (_this.props.isReadOnly) {
+class NumberEditor extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onEditorHandle = () => {
+      if (this.props.isReadOnly) {
         return;
       }
-      _this.setState({
+      this.setState({
         isEditorShow: true,
-        inputValue: _this.state.textValue
-      }, function () {
-        _this.input.focus();
+        inputValue: this.state.textValue
+      }, () => {
+        this.input.focus();
       });
     };
-    _this.onCommit = function () {
-      var updated = {};
-      var column = _this.props.column;
-      var inputValue = _this.state.inputValue ? _this.state.inputValue.toString() : '';
-      var value = inputValue ? formatStringToNumber(inputValue) : ''; // format the number to submit
+    this.onCommit = () => {
+      let updated = {};
+      let {
+        column
+      } = this.props;
+      let inputValue = this.state.inputValue ? this.state.inputValue.toString() : '';
+      let value = inputValue ? formatStringToNumber(inputValue) : ''; // format the number to submit
       updated[column.key] = value;
-      _this.props.onCommit(updated);
-      var newValue = getNumberDisplayString(value, column.data); // format the number to display
-      _this.setState({
+      this.props.onCommit(updated);
+      let newValue = getNumberDisplayString(value, column.data); // format the number to display
+      this.setState({
         isEditorShow: false,
         textValue: newValue
       });
     };
-    _this.onChange = function (event) {
-      var data = _this.props.column.data; // data maybe 'null'
-      var value = event.target.value.trim();
-      var currency_symbol = null;
+    this.onChange = event => {
+      const {
+        data
+      } = this.props.column; // data maybe 'null'
+      let value = event.target.value.trim();
+      let currency_symbol = null;
       if (data && data.format === 'custom_currency') {
         currency_symbol = data['currency_symbol'];
       }
 
       //Prevent the repetition of periods bug in the Chinese input method of the Windows system
       if (!isMac() && value.indexOf('.。') > -1) return;
-      value = replaceNumberNotAllowInput(value, _this.dataFormat, currency_symbol);
-      if (value === _this.state.inputValue) return;
-      _this.setState({
+      value = replaceNumberNotAllowInput(value, this.dataFormat, currency_symbol);
+      if (value === this.state.inputValue) return;
+      this.setState({
         inputValue: value
       });
     };
-    _this.onBlur = function () {
-      _this.onCommit();
+    this.onBlur = () => {
+      this.onCommit();
     };
-    _this.onKeyDown = function (event) {
-      var _event$currentTarget = event.currentTarget,
-        selectionStart = _event$currentTarget.selectionStart,
-        selectionEnd = _event$currentTarget.selectionEnd,
-        value = _event$currentTarget.value;
+    this.onKeyDown = event => {
+      let {
+        selectionStart,
+        selectionEnd,
+        value
+      } = event.currentTarget;
       if (isHotkey('enter', event)) {
         event.preventDefault();
-        _this.onBlur();
+        this.onBlur();
       } else if (event.keyCode === 37 && selectionStart === 0 || event.keyCode === 39 && selectionEnd === value.length) {
         event.stopPropagation();
       }
     };
-    _this.onPaste = function (e) {
+    this.onPaste = e => {
       e.stopPropagation();
     };
-    _this.onCut = function (e) {
+    this.onCut = e => {
       e.stopPropagation();
     };
-    _this.getStyle = function () {
+    this.getStyle = () => {
       return {
         width: '320px',
         textAlign: 'left'
       };
     };
-    _this.setInputRef = function (input) {
-      _this.input = input;
-      return _this.input;
+    this.setInputRef = input => {
+      this.input = input;
+      return this.input;
     };
-    var _this$props = _this.props,
-      _value = _this$props.value,
-      _column = _this$props.column;
-    var dataFormat = _column.data && _column.data.format;
-    _this.dataFormat = dataFormat || NUMBER_TYPES.NUMBER;
-    var initValue = getNumberDisplayString(_value, _column.data); // format the number to display
+    let {
+      value: _value,
+      column: _column
+    } = this.props;
+    let dataFormat = _column.data && _column.data.format;
+    this.dataFormat = dataFormat || NUMBER_TYPES.NUMBER;
+    let initValue = getNumberDisplayString(_value, _column.data); // format the number to display
 
-    _this.state = {
+    this.state = {
       inputValue: initValue,
       textValue: initValue,
       isEditorShow: false
     };
-    return _this;
   }
-  _createClass(NumberEditor, [{
-    key: "render",
-    value: function render() {
-      var style = this.getStyle();
-      return /*#__PURE__*/React.createElement("div", {
-        className: "cell-editor number-editor"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "number-editor-container"
-      }, !this.state.isEditorShow && /*#__PURE__*/React.createElement("div", {
-        className: "form-control",
-        style: style,
-        onClick: this.onEditorHandle
-      }, this.state.textValue), this.state.isEditorShow && /*#__PURE__*/React.createElement("input", {
-        ref: this.setInputRef,
-        type: "text",
-        className: "form-control",
-        style: style,
-        value: this.state.inputValue,
-        onChange: this.onChange,
-        onBlur: this.onBlur,
-        onCut: this.onCut,
-        onPaste: this.onPaste,
-        onKeyDown: this.onKeyDown
-      })));
-    }
-  }]);
-  return NumberEditor;
-}(React.Component);
+  render() {
+    let style = this.getStyle();
+    return /*#__PURE__*/React.createElement("div", {
+      className: "cell-editor number-editor"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "number-editor-container"
+    }, !this.state.isEditorShow && /*#__PURE__*/React.createElement("div", {
+      className: "form-control",
+      style: style,
+      onClick: this.onEditorHandle
+    }, this.state.textValue), this.state.isEditorShow && /*#__PURE__*/React.createElement("input", {
+      ref: this.setInputRef,
+      type: "text",
+      className: "form-control",
+      style: style,
+      value: this.state.inputValue,
+      onChange: this.onChange,
+      onBlur: this.onBlur,
+      onCut: this.onCut,
+      onPaste: this.onPaste,
+      onKeyDown: this.onKeyDown
+    })));
+  }
+}
 NumberEditor.defaultProps = {
   isReadOnly: false,
   value: ''

package/lib/NumberFormatter/index.js

@@ -1,36 +1,23 @@
-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 classnames from 'classnames';
 import { getNumberDisplayString } from 'dtable-utils';
 import './index.css';
-var NumberFormatter = /*#__PURE__*/function (_React$Component) {
-  _inherits(NumberFormatter, _React$Component);
-  var _super = _createSuper(NumberFormatter);
-  function NumberFormatter() {
-    _classCallCheck(this, NumberFormatter);
-    return _super.apply(this, arguments);
-  }
-  _createClass(NumberFormatter, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        number = _this$props.value,
-        data = _this$props.data,
-        containerClassName = _this$props.containerClassName;
-      var classname = classnames('dtable-ui cell-formatter-container number-formatter', containerClassName);
-      if (number || number === 0) {
-        number = getNumberDisplayString(number, data);
-      }
-      return /*#__PURE__*/React.createElement("div", {
-        className: classname
-      }, number);
+class NumberFormatter extends React.Component {
+  render() {
+    let {
+      value: number,
+      data,
+      containerClassName
+    } = this.props;
+    let classname = classnames('dtable-ui cell-formatter-container number-formatter', containerClassName);
+    if (number || number === 0) {
+      number = getNumberDisplayString(number, data);
     }
-  }]);
-  return NumberFormatter;
-}(React.Component);
+    return /*#__PURE__*/React.createElement("div", {
+      className: classname
+    }, number);
+  }
+}
 NumberFormatter.defaultProps = {
   value: '',
   containerClassName: ''

package/lib/RateFormatter/index.js

@@ -1,34 +1,22 @@
-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 classnames from 'classnames';
 import './index.css';
-var RateFormatter = /*#__PURE__*/function (_React$Component) {
-  _inherits(RateFormatter, _React$Component);
-  var _super = _createSuper(RateFormatter);
-  function RateFormatter() {
-    var _this;
-    _classCallCheck(this, RateFormatter);
-    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.getRateList = function () {
-      var _this$props = _this.props,
-        data = _this$props.data,
-        value = _this$props.value;
-      var _ref = data || {},
-        _ref$rate_max_number = _ref.rate_max_number,
-        rate_max_number = _ref$rate_max_number === void 0 ? 5 : _ref$rate_max_number,
-        _ref$rate_style_color = _ref.rate_style_color,
-        rate_style_color = _ref$rate_style_color === void 0 ? '#e5e5e5' : _ref$rate_style_color,
-        _ref$rate_style_type = _ref.rate_style_type,
-        rate_style_type = _ref$rate_style_type === void 0 ? 'dtable-icon-rate' : _ref$rate_style_type;
-      var validValue = Math.min(rate_max_number, value);
-      var rateList = [];
-      for (var i = 0; i < validValue; i++) {
+class RateFormatter extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.getRateList = () => {
+      const {
+        data,
+        value
+      } = this.props;
+      const {
+        rate_max_number = 5,
+        rate_style_color = '#e5e5e5',
+        rate_style_type = 'dtable-icon-rate'
+      } = data || {};
+      const validValue = Math.min(rate_max_number, value);
+      let rateList = [];
+      for (let i = 0; i < validValue; i++) {
         rateList.push( /*#__PURE__*/React.createElement("i", {
           key: "dtable-ui-component-rate-".concat(i),
           className: "dtable-font ".concat(rate_style_type),
@@ -39,24 +27,20 @@ var RateFormatter = /*#__PURE__*/function (_React$Component) {
       }
       return rateList;
     };
-    return _this;
   }
-  _createClass(RateFormatter, [{
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-        number = _this$props2.value,
-        containerClassName = _this$props2.containerClassName;
-      var className = classnames('dtable-ui cell-formatter-container rate-formatter', containerClassName);
-      if (!number) return null;
-      var rateList = this.getRateList();
-      return /*#__PURE__*/React.createElement("div", {
-        className: className
-      }, rateList);
-    }
-  }]);
-  return RateFormatter;
-}(React.Component);
+  render() {
+    const {
+      value: number,
+      containerClassName
+    } = this.props;
+    const className = classnames('dtable-ui cell-formatter-container rate-formatter', containerClassName);
+    if (!number) return null;
+    const rateList = this.getRateList();
+    return /*#__PURE__*/React.createElement("div", {
+      className: className
+    }, rateList);
+  }
+}
 RateFormatter.defaultProps = {
   value: '',
   containerClassName: ''

package/lib/RoleStatusEditor/index.js

@@ -1,20 +1,20 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import classnames from 'classnames';
 import './index.css';
-var RoleStatusEditor = function RoleStatusEditor(_ref) {
-  var isShowDropdownIcon = _ref.isShowDropdownIcon,
-    currentOption = _ref.currentOption,
-    menuOptions = _ref.menuOptions,
-    onChangeOption = _ref.onChangeOption,
-    closeShowDropdownIcon = _ref.closeShowDropdownIcon;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  var handleClickMenuOption = function handleClickMenuOption(menuOption) {
-    var value = menuOption.value;
+const RoleStatusEditor = _ref => {
+  let {
+    isShowDropdownIcon,
+    currentOption,
+    menuOptions,
+    onChangeOption,
+    closeShowDropdownIcon
+  } = _ref;
+  const [isOpen, setIsOpen] = useState(false);
+  const handleClickMenuOption = menuOption => {
+    const {
+      value
+    } = menuOption;
     closeShowDropdownIcon && closeShowDropdownIcon();
     if (value === currentOption.value) return;
     onChangeOption(value);
@@ -22,9 +22,7 @@ var RoleStatusEditor = function RoleStatusEditor(_ref) {
   return /*#__PURE__*/React.createElement(Dropdown, {
     isOpen: isOpen,
     className: "role-status-editor",
-    toggle: function toggle() {
-      return setIsOpen(!isOpen);
-    }
+    toggle: () => setIsOpen(!isOpen)
   }, /*#__PURE__*/React.createElement(DropdownToggle, {
     className: "dropdown-toggle-button d-flex align-items-center",
     tag: "div"
@@ -41,14 +39,14 @@ var RoleStatusEditor = function RoleStatusEditor(_ref) {
         boundariesElement: document.body
       }
     }
-  }, menuOptions.map(function (option) {
-    var value = option.value,
-      label = option.label;
+  }, menuOptions.map(option => {
+    const {
+      value,
+      label
+    } = option;
     return /*#__PURE__*/React.createElement(DropdownItem, {
       key: "item-".concat(value),
-      onClick: function onClick() {
-        return handleClickMenuOption(option);
-      }
+      onClick: () => handleClickMenuOption(option)
     }, label, value === currentOption.value && /*#__PURE__*/React.createElement("i", {
       className: "dtable-font dtable-icon-check-mark ml-2"
     }));