dtable-ui-component 6.0.91 → 6.0.93

package/lib/CollaboratorEditor/index.js

@@ -11,6 +11,7 @@ var _reactResponsive = _interopRequireDefault(require("react-responsive"));
 var _pcEditor = _interopRequireDefault(require("./pc-editor"));
 var _mbEditor = _interopRequireDefault(require("./mb-editor"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 const CollaboratorEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     isMobile,
@@ -18,24 +19,32 @@ const CollaboratorEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     ...props
   } = _ref;
   const value = Array.isArray(oldValue) ? oldValue : [];
-  if (isMobile === false) return /*#__PURE__*/_react.default.createElement(_pcEditor.default, Object.assign({}, props, {
+  if (isMobile === false) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcEditor.default, {
+    ...props,
     value: value,
     ref: ref
-  }));
-  if (isMobile === true) return /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
+  });
+  if (isMobile === true) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_mbEditor.default, {
+    ...props,
     value: value,
     ref: ref
-  }));
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-    query: "(min-width: 768px)"
-  }, /*#__PURE__*/_react.default.createElement(_pcEditor.default, Object.assign({}, props, {
-    value: value,
-    ref: ref
-  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-    query: "(max-width: 768px)"
-  }, /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
-    value: value,
-    ref: ref
-  }))));
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
+      query: "(min-width: 768px)",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcEditor.default, {
+        ...props,
+        value: value,
+        ref: ref
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
+      query: "(max-width: 768px)",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_mbEditor.default, {
+        ...props,
+        value: value,
+        ref: ref
+      })
+    })]
+  });
 });
 var _default = exports.default = CollaboratorEditor;

package/lib/CollaboratorEditor/mb-editor/index.js

@@ -11,6 +11,7 @@ var _MobileSelector = _interopRequireDefault(require("../../MobileSelector"));
 var _lang = require("../../lang");
 var _CollaboratorItem = _interopRequireDefault(require("../../CollaboratorItem"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 const {
   Search,
   Option,
@@ -42,13 +43,13 @@ class MBCollaboratorEditor extends _react.default.Component {
       } = this.props;
       return collaborators.map(collaborator => {
         const isSelected = value.includes(collaborator.email);
-        return /*#__PURE__*/_react.default.createElement(Option, {
-          key: collaborator.email,
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Option, {
           isSelected: isSelected,
-          onChange: this.onChange.bind(this, collaborator)
-        }, /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
-          collaborator: collaborator
-        }));
+          onChange: this.onChange.bind(this, collaborator),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CollaboratorItem.default, {
+            collaborator: collaborator
+          })
+        }, collaborator.email);
       });
     };
     this.state = {
@@ -71,15 +72,20 @@ class MBCollaboratorEditor extends _react.default.Component {
       searchVal
     } = this.state;
     const displayCollaborators = searchVal ? (0, _dtableUtils.searchCollaborators)(collaborators, searchVal) : collaborators;
-    return /*#__PURE__*/_react.default.createElement(_MobileSelector.default, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MobileSelector.default, {
       onClose: this.props.onClose,
       title: column.name,
-      className: "dtable-ui-mobile-collaborator-editor"
-    }, collaborators.length > 10 && /*#__PURE__*/_react.default.createElement(Search, {
-      value: searchVal,
-      placeholder: (0, _lang.getLocale)('Search_collaborator'),
-      onChange: this.onChangeSearch
-    }), /*#__PURE__*/_react.default.createElement(Options, null, displayCollaborators.length === 0 && /*#__PURE__*/_react.default.createElement(Empty, null, (0, _lang.getLocale)('No_collaborators_available')), displayCollaborators.length > 0 && this.renderCollaborators(displayCollaborators)));
+      className: "dtable-ui-mobile-collaborator-editor",
+      children: [collaborators.length > 10 && /*#__PURE__*/(0, _jsxRuntime.jsx)(Search, {
+        value: searchVal,
+        placeholder: (0, _lang.getLocale)('Search_collaborator'),
+        onChange: this.onChangeSearch
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Options, {
+        children: [displayCollaborators.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(Empty, {
+          children: (0, _lang.getLocale)('No_collaborators_available')
+        }), displayCollaborators.length > 0 && this.renderCollaborators(displayCollaborators)]
+      })]
+    });
   }
 }
 MBCollaboratorEditor.defaultProps = {

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

@@ -15,6 +15,7 @@ var _lang = require("../../lang");
 var _constants = require("../../constants");
 var _objectUtils = _interopRequireDefault(require("../../utils/object-utils"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class PCCollaboratorEditor extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -175,7 +176,7 @@ class PCCollaboratorEditor extends _react.default.Component {
         bottom
       } = this.ref.getBoundingClientRect();
       if (bottom > window.innerHeight) {
-        this.ref.style.top = "".concat(window.innerHeight - bottom, "px");
+        this.ref.style.top = `${window.innerHeight - bottom}px`;
       }
     }
     if (this.container && this.collaboratorItem) {
@@ -206,50 +207,57 @@ class PCCollaboratorEditor extends _react.default.Component {
       value = [],
       target
     } = this.props;
-    const dom = /*#__PURE__*/_react.default.createElement("div", {
+    const dom = /*#__PURE__*/(0, _jsxRuntime.jsxs)("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'))));
+      ref: ref => this.ref = ref,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "collaborator-search-container",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableSearchInput.default, {
+          autoFocus: true,
+          placeholder: (0, _lang.getLocale)('Search_collaborator'),
+          value: searchValue,
+          onChange: this.onValueChanged,
+          onKeyDown: this.onKeyDown
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "collaborator-list-container",
+        ref: ref => this.container = ref,
+        children: [this.filteredCollaborators.length > 0 && this.filteredCollaborators.map((collaborator, index) => {
+          const isSelected = value.includes(collaborator.email);
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: (0, _classnames.default)('collaborator-item-container', {
+              'collaborator-item-container-highlight': index === highlightIndex
+            }),
+            ref: ref => this.collaboratorItem = ref,
+            onClick: this.onCollaboratorClick.bind(this, collaborator),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CollaboratorItem.default, {
+              collaborator: collaborator
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "collaborator-checked",
+              children: isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+                className: "dtable-font dtable-icon-check-mark"
+              })
+            })]
+          }, collaborator.email);
+        }), this.filteredCollaborators.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "dtable-ui-editor-no-search-result",
+          children: (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 /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ref: ref => this.parent = ref,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Popover, {
+          placement: "bottom-start",
+          isOpen: true,
+          target: target,
+          hideArrow: true,
+          fade: false,
+          className: "dtable-ui dtable-ui-row-expand-select-editor-popover",
+          children: dom
+        })
+      });
     }
     return dom;
   }

