dtable-ui-component 6.0.3 → 6.0.4

package/lib/CollaboratorEditor/{mb-collaborator-editor-popover → mb-collaborator-editor}/index.js

@@ -6,13 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _lang = require("../../lang");
+var _dtableUtils = require("dtable-utils");
 var _MBEditorHeader = _interopRequireDefault(require("../../MBEditorHeader"));
+var _DTableSearchInput = _interopRequireDefault(require("../../DTableSearchInput"));
+var _lang = require("../../lang");
 require("./index.css");
-class MBCollaboratorEditorPopover extends _react.default.Component {
+class MBCollaboratorEditor extends _react.default.Component {
   constructor(props) {
     super(props);
-    this.handleHistaryBack = e => {
+    this.handleHistoryBack = e => {
       e.preventDefault();
       this.props.onClosePopover();
     };
@@ -23,16 +25,13 @@ class MBCollaboratorEditorPopover extends _react.default.Component {
         return false;
       }
     };
-    this.onChangeSearch = event => {
+    this.onChangeSearch = newValue => {
       let {
         searchVal
       } = this.state;
-      if (searchVal === event.target.value) {
-        return;
-      }
-      searchVal = event.target.value;
+      if (searchVal === newValue) return;
       this.setState({
-        searchVal
+        searchVal: newValue
       });
     };
     this.getSelectedCollaborators = () => {
@@ -54,24 +53,24 @@ class MBCollaboratorEditorPopover extends _react.default.Component {
       let {
         searchVal
       } = this.state;
-      return searchVal ? collaborators.filter(item => item.name.indexOf(searchVal) > -1) : collaborators;
+      return searchVal ? (0, _dtableUtils.searchCollaborators)(collaborators, searchVal) : collaborators;
     };
-    this.onSelectCollaborator = collaborator => {
-      this.props.onCollaboratorItemToggle(collaborator);
+    this.onCollaboratorClick = collaborator => {
+      this.props.onCommit(collaborator);
     };
     this.onRemoveCollaborator = collaborator => {
-      this.props.onCollaboratorItemToggle(collaborator);
+      this.props.onCommit(collaborator);
     };
     this.renderFilteredCollaborators = collaborators => {
       let {
-        value
+        value = []
       } = this.props;
       return collaborators.map((collaborator, index) => {
-        let isSelect = value.some(item => item === collaborator.email);
+        const isSelected = value.includes(collaborator.email);
         return /*#__PURE__*/_react.default.createElement("div", {
           className: "mb-collaborator-option-item",
           key: index,
-          onMouseDown: this.onSelectCollaborator.bind(this, collaborator)
+          onMouseDown: this.onCollaboratorClick.bind(this, collaborator)
         }, /*#__PURE__*/_react.default.createElement("span", {
           className: "mb-collaborator-info"
         }, /*#__PURE__*/_react.default.createElement("span", {
@@ -83,7 +82,7 @@ class MBCollaboratorEditorPopover extends _react.default.Component {
           alt: "avatar"
         })), /*#__PURE__*/_react.default.createElement("span", {
           className: "collaborator-name"
-        }, collaborator.name)), isSelect && /*#__PURE__*/_react.default.createElement("i", {
+        }, collaborator.name)), isSelected && /*#__PURE__*/_react.default.createElement("i", {
           className: "mb-collaborator-checked dtable-font dtable-icon-check-mark"
         }));
       });
@@ -97,10 +96,10 @@ class MBCollaboratorEditorPopover extends _react.default.Component {
   }
   componentDidMount() {
     history.pushState(null, null, '#'); // eslint-disable-line
-    window.addEventListener('popstate', this.handleHistaryBack, false);
+    window.addEventListener('popstate', this.handleHistoryBack, false);
   }
   componentWillUnmount() {
-    window.removeEventListener('popstate', this.handleHistaryBack, false);
+    window.removeEventListener('popstate', this.handleHistoryBack, false);
   }
   render() {
     const {
@@ -120,19 +119,17 @@ class MBCollaboratorEditorPopover extends _react.default.Component {
         className: "dtable-font dtable-icon-return"
       }),
       rightContent: /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Done')),
-      onLeftClick: this.props.onClosePopover,
-      onRightClick: this.props.onClosePopover
+      onLeftClick: this.props.onClose,
+      onRightClick: this.props.onClose
     }), /*#__PURE__*/_react.default.createElement("div", {
       className: "dtable-ui-mb-editor-body dtable-ui-mb-collaborator-editor-body"
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "mb-search-collaborator-items"
-    }, /*#__PURE__*/_react.default.createElement("input", {
-      className: "form-control",
-      type: "text",
-      placeholder: (0, _lang.getLocale)('Search_collaborator'),
+    }, /*#__PURE__*/_react.default.createElement(_DTableSearchInput.default, {
+      autoFocus: true,
       value: searchVal,
-      onChange: this.onChangeSearch,
-      onClick: this.onInputClick
+      placeholder: (0, _lang.getLocale)('Search_collaborator'),
+      onChange: this.onChangeSearch
     })), /*#__PURE__*/_react.default.createElement("div", {
       className: "mb-collaborators-container"
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -141,11 +138,11 @@ class MBCollaboratorEditorPopover extends _react.default.Component {
       className: "content"
     }, filteredCollaborators.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
       className: "search-result-none"
-    }, (0, _lang.getLocale)('No_collaborators_avaliable')), filteredCollaborators.length > 0 && this.renderFilteredCollaborators(filteredCollaborators)))));
+    }, (0, _lang.getLocale)('No_collaborators_available')), filteredCollaborators.length > 0 && this.renderFilteredCollaborators(filteredCollaborators)))));
   }
 }
