dtable-ui-component 0.3.0 → 0.3.2

package/lib/DigitalSignFormatter/index.css

@@ -0,0 +1,21 @@
+@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;
+}
+
+.digital-sign-formatter-image-previewer .ril__image {
+  background-color: #fff;
+}

package/lib/DigitalSignFormatter/index.js

@@ -0,0 +1,119 @@
+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 { getDigitalSignImageUrl } 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 _this$props = _this.props,
+          value = _this$props.value,
+          config = _this$props.config;
+      return [getDigitalSignImageUrl(value, config)].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$props2 = this.props,
+          containerClassName = _this$props2.containerClassName,
+          readOnly = _this$props2.readOnly,
+          config = _this$props2.config,
+          isSample = _this$props2.isSample;
+      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: signImages,
+        server: config.server,
+        onImageClick: this.onClickSignImage
+      })), isPreviewSignImage && /*#__PURE__*/React.createElement(ImagePreviewerLightbox, {
+        className: "digital-sign-formatter-image-previewer",
+        readOnly: readOnly,
+        server: isSample ? config.server : '',
+        imageItems: signImages,
+        imageIndex: largeSignImageIndex,
+        closeImagePopup: this.hideLargeSignImage,
+        downloadImage: this.downloadImage,
+        moveToPrevImage: function moveToPrevImage() {},
+        moveToNextImage: function moveToNextImage() {}
+      }));
+    }
+  }]);
+
+  return DigitalSignFormatter;
+}(Component);
+
+DigitalSignFormatter.defaultProps = {
+  isSample: false,
+  isSupportPreview: false,
+  readOnly: true,
+  value: '',
+  config: {},
+  containerClassName: ''
+};
+export default DigitalSignFormatter;

package/lib/DigitalSignFormatter/utils.js

@@ -0,0 +1,23 @@
+export var getDigitalSignImageUrl = function getDigitalSignImageUrl(cellValue, config) {
+  if (!cellValue) return '';
+  var url = cellValue && cellValue.sign_image_url || '';
+  if (!url) return '';
+  if (!config) return url;
+
+  var _ref = config || {},
+      server = _ref.server,
+      workspaceID = _ref.workspaceID,
+      dtableUuid = _ref.dtableUuid;
+
+  if (server && (workspaceID || workspaceID === 0) && dtableUuid) {
+    return "".concat(server, "/workspace/").concat(workspaceID, "/asset/").concat(dtableUuid).concat(url);
+  }
+
+  return url;
+};
+export var isValidDigitalSignImageValue = function isValidDigitalSignImageValue(cellValue) {
+  if (!cellValue) return false;
+  var digitalSignImage = cellValue && cellValue.sign_image_url;
+  if (!digitalSignImage) return false;
+  return true;
+};

package/lib/ImagePreviewerLightbox/index.js

@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 import MediaQuery from 'react-responsive';
+import cn from 'astro-classname';
 import ModalPortal from '../ModalPortal';
 import Lightbox from '@seafile/react-image-lightbox';
 import { checkSVGImage, isInternalImg } from './utils';
@@ -15,7 +16,8 @@ function ImagePreviewerLightbox(props) {
       readOnly = props.readOnly,
       server = props.server,
       moveToPrevRowImage = props.moveToPrevRowImage,
-      moveToNextRowImage = props.moveToNextRowImage;
+      moveToNextRowImage = props.moveToNextRowImage,
+      className = props.className;
   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
@@ -69,7 +71,7 @@ function ImagePreviewerLightbox(props) {
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(MediaQuery, {
     query: "(min-width: 767.8px)"
   }, /*#__PURE__*/React.createElement(Lightbox, {
-    wrapperClassName: "PC-image-previewer",
+    wrapperClassName: cn('PC-image-previewer', className),
     imageTitle: imageTitleEl,
     toolbarButtons: toolbarButtons,
     mainSrc: imageItems[imageIndex],
@@ -91,7 +93,7 @@ function ImagePreviewerLightbox(props) {
     query: "(max-width: 767.8px)"
   }, /*#__PURE__*/React.createElement(Lightbox, {
     isDesktop: false,
-    wrapperClassName: "mobile-image-previewer dtable-ui-component",
+    wrapperClassName: cn('mobile-image-previewer dtable-ui-component', className),
     mainSrc: imageItems[imageIndex],
     nextSrc: imageItems[(imageIndex + 1) % imageItemsLength],
     prevSrc: imageItems[(imageIndex + imageItemsLength - 1) % imageItemsLength],

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.3.0",
+  "version": "0.3.2",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "0.0.9",