dtable-ui-component 0.3.0 → 0.3.2-alpha1

package/lib/ButtonFormatter/index.js

@@ -28,10 +28,20 @@ var ButtonFormatter = /*#__PURE__*/function (_React$Component) {
           url_address = _this$props$data.url_address;
 
       if (button_type === 'open_url' && url_address) {
-        window.open(url_address);
+        _this.openUrlLink(url_address);
       }
     };
 
+    _this.openUrlLink = function (url) {
+      var a = document.createElement('a');
+      document.body.appendChild(a);
+      a.href = url;
+      a.target = '_blank';
+      a.rel = 'noopener noreferrer';
+      a.click();
+      document.body.removeChild(a);
+    };
+
     return _this;
   }
 

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/FileFormatter/index.js

@@ -25,12 +25,13 @@ var FileFormatter = /*#__PURE__*/function (_React$PureComponent) {
           isSample = _this$props.isSample,
           value = _this$props.value,
           containerClassName = _this$props.containerClassName;
-      var className = cn('dtable-ui cell-formatter-container file-formatter', containerClassName);
 
       if (!Array.isArray(value) || value.length === 0) {
         return null;
       }
 
+      var className = cn('dtable-ui cell-formatter-container file-formatter', containerClassName);
+
       if (isSample) {
         var item = value[0];
         return /*#__PURE__*/React.createElement("div", {
@@ -61,4 +62,4 @@ FileFormatter.defaultProps = {
   value: [],
   containerClassName: ''
 };
-export default FileFormatter;
+export { FileFormatter as default };

package/lib/FileFormatter/row-expand-file-formatter.css

@@ -0,0 +1,60 @@
+.dtable-ui.row-expand-file-formatter {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  width: 550px;
+}
+
+.dtable-ui.row-expand-file-formatter .row-expand-item-file {
+  height: 100px;
+  width: 100px;
+  border: 2px solid #ededed;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 5px;
+  position: relative;
+}
+
+.dtable-ui.row-expand-file-formatter .row-expand-item-file:hover {
+  border-color: #c9c9c9;
+}
+
+.dtable-ui.row-expand-file-formatter .row-expand-item-file .dtable-file-icons-choice {
+  height: 20px;
+  width: 100%;
+  top: 0;
+  position: absolute;
+  color: #fff;
+  display: none;
+  padding: 0 3px;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.dtable-ui.row-expand-file-formatter .row-expand-item-file:hover .dtable-file-icons-choice {
+  display: flex;
+}
+
+.dtable-ui.row-expand-file-formatter .row-expand-item-file .dtable-file-icons-choice .file-icon {
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  background: rgba(0,0,0,.5);
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.dtable-ui.row-expand-file-formatter .row-expand-item-file .dtable-file-icons-choice .file-icon:nth-child(2) {
+  margin-left: 5px;
+}
+
+.dtable-ui.row-expand-file-formatter .row-expand-item-file .dtable-file-icons-choice .file-icon .dtable-font {
+  font-size: 12px;
+  transform: scale(.7);
+}

package/lib/FileFormatter/row-expand-file-formatter.js

@@ -0,0 +1,60 @@
+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 classname from 'classnames';
+import RowExpandFileItemFormatter from '../FileItemFormatter/row-expand-file-item-formatter';
+import './index.css';
+import './row-expand-file-formatter.css';
+
+var RowExpandFileFormatter = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(RowExpandFileFormatter, _React$PureComponent);
+
+  var _super = _createSuper(RowExpandFileFormatter);
+
+  function RowExpandFileFormatter() {
+    _classCallCheck(this, RowExpandFileFormatter);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(RowExpandFileFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          value = _this$props.value,
+          containerClassName = _this$props.containerClassName,
+          column = _this$props.column,
+          downloadFile = _this$props.downloadFile,
+          deleteFile = _this$props.deleteFile,
+          readOnly = _this$props.readOnly;
+
+      if (!Array.isArray(value) || value.length === 0) {
+        return null;
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: classname('dtable-ui cell-formatter-container row-expand-file-formatter', containerClassName)
+      }, value.map(function (item, index) {
+        return /*#__PURE__*/React.createElement(RowExpandFileItemFormatter, {
+          file: item,
+          key: index,
+          index: index,
+          column: column,
+          downloadFile: downloadFile,
+          deleteFile: deleteFile,
+          readOnly: readOnly
+        });
+      }));
+    }
+  }]);
+
+  return RowExpandFileFormatter;
+}(React.PureComponent);
+
+RowExpandFileFormatter.defaultProps = {
+  value: [],
+  containerClassName: ''
+};
+export { RowExpandFileFormatter as default };

package/lib/FileItemFormatter/index.js

@@ -47,4 +47,4 @@ var FileItemFormatter = /*#__PURE__*/function (_Component) {
   return FileItemFormatter;
 }(Component);
 
-export default FileItemFormatter;
+export { FileItemFormatter as default };

package/lib/FileItemFormatter/row-expand-file-item-formatter.js

@@ -0,0 +1,125 @@
+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 { Tooltip } from 'reactstrap';
+import { getLocale } from '../lang';
+import { getFileIconUrl } from './utils';
+import DeleteTip from '../common/delete-tip';
+
+var RowExpandFileItemFormatter = /*#__PURE__*/function (_Component) {
+  _inherits(RowExpandFileItemFormatter, _Component);
+
+  var _super = _createSuper(RowExpandFileItemFormatter);
+
+  function RowExpandFileItemFormatter(props) {
+    var _this;
+
+    _classCallCheck(this, RowExpandFileItemFormatter);
+
+    _this = _super.call(this, props);
+
+    _this.toggleTooltip = function () {
+      _this.setState({
+        isTooltipOpen: !_this.state.isTooltipOpen
+      });
+    };
+
+    _this.closeDeleteTip = function () {
+      _this.setState({
+        isDeleteTipOpen: false
+      });
+    };
+
+    _this.onClickDelete = function (e) {
+      e.stopPropagation();
+      _this.position = {
+        top: e.clientY,
+        left: e.clientX
+      };
+
+      _this.setState({
+        isDeleteTipOpen: true
+      });
+    };
+
+    _this.onDelete = function (e) {
+      e.stopPropagation();
+
+      _this.closeDeleteTip();
+
+      _this.props.deleteFile(_this.props.index);
+    };
+
+    _this.getFileIconData = function (item) {
+      var fileIconUrl = getFileIconUrl(item.name, item.type);
+      return require('./' + fileIconUrl);
+    };
+
+    _this.state = {
+      isTooltipOpen: false,
+      isDeleteTipOpen: false
+    };
+    return _this;
+  }
+
+  _createClass(RowExpandFileItemFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          file = _this$props.file,
+          column = _this$props.column,
+          index = _this$props.index,
+          readOnly = _this$props.readOnly,
+          downloadFile = _this$props.downloadFile,
+          deleteFile = _this$props.deleteFile;
+      var id = 'file-list-preview-item' + column.key + index;
+      var url = this.getFileIconData(file);
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        key: "file-".concat(index),
+        className: "row-expand-item-file",
+        id: id
+      }, /*#__PURE__*/React.createElement("img", {
+        src: url,
+        id: "item-file-".concat(index),
+        alt: file.name
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "dtable-file-icons-choice"
+      }, downloadFile && /*#__PURE__*/React.createElement("span", {
+        className: "file-icon",
+        onClick: function onClick(e) {
+          return _this2.props.downloadFile(file, e);
+        }
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-download"
+      })), !readOnly && deleteFile && /*#__PURE__*/React.createElement("span", {
+        className: "file-icon",
+        onClick: this.onClickDelete
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-fork-number"
+      })))), this.state.isDeleteTipOpen && /*#__PURE__*/React.createElement(DeleteTip, {
+        position: this.position,
+        toggle: this.closeDeleteTip,
+        onDelete: this.onDelete,
+        deleteTip: getLocale('Are_you_sure_you_want_to_delete_this_file')
+      }), /*#__PURE__*/React.createElement(Tooltip, {
+        placement: "bottom",
+        isOpen: this.state.isTooltipOpen,
+        toggle: this.toggleTooltip,
+        target: id,
+        delay: {
+          show: 0,
+          hide: 0
+        },
+        fade: false
+      }, file.name));
+    }
+  }]);
+
+  return RowExpandFileItemFormatter;
+}(Component);
+
+export { RowExpandFileItemFormatter as default };

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