-MBCollaboratorEditorPopover.defaultProps = {
+MBCollaboratorEditor.defaultProps = {
   isReadOnly: false,
   value: []
 };
-var _default = exports.default = MBCollaboratorEditorPopover;
+var _default = exports.default = MBCollaboratorEditor;

package/lib/CollaboratorEditor/pc-collaborator-editor/index.js

@@ -0,0 +1,257 @@
+"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 _dtableUtils = require("dtable-utils");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactstrap = require("reactstrap");
+var _CollaboratorItem = _interopRequireDefault(require("../../CollaboratorItem"));
+var _DTableSearchInput = _interopRequireDefault(require("../../DTableSearchInput"));
+var _lang = require("../../lang");
+var _constants = require("../../constants");
+var _objectUtils = _interopRequireDefault(require("../../utils/object-utils"));
+require("./index.css");
+class PCCollaboratorEditor extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.onValueChanged = newSearchValue => {
+      if (newSearchValue === this.state.searchValue) return;
+      const {
+        collaborators
+      } = this.props;
+      this.filteredCollaborators = (0, _dtableUtils.searchCollaborators)(collaborators, newSearchValue);
+      this.setState({
+        highlightIndex: this.filteredCollaborators.length > 0 ? 0 : -1,
+        searchValue: newSearchValue
+      });
+    };
+    this.onCollaboratorClick = collaborator => {
+      this.props.onCommit(collaborator);
+    };
+    this.getFilterCollaborator = () => {
+      const {
+        collaborators
+      } = this.props;
+      const searchValue = this.state.searchValue.toLowerCase();
+      if (!searchValue) return collaborators;
+      return (0, _dtableUtils.searchCollaborators)(collaborators, searchValue);
+    };
+    this.getMaxItemNum = () => {
+      let collaboratorContainerStyle = getComputedStyle(this.container, null);
+      let collaboratorItemStyle = getComputedStyle(this.collaboratorItem, null);
+      let maxContainerItemNum = Math.floor(parseInt(collaboratorContainerStyle.maxHeight) / parseInt(collaboratorItemStyle.height));
+      return maxContainerItemNum - 1;
+    };
+    this.onHotKey = e => {
+      if (e.keyCode === _constants.KeyCodes.Enter) {
+        this.onEnter(e);
+      } else if (e.keyCode === _constants.KeyCodes.UpArrow) {
+        this.onUpArrow(e);
+      } else if (e.keyCode === _constants.KeyCodes.DownArrow) {
+        this.onDownArrow(e);
+      } else if (e.keyCode === _constants.KeyCodes.Escape) {
+        this.onEsc(e);
+      } else if (e.keyCode === _constants.KeyCodes.Tab) {
+        if (this.props.onPressTab) {
+          this.props.onPressTab(e);
+        }
+      }
+    };
+    this.onEnter = e => {
+      e.preventDefault();
+      let collaborator;
+      if (this.filteredCollaborators.length === 1) {
+        collaborator = this.filteredCollaborators[0];
+      } else if (this.state.highlightIndex > -1) {
+        collaborator = this.filteredCollaborators[this.state.highlightIndex];
+      }
+      if (collaborator) {
+        this.onCollaboratorClick(collaborator);
+      }
+    };
+    this.onUpArrow = e => {
+      e.preventDefault();
+      e.stopPropagation();
+      let {
+        highlightIndex,
+        maxItemNum,
+        itemHeight
+      } = this.state;
+      if (highlightIndex > 0) {
+        this.setState({
+          highlightIndex: highlightIndex - 1
+        }, () => {
+          if (highlightIndex < this.filteredCollaborators.length - maxItemNum) {
+            this.container.scrollTop -= itemHeight;
+          }
+        });
+      } else {
+        this.setState({
+          highlightIndex: this.filteredCollaborators.length - 1
+        }, () => {
+          this.container.scrollTop = this.container.scrollHeight;
+        });
+      }
+    };
+    this.onDownArrow = e => {
+      e.preventDefault();
+      e.stopPropagation();
+      let {
+        highlightIndex,
+        maxItemNum,
+        itemHeight
+      } = this.state;
+      if (highlightIndex < this.filteredCollaborators.length - 1) {
+        this.setState({
+          highlightIndex: highlightIndex + 1
+        }, () => {
+          if (highlightIndex >= maxItemNum) {
+            this.container.scrollTop += itemHeight;
+          }
+        });
+      } else {
+        this.setState({
+          highlightIndex: 0
+        }, () => {
+          this.container.scrollTop = 0;
+        });
+      }
+    };
+    this.onEsc = e => {
+      e.preventDefault();
+      e.stopPropagation();
+      const {
+        isInModal,
+        value,
+        onCommitCancel,
+        onClose
+      } = this.props;
+      if (isInModal) {
+        onClose && onClose();
+        return;
+      }
+      if (_objectUtils.default.isSameObject({
+        'value': this.state.value
+      }, {
+        value
+      })) {
+        onCommitCancel && onCommitCancel();
+        return;
+      }
+      this.onCommit();
+    };
+    this.onCommit = () => {
+      const value = this.getValue();
+      this.props.onCommit(value);
+    };
+    this.getValue = () => {
+      return this.state.value;
+    };
+    this.onKeyDown = e => {
+      if (e.keyCode === _constants.KeyCodes.LeftArrow || e.keyCode === _constants.KeyCodes.RightArrow) {
+        e.stopPropagation();
+      }
+    };
+    this.state = {
+      searchValue: '',
+      highlightIndex: -1,
+      maxItemNum: 0,
+      itemHeight: 0
+    };
+    this.filteredCollaborators = props.collaborators || [];
+  }
+  componentDidMount() {
+    if (this.props.isInModal && this.parent) {
+      if (this.parent.getBoundingClientRect().top > 330) {
+        this.ref.style.top = '-200px';
+      }
+    }
+    if (!this.props.isInModal && this.ref) {
+      const {
+        bottom
+      } = this.ref.getBoundingClientRect();
+      if (bottom > window.innerHeight) {
+        this.ref.style.top = "".concat(window.innerHeight - bottom, "px");
+      }
+    }
+    if (this.container && this.collaboratorItem) {
+      this.setState({
+        maxItemNum: this.getMaxItemNum(),
+        itemHeight: parseInt(getComputedStyle(this.collaboratorItem, null).height)
+      });
+    }
+    document.addEventListener('keydown', this.onHotKey, true);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.isInModal && nextProps.value !== this.state.value && Array.isArray(nextProps.value)) {
+      this.setState({
+        value: nextProps.value
+      });
+    }
+  }
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.onHotKey, true);
+  }
+  render() {
+    const {
+      searchValue,
+      highlightIndex
+    } = this.state;
+    const {
+      isInModal,
+      value = [],
+      target
+    } = this.props;
+    const dom = /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-editor-container dtable-ui-collaborator-editor-container",
+      ref: ref => this.ref = ref
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "collaborator-search-container"
+    }, /*#__PURE__*/_react.default.createElement(_DTableSearchInput.default, {
+      autoFocus: true,
+      placeholder: (0, _lang.getLocale)('Search_collaborator'),
+      value: searchValue,
+      onChange: this.onValueChanged,
+      onKeyDown: this.onKeyDown
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "collaborator-list-container",
+      ref: ref => this.container = ref
+    }, this.filteredCollaborators.length > 0 && this.filteredCollaborators.map((collaborator, index) => {
+      const isSelected = value.includes(collaborator.email);
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: collaborator.email,
+        className: (0, _classnames.default)('collaborator-item-container', {
+          'collaborator-item-container-highlight': index === highlightIndex
+        }),
+        ref: ref => this.collaboratorItem = ref,
+        onClick: this.onCollaboratorClick.bind(this, collaborator)
+      }, /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
+        collaborator: collaborator
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        className: "collaborator-checked"
+      }, isSelected && /*#__PURE__*/_react.default.createElement("i", {
+        className: "dtable-font dtable-icon-check-mark"
+      })));
+    }), this.filteredCollaborators.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-editor-no-search-result"
+    }, (0, _lang.getLocale)('No_collaborators_available'))));
+    if (isInModal) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        ref: ref => this.parent = ref
+      }, /*#__PURE__*/_react.default.createElement(_reactstrap.Popover, {
+        placement: "bottom-start",
+        isOpen: true,
+        target: target,
+        hideArrow: true,
+        fade: false,
+        className: "dtable-ui dtable-ui-row-expand-select-editor-popover"
+      }, dom));
+    }
+    return dom;
+  }
+}
+var _default = exports.default = PCCollaboratorEditor;

