dtable-ui-component 4.3.7 → 4.3.9-alpha1

package/lib/CollaboratorEditor/index.js

@@ -1,7 +1,3 @@
-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 MediaQuery from 'react-responsive';
 import { getLocale } from '../lang';
@@ -10,101 +6,96 @@ import EditEditorButton from '../EditEditorButton';
 import PCCollaboratorEditorPopover from './pc-collaborator-editor-popover';
 import MBCollaboratorEditorPopover from './mb-collaborator-editor-popover';
 import './index.css';
-var CollaboratorEditor = /*#__PURE__*/function (_React$Component) {
-  _inherits(CollaboratorEditor, _React$Component);
-  var _super = _createSuper(CollaboratorEditor);
-  function CollaboratorEditor(props) {
-    var _this;
-    _classCallCheck(this, CollaboratorEditor);
-    _this = _super.call(this, props);
-    _this.onDocumentToggle = function (e) {
-      if (_this.editorContainer !== e.target && !_this.editorContainer.contains(e.target)) {
-        _this.onClosePopover();
+class CollaboratorEditor extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onDocumentToggle = e => {
+      if (this.editorContainer !== e.target && !this.editorContainer.contains(e.target)) {
+        this.onClosePopover();
       }
     };
-    _this.getFormattedCollaborators = function () {
-      var newValue = _this.state.newValue;
+    this.getFormattedCollaborators = () => {
+      let {
+        newValue
+      } = this.state;
       if (Array.isArray(newValue) && newValue.length > 0) {
-        var collaborators = _this.props.collaborators;
-        return newValue.map(function (collaboratorEmail) {
-          return collaborators.find(function (collaborator) {
-            return collaborator.email === collaboratorEmail;
-          });
-        }).filter(function (collaborator) {
-          return !!collaborator;
-        });
+        const {
+          collaborators
+        } = this.props;
+        return newValue.map(collaboratorEmail => {
+          return collaborators.find(collaborator => collaborator.email === collaboratorEmail);
+        }).filter(collaborator => !!collaborator);
       }
       return [];
     };
-    _this.onAddOptionToggle = function (event) {
+    this.onAddOptionToggle = event => {
       event.nativeEvent.stopImmediatePropagation();
       event.stopPropagation();
-      if (_this.props.isReadOnly) {
+      if (this.props.isReadOnly) {
         return;
       }
-      var isPopoverShow = !_this.state.isPopoverShow;
+      let isPopoverShow = !this.state.isPopoverShow;
       if (isPopoverShow) {
-        var popoverPosition = _this.caculatePopoverPosition();
-        _this.setState({
-          isPopoverShow: isPopoverShow,
-          popoverPosition: popoverPosition
+        let popoverPosition = this.caculatePopoverPosition();
+        this.setState({
+          isPopoverShow,
+          popoverPosition
         });
       } else {
-        _this.setState({
-          isPopoverShow: isPopoverShow
+        this.setState({
+          isPopoverShow
         });
       }
     };
-    _this.onCommit = function (newValue) {
-      var updated = {};
-      var column = _this.props.column;
+    this.onCommit = newValue => {
+      let updated = {};
+      let {
+        column
+      } = this.props;
       updated[column.name] = newValue;
-      _this.props.onCommit(updated);
+      this.props.onCommit(updated);
     };
-    _this.onCollaboratorItemToggle = function (collaborator) {
-      var newValue = _this.state.newValue.slice();
-      var collaboratorIndex = newValue.findIndex(function (collaboratorEmail) {
-        return collaboratorEmail === collaborator.email;
-      });
+    this.onCollaboratorItemToggle = collaborator => {
+      let newValue = this.state.newValue.slice();
+      let collaboratorIndex = newValue.findIndex(collaboratorEmail => collaboratorEmail === collaborator.email);
       if (collaboratorIndex !== -1) {
         newValue.splice(collaboratorIndex, 1);
       } else {
         newValue.push(collaborator.email);
       }
-      _this.setState({
-        newValue: newValue
-      }, function () {
-        _this.onCommit(newValue);
-        _this.onClosePopover();
+      this.setState({
+        newValue
+      }, () => {
+        this.onCommit(newValue);
+        this.onClosePopover();
       });
     };
-    _this.onDeleteCollaborator = function (collaborator) {
-      var newValue = _this.state.newValue.slice();
-      var optionIndex = newValue.findIndex(function (collaboratorEmail) {
-        return collaboratorEmail === collaborator.email;
-      });
+    this.onDeleteCollaborator = collaborator => {
+      let newValue = this.state.newValue.slice();
+      let optionIndex = newValue.findIndex(collaboratorEmail => collaboratorEmail === collaborator.email);
       if (optionIndex > -1) {
         newValue.splice(optionIndex, 1);
-        _this.setState({
-          newValue: newValue
-        }, function () {
-          _this.onCommit(newValue);
+        this.setState({
+          newValue
+        }, () => {
+          this.onCommit(newValue);
         });
       }
     };
-    _this.caculatePopoverPosition = function () {
-      var POPOVER_MAX_HEIGHT = 200;
-      var innerHeight = window.innerHeight;
-      var _this$editor$getClien = _this.editor.getClientRects()[0],
-        top = _this$editor$getClien.top,
-        height = _this$editor$getClien.height;
-      var isBelow = innerHeight - (top + height) > POPOVER_MAX_HEIGHT;
-      var position = {
+    this.caculatePopoverPosition = () => {
+      const POPOVER_MAX_HEIGHT = 200;
+      let innerHeight = window.innerHeight;
+      let {
+        top,
+        height
+      } = this.editor.getClientRects()[0];
+      let isBelow = innerHeight - (top + height) > POPOVER_MAX_HEIGHT;
+      let position = {
         top: height + 1,
         left: 0
       };
       if (!isBelow) {
-        var bottom = height + 1;
+        let bottom = height + 1;
         position = {
           bottom: bottom,
           left: 0
@@ -112,86 +103,78 @@ var CollaboratorEditor = /*#__PURE__*/function (_React$Component) {
       }
       return position;
     };
-    _this.onClosePopover = function () {
-      _this.setState({
+    this.onClosePopover = () => {
+      this.setState({
         isPopoverShow: false
       });
     };
-    _this.setEditorContainerRef = function (editorContainer) {
-      _this.editorContainer = editorContainer;
+    this.setEditorContainerRef = editorContainer => {
+      this.editorContainer = editorContainer;
     };
-    _this.setEditorRef = function (editor) {
-      _this.editor = editor;
+    this.setEditorRef = editor => {
+      this.editor = editor;
     };
-    _this.state = {
+    this.state = {
       newValue: Array.isArray(props.value) ? props.value : [],
       isPopoverShow: false,
       popoverPosition: {}
     };
-    return _this;
   }
-  _createClass(CollaboratorEditor, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      document.addEventListener('click', this.onDocumentToggle);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      document.removeEventListener('click', this.onDocumentToggle);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props = this.props,
-        collaborators = _this$props.collaborators,
-        isReadOnly = _this$props.isReadOnly;
-      var _this$state = this.state,
-        isPopoverShow = _this$state.isPopoverShow,
-        popoverPosition = _this$state.popoverPosition;
-      var selectedCollaborators = this.getFormattedCollaborators();
-      var enableDeleteCollaborator = !isReadOnly;
-      return /*#__PURE__*/React.createElement("div", {
-        ref: this.setEditorContainerRef,
-        className: "dtable-ui-collaborator-editor"
-      }, /*#__PURE__*/React.createElement("div", {
-        ref: this.setEditorRef,
-        className: "dtable-ui-collaborator-editor-container"
-      }, /*#__PURE__*/React.createElement(EditEditorButton, {
-        text: getLocale('Add_a_collaborator'),
-        onClick: this.onAddOptionToggle
-      }), selectedCollaborators.length > 0 && /*#__PURE__*/React.createElement("div", {
-        className: "collaborators-container mt-2"
-      }, selectedCollaborators.map(function (collaborator) {
-        return /*#__PURE__*/React.createElement(CollaboratorItem, {
-          key: collaborator.email,
-          collaborator: collaborator,
-          enableDeleteCollaborator: enableDeleteCollaborator,
-          onDeleteCollaborator: _this2.onDeleteCollaborator
-        });
-      }))), isPopoverShow && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(MediaQuery, {
-        query: '(min-width: 768px)'
-      }, /*#__PURE__*/React.createElement(PCCollaboratorEditorPopover, {
-        popoverPosition: popoverPosition,
-        isReadOnly: this.props.isReadOnly,
-        selectedCollaborators: selectedCollaborators,
-        collaborators: collaborators,
-        onCollaboratorItemToggle: this.onCollaboratorItemToggle
-      })), /*#__PURE__*/React.createElement(MediaQuery, {
-        query: '(max-width: 767.8px)'
-      }, /*#__PURE__*/React.createElement(MBCollaboratorEditorPopover, {
-        isReadOnly: this.props.isReadOnly,
-        value: this.state.newValue,
-        column: this.props.column,
-        collaborators: this.props.collaborators,
-        onCollaboratorItemToggle: this.onCollaboratorItemToggle,
-        onClosePopover: this.onClosePopover
-      }))));
-    }
-  }]);
-  return CollaboratorEditor;
-}(React.Component);
+  componentDidMount() {
+    document.addEventListener('click', this.onDocumentToggle);
+  }
+  componentWillUnmount() {
+    document.removeEventListener('click', this.onDocumentToggle);
+  }
+  render() {
+    let {
+      collaborators,
+      isReadOnly
+    } = this.props;
+    let {
+      isPopoverShow,
+      popoverPosition
+    } = this.state;
+    let selectedCollaborators = this.getFormattedCollaborators();
+    let enableDeleteCollaborator = !isReadOnly;
+    return /*#__PURE__*/React.createElement("div", {
+      ref: this.setEditorContainerRef,
+      className: "dtable-ui-collaborator-editor"
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: this.setEditorRef,
+      className: "dtable-ui-collaborator-editor-container"
+    }, /*#__PURE__*/React.createElement(EditEditorButton, {
+      text: getLocale('Add_a_collaborator'),
+      onClick: this.onAddOptionToggle
+    }), selectedCollaborators.length > 0 && /*#__PURE__*/React.createElement("div", {
+      className: "collaborators-container mt-2"
+    }, selectedCollaborators.map(collaborator => {
+      return /*#__PURE__*/React.createElement(CollaboratorItem, {
+        key: collaborator.email,
+        collaborator: collaborator,
+        enableDeleteCollaborator: enableDeleteCollaborator,
+        onDeleteCollaborator: this.onDeleteCollaborator
+      });
+    }))), isPopoverShow && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(MediaQuery, {
+      query: '(min-width: 768px)'
+    }, /*#__PURE__*/React.createElement(PCCollaboratorEditorPopover, {
+      popoverPosition: popoverPosition,
+      isReadOnly: this.props.isReadOnly,
+      selectedCollaborators: selectedCollaborators,
+      collaborators: collaborators,
+      onCollaboratorItemToggle: this.onCollaboratorItemToggle
+    })), /*#__PURE__*/React.createElement(MediaQuery, {
+      query: '(max-width: 767.8px)'
+    }, /*#__PURE__*/React.createElement(MBCollaboratorEditorPopover, {
+      isReadOnly: this.props.isReadOnly,
+      value: this.state.newValue,
+      column: this.props.column,
+      collaborators: this.props.collaborators,
+      onCollaboratorItemToggle: this.onCollaboratorItemToggle,
+      onClosePopover: this.onClosePopover
+    }))));
+  }
+}
 CollaboratorEditor.defaultProps = {
   isReadOnly: false,
   value: []

package/lib/CollaboratorEditor/mb-collaborator-editor-popover/index.js

@@ -1,74 +1,70 @@
-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 from 'react';
 import { getLocale } from '../../lang';
 import MBEditorHeader from '../../MBEditorHeader';
 import './index.css';
-var MBCollaboratorEditorPopover = /*#__PURE__*/function (_React$Component) {
-  _inherits(MBCollaboratorEditorPopover, _React$Component);
-  var _super = _createSuper(MBCollaboratorEditorPopover);
-  function MBCollaboratorEditorPopover(props) {
-    var _this;
-    _classCallCheck(this, MBCollaboratorEditorPopover);
-    _this = _super.call(this, props);
-    _this.handleHistaryBack = function (e) {
+class MBCollaboratorEditorPopover extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleHistaryBack = e => {
       e.preventDefault();
-      _this.props.onClosePopover();
+      this.props.onClosePopover();
     };
-    _this.onContainerClick = function (event) {
-      if (_this.editorPopover && _this.editorPopover.contains(event.target)) {
+    this.onContainerClick = event => {
+      if (this.editorPopover && this.editorPopover.contains(event.target)) {
         event.stopPropagation();
         event.nativeEvent.stopImmediatePropagation();
         return false;
       }
     };
-    _this.onChangeSearch = function (event) {
-      var searchVal = _this.state.searchVal;
+    this.onChangeSearch = event => {
+      let {
+        searchVal
+      } = this.state;
       if (searchVal === event.target.value) {
         return;
       }
       searchVal = event.target.value;
-      _this.setState({
-        searchVal: searchVal
+      this.setState({
+        searchVal
       });
     };
-    _this.getSelectedCollaborators = function () {
-      var _this$props = _this.props,
-        value = _this$props.value,
-        collaborators = _this$props.collaborators;
+    this.getSelectedCollaborators = () => {
+      let {
+        value,
+        collaborators
+      } = this.props;
       if (!Array.isArray(value)) {
         return [];
       }
-      return collaborators.filter(function (collaborator) {
+      return collaborators.filter(collaborator => {
         return value.indexOf(collaborator.email) > -1;
       });
     };
-    _this.getFilteredCollaborators = function () {
-      var collaborators = _this.props.collaborators;
-      var searchVal = _this.state.searchVal;
-      return searchVal ? collaborators.filter(function (item) {
-        return item.name.indexOf(searchVal) > -1;
-      }) : collaborators;
+    this.getFilteredCollaborators = () => {
+      let {
+        collaborators
+      } = this.props;
+      let {
+        searchVal
+      } = this.state;
+      return searchVal ? collaborators.filter(item => item.name.indexOf(searchVal) > -1) : collaborators;
     };
-    _this.onSelectCollaborator = function (collaborator) {
-      _this.props.onCollaboratorItemToggle(collaborator);
+    this.onSelectCollaborator = collaborator => {
+      this.props.onCollaboratorItemToggle(collaborator);
     };
-    _this.onRemoveCollaborator = function (collaborator) {
-      _this.props.onCollaboratorItemToggle(collaborator);
+    this.onRemoveCollaborator = collaborator => {
+      this.props.onCollaboratorItemToggle(collaborator);
     };
-    _this.renderFilteredCollaborators = function (collaborators) {
-      var value = _this.props.value;
-      return collaborators.map(function (collaborator, index) {
-        var isSelect = value.some(function (item) {
-          return item === collaborator.email;
-        });
+    this.renderFilteredCollaborators = collaborators => {
+      let {
+        value
+      } = this.props;
+      return collaborators.map((collaborator, index) => {
+        let isSelect = value.some(item => item === collaborator.email);
         return /*#__PURE__*/React.createElement("div", {
           className: "mb-collaborator-option-item",
           key: index,
-          onMouseDown: _this.onSelectCollaborator.bind(_assertThisInitialized(_this), collaborator)
+          onMouseDown: this.onSelectCollaborator.bind(this, collaborator)
         }, /*#__PURE__*/React.createElement("span", {
           className: "mb-collaborator-info"
         }, /*#__PURE__*/React.createElement("span", {
@@ -85,67 +81,62 @@ var MBCollaboratorEditorPopover = /*#__PURE__*/function (_React$Component) {
         }));
       });
     };
-    _this.setEditorPopover = function (editorPopover) {
-      _this.editorPopover = editorPopover;
+    this.setEditorPopover = editorPopover => {
+      this.editorPopover = editorPopover;
     };
-    _this.state = {
+    this.state = {
       searchVal: ''
     };
-    return _this;
   }
-  _createClass(MBCollaboratorEditorPopover, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      history.pushState(null, null, '#'); // eslint-disable-line
-      window.addEventListener('popstate', this.handleHistaryBack, false);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      window.removeEventListener('popstate', this.handleHistaryBack, false);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var column = this.props.column;
-      var searchVal = this.state.searchVal;
-      var filteredCollaborators = this.getFilteredCollaborators();
-      return /*#__PURE__*/React.createElement("div", {
-        ref: this.setEditorPopover,
-        className: "dtable-ui-mb-editor-popover mb-collaborator-editor-popover",
-        onClick: this.onContainerClick
-      }, /*#__PURE__*/React.createElement(MBEditorHeader, {
-        title: column.name,
-        leftContent: /*#__PURE__*/React.createElement("i", {
-          className: "dtable-font dtable-icon-return"
-        }),
-        rightContent: /*#__PURE__*/React.createElement("span", null, getLocale('Done')),
-        onLeftClick: this.props.onClosePopover,
-        onRightClick: this.props.onClosePopover
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "dtable-ui-mb-editor-body dtable-ui-mb-collaborator-editor-body"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "mb-search-collaborator-items"
-      }, /*#__PURE__*/React.createElement("input", {
-        className: "form-control",
-        type: "text",
-        placeholder: getLocale('Find_a_collaborator'),
-        value: searchVal,
-        onChange: this.onChangeSearch,
-        onClick: this.onInputClick
-      })), /*#__PURE__*/React.createElement("div", {
-        className: "mb-collaborators-container"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "title"
-      }, getLocale('Choose_a_collaborator')), /*#__PURE__*/React.createElement("div", {
-        className: "content"
-      }, filteredCollaborators.length === 0 && /*#__PURE__*/React.createElement("div", {
-        className: "search-result-none"
-      }, getLocale('No_collaborators_avaliable')), filteredCollaborators.length > 0 && this.renderFilteredCollaborators(filteredCollaborators)))));
-    }
-  }]);
-  return MBCollaboratorEditorPopover;
-}(React.Component);
+  componentDidMount() {
+    history.pushState(null, null, '#'); // eslint-disable-line
+    window.addEventListener('popstate', this.handleHistaryBack, false);
+  }
+  componentWillUnmount() {
+    window.removeEventListener('popstate', this.handleHistaryBack, false);
+  }
+  render() {
+    const {
+      column
+    } = this.props;
+    const {
+      searchVal
+    } = this.state;
+    let filteredCollaborators = this.getFilteredCollaborators();
+    return /*#__PURE__*/React.createElement("div", {
+      ref: this.setEditorPopover,
+      className: "dtable-ui-mb-editor-popover mb-collaborator-editor-popover",
+      onClick: this.onContainerClick
+    }, /*#__PURE__*/React.createElement(MBEditorHeader, {
+      title: column.name,
+      leftContent: /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-return"
+      }),
+      rightContent: /*#__PURE__*/React.createElement("span", null, getLocale('Done')),
+      onLeftClick: this.props.onClosePopover,
+      onRightClick: this.props.onClosePopover
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "dtable-ui-mb-editor-body dtable-ui-mb-collaborator-editor-body"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "mb-search-collaborator-items"
+    }, /*#__PURE__*/React.createElement("input", {
+      className: "form-control",
+      type: "text",
+      placeholder: getLocale('Find_a_collaborator'),
+      value: searchVal,
+      onChange: this.onChangeSearch,
+      onClick: this.onInputClick
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "mb-collaborators-container"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "title"
+    }, getLocale('Choose_a_collaborator')), /*#__PURE__*/React.createElement("div", {
+      className: "content"
+    }, filteredCollaborators.length === 0 && /*#__PURE__*/React.createElement("div", {
+      className: "search-result-none"
+    }, getLocale('No_collaborators_avaliable')), filteredCollaborators.length > 0 && this.renderFilteredCollaborators(filteredCollaborators)))));
+  }
+}
 MBCollaboratorEditorPopover.defaultProps = {
   isReadOnly: false,
   value: []