dtable-ui-component 6.0.49 → 6.0.50

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.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 seatable-collapse-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".concat(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", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("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
-    }));
+      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;

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

@@ -13,6 +13,7 @@ var _DTablePopover = _interopRequireDefault(require("../../../DTablePopover"));
 var _Loading = _interopRequireDefault(require("../../../Loading"));
 var _lang = require("../../../lang");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class Btns extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -42,25 +43,29 @@ class Btns extends _react.default.Component {
       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))));
-      }));
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "comment-popover-list",
+        children: collaborators.map(participant => {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "comment-participant-item",
+            onClick: this.onChangeInputValue.bind(this, participant),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "comment-participant-container",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: "comment-participant text-truncate",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                  className: "comment-dtable-ui-participant-avatar ml-2",
+                  alt: participant.name,
+                  src: participant.avatar_url
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  className: "comment-participant-name text-truncate",
+                  children: participant.name
+                })]
+              })
+            })
+          }, participant.email);
+        })
+      });
     };
     this.state = {
       isShowPopover: false
@@ -74,40 +79,50 @@ class Btns extends _react.default.Component {
       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()));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "dtable-ui-comment-input-btns",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "d-flex justify-content-between dtable-ui-comment-input-btns-container",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "dtable-ui-comment-input-btns-content",
+            ref: ref => this.toolRef = ref,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FileUploader.default, {
+              uploadType: "image",
+              className: "dtable-ui-comment-image-upload",
+              onFileUploadSuccess: this.onFileUploadSuccess,
+              uploadFile: this.props.uploadFile,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                "aria-hidden": "true",
+                className: "dtable-font dtable-icon-picture-linear"
+              })
+            }), canUpdateParticipants && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "dtable-ui-comment-collaborator-tip",
+              onClick: this.onHandleCollaboratorTip,
+              children: "@"
+            })]
+          }), isAdding ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Button, {
+            className: "dtable-ui-comment-submit",
+            color: "primary",
+            size: "sm",
+            disabled: true,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.default, {})
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Button, {
+            className: "dtable-ui-comment-submit",
+            color: "primary",
+            size: "sm",
+            onClick: this.onSubmit,
+            tabIndex: -1,
+            children: (0, _lang.getLocale)('Submit')
+          })]
+        })
+      }), this.state.isShowPopover && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTablePopover.default, {
+        target: this.toolRef,
+        hideDTablePopover: this.onHideCollaboratorTip,
+        hideDTablePopoverWithEsc: this.onHideCollaboratorTip,
+        children: this.getCollaboratorContent()
+      })]
+    });
   }
 }
 var _default = exports.default = Btns;

package/lib/Comment/footer/index.js

@@ -12,6 +12,7 @@ var _participants = _interopRequireDefault(require("./participants"));
 var _input = _interopRequireDefault(require("./input"));
 var _btns = _interopRequireDefault(require("./btns"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class Footer extends _react.default.Component {
   constructor(_props) {
     super(_props);
@@ -137,33 +138,34 @@ class Footer extends _react.default.Component {
       collaborators
     } = this.props;
     const canUpdateParticipants = Boolean(this.props.onChangeParticipants);
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-comments-footer"
-    }, /*#__PURE__*/_react.default.createElement(_participants.default, {
-      canUpdate: canUpdateParticipants,
-      participants: participants,
-      collaborators: collaborators,
-      showIconTip: true,
-      onChange: this.updateParticipants
-    }), /*#__PURE__*/_react.default.createElement(_input.default, {
-      ref: ref => this.commentInputRef = ref,
-      collaborators: collaborators,
-      onSubmit: this.onSubmit,
-      uploadFile: this.props.uploadFile,
-      addParticipant: this.addParticipant,
-      onInputFocus: this.props.onInputFocus,
-      onInputBlur: this.props.onInputBlur,
-      autoFocusInput: this.props.autoFocusInput,
-      canUpdateParticipants: canUpdateParticipants
-    }), /*#__PURE__*/_react.default.createElement(_btns.default, {
-      isAdding: isAdding,
-      canUpdateParticipants: canUpdateParticipants,
-      collaborators: collaborators,
-      uploadFile: this.props.uploadFile,
-      onInsertElement: this.onInsertElement,
-      onSubmit: this.onSubmit,
-      addParticipant: this.addParticipant
-    }));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "dtable-ui-comments-footer",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_participants.default, {
+        canUpdate: canUpdateParticipants,
+        participants: participants,
+        collaborators: collaborators,
+        showIconTip: true,
+        onChange: this.updateParticipants
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.default, {
+        ref: ref => this.commentInputRef = ref,
+        collaborators: collaborators,
+        onSubmit: this.onSubmit,
+        uploadFile: this.props.uploadFile,
+        addParticipant: this.addParticipant,
+        onInputFocus: this.props.onInputFocus,
+        onInputBlur: this.props.onInputBlur,
+        autoFocusInput: this.props.autoFocusInput,
+        canUpdateParticipants: canUpdateParticipants
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_btns.default, {
+        isAdding: isAdding,
+        canUpdateParticipants: canUpdateParticipants,
+        collaborators: collaborators,
+        uploadFile: this.props.uploadFile,
+        onInsertElement: this.onInsertElement,
+        onSubmit: this.onSubmit,
+        addParticipant: this.addParticipant
+      })]
+    });
   }
 }
 var _default = exports.default = Footer;

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

