dtable-ui-component 5.3.1-beta6 → 5.3.2-alpha1

package/lib/Comment/body/comment.js

@@ -1,190 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactstrap = require("reactstrap");
-var _seafileEditor = require("@seafile/seafile-editor");
-var _ImagePreviewerLightbox = _interopRequireDefault(require("../../ImagePreviewerLightbox"));
-var _lang = require("../../lang");
-class Comment extends _react.PureComponent {
-  constructor(props) {
-    super(props);
-    this.toggleDropDownMenu = () => {
-      this.setState({
-        dropdownOpen: !this.state.dropdownOpen
-      });
-    };
-    this.convertComment = mdFile => {
-      // innerHtml transform & to &amp, After seafile-editor is upgraded, & will be converted to & again,
-      // so it needs to be converted back manually
-      const mdString = mdFile.replaceAll('&', '&');
-      _seafileEditor.processor.process(mdString).then(result => {
-        let commentContent = String(result);
-        let {
-          isScrollBottom,
-          onScrollBottom
-        } = this.props;
-        this.setState({
-          commentContent: commentContent
-        });
-        if (isScrollBottom) {
-          onScrollBottom();
-        }
-      });
-    };
-    this.handleImageZoom = event => {
-      if (event.target.tagName === 'IMG') {
-        let imageUrl = event.target.src;
-        let imageTagList = this.commentContentRef.getElementsByTagName('img');
-        let imageUrlList = [];
-        for (let i = 0; i < imageTagList.length; i++) {
-          imageUrlList.push(imageTagList[i].src);
-        }
-        let largeImageIndex = imageUrlList.findIndex(imageItemUrl => imageItemUrl === imageUrl);
-        this.setState({
-          isShowLargeImage: true,
-          imageUrlList: imageUrlList,
-          largeImageIndex: largeImageIndex
-        });
-      }
-    };
-    this.moveNext = () => {
-      let images = this.state.imageUrlList;
-      this.setState(prevState => ({
-        largeImageIndex: (prevState.largeImageIndex + 1) % images.length
-      }));
-    };
-    this.movePrev = () => {
-      let images = this.state.imageUrlList;
-      this.setState(prevState => ({
-        largeImageIndex: (prevState.largeImageIndex + images.length - 1) % images.length
-      }));
-    };
-    this.hideLargeImage = () => {
-      this.setState({
-        isShowLargeImage: false,
-        largeImageIndex: '',
-        imageUrlList: []
-      });
-    };
-    this.isCommentUserExist = commentItem => {
-      const {
-        collaborators
-      } = this.props;
-      return !!collaborators.find(collaborator => collaborator.email === commentItem.author);
-    };
-    this.renderInfo = comment => {
-      const {
-        collaborators
-      } = this.props;
-      let authorInfo = Array.isArray(collaborators) && collaborators.find(collaborator => comment.author === collaborator.email);
-      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("img", {
-        className: "avatar",
-        src: authorInfo.avatar_url,
-        alt: ""
-      }), /*#__PURE__*/_react.default.createElement("div", {
-        className: "reviewer-info"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "reviewer-name"
-      }, authorInfo.name), /*#__PURE__*/_react.default.createElement("div", {
-        className: "review-time"
-      }, comment.create_at)));
-    };
-    this.onCommentClick = e => {
-      // click participant link, page shouldn't jump
-      if (e.target.nodeName !== 'A') return;
-      const preNode = e.target.previousSibling;
-      if (preNode && preNode.nodeType === 3 && preNode.nodeValue.slice(-1) === '@') {
-        e.preventDefault();
-      } else {
-        e.target.setAttribute('target', '_blank');
-      }
-    };
-    this.state = {
-      dropdownOpen: false,
-      commentContent: '',
-      isShowLargeImage: false,
-      imageUrlList: [],
-      largeImageIndex: ''
-    };
-  }
-  componentDidMount() {
-    this.convertComment(this.props.comment.comment);
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.comment.comment !== this.props.comment.comment) {
-      this.convertComment(nextProps.comment.comment);
-    }
-  }
-  render() {
-    const {
-      comment,
-      onResolve,
-      onDelete
-    } = this.props;
-    const {
-      username
-    } = window.dtable;
-    const moreOperationsText = (0, _lang.getLocale)('More_operations');
-    if (!this.isCommentUserExist(comment)) return null;
-    const isShowDropdownMenu = comment.author === username || !comment.resolved;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-comment-container ".concat(comment.resolved ? 'dtable-ui-comment-container-resolved' : ''),
-      id: comment.id
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-comment-info"
-    }, this.renderInfo(comment), isShowDropdownMenu && /*#__PURE__*/_react.default.createElement(_reactstrap.Dropdown, {
-      isOpen: this.state.dropdownOpen,
-      size: "sm",
-      className: "dtable-ui-comments-dropdown",
-      toggle: this.toggleDropDownMenu
-    }, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownToggle, {
-      className: "dtable-ui-comments-dropdown-btn",
-      role: "button",
-      "data-toggle": "dropdown",
-      title: moreOperationsText,
-      "aria-label": moreOperationsText,
-      "aria-expanded": this.state.dropdownOpen
-    }, /*#__PURE__*/_react.default.createElement("i", {
-      className: "dtable-font dtable-icon-more-level",
-      title: moreOperationsText,
-      "aria-label": moreOperationsText
-    })), /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownMenu, {
-      className: "dtable-dropdown-menu dropdown-menu dtable-ui-comment-dropdown-list"
-    }, !comment.resolved && onResolve && /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
-      onClick: event => onResolve(event, comment.id)
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "comment-icon dtable-font dtable-icon-mark mr-2"
-    }), /*#__PURE__*/_react.default.createElement("span", {
-      className: "comment-text"
-    }, (0, _lang.getLocale)('Mark_as_resolved'))), comment.author === username && onDelete && /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
-      onClick: event => onDelete(event, comment.id)
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "comment-icon dtable-font dtable-icon-delete mr-2"
-    }), /*#__PURE__*/_react.default.createElement("span", {
-      className: "comment-text"
-    }, (0, _lang.getLocale)('Delete')))))), /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-comment-content",
-      onClick: e => this.onCommentClick(e)
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-comment-content-container",
-      ref: ref => this.commentContentRef = ref,
-      onClick: this.handleImageZoom,
-      dangerouslySetInnerHTML: {
-        __html: this.state.commentContent
-      }
-    })), this.state.isShowLargeImage && /*#__PURE__*/_react.default.createElement(_ImagePreviewerLightbox.default, {
-      imageItems: this.state.imageUrlList,
-      imageIndex: this.state.largeImageIndex,
-      closeImagePopup: this.hideLargeImage,
-      moveToPrevImage: this.movePrev,
-      moveToNextImage: this.moveNext
-    }));
-  }
-}
-var _default = exports.default = Comment;

