dtable-ui-component 0.1.74 → 0.1.75-beta3

package/lib/ImageFormatter/index.js

@@ -0,0 +1,173 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _astroClassname = _interopRequireDefault(require("astro-classname"));
+
+var _imagesLazyLoad = _interopRequireDefault(require("./images-lazy-load"));
+
+var _utils = require("../utils/utils");
+
+var _ImagePreviewerLightbox = _interopRequireDefault(require("../ImagePreviewerLightbox"));
+
+require("./index.css");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var ImageFormatter = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(ImageFormatter, _React$Component);
+
+  function ImageFormatter(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageClick", function (index) {
+      if (!_this.props.isSupportPreview) return;
+
+      _this.setState({
+        isPreviewImage: true,
+        previewImageIndex: index
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "closeImagePopup", function () {
+      if (!_this.props.isSupportPreview) return;
+
+      _this.setState({
+        isPreviewImage: false,
+        previewImageIndex: -1
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "movePrev", function () {
+      var images = _this.props.value;
+
+      _this.setState(function (prevState) {
+        return {
+          previewImageIndex: (prevState.previewImageIndex + images.length - 1) % images.length
+        };
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "moveNext", function () {
+      var images = _this.props.value;
+
+      _this.setState(function (prevState) {
+        return {
+          previewImageIndex: (prevState.previewImageIndex + 1) % images.length
+        };
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "downloadImage", function (imageItemUrl) {
+      if (!_this.props.downloadImage) return;
+
+      _this.props.downloadImage(imageItemUrl);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "deleteImage", function (index) {
+      var readOnly = _this.props.readOnly;
+      if (readOnly) return;
+      if (!_this.props.deleteImage) return;
+
+      _this.props.deleteImage(index);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onRotateImage", function (index, degree) {
+      var readOnly = _this.props.readOnly;
+      if (readOnly) return;
+      if (!_this.props.rotateImage) return;
+
+      _this.props.rotateImage(index, degree);
+    });
+    _this.state = {
+      isPreviewImage: false,
+      previewImageIndex: -1
+    };
+    return _this;
+  }
+
+  var _proto = ImageFormatter.prototype;
+
+  _proto.render = 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 = (0, _astroClassname.default)('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 = (0, _utils.getImageThumbnailUrl)(item, server);
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: className
+      }, /*#__PURE__*/_react.default.createElement("img", {
+        className: "image-item",
+        src: url,
+        alt: ""
+      }), value.length !== 1 && /*#__PURE__*/_react.default.createElement("span", {
+        className: "image-item-count"
+      }, "+" + value.length));
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: className
+    }, /*#__PURE__*/_react.default.createElement(_imagesLazyLoad.default, {
+      images: value,
+      server: server,
+      onImageClick: this.onImageClick
+    })), isPreviewImage && /*#__PURE__*/_react.default.createElement(_ImagePreviewerLightbox.default, {
+      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
+    }));
+  };
+
+  return ImageFormatter;
+}(_react.default.Component);
+
+(0, _defineProperty2.default)(ImageFormatter, "defaultProps", {
+  isSample: false,
+  isSupportPreview: false,
+  readOnly: true,
+  value: [],
+  server: '',
+  containerClassName: ''
+});
+ImageFormatter.propTypes = {
+  isSample: _propTypes.default.bool,
+  readOnly: _propTypes.default.bool,
+  isSupportPreview: _propTypes.default.bool,
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]),
+  server: _propTypes.default.string,
+  containerClassName: _propTypes.default.string,
+  deleteImage: _propTypes.default.func,
+  downloadImage: _propTypes.default.func,
+  rotateImage: _propTypes.default.func
+};
+var _default = ImageFormatter;
+exports.default = _default;

package/lib/ImagePreviewerLightbox/index.css

@@ -0,0 +1,87 @@
+.dtable-ui-component.mobile-image-previewer .ril-prev-button,
+.dtable-ui-component.mobile-image-previewer .ril-next-button,
+.dtable-ui-component.mobile-image-previewer .ril-caption .ril-zoom-in,
+.dtable-ui-component.mobile-image-previewer .ril-caption .ril-zoom-out {
+  display: none;
+}
+
+.dtable-ui-component.mobile-image-previewer .ril-toolbar .ril__toolbarRightSide {
+  padding-right: 14px;
+}
+
+.dtable-ui-component.image-footer-choice.mobile-image-footer-choice {
+  height: 100px;
+  background-color: #000;
+  z-index: 1052;
+  padding: 0;
+  width: 100%;
+  border-radius: 2px;
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+  bottom: 0;
+  position: absolute;
+  color: #fff;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dtable-ui-component.image-footer-choice.mobile-image-footer-choice .image-footer-icon {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row-reverse;
+  margin: 0 20px;
+}
+
+.dtable-ui-component.image-footer-choice.mobile-image-footer-choice .image-footer-icon .image-footer-choice-item {
+  height: 40px;
+  width: 40px;
+  border-radius: 5px;
+  background-color: #333;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #dbdbdb;
+}
+
+.dtable-ui-component.image-footer-choice.mobile-image-footer-choice .image-footer-icon .image-footer-choice-item i {
+  font-size: 20px;
+}
+
+.ril__outer .ril-caption button.dtable-font {
+  height: 50px;
+  font-size: 20px;
+}
+
+.ril__outer .ril-toolbar button.dtable-font {
+  border: none;
+}
+
+.ril__outer .ril-toolbar button.dtable-font:focus {
+  outline: none;
+}
+
+.ril__outer button.dtable-font {
+  font-size: 16px;
+}
+
+.ril__outer .ril-toolbar .ril-close {
+  width: 30px;
+  height: 53px;
+}
+
+.ril__outer .ril__toolbarItem {
+  height: 50px;
+}
+
+.ril__outer .ril__toolbarItem button {
+  opacity: 0.7;
+}
+
+.ril__outer .ril__toolbarItem button:hover {
+  opacity: 1;
+}

package/lib/ImagePreviewerLightbox/index.js

@@ -0,0 +1,152 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactResponsive = _interopRequireDefault(require("react-responsive"));
+
+var _ModalPortal = _interopRequireDefault(require("../ModalPortal"));
+
+var _reactImageLightbox = _interopRequireDefault(require("@seafile/react-image-lightbox"));
+
+var _utils = require("../utils/utils");
+
+require("@seafile/react-image-lightbox/style.css");
+
+require("./index.css");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ImagePreviewerLightbox(props) {
+  var imageItems = props.imageItems,
+      imageIndex = props.imageIndex,
+      deleteImage = props.deleteImage,
+      downloadImage = props.downloadImage,
+      onRotateImage = props.onRotateImage,
+      readOnly = props.readOnly;
+  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
+
+  var canRotateImage = onRotateImage && !readOnly && !(0, _utils.checkSVGImage)(URL) && (0, _utils.isInternalImg)(URL);
+
+  var imageTitleEl = /*#__PURE__*/_react.default.createElement("span", {
+    className: "d-flex"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "text-truncate"
+  }, imageTitle), /*#__PURE__*/_react.default.createElement("span", {
+    className: "flex-shrink-0"
+  }, "(", imageIndex + 1, "/", imageItemsLength, ")"));
+
+  var toolbarButtons = [];
+
+  if (!readOnly && deleteImage) {
+    toolbarButtons.push( /*#__PURE__*/_react.default.createElement("button", {
+      className: "dtable-font dtable-icon-delete",
+      onClick: function onClick() {
+        deleteImage(imageIndex, 'previewer');
+      }
+    }));
+  }
+
+  if (downloadImage) {
+    toolbarButtons.push( /*#__PURE__*/_react.default.createElement("button", {
+      className: "dtable-font dtable-icon-download",
+      onClick: function onClick() {
+        downloadImage(URL);
+      }
+    }));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(min-width: 767.8px)"
+  }, /*#__PURE__*/_react.default.createElement(_reactImageLightbox.default, {
+    wrapperClassName: "PC-image-previewer",
+    imageTitle: imageTitleEl,
+    toolbarButtons: toolbarButtons,
+    mainSrc: imageItems[imageIndex],
+    nextSrc: imageItems[(imageIndex + 1) % imageItemsLength],
+    prevSrc: imageItems[(imageIndex + imageItemsLength - 1) % imageItemsLength],
+    onCloseRequest: props.closeImagePopup,
+    onMovePrevRequest: props.moveToPrevImage,
+    onMoveNextRequest: props.moveToNextImage,
+    onRotateImage: canRotateImage ? function (deg) {
+      onRotateImage(imageIndex, deg);
+    } : null,
+    imagePadding: 70,
+    reactModalStyle: {
+      overlay: {
+        zIndex: 1051
+      }
+    }
+  })), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(max-width: 767.8px)"
+  }, /*#__PURE__*/_react.default.createElement(_reactImageLightbox.default, {
+    isDesktop: false,
+    wrapperClassName: "mobile-image-previewer dtable-ui-component",
+    mainSrc: imageItems[imageIndex],
+    nextSrc: imageItems[(imageIndex + 1) % imageItemsLength],
+    prevSrc: imageItems[(imageIndex + imageItemsLength - 1) % imageItemsLength],
+    onCloseRequest: props.closeImagePopup,
+    onMovePrevRequest: props.moveToPrevImage,
+    onMoveNextRequest: props.moveToNextImage,
+    imagePadding: 0,
+    animationDisabled: true,
+    imageTitle: imageTitleEl,
+    reactModalStyle: {
+      overlay: {
+        zIndex: 1051,
+        backgroundColor: '#000'
+      }
+    }
+  }), /*#__PURE__*/_react.default.createElement(_ModalPortal.default, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "image-footer-choice mobile-image-footer-choice dtable-ui-component"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "image-footer-icon"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex"
+  }, canRotateImage && /*#__PURE__*/_react.default.createElement("span", {
+    className: "image-footer-choice-item mr-4",
+    onClick: function onClick() {
+      onRotateImage(imageIndex, 90);
+    }
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "dtable-font dtable-icon-rotate"
+  })), downloadImage && /*#__PURE__*/_react.default.createElement("span", {
+    className: "image-footer-choice-item",
+    onClick: function onClick() {
+      downloadImage(URL);
+    }
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "dtable-font dtable-icon-download"
+  }))), !readOnly && deleteImage && /*#__PURE__*/_react.default.createElement("span", {
+    className: "image-footer-choice-item",
+    onClick: function onClick() {
+      deleteImage(imageIndex, 'previewer');
+    }
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "dtable-font dtable-icon-delete"
+  })))))));
+}
+
+ImagePreviewerLightbox.propTypes = {
+  imageItems: _propTypes.default.array.isRequired,
+  imageIndex: _propTypes.default.number.isRequired,
+  closeImagePopup: _propTypes.default.func.isRequired,
+  moveToPrevImage: _propTypes.default.func.isRequired,
+  moveToNextImage: _propTypes.default.func.isRequired,
+  downloadImage: _propTypes.default.func,
+  deleteImage: _propTypes.default.func,
+  onRotateImage: _propTypes.default.func,
+  readOnly: _propTypes.default.bool
+};
+var _default = ImagePreviewerLightbox;
+exports.default = _default;