package/lib/CollaboratorFormatter/index.js

@@ -10,6 +10,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _CollaboratorItem = _interopRequireDefault(require("../CollaboratorItem"));
 var _default_avatar = _interopRequireDefault(require("../assets/images/avatar/default_avatar.png"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 // 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
@@ -36,12 +37,11 @@ class CollaboratorFormatter extends _react.default.PureComponent {
             avatar_url: _default_avatar.default
           };
         }
-        return /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
-          key: index,
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CollaboratorItem.default, {
           collaborator: collaborator,
           enableDeleteCollaborator: enableDeleteCollaborator,
           onDeleteCollaborator: onDeleteCollaborator
-        });
+        }, index);
       });
     };
   }
@@ -52,14 +52,15 @@ class CollaboratorFormatter extends _react.default.PureComponent {
     } = this.props;
     const classname = (0, _classnames.default)('dtable-ui cell-formatter-container collaborator-formatter', containerClassName);
     if (!value || Array.isArray(value) && value.length === 0) {
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: classname
       });
     }
     const collaborators = this.getCollaborators();
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: classname
-    }, collaborators);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classname,
+      children: collaborators
+    });
   }
 }
 CollaboratorFormatter.defaultProps = {

package/lib/CollaboratorItem/index.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class CollaboratorItem extends _react.default.Component {
   constructor() {
     super(...arguments);
@@ -23,23 +24,27 @@ class CollaboratorItem extends _react.default.Component {
       collaborator,
       enableDeleteCollaborator
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       title: collaborator.name,
-      className: (0, _classnames.default)('dtable-ui collaborator-item', className)
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "collaborator-avatar"
-    }, /*#__PURE__*/_react.default.createElement("img", {
-      className: "collaborator-avatar-icon",
-      alt: collaborator.name,
-      src: collaborator.avatar_url
-    })), /*#__PURE__*/_react.default.createElement("span", {
-      className: "collaborator-name"
-    }, collaborator.name), enableDeleteCollaborator && /*#__PURE__*/_react.default.createElement("span", {
-      className: "collaborator-remove",
-      onClick: this.onDeleteCollaborator
-    }, /*#__PURE__*/_react.default.createElement("i", {
-      className: "dtable-font dtable-icon-fork-number"
-    })));
+      className: (0, _classnames.default)('dtable-ui collaborator-item', className),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "collaborator-avatar",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          className: "collaborator-avatar-icon",
+          alt: collaborator.name,
+          src: collaborator.avatar_url
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "collaborator-name",
+        children: collaborator.name
+      }), enableDeleteCollaborator && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "collaborator-remove",
+        onClick: this.onDeleteCollaborator,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+          className: "dtable-font dtable-icon-fork-number"
+        })
+      })]
+    });
   }
 }
 CollaboratorItem.defaultProps = {

package/lib/CollapsibleSettingLayout/index.css

@@ -10,11 +10,6 @@
 
 .collapsible-setting-layout-header .dtable-font {
   font-size: 10px;
-  color: #999;
-}
-
-.collapsible-setting-layout-header .dtable-font:hover {
-  color: #555;
 }
 
 .collapsible-setting-layout-header .dtable-font.dtable-icon-spin {

package/lib/CollapsibleSettingLayout/index.js

@@ -9,6 +9,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 const CollapsibleSettingLayout = props => {
   const {
     className,
@@ -16,17 +17,21 @@ const CollapsibleSettingLayout = props => {
     children
   } = props;
   const [isShowSettings, setIsShowSettings] = (0, _react.useState)(true);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('collapsible-setting-layout', className)
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "collapsible-setting-layout-header w-100 d-flex align-items-center",
-    onClick: () => setIsShowSettings(!isShowSettings)
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "collapsible-setting-layout-title"
-  }, title), /*#__PURE__*/_react.default.createElement("i", {
-    className: "dtable-font dtable-icon-right".concat(isShowSettings ? ' dtable-icon-spin' : '')
-  })), isShowSettings && /*#__PURE__*/_react.default.createElement("div", {
-    className: "collapsible-setting-layout-body mt-3 pl-2"
-  }, children || ''));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)('collapsible-setting-layout', className),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "collapsible-setting-layout-header seatable-collapse-header w-100 d-flex align-items-center",
+      onClick: () => setIsShowSettings(!isShowSettings),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "collapsible-setting-layout-title",
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+        className: `dtable-font dtable-icon-right${isShowSettings ? ' dtable-icon-spin' : ''}`
+      })]
+    }), isShowSettings && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "collapsible-setting-layout-body mt-3 pl-2",
+      children: children || ''
+    })]
+  });
 };
 var _default = exports.default = CollapsibleSettingLayout;

