dtable-ui-component 6.0.91 → 6.0.93

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);
@@ -63,7 +64,7 @@ class Footer extends _react.default.Component {
       let start = 0;
       let newValue = '';
       while ((match = regex.exec(value)) !== null) {
-        let notificationName = "".concat(match[1]);
+        let notificationName = `${match[1]}`;
         let substr = value.substring(start, match.index);
         start = regex.lastIndex;
         newValue += substr + notificationName;
@@ -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;
@@ -48,12 +49,12 @@ class Input extends _react.default.Component {
         right,
         left
       } = this.commentRef.getBoundingClientRect();
-      this.commentPopoverRef.style.left = "".concat(caretPosition.x + FONT_SIZE_WIDTH, "px");
-      this.commentPopoverRef.style.top = "".concat(caretPosition.y - this.commentPopoverRef.offsetHeight, "px");
+      this.commentPopoverRef.style.left = `${caretPosition.x + FONT_SIZE_WIDTH}px`;
+      this.commentPopoverRef.style.top = `${caretPosition.y - this.commentPopoverRef.offsetHeight}px`;
       if (caretPosition.x + FONT_SIZE_WIDTH > right - PADDING_WIDTH) {
         // is last code
-        this.commentPopoverRef.style.left = "".concat(left + PADDING_WIDTH + FONT_SIZE_WIDTH, "px");
-        this.commentPopoverRef.style.top = "".concat(caretPosition.y - this.commentPopoverRef.offsetHeight + LINE_HEIGHT, "px");
+        this.commentPopoverRef.style.left = `${left + PADDING_WIDTH + FONT_SIZE_WIDTH}px`;
+        this.commentPopoverRef.style.top = `${caretPosition.y - this.commentPopoverRef.offsetHeight + LINE_HEIGHT}px`;
       }
       if (caretPosition.x + FONT_SIZE_WIDTH + this.commentPopoverRef.offsetWidth > document.body.clientWidth) {
         this.commentPopoverRef.style.right = 0;
@@ -165,7 +166,7 @@ class Input extends _react.default.Component {
         spanNode2 = document.createElement('span');
         spanNode1.className = 'at-text';
         spanNode1.contentEditable = 'false';
-        spanNode1.innerHTML = "@".concat(content.name);
+        spanNode1.innerHTML = `@${content.name}`;
         spanNode2.innerHTML = ' ';
       }
       let frag = document.createDocumentFragment();
@@ -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;

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
 class Participant extends _react.default.Component {
   constructor() {
     super(...arguments);
@@ -33,21 +34,25 @@ class Participant extends _react.default.Component {
       activeIndex
     } = this.props;
     const active = index === activeIndex;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "comment-participant-item ".concat(active ? 'active' : ''),
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: `comment-participant-item ${active ? 'active' : ''}`,
       ref: ref => this.participantItem = ref,
-      onClick: this.onSelect
-    }, /*#__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"
-    }, participant.name))));
+      onClick: this.onSelect,
+      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",
+            children: participant.name
+          })]
+        })
+      })
+    });
   }
 }
 var _default = exports.default = Participant;

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

@@ -11,6 +11,7 @@ var _participant = _interopRequireDefault(require("./participant"));
 var _participantSelect = _interopRequireDefault(require("./participant-select"));
 var _lang = require("../../../lang");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class Participants extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -34,35 +35,37 @@ class Participants extends _react.default.Component {
       participants,
       collaborators
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "dtable-ui-comments-participants mb-2 position-relative",
-      ref: ref => this.ref = ref
-    }, participants.map(participant => {
-      return /*#__PURE__*/_react.default.createElement(_participant.default, {
-        participant: participant,
-        key: participant.email
-      });
-    }), canUpdate && /*#__PURE__*/_react.default.createElement("span", {
-      className: "dtable-ui-participants-add",
-      onClick: this.toggleParticipantSelect,
-      ref: ref => this.addIcon = ref
-    }, /*#__PURE__*/_react.default.createElement("i", {
-      "aria-hidden": "true",
-      className: "dtable-font dtable-icon-add"
-    })), this.addIcon && /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledTooltip, {
-      delay: {
-        show: 0,
-        hide: 0
-      },
-      target: this.addIcon,
-      placement: "bottom"
-    }, (0, _lang.getLocale)('Add_participants')), this.ref && this.state.showParticipantSelect && /*#__PURE__*/_react.default.createElement(_participantSelect.default, {
-      target: this.ref,
-      participants: participants,
-      collaborators: collaborators,
-      onChange: this.props.onChange,
-      onClose: this.closeParticipantSelect
-    }));
+      ref: ref => this.ref = ref,
+      children: [participants.map(participant => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_participant.default, {
+          participant: participant
+        }, participant.email);
+      }), canUpdate && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "dtable-ui-participants-add",
+        onClick: this.toggleParticipantSelect,
+        ref: ref => this.addIcon = ref,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+          "aria-hidden": "true",
+          className: "dtable-font dtable-icon-add"
+        })
+      }), this.addIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.UncontrolledTooltip, {
+        delay: {
+          show: 0,
+          hide: 0
+        },
+        target: this.addIcon,
+        placement: "bottom",
+        children: (0, _lang.getLocale)('Add_participants')
+      }), this.ref && this.state.showParticipantSelect && /*#__PURE__*/(0, _jsxRuntime.jsx)(_participantSelect.default, {
+        target: this.ref,
+        participants: participants,
+        collaborators: collaborators,
+        onChange: this.props.onChange,
+        onClose: this.closeParticipantSelect
+      })]
+    });
   }
 }
 var _default = exports.default = Participants;

package/lib/Comment/footer/participants/participant/index.js

@@ -8,25 +8,28 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 const Participant = _ref => {
   let {
     participant
   } = _ref;
   const ref = (0, _react.useRef)(null);
-  return /*#__PURE__*/_react.default.createElement("span", {
-    className: "dtable-ui-participant-avatar"
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    src: participant.avatar_url,
-    className: "avatar",
-    ref: ref,
-    alt: "avatar"
-  }), ref.current && /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledTooltip, {
-    delay: {
-      show: 0,
-      hide: 0
-    },
-    target: ref,
-    placement: "bottom"
-  }, participant.name));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+    className: "dtable-ui-participant-avatar",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      src: participant.avatar_url,
+      className: "avatar",
+      ref: ref,
+      alt: "avatar"
+    }), ref.current && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.UncontrolledTooltip, {
+      delay: {
+        show: 0,
+        hide: 0
+      },
+      target: ref,
+      placement: "bottom",
+      children: participant.name
+    })]
+  });
 };
 var _default = exports.default = Participant;