package/lib/CollaboratorItem/index.css

@@ -7,6 +7,7 @@
   font-size: 13px;
   border-radius: 10px;
   background: #eaeaea;
+  overflow: hidden;
 }
 
 .dtable-ui.collaborator-item .collaborator-avatar,
@@ -20,7 +21,12 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: 0 5px 0 2px;
+  transform: translateY(0);
+  flex-shrink: 0;
+}
+
+.dtable-ui.collaborator-item .collaborator-name {
+  margin-left: 5px;
 }
 
 .dtable-ui.collaborator-item .collaborator-avatar img {

package/lib/CollaboratorItem/index.js

@@ -6,22 +6,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
 require("./index.css");
 class CollaboratorItem extends _react.default.Component {
   constructor() {
     super(...arguments);
-    this.onDeleteCollaborator = () => {
+    this.onDeleteCollaborator = event => {
+      event.stopPropagation();
+      event && event.nativeEvent.stopImmediatePropagation();
       this.props.onDeleteCollaborator(this.props.collaborator);
     };
   }
   render() {
     const {
+      className,
       collaborator,
       enableDeleteCollaborator
     } = this.props;
     return /*#__PURE__*/_react.default.createElement("div", {
       title: collaborator.name,
-      className: "dtable-ui collaborator-item"
+      className: (0, _classnames.default)('dtable-ui collaborator-item', className)
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: "collaborator-avatar"
     }, /*#__PURE__*/_react.default.createElement("img", {

package/lib/Comment/body/comment.js

@@ -0,0 +1,190 @@
+"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;