dtable-ui-component 4.3.6 → 4.3.8

package/lib/SimpleLongTextFormatter/index.js

@@ -1,22 +1,14 @@
-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 getPreviewContent from './normalize-long-text-value';
 import LongTextPreview from './widgets/LongTextPreview';
 import ModalPortal from '../ModalPortal';
 import './index.css';
-var SimpleLongTextFormatter = /*#__PURE__*/function (_React$Component) {
-  _inherits(SimpleLongTextFormatter, _React$Component);
-  var _super = _createSuper(SimpleLongTextFormatter);
-  function SimpleLongTextFormatter(props) {
-    var _this;
-    _classCallCheck(this, SimpleLongTextFormatter);
-    _this = _super.call(this, props);
-    _this.renderLinks = function (value) {
-      var links = value.links;
+class SimpleLongTextFormatter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.renderLinks = value => {
+      const links = value.links;
       if (!Array.isArray(links) || links.length === 0) return null;
       return /*#__PURE__*/React.createElement("span", {
         className: "long-text-links"
@@ -24,8 +16,8 @@ var SimpleLongTextFormatter = /*#__PURE__*/function (_React$Component) {
         className: "dtable-font dtable-icon-url"
       }), links.length);
     };
-    _this.renderCheckList = function (value) {
-      var checkList = value.checklist;
+    this.renderCheckList = value => {
+      const checkList = value.checklist;
       if (!checkList || checkList.total === 0) return null;
       return /*#__PURE__*/React.createElement("span", {
         className: "long-text-check-list"
@@ -33,8 +25,8 @@ var SimpleLongTextFormatter = /*#__PURE__*/function (_React$Component) {
         className: "dtable-font dtable-icon-check-square-solid ".concat(checkList.completed === checkList.total ? 'long-text-check-list-completed' : '')
       }), "".concat(checkList.completed, "/").concat(checkList.total));
     };
-    _this.renderImages = function (value) {
-      var images = value.images;
+    this.renderImages = value => {
+      const images = value.images;
       if (!Array.isArray(images) || images.length === 0) return null;
       return /*#__PURE__*/React.createElement("span", {
         className: "long-text-images"
@@ -45,15 +37,17 @@ var SimpleLongTextFormatter = /*#__PURE__*/function (_React$Component) {
         className: "image-number"
       }, images.length > 1 ? '+' + images.length : null));
     };
-    _this.renderContent = function (value) {
+    this.renderContent = value => {
       return /*#__PURE__*/React.createElement("span", {
         className: "long-text-content"
       }, value.preview);
     };
-    _this.translateValue = function () {
-      var value = _this.props.value;
+    this.translateValue = () => {
+      const {
+        value
+      } = this.props;
       if (!value) return {};
-      var valueType = Object.prototype.toString.call(value);
+      const valueType = Object.prototype.toString.call(value);
       if (valueType === '[object String]') {
         return getPreviewContent(value);
       }
@@ -62,70 +56,64 @@ var SimpleLongTextFormatter = /*#__PURE__*/function (_React$Component) {
       }
       return {};
     };
-    _this.clearTimer = function () {
-      if (_this.timer) {
-        clearTimeout(_this.timer);
-        _this.timer = null;
+    this.clearTimer = () => {
+      if (this.timer) {
+        clearTimeout(this.timer);
+        this.timer = null;
       }
     };
-    _this.onMouseEnter = function () {
+    this.onMouseEnter = () => {
       // in case that there is no `modal-wrapper`
       if (!document.getElementById('modal-wrapper')) {
         return;
       }
-      _this.clearTimer();
-      if (_this.props.value) {
-        _this.timer = setTimeout(function () {
-          var style = _this.ref.getBoundingClientRect();
-          _this.formatterStyle = style;
-          _this.setState({
+      this.clearTimer();
+      if (this.props.value) {
+        this.timer = setTimeout(() => {
+          const style = this.ref.getBoundingClientRect();
+          this.formatterStyle = style;
+          this.setState({
             isPreview: true
           });
         }, 2000);
       }
     };
-    _this.onMouseLeave = function () {
-      _this.clearTimer();
-      if (_this.state.isPreview) {
-        _this.setState({
+    this.onMouseLeave = () => {
+      this.clearTimer();
+      if (this.state.isPreview) {
+        this.setState({
           isPreview: false
         });
       }
     };
-    _this.formatterStyle = null;
-    _this.state = {
+    this.formatterStyle = null;
+    this.state = {
       isPreview: false
     };
-    return _this;
   }
-  _createClass(SimpleLongTextFormatter, [{
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.clearTimer();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var isPreview = this.state.isPreview;
-      var containerClassName = this.props.containerClassName;
-      var className = classnames('dtable-ui cell-formatter-container long-text-formatter', containerClassName);
-      var value = this.translateValue();
-      return /*#__PURE__*/React.createElement("div", {
-        className: className,
-        onMouseEnter: this.onMouseEnter,
-        onMouseLeave: this.onMouseLeave,
-        ref: function ref(_ref) {
-          return _this2.ref = _ref;
-        }
-      }, this.renderLinks(value), this.renderCheckList(value), this.renderImages(value), this.renderContent(value), isPreview && /*#__PURE__*/React.createElement(ModalPortal, null, /*#__PURE__*/React.createElement(LongTextPreview, {
-        value: value,
-        formatterStyle: this.formatterStyle
-      })));
-    }
-  }]);
-  return SimpleLongTextFormatter;
-}(React.Component);
+  componentWillUnmount() {
+    this.clearTimer();
+  }
+  render() {
+    const {
+      isPreview
+    } = this.state;
+    const {
+      containerClassName
+    } = this.props;
+    const className = classnames('dtable-ui cell-formatter-container long-text-formatter', containerClassName);
+    const value = this.translateValue();
+    return /*#__PURE__*/React.createElement("div", {
+      className: className,
+      onMouseEnter: this.onMouseEnter,
+      onMouseLeave: this.onMouseLeave,
+      ref: ref => this.ref = ref
+    }, this.renderLinks(value), this.renderCheckList(value), this.renderImages(value), this.renderContent(value), isPreview && /*#__PURE__*/React.createElement(ModalPortal, null, /*#__PURE__*/React.createElement(LongTextPreview, {
+      value: value,
+      formatterStyle: this.formatterStyle
+    })));
+  }
+}
 SimpleLongTextFormatter.defaultProps = {
   value: {
     text: '',

package/lib/SimpleLongTextFormatter/normalize-long-text-value.js

@@ -1,19 +1,19 @@
-var hrefReg = /\[.+\]\(\S+\)|<img( width=[\\|/]?"(\d)+[\\|/|]?")? src="(\S+)" .?\/>|!\[\]\(\S+\)|!\[\]\((\S+)\)|<\S+>/g;
-var imageReg1 = /^<img( width=[\\|/]?"(\d)+[\\|/|]?")? src="(\S+)" .?\/>/;
-var imageReg2 = /^!\[\]\((\S+)\)/;
-var linkReg1 = /^\[.+\]\(\S+\)/;
-var linkReg2 = /^<\S+>$/;
-var getLinks = function getLinks(hrefList) {
-  var hrefObj = {
+const hrefReg = /\[.+\]\(\S+\)|<img( width=[\\|/]?"(\d)+[\\|/|]?")? src="(\S+)" .?\/>|!\[\]\(\S+\)|!\[\]\((\S+)\)|<\S+>/g;
+const imageReg1 = /^<img( width=[\\|/]?"(\d)+[\\|/|]?")? src="(\S+)" .?\/>/;
+const imageReg2 = /^!\[\]\((\S+)\)/;
+const linkReg1 = /^\[.+\]\(\S+\)/;
+const linkReg2 = /^<\S+>$/;
+const getLinks = hrefList => {
+  const hrefObj = {
     links: [],
     images: []
   };
-  hrefList.forEach(function (href) {
+  hrefList.forEach(href => {
     if (href.search(linkReg1) >= 0 || href.search(linkReg2) >= 0) {
       hrefObj.links.push(href);
     } else {
-      var imageSrcList = href.match(imageReg1);
-      var imageSrcList1 = href.match(imageReg2);
+      let imageSrcList = href.match(imageReg1);
+      let imageSrcList1 = href.match(imageReg2);
       if (imageSrcList) {
         hrefObj.images.push(imageSrcList[3]);
       } else if (imageSrcList1) {
@@ -23,10 +23,10 @@ var getLinks = function getLinks(hrefList) {
   });
   return hrefObj;
 };
-var getPreviewContent = function getPreviewContent(markdownContent) {
-  var preview = '';
-  var newMarkdownContent = markdownContent.replace(hrefReg, '');
-  for (var index = 0; index < newMarkdownContent.length; index++) {
+const getPreviewContent = markdownContent => {
+  let preview = '';
+  let newMarkdownContent = markdownContent.replace(hrefReg, '');
+  for (let index = 0; index < newMarkdownContent.length; index++) {
     if (newMarkdownContent[index] === '#') {
       continue;
     } else if (newMarkdownContent[index] === '\n') {
@@ -38,19 +38,20 @@ var getPreviewContent = function getPreviewContent(markdownContent) {
       break;
     }
   }
-  var hrefList = markdownContent.match(hrefReg);
+  const hrefList = markdownContent.match(hrefReg);
   if (hrefList) {
-    var _getLinks = getLinks(hrefList),
-      images = _getLinks.images,
-      links = _getLinks.links;
+    const {
+      images,
+      links
+    } = getLinks(hrefList);
     return {
-      preview: preview,
-      images: images,
-      links: links
+      preview,
+      images,
+      links
     };
   }
   return {
-    preview: preview,
+    preview,
     images: [],
     links: [],
     text: markdownContent

package/lib/SimpleLongTextFormatter/widgets/LongTextPreview.js

@@ -1,73 +1,58 @@
-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 DtableMarkdownViewer from './dtable-markdown-viewer';
 import './longTextEditor.css';
-var LongTextPreview = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(LongTextPreview, _React$PureComponent);
-  var _super = _createSuper(LongTextPreview);
-  function LongTextPreview(props) {
-    var _this;
-    _classCallCheck(this, LongTextPreview);
-    _this = _super.call(this, props);
-    _this.getStyle = function () {
-      var formatterStyle = _this.props.formatterStyle;
-      var left = formatterStyle.left,
-        top = formatterStyle.top;
-      var width = 520;
-      var height = _this.state.height;
-      var padding = 6;
+class LongTextPreview extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.getStyle = () => {
+      let {
+        formatterStyle
+      } = this.props;
+      let {
+        left,
+        top
+      } = formatterStyle;
+      const width = 520;
+      const height = this.state.height;
+      const padding = 6;
       left = left - width > 0 ? left - width - 12 : 0;
       top = top - padding;
       if (top + height > window.innerHeight) {
         top = top - height > 0 ? top - height : 0;
       }
       return {
-        left: left,
-        top: top,
-        opacity: _this.state.opacity
+        left,
+        top,
+        opacity: this.state.opacity
       };
     };
-    _this.state = {
+    this.state = {
       height: 450,
       opacity: 0
     };
-    return _this;
   }
-  _createClass(LongTextPreview, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-      setTimeout(function () {
-        if (!_this2.ref) return;
-        var domHeight = _this2.ref.offsetHeight;
-        _this2.setState({
-          height: domHeight,
-          opacity: 1
-        });
-      }, 0);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
-      var markdownContent = this.props.value ? this.props.value.text : '';
-      return /*#__PURE__*/React.createElement("div", {
-        className: "longtext-modal-dialog longtext-preview",
-        style: this.getStyle(),
-        ref: function ref(_ref) {
-          return _this3.ref = _ref;
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "longtext-container longtext-container-scroll"
-      }, /*#__PURE__*/React.createElement(DtableMarkdownViewer, {
-        markdownContent: markdownContent,
-        showTOC: false
-      })));
-    }
-  }]);
-  return LongTextPreview;
-}(React.PureComponent);
+  componentDidMount() {
+    setTimeout(() => {
+      if (!this.ref) return;
+      const domHeight = this.ref.offsetHeight;
+      this.setState({
+        height: domHeight,
+        opacity: 1
+      });
+    }, 0);
+  }
+  render() {
+    let markdownContent = this.props.value ? this.props.value.text : '';
+    return /*#__PURE__*/React.createElement("div", {
+      className: "longtext-modal-dialog longtext-preview",
+      style: this.getStyle(),
+      ref: ref => this.ref = ref
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "longtext-container longtext-container-scroll"
+    }, /*#__PURE__*/React.createElement(DtableMarkdownViewer, {
+      markdownContent: markdownContent,
+      showTOC: false
+    })));
+  }
+}
 export default LongTextPreview;

package/lib/SimpleLongTextFormatter/widgets/dtable-markdown-viewer.js

@@ -1,67 +1,52 @@
-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 { MarkdownViewer, processor } from '@seafile/seafile-editor';
 // Windows old Wechat (3.0 or earlier) inner core is chrome 53 and don't support ECMA6, can't use seafile-editor markdownViewer
 // Windows new Wechat (lastest version 3.3.5) support seafile-editor markdownViewer
 // so use dangerouslySetInnerHTML to preview
-var DtableMarkdownViewer = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(DtableMarkdownViewer, _React$PureComponent);
-  var _super = _createSuper(DtableMarkdownViewer);
-  function DtableMarkdownViewer(props) {
-    var _this;
-    _classCallCheck(this, DtableMarkdownViewer);
-    _this = _super.call(this, props);
-    _this.checkBrowser = function () {
+class DtableMarkdownViewer extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.checkBrowser = () => {
       if (window.chrome) {
-        var appVersion = navigator.appVersion;
-        var appVersionList = appVersion.split(' ');
-        var index = appVersionList.findIndex(function (version) {
-          return version.indexOf('Chrome') >= 0;
-        });
+        const appVersion = navigator.appVersion;
+        const appVersionList = appVersion.split(' ');
+        const index = appVersionList.findIndex(version => version.indexOf('Chrome') >= 0);
         if (index === -1) return;
-        var chromeVersion = appVersionList[index];
+        let chromeVersion = appVersionList[index];
         chromeVersion = parseInt(chromeVersion.slice(chromeVersion.indexOf('/') + 1));
         if (chromeVersion === 53 && navigator.appVersion && navigator.appVersion.includes('WindowsWechat')) {
-          _this.convertMarkdown(_this.props.markdownContent);
-          _this.isWindowsWechat = true;
+          this.convertMarkdown(this.props.markdownContent);
+          this.isWindowsWechat = true;
         }
       }
     };
-    _this.convertMarkdown = function (mdFile) {
-      processor.process(mdFile).then(function (result) {
-        var innerHtml = String(result).replace(/<a /ig, '<a target="_blank" tabindex="-1"');
-        _this.setState({
-          innerHtml: innerHtml
+    this.convertMarkdown = mdFile => {
+      processor.process(mdFile).then(result => {
+        let innerHtml = String(result).replace(/<a /ig, '<a target="_blank" tabindex="-1"');
+        this.setState({
+          innerHtml
         });
       });
     };
-    _this.state = {
+    this.state = {
       innerHtml: null
     };
-    _this.isWindowsWechat = false;
-    _this.checkBrowser();
-    return _this;
+    this.isWindowsWechat = false;
+    this.checkBrowser();
   }
-  _createClass(DtableMarkdownViewer, [{
-    key: "render",
-    value: function render() {
-      if (this.isWindowsWechat) {
-        return /*#__PURE__*/React.createElement("div", {
-          className: "long-text-container article",
-          dangerouslySetInnerHTML: {
-            __html: this.state.innerHtml
-          }
-        });
-      }
-      return /*#__PURE__*/React.createElement(MarkdownViewer, {
-        markdownContent: this.props.markdownContent,
-        showTOC: this.props.showTOC
+  render() {
+    if (this.isWindowsWechat) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "long-text-container article",
+        dangerouslySetInnerHTML: {
+          __html: this.state.innerHtml
+        }
       });
     }
-  }]);
-  return DtableMarkdownViewer;
-}(React.PureComponent);
+    return /*#__PURE__*/React.createElement(MarkdownViewer, {
+      markdownContent: this.props.markdownContent,
+      showTOC: this.props.showTOC
+    });
+  }
+}
 export default DtableMarkdownViewer;