package/lib/Comment/body/index.css

@@ -1,95 +0,0 @@
-.dtable-ui-comments .dtable-ui-comments-body .dtable-ui-comments-empty {
-  padding: 1em;
-  text-align: center;
-  list-style: none;
-  color: #666;
-}
-
-
-.dtable-ui-comments .dtable-ui-comment-container {
-  padding: 10px 0;
-  margin-bottom: 0;
-}
-
-.dtable-ui-comment-container .dtable-ui-comment-info {
-  padding-bottom: 0.5em;
-  width: 100%;
-  height: 3em;
-  display: flex;
-  justify-content: flex-start;
-}
-
-.dtable-ui-comment-container .dtable-ui-comment-info .reviewer-info {
-  padding-left: 10px;
-  flex: 1;
-  padding-right: 10px;
-  overflow: hidden;
-}
-
-.dtable-ui-comment-container .dtable-ui-comment-info .reviewer-name {
-  font-size: 14px;
-  font-weight: 500;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.dtable-ui-comment-container .dtable-ui-comment-info .review-time {
-  font-size: 12px;
-  color: #666;
-}
-
-.dtable-ui-comment-container .dtable-ui-comment-info .dtable-ui-comments-dropdown {
-  margin-left: auto;
-}
-
-.dtable-ui-comment-container .dtable-ui-comment-info .dtable-ui-comments-dropdown button {
-  border: none;
-  box-shadow: none;
-}
-
-.dtable-ui-comment-container .dtable-ui-comment-info .dtable-ui-comments-dropdown button span {
-  font-size: 14px;
-}
-
-.dtable-ui-comment-container .dtable-ui-comment-info .dtable-ui-comments-dropdown .dtable-ui-comments-dropdown-btn {
-  color: #999;
-  background-color: transparent;
-}
-
-.dtable-ui-comment-container .dtable-ui-comment-info .dtable-ui-comments-dropdown:hover .dtable-ui-comments-dropdown-btn {
-  color: #555;
-}
-
-.dtable-ui-comment-container .dtable-ui-comment-content {
-  margin-left: 42px;
-}
-
-.dtable-ui-comment-container .dtable-ui-comment-content .dtable-ui-comment-content-container {
-  padding: 5px 10px;
-  border-radius: 4px;
-  display: inline-block;
-  background: #fff;
-  max-width: 100%;
-  word-wrap: break-word;
-  margin: 0;
-  font-size: 14px;
-}
-
-.dtable-ui-comment-container .dtable-ui-comment-content img {
-  cursor: pointer;
-  display: block;
-}
-
-.dtable-ui-comment-container .dtable-ui-comment-content p {
-  margin-bottom: 0;
-  letter-spacing: 1px;
-}
-
-.dtable-ui-comment-container-resolved .dtable-ui-comment-content .dtable-ui-comment-content-container {
-  background-color: #e6ffed;
-}
-
-.dtable-ui-comment-dropdown-list {
-  min-width: 8rem;
-}

package/lib/Comment/body/index.js

@@ -1,32 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _lang = require("../../lang");
-var _comment = _interopRequireDefault(require("./comment"));
-require("./index.css");
-const Body = _ref => {
-  let {
-    comments,
-    isFirstLoading,
-    ...props
-  } = _ref;
-  if (comments.length === 0) {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-comments-empty"
-    }, (0, _lang.getLocale)('No_comment_yet'));
-  }
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, comments.map((comment, index) => {
-    return /*#__PURE__*/_react.default.createElement(_comment.default, Object.assign({
-      key: comment.id
-    }, props, {
-      comment: comment,
-      isScrollBottom: index === comments.length - 1 && isFirstLoading
-    }));
-  }));
-};
-var _default = exports.default = Body;

