dtable-ui-component 4.3.6 → 4.3.8

package/lib/ImageFormatter/images-lazy-load.js

@@ -1,125 +1,117 @@
-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 Loading from '../Loading';
 import { getImageThumbnailUrl } from './utils';
-var ImagesLazyLoad = /*#__PURE__*/function (_React$Component) {
-  _inherits(ImagesLazyLoad, _React$Component);
-  var _super = _createSuper(ImagesLazyLoad);
-  function ImagesLazyLoad(_props) {
-    var _this;
-    _classCallCheck(this, ImagesLazyLoad);
-    _this = _super.call(this, _props);
-    _this.componentDidMount = function () {
-      _this.lazyLoadImages(_this.props);
+class ImagesLazyLoad extends React.Component {
+  constructor(_props) {
+    super(_props);
+    this.componentDidMount = () => {
+      this.lazyLoadImages(this.props);
     };
-    _this.UNSAFE_componentWillReceiveProps = function (nextProps) {
-      if (nextProps.images.toString() !== _this.props.images.toString()) {
-        _this.lazyLoadImages(nextProps);
+    this.UNSAFE_componentWillReceiveProps = nextProps => {
+      if (nextProps.images.toString() !== this.props.images.toString()) {
+        this.lazyLoadImages(nextProps);
       }
     };
-    _this.componentWillUnmount = function () {
+    this.componentWillUnmount = () => {
       // prevent async operation
-      _this.setState = function (state, callback) {
+      this.setState = (state, callback) => {
         return;
       };
     };
-    _this.lazyLoadImages = function (props) {
-      var images = props.images;
+    this.lazyLoadImages = props => {
+      const {
+        images
+      } = props;
       if (!Array.isArray(images) || images.length === 0) {
         return;
       }
-      _this.setState({
-        images: images,
+      this.setState({
+        images,
         loadedImages: [],
         loadedCount: 0
-      }, function () {
-        var server = _this.props.server;
-        images.forEach(function (item, index) {
-          var url = getImageThumbnailUrl(item, server);
-          _this.lazyLoadImage(url, function (image) {
-            var _this$state = _this.state,
-              loadedCount = _this$state.loadedCount,
-              loadedImages = _this$state.loadedImages;
-            var newImageList = loadedImages.slice(0);
+      }, () => {
+        let {
+          server
+        } = this.props;
+        images.forEach((item, index) => {
+          let url = getImageThumbnailUrl(item, server);
+          this.lazyLoadImage(url, image => {
+            let {
+              loadedCount,
+              loadedImages
+            } = this.state;
+            let newImageList = loadedImages.slice(0);
             newImageList[index] = image;
-            _this.setState({
+            this.setState({
               loadedCount: loadedCount + 1,
               loadedImages: newImageList
             });
-          }, function () {
-            var loadedCount = _this.state.loadedCount;
-            _this.setState({
+          }, () => {
+            let {
+              loadedCount
+            } = this.state;
+            this.setState({
               loadedCount: loadedCount + 1
             });
           });
         });
       });
     };
-    _this.lazyLoadImage = function (url, resolve, reject) {
+    this.lazyLoadImage = (url, resolve, reject) => {
       if (!url) {
         reject('img path is require');
         return;
       }
-      var image = new Image();
-      image.onload = function () {
+      const image = new Image();
+      image.onload = () => {
         resolve(image);
       };
-      image.onerror = function (e) {
+      image.onerror = e => {
         reject(e);
       };
       image.src = url;
     };
-    _this.onMouseDown = function (event) {
+    this.onMouseDown = event => {
       event.stopPropagation();
     };
-    _this.onImageClick = function (event, index) {
+    this.onImageClick = (event, index) => {
       event.stopPropagation();
-      _this.props.onImageClick(index);
+      this.props.onImageClick(index);
     };
-    _this.state = {
+    this.state = {
       images: _props.images,
       loadedImages: [],
       loadedCount: 0
     };
-    return _this;
   }
-  _createClass(ImagesLazyLoad, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$state2 = this.state,
-        images = _this$state2.images,
-        loadedImages = _this$state2.loadedImages,
-        loadedCount = _this$state2.loadedCount;
-      if (!Array.isArray(images) || images.length === 0) {
-        return '';
-      }
-      if (images.length > loadedCount) {
-        var style = {
-          marginLeft: '4px'
-        };
-        return /*#__PURE__*/React.createElement("div", {
-          style: style,
-          className: "d-flex align-items-center"
-        }, /*#__PURE__*/React.createElement(Loading, null));
-      }
-      return loadedImages.map(function (image, index) {
-        return /*#__PURE__*/React.createElement("img", {
-          key: index,
-          className: "image-item",
-          src: image.src,
-          onMouseDown: _this2.onMouseDown,
-          onClick: function onClick(event) {
-            return _this2.onImageClick(event, index);
-          },
-          alt: ""
-        });
-      });
+  render() {
+    const {
+      images,
+      loadedImages,
+      loadedCount
+    } = this.state;
+    if (!Array.isArray(images) || images.length === 0) {
+      return '';
     }
-  }]);
-  return ImagesLazyLoad;
-}(React.Component);
+    if (images.length > loadedCount) {
+      let style = {
+        marginLeft: '4px'
+      };
+      return /*#__PURE__*/React.createElement("div", {
+        style: style,
+        className: "d-flex align-items-center"
+      }, /*#__PURE__*/React.createElement(Loading, null));
+    }
+    return loadedImages.map((image, index) => {
+      return /*#__PURE__*/React.createElement("img", {
+        key: index,
+        className: "image-item",
+        src: image.src,
+        onMouseDown: this.onMouseDown,
+        onClick: event => this.onImageClick(event, index),
+        alt: ""
+      });
+    });
+  }
+}
 export default ImagesLazyLoad;

package/lib/ImageFormatter/index.js

@@ -1,128 +1,117 @@
-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 classnames from 'classnames';
 import ImagesLazyLoad from './images-lazy-load';
 import { getImageThumbnailUrl } from './utils';
 import ImagePreviewerLightbox from '../ImagePreviewerLightbox';
 import './index.css';
-var ImageFormatter = /*#__PURE__*/function (_React$Component) {
-  _inherits(ImageFormatter, _React$Component);
-  var _super = _createSuper(ImageFormatter);
-  function ImageFormatter(props) {
-    var _this;
-    _classCallCheck(this, ImageFormatter);
-    _this = _super.call(this, props);
-    _this.onImageClick = function (index) {
-      if (!_this.props.isSupportPreview) return;
-      _this.setState({
+class ImageFormatter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onImageClick = index => {
+      if (!this.props.isSupportPreview) return;
+      this.setState({
         isPreviewImage: true,
         previewImageIndex: index
       });
     };
-    _this.closeImagePopup = function () {
-      if (!_this.props.isSupportPreview) return;
-      if (_this.props.onCloseCallback) {
-        _this.props.onCloseCallback();
+    this.closeImagePopup = () => {
+      if (!this.props.isSupportPreview) return;
+      if (this.props.onCloseCallback) {
+        this.props.onCloseCallback();
       }
-      _this.setState({
+      this.setState({
         isPreviewImage: false,
         previewImageIndex: -1
       });
     };
-    _this.movePrev = function () {
-      var images = _this.props.value;
-      _this.setState(function (prevState) {
-        return {
-          previewImageIndex: (prevState.previewImageIndex + images.length - 1) % images.length
-        };
-      });
+    this.movePrev = () => {
+      let images = this.props.value;
+      this.setState(prevState => ({
+        previewImageIndex: (prevState.previewImageIndex + images.length - 1) % images.length
+      }));
     };
-    _this.moveNext = function () {
-      var images = _this.props.value;
-      _this.setState(function (prevState) {
-        return {
-          previewImageIndex: (prevState.previewImageIndex + 1) % images.length
-        };
-      });
+    this.moveNext = () => {
+      let images = this.props.value;
+      this.setState(prevState => ({
+        previewImageIndex: (prevState.previewImageIndex + 1) % images.length
+      }));
     };
-    _this.downloadImage = function (imageItemUrl) {
-      if (!_this.props.downloadImage) return;
-      _this.props.downloadImage(imageItemUrl);
+    this.downloadImage = imageItemUrl => {
+      if (!this.props.downloadImage) return;
+      this.props.downloadImage(imageItemUrl);
     };
-    _this.deleteImage = function (index) {
-      var readOnly = _this.props.readOnly;
+    this.deleteImage = index => {
+      const {
+        readOnly
+      } = this.props;
       if (readOnly) return;
-      if (!_this.props.deleteImage) return;
-      _this.props.deleteImage(index);
+      if (!this.props.deleteImage) return;
+      this.props.deleteImage(index);
     };
-    _this.onRotateImage = function (index, degree) {
-      var readOnly = _this.props.readOnly;
+    this.onRotateImage = (index, degree) => {
+      const {
+        readOnly
+      } = this.props;
       if (readOnly) return;
-      if (!_this.props.rotateImage) return;
-      _this.props.rotateImage(index, degree);
+      if (!this.props.rotateImage) return;
+      this.props.rotateImage(index, degree);
     };
-    _this.state = {
+    this.state = {
       isPreviewImage: false,
       previewImageIndex: -1
     };
-    return _this;
   }
-  _createClass(ImageFormatter, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        isSample = _this$props.isSample,
-        value = _this$props.value,
-        server = _this$props.server,
-        containerClassName = _this$props.containerClassName,
-        readOnly = _this$props.readOnly;
-      var className = classnames('dtable-ui cell-formatter-container image-formatter', containerClassName);
-      var _this$state = this.state,
-        isPreviewImage = _this$state.isPreviewImage,
-        previewImageIndex = _this$state.previewImageIndex;
-      if (!Array.isArray(value) || value.length === 0) {
-        return null;
-      }
-      if (isSample) {
-        var item = value[0];
-        var url = getImageThumbnailUrl(item, server);
-        return /*#__PURE__*/React.createElement("div", {
-          className: className
-        }, /*#__PURE__*/React.createElement("img", {
-          className: "image-item",
-          src: url,
-          alt: ""
-        }), value.length !== 1 && /*#__PURE__*/React.createElement("span", {
-          className: "image-item-count"
-        }, "+".concat(value.length)));
-      }
-      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+  render() {
+    const {
+      isSample,
+      value,
+      server,
+      containerClassName,
+      readOnly
+    } = this.props;
+    const className = classnames('dtable-ui cell-formatter-container image-formatter', containerClassName);
+    const {
+      isPreviewImage,
+      previewImageIndex
+    } = this.state;
+    if (!Array.isArray(value) || value.length === 0) {
+      return null;
+    }
+    if (isSample) {
+      let item = value[0];
+      let url = getImageThumbnailUrl(item, server);
+      return /*#__PURE__*/React.createElement("div", {
         className: className
-      }, /*#__PURE__*/React.createElement(ImagesLazyLoad, {
-        images: value,
-        server: server,
-        onImageClick: this.onImageClick
-      })), isPreviewImage && /*#__PURE__*/React.createElement(ImagePreviewerLightbox, {
-        imageItems: value,
-        imageIndex: previewImageIndex,
-        closeImagePopup: this.closeImagePopup,
-        moveToPrevImage: this.movePrev,
-        moveToNextImage: this.moveNext,
-        deleteImage: readOnly ? null : this.deleteImage,
-        downloadImage: this.downloadImage,
-        onRotateImage: readOnly ? null : this.onRotateImage,
-        readOnly: readOnly,
-        server: server,
-        moveToPrevRowImage: this.props.moveToPrevRowImage,
-        moveToNextRowImage: this.props.moveToNextRowImage
-      }));
+      }, /*#__PURE__*/React.createElement("img", {
+        className: "image-item",
+        src: url,
+        alt: ""
+      }), value.length !== 1 && /*#__PURE__*/React.createElement("span", {
+        className: "image-item-count"
+      }, "+".concat(value.length)));
     }
-  }]);
-  return ImageFormatter;
-}(React.Component);
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: className
+    }, /*#__PURE__*/React.createElement(ImagesLazyLoad, {
+      images: value,
+      server: server,
+      onImageClick: this.onImageClick
+    })), isPreviewImage && /*#__PURE__*/React.createElement(ImagePreviewerLightbox, {
+      imageItems: value,
+      imageIndex: previewImageIndex,
+      closeImagePopup: this.closeImagePopup,
+      moveToPrevImage: this.movePrev,
+      moveToNextImage: this.moveNext,
+      deleteImage: readOnly ? null : this.deleteImage,
+      downloadImage: this.downloadImage,
+      onRotateImage: readOnly ? null : this.onRotateImage,
+      readOnly: readOnly,
+      server: server,
+      moveToPrevRowImage: this.props.moveToPrevRowImage,
+      moveToNextRowImage: this.props.moveToNextRowImage
+    }));
+  }
+}
 ImageFormatter.defaultProps = {
   isSample: false,
   isSupportPreview: false,

package/lib/ImageFormatter/utils.js

@@ -1,4 +1,4 @@
-export var getImageThumbnailUrl = function getImageThumbnailUrl(url, server) {
+export const getImageThumbnailUrl = (url, server) => {
   if (server && url.indexOf(server) > -1) {
     return url.replace('/workspace', '/thumbnail/workspace') + '?size=256';
   }

package/lib/ImagePreviewerLightbox/index.js

@@ -4,22 +4,24 @@ import Lightbox from '@seafile/react-image-lightbox';
 import { checkSVGImage, isInternalImg } from './utils';
 import '@seafile/react-image-lightbox/style.css';
 function ImagePreviewerLightbox(props) {
-  var imageItems = props.imageItems,
-    imageIndex = props.imageIndex,
-    deleteImage = props.deleteImage,
-    downloadImage = props.downloadImage,
-    onRotateImage = props.onRotateImage,
-    readOnly = props.readOnly,
-    server = props.server,
-    moveToPrevRowImage = props.moveToPrevRowImage,
-    moveToNextRowImage = props.moveToNextRowImage,
-    className = props.className;
-  var imageItemsLength = imageItems.length;
-  var URL = imageItems[imageIndex];
-  var imageTitle = URL ? decodeURI(URL.slice(URL.lastIndexOf('/') + 1)) : '';
+  const {
+    imageItems,
+    imageIndex,
+    deleteImage,
+    downloadImage,
+    onRotateImage,
+    readOnly,
+    server,
+    moveToPrevRowImage,
+    moveToNextRowImage,
+    className
+  } = props;
+  const imageItemsLength = imageItems.length;
+  const URL = imageItems[imageIndex];
+  const imageTitle = URL ? decodeURI(URL.slice(URL.lastIndexOf('/') + 1)) : '';
   // svg image is vectorgraph and can't rotate, external image can't rotate
-  var canRotateImage = onRotateImage && !readOnly && !checkSVGImage(URL) && isInternalImg(URL, server);
-  var imageTitleEl = /*#__PURE__*/React.createElement("span", {
+  const canRotateImage = onRotateImage && !readOnly && !checkSVGImage(URL) && isInternalImg(URL, server);
+  const imageTitleEl = /*#__PURE__*/React.createElement("span", {
     className: "d-flex"
   }, /*#__PURE__*/React.createElement("span", {
     className: "text-truncate"
@@ -37,13 +39,13 @@ function ImagePreviewerLightbox(props) {
     onMoveNextRequest: props.moveToNextImage,
     onClickMoveUp: moveToPrevRowImage,
     onClickMoveDown: moveToNextRowImage,
-    onRotateImage: canRotateImage ? function (deg) {
+    onRotateImage: canRotateImage ? deg => {
       onRotateImage(imageIndex, deg);
     } : null,
-    onClickDelete: !readOnly && deleteImage ? function () {
+    onClickDelete: !readOnly && deleteImage ? () => {
       deleteImage(imageIndex, 'previewer');
     } : null,
-    onClickDownload: downloadImage ? function () {
+    onClickDownload: downloadImage ? () => {
       downloadImage(URL);
     } : null
   });

package/lib/ImagePreviewerLightbox/utils.js

@@ -1,9 +1,9 @@
-export var isInternalImg = function isInternalImg(url, server) {
+export const isInternalImg = (url, server) => {
   if (!url) return;
-  var currentServer = server || window.dtable && window.dtable.server;
+  const currentServer = server || window.dtable && window.dtable.server;
   return url.indexOf(currentServer) > -1;
 };
-export var checkSVGImage = function checkSVGImage(url) {
+export const checkSVGImage = url => {
   if (!url) return false;
   return url.substr(-4).toLowerCase() === '.svg';
 };

package/lib/LastModifierFormatter/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 from 'react';
 import classnames from 'classnames';
 import CollaboratorItem from '../CollaboratorItem';
@@ -12,27 +8,19 @@ import './index.css';
 // 2 value is exist, but can't find in collaborators
 // 3 value is exist, typeof value is a string
 // 4 value is exist, typeof value is array
-var LastModifierFormatter = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(LastModifierFormatter, _React$PureComponent);
-  var _super = _createSuper(LastModifierFormatter);
-  function LastModifierFormatter() {
-    var _this;
-    _classCallCheck(this, LastModifierFormatter);
-    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.getCollaborators = function () {
-      var _this$props = _this.props,
-        value = _this$props.value,
-        collaborators = _this$props.collaborators;
+class LastModifierFormatter extends React.PureComponent {
+  constructor() {
+    super(...arguments);
+    this.getCollaborators = () => {
+      let {
+        value,
+        collaborators
+      } = this.props;
       if (!Array.isArray(value)) {
         value = [value];
       }
-      return value.map(function (item, index) {
-        var collaborator = collaborators.find(function (collaborator) {
-          return collaborator.email === item;
-        });
+      return value.map((item, index) => {
+        let collaborator = collaborators.find(collaborator => collaborator.email === item);
         // the collaborator can be not exist, because the row modified by third app
         if (!collaborator) {
           collaborator = {
@@ -46,28 +34,24 @@ var LastModifierFormatter = /*#__PURE__*/function (_React$PureComponent) {
         });
       });
     };
-    return _this;
   }
-  _createClass(LastModifierFormatter, [{
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-        containerClassName = _this$props2.containerClassName,
-        value = _this$props2.value;
-      var classname = classnames('dtable-ui cell-formatter-container last-modified-formatter', containerClassName);
-      if (!value || Array.isArray(value) && value.length === 0) {
-        return /*#__PURE__*/React.createElement("div", {
-          className: classname
-        });
-      }
-      var collaborators = this.getCollaborators();
+  render() {
+    const {
+      containerClassName,
+      value
+    } = this.props;
+    const classname = classnames('dtable-ui cell-formatter-container last-modified-formatter', containerClassName);
+    if (!value || Array.isArray(value) && value.length === 0) {
       return /*#__PURE__*/React.createElement("div", {
         className: classname
-      }, collaborators);
+      });
     }
-  }]);
-  return LastModifierFormatter;
-}(React.PureComponent);
+    const collaborators = this.getCollaborators();
+    return /*#__PURE__*/React.createElement("div", {
+      className: classname
+    }, collaborators);
+  }
+}
 LastModifierFormatter.defaultProps = {
   value: ''
 };