package/lib/LastModifierFormatter/index.css

@@ -0,0 +1 @@
+@import url('../css/cell-formatter.css');

package/lib/LastModifierFormatter/index.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _astroClassname = _interopRequireDefault(require("astro-classname"));
+
+var _CollaboratorItem = _interopRequireDefault(require("../CollaboratorItem"));
+
+var _default_avatar = _interopRequireDefault(require("../assets/images/avatar/default_avatar.png"));
+
+require("./index.css");
+
+var propTypes = {
+  containerClassName: _propTypes.default.string,
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]).isRequired,
+  collaborators: _propTypes.default.arrayOf(_propTypes.default.exact({
+    email: _propTypes.default.string.isRequired,
+    name: _propTypes.default.string.isRequired,
+    contact_email: _propTypes.default.string.isRequired,
+    avatar_url: _propTypes.default.string.isRequired
+  }))
+}; // there will be there conditions
+// 1 value is not exist, typeof value is array, but it's length is 0
+// 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) {
+  (0, _inheritsLoose2.default)(LastModifierFormatter, _React$PureComponent);
+
+  function LastModifierFormatter() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getCollaborators", function () {
+      var _this$props = _this.props,
+          value = _this$props.value,
+          collaborators = _this$props.collaborators;
+
+      if (!Array.isArray(value)) {
+        value = [value];
+      }
+
+      return value.map(function (item, index) {
+        var collaborator = collaborators.find(function (collaborator) {
+          return collaborator.email === item;
+        }); // the collaborator can be not exist, because the row modified by third app
+
+        if (!collaborator) {
+          collaborator = {
+            name: item,
+            avatar_url: _default_avatar.default
+          };
+        }
+
+        return /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
+          key: index,
+          collaborator: collaborator
+        });
+      });
+    });
+    return _this;
+  }
+
+  var _proto = LastModifierFormatter.prototype;
+
+  _proto.render = function render() {
+    var _this$props2 = this.props,
+        containerClassName = _this$props2.containerClassName,
+        value = _this$props2.value;
+    var classname = (0, _astroClassname.default)('dtable-ui cell-formatter-container last-modified-formatter', containerClassName);
+
+    if (!value || Array.isArray(value) && value.length === 0) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: classname
+      });
+    }
+
+    var collaborators = this.getCollaborators();
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classname
+    }, collaborators);
+  };
+
+  return LastModifierFormatter;
+}(_react.default.PureComponent);
+
+LastModifierFormatter.propTypes = propTypes;
+var _default = LastModifierFormatter;
+exports.default = _default;

package/lib/LinkFormatter/index.css

@@ -0,0 +1,27 @@
+@import url('../css/cell-formatter.css');
+
+.dtable-ui.link-formmatter {
+  display: inline-flex;
+  align-items: center;
+  overflow: hidden;
+  flex-wrap: nowrap;
+}
+
+.dtable-ui.link-formatter .link-item {
+  display: inline-flex;
+  height: 20px;
+  max-width: 230px;
+  padding: 0 8px 0 2px;
+  align-items: center;
+  font-size: 13px;
+  margin-right: 10px;
+  border-radius: 3px;
+  background: #eceff4;
+  cursor: pointer;
+}
+
+.dtable-ui.link-formatter .link-item .link-name {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}