dtable-ui-component 6.0.3 → 6.0.4

package/lib/Comment/body/index.css

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

package/lib/Comment/body/index.js

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

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

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

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

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

package/lib/Comment/footer/index.css

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

package/lib/Comment/footer/index.js

@@ -0,0 +1,169 @@
+"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 _toaster = _interopRequireDefault(require("../../toaster"));
+var _utils = require("../../utils/utils");
+var _participants = _interopRequireDefault(require("./participants"));
+var _input = _interopRequireDefault(require("./input"));
+var _btns = _interopRequireDefault(require("./btns"));
+require("./index.css");
+class Footer extends _react.default.Component {
+  constructor(_props) {
+    super(_props);
+    this.initParticipants = props => {
+      const {
+        row,
+        collaborators
+      } = props;
+      if (row._participants && Array.isArray(row._participants)) {
+        let rowParticipants = row._participants.filter(Boolean);
+        rowParticipants = rowParticipants.filter(participant => {
+          const email = typeof participant === 'string' ? participant : participant.email;
+          return !!collaborators.find(collaborator => collaborator.email === email);
+        });
+        this.setState({
+          participants: rowParticipants
+        });
+        return;
+      }
+      this.setState({
+        participants: []
+      });
+    };
+    this.updateParticipants = participantList => {
+      this.setState({
+        participants: participantList
+      }, () => {
+        this.props.onChangeParticipants && this.props.onChangeParticipants(participantList);
+      });
+    };
+    this.addParticipant = email => {
+      if (!email) return;
+      const {
+        participants
+      } = this.state;
+      const {
+        collaborators
+      } = this.props;
+      const isExist = participants.some(participant => participant.email === email);
+      if (isExist) return;
+      let newParticipantList = participants.slice(0);
+      let newParticipant = collaborators.find(collaborator => collaborator.email === email);
+      newParticipantList.push(newParticipant);
+      this.updateParticipants(newParticipantList);
+    };
+    this.convertComment = value => {
+      let regex = /<[a-zA-Z]+.*?>([\s\S]*?)<\/[a-zA-Z]*?>/g;
+      let match;
+      let start = 0;
+      let newValue = '';
+      while ((match = regex.exec(value)) !== null) {
+        let notificationName = "".concat(match[1]);
+        let substr = value.substring(start, match.index);
+        start = regex.lastIndex;
+        newValue += substr + notificationName;
+      }
+      if (start < value.length) {
+        newValue += value.slice(start);
+      }
+      return newValue;
+    };
+    this.updateAddState = isAdding => {
+      this.setState({
+        isAdding
+      });
+    };
+    this.handleError = error => {
+      let errMsg = (0, _utils.getErrorMsg)(error, true);
+      if (!error.response || error.response.status !== 403) {
+        _toaster.default.danger(this.props.t(errMsg));
+      }
+    };
+    this.addComment = comment => {
+      this.setState({
+        isAdding: true
+      }, () => {
+        this.props.addComment(comment, {
+          successCallback: () => {
+            this.commentInputRef.setCommentInputValue();
+            this.updateAddState(false);
+          },
+          failCallback: error => {
+            this.handleError(error);
+            this.updateAddState(false);
+          }
+        });
+      });
+    };
+    this.onSubmit = () => {
+      const commentValue = this.commentInputRef.getCommentInputValue();
+      const comment = this.convertComment(commentValue);
+      if (!comment.trim()) return;
+      this.addComment(comment);
+      const {
+        username
+      } = window.dtable;
+      this.addParticipant(username);
+    };
+    this.onInsertElement = (content, nodeType) => {
+      this.commentInputRef.onInsertElement(content, nodeType);
+    };
+    this.state = {
+      isAdding: false,
+      participants: []
+    };
+    this.commentInputRef = null;
+  }
+  componentDidMount() {
+    this.initParticipants(this.props);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    var _this$props$row, _nextProps$row;
+    if (((_this$props$row = this.props.row) === null || _this$props$row === void 0 ? void 0 : _this$props$row._id) !== ((_nextProps$row = nextProps.row) === null || _nextProps$row === void 0 ? void 0 : _nextProps$row._id)) {
+      this.initParticipants(nextProps);
+    }
+  }
+  render() {
+    const {
+      isAdding,
+      participants
+    } = this.state;
+    const {
+      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
+    }));
+  }
+}
+var _default = exports.default = Footer;

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

@@ -0,0 +1,52 @@
+.dtable-ui-comments-footer .dtable-ui-comment-input {
+  background-color: #fff;
+  height: 90px;
+  overflow: auto;
+  margin: 0px;
+  padding: 9px;
+  min-height: 90px;
+  border: 1px solid #e6e6dd;
+  border-bottom: none;
+  border-radius: 5px 5px 0px 0px;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  font-size: 14px;
+}
+
+.dtable-ui-comments-footer .dtable-ui-comment-input.dtable-ui-comment-input-archive {
+  height: 130px;
+}
+
+.dtable-ui-comments-footer .dtable-ui-comment-input:empty::before {
+  content: attr(placeholder);
+  color: #868E96;
+}
+
+.dtable-ui-comments-footer .dtable-ui-comment-input .image-container {
+  display: inline-block;
+  cursor: pointer;
+}
+
+.dtable-ui-comments-footer .dtable-ui-comment-caret-list {
+  background: #fff;
+  position: absolute;
+  padding: 10px 0;
+  max-height: 200px;
+  overflow: auto;
+  min-width: 150px;
+  /* higher than row expand */
+  z-index: 1049;
+  border-radius: 5px;
+  border: 1px solid #ededed;
+  max-width: 200px;
+}
+
+.dtable-ui-comments-footer .dtable-ui-comment-caret-list .comment-participant-item {
+  padding: 5px 0;
+}
+
+.dtable-ui-comments-footer .dtable-ui-comment-caret-list .comment-participant-item.active,
+.dtable-ui-comments-footer .dtable-ui-comment-caret-list .comment-participant-item:hover {
+  background: #f5f5f5;
+  cursor: pointer;
+}