package/lib/Comment/footer/btns/index.css

@@ -1,40 +0,0 @@
-.dtable-ui-comment-input-btns {
-  padding: 5px;
-  border: 1px solid #e6e6dd;
-  border-top: none;
-  background: #fff;
-  border-radius: 0 0 5px 5px;
-}
-
-.dtable-ui-comment-input-btns .dtable-ui-comment-input-btns-container {
-  border-top: 1px solid #e6e6dd;
-}
-
-.dtable-ui-comment-input-btns .dtable-ui-comment-input-btns-container .dtable-ui-comment-input-btns-content {
-  display: flex;
-  align-items: center;
-  padding-left: 10px;
-}
-
-.dtable-ui-comment-input-btns .dtable-ui-comment-input-btns-container .dtable-ui-comment-collaborator-tip {
-  cursor: pointer;
-  position: relative;
-  margin-left: 10px;
-  color: #666;
-}
-
-.dtable-ui-comment-input-btns .dtable-ui-comment-input-btns-container .dtable-ui-comment-image-upload:hover,
-.dtable-ui-comment-input-btns .dtable-ui-comment-input-btns-container .dtable-ui-comment-collaborator-tip:hover {
-  color: #FF8000;
-}
-
-.dtable-ui-comment-input-btns .dtable-ui-comment-input-btns-container .dtable-ui-comment-image-upload {
-  margin-top: 3px;
-  font-size: 15px;
-  color: #666;
-  cursor: pointer;
-}
-
-.dtable-ui-comment-input-btns .dtable-ui-comment-input-btns-container .dtable-ui-comment-image-upload .dtable-icon-picture-linear {
-  font-size: 15px;
-}