package/lib/Comment/body/comment.js

@@ -11,6 +11,7 @@ var _reactstrap = require("reactstrap");
 var _seafileEditor = require("@seafile/seafile-editor");
 var _ImagePreviewerLightbox = _interopRequireDefault(require("../../ImagePreviewerLightbox"));
 var _lang = require("../../lang");
+var _jsxRuntime = require("react/jsx-runtime");
 class Comment extends _react.PureComponent {
   constructor(props) {
     super(props);
@@ -83,17 +84,22 @@ class Comment extends _react.PureComponent {
         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)));
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          className: "avatar",
+          src: authorInfo.avatar_url,
+          alt: ""
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "reviewer-info",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "reviewer-name",
+            children: authorInfo.name
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "review-time",
+            children: comment.create_at
+          })]
+        })]
+      });
     };
     this.onCommentClick = e => {
       // click participant link, page shouldn't jump
@@ -133,58 +139,68 @@ class Comment extends _react.PureComponent {
     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
-    }));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: `dtable-ui-comment-container ${comment.resolved ? 'dtable-ui-comment-container-resolved' : ''}`,
+      id: comment.id,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "dtable-ui-comment-info",
+        children: [this.renderInfo(comment), isShowDropdownMenu && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.Dropdown, {
+          isOpen: this.state.dropdownOpen,
+          size: "sm",
+          className: "dtable-ui-comments-dropdown",
+          toggle: this.toggleDropDownMenu,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.DropdownToggle, {
+            className: "dtable-ui-comments-dropdown-btn",
+            role: "button",
+            "data-toggle": "dropdown",
+            title: moreOperationsText,
+            "aria-label": moreOperationsText,
+            "aria-expanded": this.state.dropdownOpen,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+              className: "dtable-font dtable-icon-more-level",
+              title: moreOperationsText,
+              "aria-label": moreOperationsText
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.DropdownMenu, {
+            className: "dtable-dropdown-menu dropdown-menu dtable-ui-comment-dropdown-list",
+            children: [!comment.resolved && onResolve && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.DropdownItem, {
+              onClick: event => onResolve(event, comment.id),
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "comment-icon dtable-font dtable-icon-mark mr-2"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "comment-text",
+                children: (0, _lang.getLocale)('Mark_as_resolved')
+              })]
+            }), comment.author === username && onDelete && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.DropdownItem, {
+              onClick: event => onDelete(event, comment.id),
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "comment-icon dtable-font dtable-icon-delete mr-2"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "comment-text",
+                children: (0, _lang.getLocale)('Delete')
+              })]
+            })]
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "dtable-ui-comment-content",
+        onClick: e => this.onCommentClick(e),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "dtable-ui-comment-content-container",
+          ref: ref => this.commentContentRef = ref,
+          onClick: this.handleImageZoom,
+          dangerouslySetInnerHTML: {
+            __html: this.state.commentContent
+          }
+        })
+      }), this.state.isShowLargeImage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_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.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _lang = require("../../lang");
 var _comment = _interopRequireDefault(require("./comment"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 const Body = _ref => {
   let {
     comments,
@@ -16,17 +17,19 @@ const Body = _ref => {
     ...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__*/(0, _jsxRuntime.jsx)("div", {
+      className: "dtable-ui-comments-empty",
+      children: (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
-    }));
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: comments.map((comment, index) => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_comment.default, {
+        ...props,
+        comment: comment,
+        isScrollBottom: index === comments.length - 1 && isFirstLoading
+      }, comment.id);
+    })
+  });
 };
 var _default = exports.default = Body;