dtable-ui-component 0.2.12 → 0.3.0-beta

package/lib/DigitalSignFormatter/index.css

@@ -0,0 +1,17 @@
+@import url('../css/cell-formatter.css');
+
+.dtable-ui.digital-sign-formatter {
+  display: flex;
+  align-items: center;
+}
+
+.dtable-ui.digital-sign-formatter .image-item {
+  height: 100%;
+  margin-right: 4px;
+  border: 1px solid #f0f0f0;
+  background-color: #fff;
+}
+
+.dtable-ui.digital-sign-formatter .image-item:hover {
+  border: 1px solid #c9c9c9;
+}

package/lib/DigitalSignFormatter/index.js

@@ -0,0 +1,108 @@
+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, { Component } from 'react';
+import cn from 'astro-classname';
+import ImagesLazyLoad from '../ImageFormatter/images-lazy-load';
+import ImagePreviewerLightbox from '../ImagePreviewerLightbox';
+import { DigitalSignUtils } from './utils';
+import { downloadFile } from '../utils/utils';
+import './index.css';
+
+var DigitalSignFormatter = /*#__PURE__*/function (_Component) {
+  _inherits(DigitalSignFormatter, _Component);
+
+  var _super = _createSuper(DigitalSignFormatter);
+
+  function DigitalSignFormatter(props) {
+    var _this;
+
+    _classCallCheck(this, DigitalSignFormatter);
+
+    _this = _super.call(this, props);
+
+    _this.getSignImages = function () {
+      var value = _this.props.value;
+      return [DigitalSignUtils.getSignImageUrl(value)].filter(Boolean);
+    };
+
+    _this.onClickSignImage = function (index) {
+      if (!_this.props.isSupportPreview) return;
+
+      _this.setState({
+        isPreviewSignImage: true,
+        largeSignImageIndex: index
+      });
+    };
+
+    _this.hideLargeSignImage = function () {
+      if (!_this.props.isSupportPreview) return;
+
+      if (_this.props.onCloseCallback) {
+        _this.props.onCloseCallback();
+      }
+
+      _this.setState({
+        isPreviewSignImage: false,
+        largeSignImageIndex: -1
+      });
+    };
+
+    _this.downloadImage = function (url) {
+      var availableUrl = url;
+      var rotateIndex = availableUrl.indexOf('?a=');
+
+      if (rotateIndex > -1) {
+        availableUrl = availableUrl.slice(0, rotateIndex);
+      }
+
+      var urlSuffix = availableUrl.indexOf('?dl=1');
+      var downloadUrl = urlSuffix !== -1 ? availableUrl : availableUrl + '?dl=1';
+      downloadFile(downloadUrl);
+    };
+
+    _this.state = {
+      isPreviewSignImage: false,
+      largeSignImageIndex: -1
+    };
+    return _this;
+  }
+
+  _createClass(DigitalSignFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          value = _this$props.value,
+          server = _this$props.server,
+          containerClassName = _this$props.containerClassName,
+          readOnly = _this$props.readOnly;
+      var className = cn('dtable-ui cell-formatter-container digital-sign-formatter', containerClassName);
+      var signImages = this.getSignImages();
+      if (signImages.length === 0) return null;
+      var _this$state = this.state,
+          isPreviewSignImage = _this$state.isPreviewSignImage,
+          largeSignImageIndex = _this$state.largeSignImageIndex;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: className
+      }, /*#__PURE__*/React.createElement(ImagesLazyLoad, {
+        images: value,
+        server: server,
+        onImageClick: this.onClickSignImage
+      })), isPreviewSignImage && /*#__PURE__*/React.createElement(ImagePreviewerLightbox, {
+        readOnly: readOnly,
+        server: server,
+        imageItems: signImages,
+        imageIndex: largeSignImageIndex,
+        closeImagePopup: this.hideLargeSignImage,
+        downloadImage: this.downloadImage,
+        moveToPrevImage: function moveToPrevImage() {},
+        moveToNextImage: function moveToNextImage() {}
+      }));
+    }
+  }]);
+
+  return DigitalSignFormatter;
+}(Component);
+
+export default DigitalSignFormatter;

package/lib/DigitalSignFormatter/utils.js

@@ -0,0 +1,34 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+dayjs.extend(utc);
+export var getDigitalSignImageUrl = function getDigitalSignImageUrl(cellValue) {
+  return cellValue && cellValue.sign_image_url || '';
+};
+export var DigitalSignUtils = /*#__PURE__*/function () {
+  function DigitalSignUtils() {
+    _classCallCheck(this, DigitalSignUtils);
+  }
+
+  _createClass(DigitalSignUtils, null, [{
+    key: "getSignImageUrl",
+    value: function getSignImageUrl(sign) {
+      return getDigitalSignImageUrl(sign);
+    }
+  }, {
+    key: "getUpdatedSign",
+    value: function getUpdatedSign(_ref) {
+      var username = _ref.username,
+          sign_image_url = _ref.sign_image_url;
+      var time = dayjs().utc().format('YYYY-MM-DDTHH:mm:ss.SSSZ');
+      return {
+        username: username,
+        sign_image_url: sign_image_url,
+        sign_time: time
+      };
+    }
+  }]);
+
+  return DigitalSignUtils;
+}();

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

@@ -48,17 +48,19 @@ var ImagesLazyLoad = /*#__PURE__*/function (_React$Component) {
         loadedCount: 0
       }, function () {
         var server = _this.props.server;
-        images.forEach(function (item) {
+        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);
+            newImageList[index] = image;
 
             _this.setState({
               loadedCount: loadedCount + 1,
-              loadedImages: loadedImages.concat(image)
+              loadedImages: newImageList
             });
           }, function () {
             var loadedCount = _this.state.loadedCount;

package/lib/index.js

@@ -32,7 +32,8 @@ export { default as RateFormatter } from './RateFormatter';
 export { default as ButtonFormatter } from './ButtonFormatter';
 export { default as ImagePreviewerLightbox } from './ImagePreviewerLightbox';
 export { default as CollaboratorItem } from './CollaboratorItem';
-export { default as FileItemFormatter } from './FileItemFormatter'; // editor
+export { default as FileItemFormatter } from './FileItemFormatter';
+export { default as DigitalSignFormatter } from './DigitalSignFormatter'; // editor
 
 export { default as TextEditor } from './TextEditor';
 export { default as NumberEditor } from './NumberEditor';

package/lib/utils/utils.js

@@ -41,4 +41,17 @@ export var isMac = function isMac() {
   var platform = navigator.platform; // eslint-disable-next-line eqeqeq
 
   return platform == 'Mac68K' || platform == 'MacPPC' || platform == 'Macintosh' || platform == 'MacIntel';
+};
+export var downloadFile = function downloadFile(downloadUrl) {
+  var downloadFrame = document.getElementById('dtableUiComponentDownloadFrame');
+
+  if (downloadFrame != null) {
+    document.body.removeChild(downloadFrame);
+  }
+
+  var iframe = document.createElement('iframe');
+  iframe.setAttribute('id', 'dtableUiComponentDownloadFrame');
+  iframe.style.display = 'none';
+  iframe.src = downloadUrl;
+  document.body.appendChild(iframe);
 };

package/package.json

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