package/lib/Comment/footer/btns/index.js

@@ -1,113 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactstrap = require("reactstrap");
-var _FileUploader = _interopRequireDefault(require("../../../FileUploader"));
-var _DTablePopover = _interopRequireDefault(require("../../../DTablePopover"));
-var _Loading = _interopRequireDefault(require("../../../Loading"));
-var _lang = require("../../../lang");
-require("./index.css");
-class Btns extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.onHideCollaboratorTip = () => {
-      this.setState({
-        isShowPopover: false
-      });
-    };
-    this.onHandleCollaboratorTip = event => {
-      event.nativeEvent.stopImmediatePropagation();
-      this.setState({
-        isShowPopover: !this.state.isShowPopover
-      });
-    };
-    this.onChangeInputValue = participant => {
-      this.props.onInsertElement(participant, 'collaborator');
-      this.props.addParticipant(participant.email);
-      this.onHideCollaboratorTip();
-    };
-    this.onSubmit = () => {
-      this.props.onSubmit();
-    };
-    this.onFileUploadSuccess = uploadFileMessage => {
-      this.props.onInsertElement(uploadFileMessage.url, 'image');
-    };
-    this.getCollaboratorContent = () => {
-      const {
-        collaborators
-      } = this.props;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "comment-popover-list"
-      }, collaborators.map(participant => {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          key: participant.email,
-          className: "comment-participant-item",
-          onClick: this.onChangeInputValue.bind(this, participant)
-        }, /*#__PURE__*/_react.default.createElement("div", {
-          className: "comment-participant-container"
-        }, /*#__PURE__*/_react.default.createElement("div", {
-          className: "comment-participant text-truncate"
-        }, /*#__PURE__*/_react.default.createElement("img", {
-          className: "comment-dtable-ui-participant-avatar ml-2",
-          alt: participant.name,
-          src: participant.avatar_url
-        }), /*#__PURE__*/_react.default.createElement("span", {
-          className: "comment-participant-name text-truncate"
-        }, participant.name))));
-      }));
-    };
-    this.state = {
-      isShowPopover: false
-    };
-  }
-  shouldComponentUpdate(nextProps, nextState) {
-    return nextProps.isAdding !== this.props.isAdding || nextState.isShowPopover !== this.state.isShowPopover;
-  }
-  render() {
-    const {
-      isAdding,
-      canUpdateParticipants
-    } = this.props;
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-comment-input-btns"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "d-flex justify-content-between dtable-ui-comment-input-btns-container"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-comment-input-btns-content",
-      ref: ref => this.toolRef = ref
-    }, /*#__PURE__*/_react.default.createElement(_FileUploader.default, {
-      uploadType: "image",
-      className: "dtable-ui-comment-image-upload",
-      onFileUploadSuccess: this.onFileUploadSuccess,
-      uploadFile: this.props.uploadFile
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      "aria-hidden": "true",
-      className: "dtable-font dtable-icon-picture-linear"
-    })), canUpdateParticipants && /*#__PURE__*/_react.default.createElement("span", {
-      className: "dtable-ui-comment-collaborator-tip",
-      onClick: this.onHandleCollaboratorTip
-    }, "@")), isAdding ? /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
-      className: "dtable-ui-comment-submit",
-      color: "primary",
-      size: "sm",
-      disabled: true
-    }, /*#__PURE__*/_react.default.createElement(_Loading.default, null)) : /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
-      className: "dtable-ui-comment-submit",
-      color: "primary",
-      size: "sm",
-      onClick: this.onSubmit,
-      tabIndex: -1
-    }, (0, _lang.getLocale)('Submit')))), this.state.isShowPopover && /*#__PURE__*/_react.default.createElement(_DTablePopover.default, {
-      target: this.toolRef,
-      hideDTablePopover: this.onHideCollaboratorTip,
-      hideDTablePopoverWithEsc: this.onHideCollaboratorTip
-    }, this.getCollaboratorContent()));
-  }
-}
-var _default = exports.default = Btns;