@@ -18,6 +18,7 @@ var _hotkey = require("../../../utils/hotkey");
 var _participant = _interopRequireDefault(require("./participant"));
 var _lang = require("../../../lang");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 const FONT_SIZE_WIDTH = 15;
 const PADDING_WIDTH = 9;
 const LINE_HEIGHT = 22;
@@ -404,45 +405,49 @@ class Input extends _react.default.Component {
       filteredCollaborators,
       activeCollaboratorIndex
     } = this.state;
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)('dtable-ui-comment-input', {
-        'dtable-ui-comment-input-archive': !(api !== null && api !== void 0 && api.add)
-      }),
-      ref: ref => this.commentRef = ref,
-      onKeyDown: this.onKeyDown,
-      onFocus: this.onFocus,
-      onBlur: this.onBlur,
-      onKeyUp: this.onKeyUp,
-      onMouseUp: this.onMouseUp,
-      onPaste: this.onPaste,
-      placeholder: (0, _lang.getLocale)('Add_comment'),
-      onClick: this.handleImageZoom,
-      tabIndex: -1,
-      contentEditable: true
-    }), filteredCollaborators.length > 0 && /*#__PURE__*/_react.default.createElement(_ModalPortal.default, null, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-comment-caret-list",
-      ref: ref => this.commentPopoverRef = ref
-    }, filteredCollaborators.map((participant, i) => {
-      return /*#__PURE__*/_react.default.createElement(_participant.default, {
-        key: participant.email,
-        index: i,
-        activeIndex: activeCollaboratorIndex,
-        participant: participant,
-        setScrollTop: this.setScrollTop,
-        onSelect: this.onSelectCollaborator.bind(this, participant)
-      });
-    }))), largeImageIndex > -1 && /*#__PURE__*/_react.default.createElement(_ImagePreviewerLightbox.default, {
-      imageItems: imageUrlList,
-      imageIndex: this.state.largeImageIndex,
-      closeImagePopup: this.hideLargeImage,
-      moveToPrevImage: this.movePrev,
-      moveToNextImage: this.moveNext
-    }), /*#__PURE__*/_react.default.createElement(_FileUploader.default, {
-      className: "dtable-ui-comment-paste-uploader",
-      ref: ref => this.uploaderFileRef = ref,
-      onFileUploadSuccess: this.onFileUploadSuccess,
-      uploadFile: this.props.uploadFile
-    }));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames.default)('dtable-ui-comment-input', {
+          'dtable-ui-comment-input-archive': !(api !== null && api !== void 0 && api.add)
+        }),
+        ref: ref => this.commentRef = ref,
+        onKeyDown: this.onKeyDown,
+        onFocus: this.onFocus,
+        onBlur: this.onBlur,
+        onKeyUp: this.onKeyUp,
+        onMouseUp: this.onMouseUp,
+        onPaste: this.onPaste,
+        placeholder: (0, _lang.getLocale)('Add_comment'),
+        onClick: this.handleImageZoom,
+        tabIndex: -1,
+        contentEditable: true
+      }), filteredCollaborators.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalPortal.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "dtable-ui-comment-caret-list",
+          ref: ref => this.commentPopoverRef = ref,
+          children: filteredCollaborators.map((participant, i) => {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_participant.default, {
+              index: i,
+              activeIndex: activeCollaboratorIndex,
+              participant: participant,
+              setScrollTop: this.setScrollTop,
+              onSelect: this.onSelectCollaborator.bind(this, participant)
+            }, participant.email);
+          })
+        })
+      }), largeImageIndex > -1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImagePreviewerLightbox.default, {
+        imageItems: imageUrlList,
+        imageIndex: this.state.largeImageIndex,
+        closeImagePopup: this.hideLargeImage,
+        moveToPrevImage: this.movePrev,
+        moveToNextImage: this.moveNext
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FileUploader.default, {
+        className: "dtable-ui-comment-paste-uploader",
+        ref: ref => this.uploaderFileRef = ref,
+        onFileUploadSuccess: this.onFileUploadSuccess,
+        uploadFile: this.props.uploadFile
+      })]
+    });
   }
 }
 var _default = exports.default = Input;