@@ -55,6 +55,7 @@ var ImagesLazyLoad = /*#__PURE__*/function (_React$Component) {
             var _this$state = _this.state,
                 loadedCount = _this$state.loadedCount,
                 loadedImages = _this$state.loadedImages;
+            if (loadedCount + 1 > images.length) return;
             var newImageList = loadedImages.slice(0);
             newImageList[index] = image;
 
@@ -64,6 +65,7 @@ var ImagesLazyLoad = /*#__PURE__*/function (_React$Component) {
             });
           }, function () {
             var loadedCount = _this.state.loadedCount;
+            if (loadedCount + 1 > images.length) return;
 
             _this.setState({
               loadedCount: loadedCount + 1

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/common/delete-tip.css

@@ -0,0 +1,16 @@
+.dtable-tip.tip-container {
+  display: flex;
+  flex-direction: column;
+  width: 232px;
+  padding: 16px;
+  background: #fff;
+  border-radius: 5px;
+  border: 1px solid #ddd;
+  box-shadow: 0 2px 8px 1px rgba(0,0,0,.2);
+  position: fixed;
+  z-index: 10000;
+}
+
+.dtable-tip.tip-container b {
+  line-height: 1.5;
+}

package/lib/common/delete-tip.js

@@ -0,0 +1,83 @@
+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 { getLocale } from '../lang';
+import './delete-tip.css';
+
+var DeleteTip = /*#__PURE__*/function (_React$Component) {
+  _inherits(DeleteTip, _React$Component);
+
+  var _super = _createSuper(DeleteTip);
+
+  function DeleteTip() {
+    var _this;
+
+    _classCallCheck(this, DeleteTip);
+
+    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.handleOutsideClick = function (e) {
+      if (_this.tipContainer && !_this.tipContainer.contains(e.target)) {
+        _this.props.toggle();
+      }
+    };
+
+    return _this;
+  }
+
+  _createClass(DeleteTip, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      document.addEventListener('click', this.handleOutsideClick);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener('click', this.handleOutsideClick);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          toggle = _this$props.toggle,
+          onDelete = _this$props.onDelete,
+          position = _this$props.position,
+          deleteTip = _this$props.deleteTip;
+      return /*#__PURE__*/React.createElement("div", {
+        ref: function ref(node) {
+          return _this2.tipContainer = node;
+        },
+        className: "dtable-tip tip-container",
+        style: {
+          top: position.top,
+          left: position.left
+        },
+        onClick: function onClick(e) {
+          return e.stopPropagation();
+        }
+      }, /*#__PURE__*/React.createElement("b", {
+        className: "mb-4"
+      }, deleteTip), /*#__PURE__*/React.createElement("div", {
+        className: "d-flex justify-content-end"
+      }, /*#__PURE__*/React.createElement("button", {
+        className: "btn btn-secondary mr-2",
+        onClick: toggle
+      }, getLocale('Cancel')), /*#__PURE__*/React.createElement("button", {
+        className: "btn btn-primary",
+        onClick: onDelete
+      }, getLocale('Delete'))));
+    }
+  }]);
+
+  return DeleteTip;
+}(React.Component);
+
+export { DeleteTip as default };