package/lib/Comment/footer/index.css

@@ -1,157 +0,0 @@
-.dtable-ui-comments .dtable-ui-comments-footer {
-  padding: 5px 10px;
-  border-top: 1px solid #e5e5e5;
-  display: flex;
-  flex-direction: column;
-  min-height: 185px;
-  border-bottom-right-radius: 3px;
-}
-
-
-
-
-.dtable-ui-comments .dtable-ui-comment-input:focus {
-  outline: none;
-}
-
-.dtable-ui-comments textarea:focus {
-  outline: none;
-}
-
-.dtable-ui-comments-title {
-  border-bottom: 1px solid #e5e5e5;
-  min-height: 3em;
-  line-height: 3em;
-  padding: 0 1em;
-  display: flex;
-  background-color: #fafaf9;
-}
-
-.dtable-ui-comments-title .dtable-ui-comments-title-text {
-  width: 100%;
-  text-align: center;
-  font-weight: 700;
-}
-
-.dtable-ui-comments-title .dtable-ui-comments-title-close {
-  color: #b9b9b9;
-}
-
-.dtable-ui-comments-title .dtable-ui-comments-title-close:hover {
-  color: #888;
-}
-
-.dtable-ui-comments-toggle-resolved {
-  margin-top: 45px;
-  border-bottom: 1px solid #e5e5e5;
-  padding: 5px 10px;
-  display: flex;
-  position: absolute;
-  background-color: #fff;
-  justify-content: space-between;
-  width: 29%;
-}
-
-
-@media (max-width: 768px) {
-  .dtable-ui-comments-toggle-resolved {
-    width: 100%;
-  }
-}
-
-
-
-
-.completion-dtable-ui-participant-avatar img {
-  border-radius: 50%;
-}
-
-
-
-
-
-.dtable-ui-comments-footer .dtable-ui-comment-submit {
-  margin-top: 5px;
-  min-width: 60px;
-  width: auto;
-  height: 28px;
-}
-
-
-
-
-
-.comment-header .comment-header-title {
-  display: flex;
-  justify-content: space-between;
-  height: 48px;
-  align-items: center;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.comment-header .comment-header-tool {
-  display: flex;
-}
-
-.comment-header .comment-header-tool .comment-tool-item {
-  padding: 5px 5px 5px 0;
-  color: #666;
-  cursor: default;
-}
-
-.comment-header .comment-header-tool .comment-item-active {
-  color: #212529;
-}
-
-.comment-header .comment-close {
-  width: 24px;
-  height: 24px;
-  color: #999999;
-  font-weight: 700;
-  cursor: pointer;
-  margin-left: 5px;
-}
-
-.comment-header .comment-close:hover {
-  color: #555555;
-}
-
-.comment-header .comment-close .dtable-icon-x {
-  padding: 4px;
-}
-
-.comment-popover-list {
-  padding: 10px 0;
-  max-height: 200px;
-  overflow: auto;
-  min-width: 150px;
-  max-width: 200px;
-}
-
-.comment-popover-list .comment-participant-item {
-  padding: 5px 0;
-}
-
-.comment-popover-list .comment-participant-item:hover {
-  background: #f5f5f5;
-  cursor: pointer;
-}
-
-/*  comment @ function*/
-
-
-
-.comment-participant-item .comment-dtable-ui-participant-avatar {
-  width: 16px;
-  height: 16px;
-  line-height: 16px;
-  transform: translateY(-1px);
-  border-radius: 50%;
-  vertical-align: middle;
-}
-
-.comment-participant-item .comment-participant-name {
-  margin-left: 4px;
-  font-size: 14px;
-}