@seafile/sdoc-editor 0.3.6 → 0.3.7

package/dist/basic-sdk/editor/editable-article.js

@@ -12,46 +12,49 @@ import EventBus from '../utils/event-bus';
 import { ArticleContainer } from '../layout';
 import { useScrollContext } from '../hooks/use-scroll-context';
 import { SetNodeToDecorations } from '../highlight';
-var EditableArticle = function EditableArticle(_ref) {
-  var isShowComment = _ref.isShowComment,
-    editor = _ref.editor,
-    slateValue = _ref.slateValue,
-    updateSlateValue = _ref.updateSlateValue;
-  var _useCursors = useCursors(editor),
-    cursors = _useCursors.cursors;
-  var decorate = usePipDecorate(editor);
+const EditableArticle = _ref => {
+  let {
+    isShowComment,
+    editor,
+    slateValue,
+    updateSlateValue
+  } = _ref;
+  const {
+    cursors
+  } = useCursors(editor);
+  const decorate = usePipDecorate(editor);
 
   // init eventHandler
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  var eventProxy = useMemo(function () {
-    return new EventProxy(editor);
-  }, []);
-  var onMouseDown = useCallback(function (event) {
+  const eventProxy = useMemo(() => new EventProxy(editor), []);
+  const onMouseDown = useCallback(event => {
     if (event.button === 0) {
       editor.reSetTableSelectedRange();
-      var eventBus = EventBus.getInstance();
+      const eventBus = EventBus.getInstance();
       eventBus.dispatch(INTERNAL_EVENT.CANCEL_TABLE_SELECT_RANGE);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var scrollRef = useScrollContext();
-  var onKeyDown = useCallback(function (event) {
-    var _scrollRef$current = scrollRef.current,
-      scrollTop = _scrollRef$current.scrollTop,
-      clientHeight = _scrollRef$current.clientHeight;
+  const scrollRef = useScrollContext();
+  const onKeyDown = useCallback(event => {
+    const {
+      scrollTop,
+      clientHeight
+    } = scrollRef.current;
     eventProxy.onKeyDown(event);
     if (event.key === 'ArrowLeft') {
       if (!isSelectionAtBlockStart(editor)) return;
     }
     if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
       if (scrollTop === 0) return;
-      var prevNode = getPrevNode(editor);
+      let prevNode = getPrevNode(editor);
       if (!prevNode) return;
-      var domNode = ReactEditor.toDOMNode(editor, prevNode[0]);
-      var domHeight = getDomHeight(domNode);
-      var isScrollUp = true;
-      var _getCursorPosition = getCursorPosition(isScrollUp),
-        y = _getCursorPosition.y;
+      const domNode = ReactEditor.toDOMNode(editor, prevNode[0]);
+      const domHeight = getDomHeight(domNode);
+      const isScrollUp = true;
+      const {
+        y
+      } = getCursorPosition(isScrollUp);
       if (y >= domHeight) return;
       scrollRef.current.scroll(0, Math.max(0, scrollTop - domHeight));
       return;
@@ -60,34 +63,36 @@ var EditableArticle = function EditableArticle(_ref) {
       if (!isSelectionAtBlockEnd(editor)) return;
     }
     if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
-      var nextNode = getNextNode(editor);
+      let nextNode = getNextNode(editor);
       if (!nextNode) return;
-      var _domNode = ReactEditor.toDOMNode(editor, nextNode[0]);
-      var _domHeight = getDomHeight(_domNode);
-      var _isScrollUp = false;
-      var _getCursorPosition2 = getCursorPosition(_isScrollUp),
-        _y = _getCursorPosition2.y;
-      if (clientHeight - _y >= _domHeight) return;
-      scrollRef.current.scroll(0, Math.max(0, scrollTop + _domHeight));
+      const domNode = ReactEditor.toDOMNode(editor, nextNode[0]);
+      const domHeight = getDomHeight(domNode);
+      const isScrollUp = false;
+      const {
+        y
+      } = getCursorPosition(isScrollUp);
+      if (clientHeight - y >= domHeight) return;
+      scrollRef.current.scroll(0, Math.max(0, scrollTop + domHeight));
       return;
     }
     if (event.key === 'Backspace') {
-      var _getCursorPosition3 = getCursorPosition(),
-        _y2 = _getCursorPosition3.y;
+      const {
+        y
+      } = getCursorPosition();
 
       // above viewport
-      if (_y2 < 0) {
-        var newY = Math.abs(_y2);
+      if (y < 0) {
+        const newY = Math.abs(y);
         if (isSelectionAtBlockStart(editor)) {
-          var _prevNode = getPrevNode(editor);
-          if (!_prevNode) return;
-          var _domNode2 = ReactEditor.toDOMNode(editor, _prevNode[0]);
-          var _domHeight2 = getDomHeight(_domNode2);
-          var node = getAboveBlockNode(editor);
+          const prevNode = getPrevNode(editor);
+          if (!prevNode) return;
+          const domNode = ReactEditor.toDOMNode(editor, prevNode[0]);
+          const domHeight = getDomHeight(domNode);
+          const node = getAboveBlockNode(editor);
           if (!node) return;
-          var currentDomNode = ReactEditor.toDOMNode(editor, node[0]);
-          var marginTop = getDomMarginTop(currentDomNode);
-          scrollRef.current.scroll(0, Math.max(0, scrollTop - (newY + _domHeight2 + marginTop)));
+          const currentDomNode = ReactEditor.toDOMNode(editor, node[0]);
+          const marginTop = getDomMarginTop(currentDomNode);
+          scrollRef.current.scroll(0, Math.max(0, scrollTop - (newY + domHeight + marginTop)));
         } else {
           scrollRef.current.scroll(0, Math.max(0, scrollTop - newY));
         }
@@ -95,29 +100,30 @@ var EditableArticle = function EditableArticle(_ref) {
       }
 
       // insider viewport
-      if (_y2 >= 0 && _y2 <= clientHeight) {
+      if (y >= 0 && y <= clientHeight) {
         if (isSelectionAtBlockStart(editor)) {
-          var _prevNode2 = getPrevNode(editor);
-          if (!_prevNode2) return;
-          var _domNode3 = ReactEditor.toDOMNode(editor, _prevNode2[0]);
-          var _domHeight3 = getDomHeight(_domNode3);
-          if (_y2 >= _domHeight3) return;
+          const prevNode = getPrevNode(editor);
+          if (!prevNode) return;
+          const domNode = ReactEditor.toDOMNode(editor, prevNode[0]);
+          const domHeight = getDomHeight(domNode);
+          if (y >= domHeight) return;
           // Scroll up the height of the previous block
-          scrollRef.current.scroll(0, Math.max(0, scrollTop - _domHeight3));
+          scrollRef.current.scroll(0, Math.max(0, scrollTop - domHeight));
           return;
         }
       }
 
       // below viewport
-      if (_y2 > clientHeight) {
+      if (y > clientHeight) {
         if (isSelectionAtBlockStart(editor)) {
           // y: text top border
-          scrollRef.current.scroll(0, Math.max(0, scrollTop + (_y2 - clientHeight)));
+          scrollRef.current.scroll(0, Math.max(0, scrollTop + (y - clientHeight)));
         } else {
-          var marginBottom = 11.2;
-          var _getCursorPosition4 = getCursorPosition(false),
-            _newY = _getCursorPosition4.y;
-          var rectBottom = _newY + marginBottom; // text bottom border
+          const marginBottom = 11.2;
+          const {
+            y: newY
+          } = getCursorPosition(false);
+          const rectBottom = newY + marginBottom; // text bottom border
           scrollRef.current.scroll(0, Math.max(0, scrollTop + (rectBottom - clientHeight)));
         }
         return;

package/dist/basic-sdk/editor/sdoc-editor.js

@@ -1,6 +1,4 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useEffect, useState, useImperativeHandle, forwardRef, useMemo } from 'react';
 import { Editor } from '@seafile/slate';
 import deepCopy from 'deep-copy';
@@ -19,32 +17,33 @@ import { HeaderToolbar } from '../extension';
 import ReadOnlyArticle from '../views/readonly-article';
 import { isMobile } from '../../utils';
 import { CollaboratorsProvider } from '../../hooks';
-var SdocEditor = forwardRef(function (_ref, ref) {
-  var document = _ref.document,
-    isReloading = _ref.isReloading;
-  var editor = useMemo(function () {
-    var defaultEditor = createDefaultEditor();
-    var editorConfig = context.getEditorConfig();
-    var newEditor = withNodeId(withSocketIO(defaultEditor, {
-      document: document,
+const SdocEditor = forwardRef((_ref, ref) => {
+  let {
+    document,
+    isReloading
+  } = _ref;
+  const editor = useMemo(() => {
+    const defaultEditor = createDefaultEditor();
+    const editorConfig = context.getEditorConfig();
+    const newEditor = withNodeId(withSocketIO(defaultEditor, {
+      document,
       config: editorConfig
     }));
-    var cursors = document.cursors;
+    const {
+      cursors
+    } = document;
     newEditor.cursors = cursors || {};
     newEditor.width = PAGE_EDIT_AREA_WIDTH; // default width
     return newEditor;
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var _useState = useState(document.children),
-    _useState2 = _slicedToArray(_useState, 2),
-    slateValue = _useState2[0],
-    _setSlateValue = _useState2[1];
+  const [slateValue, setSlateValue] = useState(document.children);
 
   // useMount: init socket connection
-  useEffect(function () {
+  useEffect(() => {
     editor.openConnection();
-    return function () {
+    return () => {
       editor.closeConnection();
     };
 
@@ -52,16 +51,14 @@ var SdocEditor = forwardRef(function (_ref, ref) {
   }, []);
 
   // useMount: focus editor
-  useEffect(function () {
-    var timer = setTimeout(function () {
-      var _editor$children = _slicedToArray(editor.children, 1),
-        firstNode = _editor$children[0];
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      const [firstNode] = editor.children;
       if (firstNode) {
-        var _firstNode$children = _slicedToArray(firstNode.children, 1),
-          firstNodeFirstChild = _firstNode$children[0];
+        const [firstNodeFirstChild] = firstNode.children;
         if (firstNodeFirstChild) {
-          var endOfFirstNode = Editor.end(editor, [0, 0]);
-          var range = {
+          const endOfFirstNode = Editor.end(editor, [0, 0]);
+          const range = {
             anchor: endOfFirstNode,
             focus: endOfFirstNode
           };
@@ -69,34 +66,32 @@ var SdocEditor = forwardRef(function (_ref, ref) {
         }
       }
     }, 300);
-    return function () {
+    return () => {
       clearTimeout(timer);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   // The parent component can call the method of this component through ref
-  useImperativeHandle(ref, function () {
-    return {
-      setSlateValue: function setSlateValue(document) {
-        // Force update of editor's child elements
-        editor.children = document.children;
-        _setSlateValue(_toConsumableArray(document.children));
-      },
-      updateDocumentVersion: function updateDocumentVersion(document) {
-        editor.updateDocumentVersion(document);
-      },
-      // get value
-      getSlateValue: function getSlateValue() {
-        return deepCopy(_objectSpread(_objectSpread({}, document), {}, {
-          children: slateValue
-        }));
-      }
+  useImperativeHandle(ref, () => ({
+    setSlateValue: document => {
+      // Force update of editor's child elements
+      editor.children = document.children;
+      setSlateValue([...document.children]);
+    },
+    updateDocumentVersion: document => {
+      editor.updateDocumentVersion(document);
+    },
+    // get value
+    getSlateValue: () => {
+      return deepCopy(_objectSpread(_objectSpread({}, document), {}, {
+        children: slateValue
+      }));
+    }
 
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    };
-  }, [document, editor, slateValue]);
-  var isFreezed = context.getSetting('isFreezed');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), [document, editor, slateValue]);
+  const isFreezed = context.getSetting('isFreezed');
   if (isReloading) {
     return /*#__PURE__*/React.createElement("div", {
       className: "h-100 w-100 d-flex align-items-center justify-content-center"
@@ -142,7 +137,7 @@ var SdocEditor = forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React.createElement(EditableArticle, {
     editor: editor,
     slateValue: slateValue,
-    updateSlateValue: _setSlateValue
+    updateSlateValue: setSlateValue
   }))))), /*#__PURE__*/React.createElement(InsertElementDialog, {
     editor: editor
   }));

package/dist/basic-sdk/extension/commons/color-menu/color-item.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import { withTranslation } from 'react-i18next';
 import classnames from 'classnames';
-var ColorItem = function ColorItem(_ref) {
-  var t = _ref.t,
-    color = _ref.color,
-    lastUsedColor = _ref.lastUsedColor;
+const ColorItem = _ref => {
+  let {
+    t,
+    color,
+    lastUsedColor
+  } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     className: classnames('sdoc-color-item', {
       'selected': lastUsedColor === color.value

package/dist/basic-sdk/extension/commons/color-menu/index.js

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useCallback, useRef, useState } from 'react';
 import { withTranslation } from 'react-i18next';
 import classnames from 'classnames';
@@ -10,42 +9,35 @@ import { eventStopPropagation } from '../../../utils/mouse-event';
 import ColorItem from './color-item';
 import Tooltip from '../../../../components/tooltip';
 import './index.css';
-var ColorMenu = function ColorMenu(_ref) {
-  var iconClass = _ref.iconClass,
-    id = _ref.id,
-    isRichEditor = _ref.isRichEditor,
-    className = _ref.className,
-    popoverClassName = _ref.popoverClassName,
-    disabled = _ref.disabled,
-    t = _ref.t,
-    setColor = _ref.setColor,
-    recentUsedColorsKey = _ref.recentUsedColorsKey,
-    text = _ref.text,
-    defaultColorTip = _ref.defaultColorTip,
-    defaultColor = _ref.defaultColor,
-    lastUsedColor = _ref.lastUsedColor,
-    updateLastUsedColor = _ref.updateLastUsedColor;
-  var popoverRef = useRef(null);
-  var moreColorsPopoverRef = useRef(null);
-  var _useState = useState(LocalStorage.getItem(recentUsedColorsKey, DEFAULT_RECENT_USED_LIST)),
-    _useState2 = _slicedToArray(_useState, 2),
-    recentUsedColors = _useState2[0],
-    setRecentUsedColors = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isShowMenu = _useState4[0],
-    setMenuShow = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isPickerShow = _useState6[0],
-    setPickerShow = _useState6[1];
-  var onSetColor = useCallback(function (color) {
-    var shouldClose = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+const ColorMenu = _ref => {
+  let {
+    iconClass,
+    id,
+    isRichEditor,
+    className,
+    popoverClassName,
+    disabled,
+    t,
+    setColor,
+    recentUsedColorsKey,
+    text,
+    defaultColorTip,
+    defaultColor,
+    lastUsedColor,
+    updateLastUsedColor
+  } = _ref;
+  const popoverRef = useRef(null);
+  const moreColorsPopoverRef = useRef(null);
+  const [recentUsedColors, setRecentUsedColors] = useState(LocalStorage.getItem(recentUsedColorsKey, DEFAULT_RECENT_USED_LIST));
+  const [isShowMenu, setMenuShow] = useState(false);
+  const [isPickerShow, setPickerShow] = useState(false);
+  const onSetColor = useCallback(function (color) {
+    let shouldClose = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     if (disabled) return;
-    var validColor = color || '';
+    const validColor = color || '';
     setColor(validColor);
     if (validColor !== '' && recentUsedColors[0] !== validColor) {
-      var newRecentUsedColors = recentUsedColors.slice(0, 9);
+      let newRecentUsedColors = recentUsedColors.slice(0, 9);
       newRecentUsedColors.unshift(validColor);
       LocalStorage.setItem(recentUsedColorsKey, newRecentUsedColors);
       setRecentUsedColors(newRecentUsedColors);
@@ -58,39 +50,39 @@ var ColorMenu = function ColorMenu(_ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [recentUsedColors, recentUsedColorsKey, isShowMenu, isPickerShow, disabled]);
-  var setColorProxy = useCallback(function (event) {
+  const setColorProxy = useCallback(event => {
     if (event.target.className.includes('sdoc-color-item')) {
-      var color = event.target.dataset.color;
+      const color = event.target.dataset.color;
       onSetColor(color);
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [recentUsedColors, recentUsedColorsKey, isShowMenu, isPickerShow]);
-  var toggle = useCallback(function () {
+  const toggle = useCallback(() => {
     if (isPickerShow) return;
     popoverRef.current.toggle();
     setMenuShow(!isShowMenu);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isShowMenu, isPickerShow]);
-  var moreColorsPopoverToggle = useCallback(function () {
+  const moreColorsPopoverToggle = useCallback(() => {
     moreColorsPopoverRef.current.toggle();
     setPickerShow(!isPickerShow);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [moreColorsPopoverRef, isPickerShow]);
-  var onClick = useCallback(function (event) {
+  const onClick = useCallback(event => {
     eventStopPropagation(event);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var onChange = useCallback(function (color) {
-    var validColor = color.hex;
+  const onChange = useCallback(color => {
+    const validColor = color.hex;
     onSetColor(validColor, false);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [disabled]);
-  var validClassName = classnames(className, 'sdoc-color-menu sdoc-menu-with-dropdown', {
+  const validClassName = classnames(className, 'sdoc-color-menu sdoc-menu-with-dropdown', {
     'menu-show': isShowMenu,
     'disabled': disabled,
     'rich-icon-btn d-flex': isRichEditor,
@@ -98,13 +90,13 @@ var ColorMenu = function ColorMenu(_ref) {
     'rich-icon-btn-hover': isRichEditor && !disabled,
     'btn btn-icon btn-secondary btn-active d-flex': !isRichEditor
   });
-  var setLastUsedColor = useCallback(function (event) {
+  const setLastUsedColor = useCallback(event => {
     eventStopPropagation(event);
     onSetColor(lastUsedColor, false);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [recentUsedColors, lastUsedColor, disabled]);
-  var buttonId = "button-".concat(id);
+  const buttonId = "button-".concat(id);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: validClassName,
@@ -146,13 +138,11 @@ var ColorMenu = function ColorMenu(_ref) {
     className: "sdoc-color-no-color-container"
   }, /*#__PURE__*/React.createElement("div", {
     className: "sdoc-color-no-color-content",
-    onClick: function onClick() {
-      return onSetColor(defaultColor);
-    }
+    onClick: () => onSetColor(defaultColor)
   }, defaultColorTip || t('No_color'))), /*#__PURE__*/React.createElement("div", {
     className: "sdoc-color-default-colors-container",
     onClick: setColorProxy
-  }, DEFAULT_COLORS.map(function (color, index) {
+  }, DEFAULT_COLORS.map((color, index) => {
     return /*#__PURE__*/React.createElement(ColorItem, {
       key: "default-color-".concat(index),
       color: color,
@@ -165,7 +155,7 @@ var ColorMenu = function ColorMenu(_ref) {
   }, t('Standard_color')), /*#__PURE__*/React.createElement("div", {
     className: "d-flex",
     onClick: setColorProxy
-  }, STANDARD_COLORS.map(function (color, index) {
+  }, STANDARD_COLORS.map((color, index) => {
     return /*#__PURE__*/React.createElement(ColorItem, {
       key: "standard-color-".concat(index),
       color: color,
@@ -178,7 +168,7 @@ var ColorMenu = function ColorMenu(_ref) {
   }, t('Recently_used')), /*#__PURE__*/React.createElement("div", {
     className: "d-flex",
     onClick: setColorProxy
-  }, recentUsedColors.map(function (color, index) {
+  }, recentUsedColors.map((color, index) => {
     return /*#__PURE__*/React.createElement(ColorItem, {
       key: "standard-color-".concat(index),
       color: {

package/dist/basic-sdk/extension/commons/dropdown-menu-item/index.js

@@ -1,24 +1,25 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import classnames from 'classnames';
 import './index.css';
-var DropdownMenuItem = function DropdownMenuItem(_ref) {
-  var disabled = _ref.disabled,
-    onClick = _ref.onClick,
-    menuConfig = _ref.menuConfig,
-    children = _ref.children,
-    className = _ref.className;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var iconClass = menuConfig.iconClass;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isShowChildren = _useState2[0],
-    setShowChildren = _useState2[1];
+const DropdownMenuItem = _ref => {
+  let {
+    disabled,
+    onClick,
+    menuConfig,
+    children,
+    className
+  } = _ref;
+  const {
+    t
+  } = useTranslation();
+  const {
+    iconClass
+  } = menuConfig;
+  const [isShowChildren, setShowChildren] = useState(false);
 
   // onMount
-  useEffect(function () {
+  useEffect(() => {
     setShowChildren(!isShowChildren);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -28,7 +29,7 @@ var DropdownMenuItem = function DropdownMenuItem(_ref) {
       'sdoc-dropdown-item-with-left-icon': iconClass
     }),
     id: menuConfig.id || '',
-    onClick: disabled ? function () {} : onClick || function () {}
+    onClick: disabled ? () => {} : onClick || (() => {})
   }, /*#__PURE__*/React.createElement("div", {
     className: "sdoc-dropdown-item-content"
   }, iconClass && /*#__PURE__*/React.createElement("i", {

package/dist/basic-sdk/extension/commons/element-popover/index.js

@@ -1,57 +1,39 @@
-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 ReactDOM from 'react-dom';
-var ElementPopover = /*#__PURE__*/function (_React$Component) {
-  _inherits(ElementPopover, _React$Component);
-  var _super = _createSuper(ElementPopover);
-  function ElementPopover(props) {
-    var _this;
-    _classCallCheck(this, ElementPopover);
-    _this = _super.call(this, props);
-    _this.state = {
+class ElementPopover extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
       isMounted: false
     };
-    _this.el = document.createElement('div');
+    this.el = document.createElement('div');
     if (props.className) {
-      _this.el.className = props.className;
+      this.el.className = props.className;
     }
     if (props.style) {
-      _this.el.style = props.style;
+      this.el.style = props.style;
     }
-    return _this;
   }
-  _createClass(ElementPopover, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      document.body.appendChild(this.el);
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      var _this$props = this.props,
-        className = _this$props.className,
-        style = _this$props.style;
-      if (className) {
-        this.el.className = className;
-      }
-      if (style) {
-        this.el.style = style;
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      document.body.removeChild(this.el);
+  componentDidMount() {
+    document.body.appendChild(this.el);
+  }
+  componentDidUpdate() {
+    const {
+      className,
+      style
+    } = this.props;
+    if (className) {
+      this.el.className = className;
     }
-  }, {
-    key: "render",
-    value: function render() {
-      return ReactDOM.createPortal(this.props.children, this.el);
+    if (style) {
+      this.el.style = style;
     }
-  }]);
-  return ElementPopover;
-}(React.Component);
+  }
+  componentWillUnmount() {
+    document.body.removeChild(this.el);
+  }
+  render() {
+    return ReactDOM.createPortal(this.props.children, this.el);
+  }
+}
 export default ElementPopover;