dtable-ui-component 0.2.2 → 0.2.4

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

@@ -11,22 +11,20 @@ var ImagesLazyLoad = /*#__PURE__*/function (_React$Component) {
 
   var _super = _createSuper(ImagesLazyLoad);
 
-  function ImagesLazyLoad(props) {
+  function ImagesLazyLoad(_props) {
     var _this;
 
     _classCallCheck(this, ImagesLazyLoad);
 
-    _this = _super.call(this, props);
+    _this = _super.call(this, _props);
 
     _this.componentDidMount = function () {
-      var images = _this.state.images;
-
-      _this.lazyLoadImages(images);
+      _this.lazyLoadImages(_this.props);
     };
 
     _this.componentWillReceiveProps = function (nextProps) {
       if (nextProps.images.toString() !== _this.props.images.toString()) {
-        _this.lazyLoadImages(nextProps.images);
+        _this.lazyLoadImages(nextProps);
       }
     };
 
@@ -37,29 +35,36 @@ var ImagesLazyLoad = /*#__PURE__*/function (_React$Component) {
       };
     };
 
-    _this.lazyLoadImages = function (images) {
+    _this.lazyLoadImages = function (props) {
+      var images = props.images;
+
       if (!Array.isArray(images) || images.length === 0) {
         return;
       }
 
-      var server = _this.props.server;
-      images.forEach(function (item) {
-        var url = getImageThumbnailUrl(item, server);
-
-        _this.lazyLoadImage(url, function (image) {
-          var _this$state = _this.state,
-              loadedCount = _this$state.loadedCount,
-              loadedImages = _this$state.loadedImages;
-
-          _this.setState({
-            loadedCount: loadedCount + 1,
-            loadedImages: loadedImages.concat(image)
-          });
-        }, function () {
-          var loadedCount = _this.state.loadedCount;
-
-          _this.setState({
-            loadedCount: loadedCount + 1
+      _this.setState({
+        images: images,
+        loadedCount: 0
+      }, function () {
+        var server = _this.props.server;
+        images.forEach(function (item) {
+          var url = getImageThumbnailUrl(item, server);
+
+          _this.lazyLoadImage(url, function (image) {
+            var _this$state = _this.state,
+                loadedCount = _this$state.loadedCount,
+                loadedImages = _this$state.loadedImages;
+
+            _this.setState({
+              loadedCount: loadedCount + 1,
+              loadedImages: loadedImages.concat(image)
+            });
+          }, function () {
+            var loadedCount = _this.state.loadedCount;
+
+            _this.setState({
+              loadedCount: loadedCount + 1
+            });
           });
         });
       });
@@ -95,7 +100,7 @@ var ImagesLazyLoad = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.state = {
-      images: props.images,
+      images: _props.images,
       loadedImages: [],
       loadedCount: 0
     };

package/lib/ImageFormatter/index.js

@@ -136,7 +136,9 @@ var ImageFormatter = /*#__PURE__*/function (_React$Component) {
         downloadImage: this.downloadImage,
         onRotateImage: readOnly ? null : this.onRotateImage,
         readOnly: readOnly,
-        server: server
+        server: server,
+        moveToPrevRowImage: this.props.moveToPrevRowImage,
+        moveToNextRowImage: this.props.moveToNextRowImage
       }));
     }
   }]);

package/lib/ImagePreviewerLightbox/index.js

@@ -13,7 +13,9 @@ function ImagePreviewerLightbox(props) {
       downloadImage = props.downloadImage,
       onRotateImage = props.onRotateImage,
       readOnly = props.readOnly,
-      server = props.server;
+      server = props.server,
+      moveToPrevRowImage = props.moveToPrevRowImage,
+      moveToNextRowImage = props.moveToNextRowImage;
   var imageItemsLength = imageItems.length;
   var URL = imageItems[imageIndex];
   var imageTitle = URL ? decodeURI(URL.slice(URL.lastIndexOf('/') + 1)) : ''; // svg image is vectorgraph and can't rotate, external image can't rotate
@@ -28,6 +30,24 @@ function ImagePreviewerLightbox(props) {
   }, "(", imageIndex + 1, "/", imageItemsLength, ")"));
   var toolbarButtons = [];
 
+  if (moveToPrevRowImage) {
+    toolbarButtons.push( /*#__PURE__*/React.createElement("button", {
+      className: "dtable-font dtable-icon-retract",
+      onClick: function onClick() {
+        moveToPrevRowImage();
+      }
+    }));
+  }
+
+  if (moveToNextRowImage) {
+    toolbarButtons.push( /*#__PURE__*/React.createElement("button", {
+      className: "dtable-font dtable-icon-display",
+      onClick: function onClick() {
+        moveToNextRowImage();
+      }
+    }));
+  }
+
   if (!readOnly && deleteImage) {
     toolbarButtons.push( /*#__PURE__*/React.createElement("button", {
       className: "dtable-font dtable-icon-delete",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "0.0.9",