dtable-ui-component 5.3.1-beta1 → 5.3.1-beta3

package/lib/Comment/footer/index.js

@@ -0,0 +1,170 @@
+"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;
+      console.log(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;
+}

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

@@ -0,0 +1,448 @@
+"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 _classnames = _interopRequireDefault(require("classnames"));
+var _dtableUtils = require("dtable-utils");
+var _ModalPortal = _interopRequireDefault(require("../../../ModalPortal"));
+var _utils = require("../../utils");
+var _ImagePreviewerLightbox = _interopRequireDefault(require("../../../ImagePreviewerLightbox"));
+var _FileUploader = _interopRequireDefault(require("../../../FileUploader"));
+var _constants = require("../../../constants");
+var _hotkey = require("../../../utils/hotkey");
+var _participant = _interopRequireDefault(require("./participant"));
+var _lang = require("../../../lang");
+require("./index.css");
+const FONT_SIZE_WIDTH = 15;
+const PADDING_WIDTH = 9;
+const LINE_HEIGHT = 22;
+const POPOVER_PADDING_HEIGHT = 10;
+const DOWN = 'down';
+const UP = 'up';
+class Input extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.hidePopover = event => {
+      if (this.commentPopoverRef && event && !this.commentPopoverRef.contains(event.target)) {
+        this.onHidePopover();
+      }
+    };
+    this.onHidePopover = () => {
+      if (this.state.filteredCollaborators.length > 0) {
+        this.setState({
+          filteredCollaborators: [],
+          activeCollaboratorIndex: 0
+        });
+      }
+    };
+    this.setPopoverPosition = () => {
+      const {
+        caretPosition
+      } = this.state;
+      let {
+        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");
+      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");
+      }
+      if (caretPosition.x + FONT_SIZE_WIDTH + this.commentPopoverRef.offsetWidth > document.body.clientWidth) {
+        this.commentPopoverRef.style.right = 0;
+        this.commentPopoverRef.style.left = '';
+      }
+    };
+    this.onKeyDown = event => {
+      if ((0, _hotkey.isModZ)(event)) {
+        this.onHidePopover();
+        event.preventDefault();
+        event.stopPropagation();
+        event.nativeEvent.stopImmediatePropagation();
+        this.commentRef.innerHTML = '';
+        return;
+      } else if ((0, _hotkey.isShiftEnter)(event)) {
+        return;
+      } else if ((0, _hotkey.isModP)(event)) {
+        this.commentRef.blur();
+      }
+      switch (event.keyCode) {
+        case _constants.KeyCodes.DownArrow:
+        case _constants.KeyCodes.UpArrow:
+          {
+            event.stopPropagation();
+            if (this.commentPopoverRef) {
+              event.preventDefault();
+            }
+            break;
+          }
+        case _constants.KeyCodes.Enter:
+          {
+            event.preventDefault();
+
+            // exec select collaborator operation.
+            if (this.state.filteredCollaborators.length > 0) {
+              break;
+            }
+            this.props.onSubmit();
+            break;
+          }
+        default:
+          {
+            break;
+          }
+      }
+    };
+    this.onFocus = () => {
+      this.props.onInputFocus && this.props.onInputFocus();
+    };
+    this.onBlur = () => {
+      this.props.onInputBlur && this.props.onInputBlur();
+    };
+    this.setScrollTop = (offsetTop, itemOffsetHeight, mouseDownType) => {
+      let {
+        offsetHeight,
+        scrollTop
+      } = this.commentPopoverRef;
+      if (mouseDownType === DOWN) {
+        if (offsetTop + itemOffsetHeight - scrollTop - offsetHeight + POPOVER_PADDING_HEIGHT > 0) {
+          let top = offsetTop + itemOffsetHeight - offsetHeight + POPOVER_PADDING_HEIGHT;
+          this.commentPopoverRef.scrollTop = top;
+        }
+      }
+      if (mouseDownType === UP) {
+        if (offsetTop < scrollTop) {
+          this.commentPopoverRef.scrollTop = offsetTop - POPOVER_PADDING_HEIGHT;
+        }
+      }
+    };
+    this.setCommentInputValue = () => {
+      this.commentRef.innerHTML = '';
+    };
+    this.getCommentInputValue = () => {
+      return this.commentRef.innerHTML;
+    };
+    this.onInsertElement = (content, nodeType) => {
+      const selection = window.getSelection();
+      let {
+        range
+      } = this.state;
+      let newRange = this.commentUtilities.onInsertElement({
+        selection,
+        range,
+        content,
+        nodeType,
+        commentRef: this.commentRef
+      });
+      this.setState({
+        range: newRange
+      });
+    };
+    this.createHtmlElement = (selection, range, content, nodeType) => {
+      let spanNode1;
+      let spanNode2;
+      let imageContainer;
+      if (nodeType === 'image') {
+        spanNode1 = document.createElement('div');
+        spanNode1.className = 'image-container';
+        spanNode1.contentEditable = 'false';
+        imageContainer = document.createElement('img');
+        imageContainer.src = content;
+        imageContainer.height = 60;
+        spanNode1.appendChild(imageContainer);
+        spanNode2 = document.createElement('span');
+        spanNode2.innerHTML = ' ';
+      }
+      if (nodeType === 'collaborator') {
+        spanNode1 = document.createElement('span');
+        spanNode2 = document.createElement('span');
+        spanNode1.className = 'at-text';
+        spanNode1.contentEditable = 'false';
+        spanNode1.innerHTML = "@".concat(content.name);
+        spanNode2.innerHTML = ' ';
+      }
+      let frag = document.createDocumentFragment();
+      let node;
+      let lastNode;
+      frag.appendChild(spanNode1);
+      while (node = spanNode2.firstChild) {
+        lastNode = frag.appendChild(node);
+      }
+      if (!range) {
+        this.commentRef.appendChild(frag);
+        range = selection.getRangeAt(0);
+      } else {
+        range.insertNode(frag);
+      }
+      if (lastNode) {
+        range = range.cloneRange();
+        range.setStartAfter(lastNode);
+        range.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+      this.setState({
+        range: selection.getRangeAt(0)
+      });
+    };
+    this.onSelectCollaborator = collaborator => {
+      const selection = window.getSelection();
+      let {
+        range
+      } = this.state;
+      let callBack = () => {
+        this.onHidePopover();
+        this.props.addParticipant(collaborator.email);
+      };
+      let newRange = this.commentUtilities.onSelectParticipant({
+        selection,
+        range,
+        participant: collaborator,
+        callBack,
+        commentRef: this.commentRef
+      });
+      this.setState({
+        range: newRange
+      });
+    };
+    this.onPaste = event => {
+      let _this = this;
+      let callBack = files => {
+        _this.uploaderFileRef.handleFilesChange(files);
+      };
+      this.commentUtilities.onPaste(event, callBack);
+    };
+    this.onFileUploadSuccess = uploadFileMessage => {
+      this.onInsertElement(uploadFileMessage.url, 'image');
+    };
+    this.handleImageZoom = event => {
+      event.persist();
+      if (event.target.tagName === 'IMG') {
+        let imageUrl = event.target.src;
+        let imageTagList = this.commentRef.getElementsByTagName('img');
+        let imageUrlList = [];
+        for (let i = 0; i < imageTagList.length; i++) {
+          imageUrlList.push(imageTagList[i].src);
+        }
+        this.setState({
+          imageUrlList: imageUrlList,
+          largeImageIndex: imageUrlList.findIndex(imageItemUrl => imageItemUrl === imageUrl)
+        });
+      }
+    };
+    this.moveNext = () => {
+      let images = this.state.imageUrlList;
+      this.setState(prevState => ({
+        largeImageIndex: (prevState.largeImageIndex + 1) % images.length
+      }));
+    };
+    this.movePrev = () => {
+      let images = this.state.imageUrlList;
+      this.setState(prevState => ({
+        largeImageIndex: (prevState.largeImageIndex + images.length - 1) % images.length
+      }));
+    };
+    this.hideLargeImage = () => {
+      this.setState({
+        largeImageIndex: -1,
+        imageUrlList: []
+      });
+    };
+    this.onKeyUp = event => {
+      const selection = window.getSelection();
+      this.setState({
+        range: selection.getRangeAt(0)
+      });
+      if (event.keyCode === _constants.KeyCodes.DownArrow) {
+        return this.handleSelectingCollaborator(event, DOWN);
+      }
+      if (event.keyCode === _constants.KeyCodes.UpArrow) {
+        return this.handleSelectingCollaborator(event, UP);
+      }
+      if (event.keyCode === _constants.KeyCodes.Enter) {
+        return this.handleSelectCollaborator();
+      }
+      this.handleMentions(event);
+    };
+    this.onMouseUp = () => {
+      const selection = window.getSelection();
+      this.setState({
+        range: selection.getRangeAt(0)
+      });
+    };
+    this.checkMentionOperation = event => {
+      const {
+        keyCode
+      } = event;
+      const {
+        Escape,
+        LeftArrow,
+        RightArrow
+      } = _constants.KeyCodes;
+      if (keyCode === Escape || keyCode === LeftArrow || keyCode === RightArrow) {
+        return false;
+      }
+      return true;
+    };
+    this.handleMentions = event => {
+      if (this.props.isArchive) {
+        return;
+      }
+      const isValidOperation = this.checkMentionOperation(event);
+      if (!isValidOperation) {
+        return this.onHidePopover();
+      }
+      const selection = window.getSelection();
+      const {
+        collaborators
+      } = this.props;
+      let filteredCollaborators = [];
+      const {
+        isCollapsed,
+        anchorNode,
+        anchorOffset
+      } = selection;
+      if (!isCollapsed || !anchorNode || !anchorNode.data) {
+        return this.onHidePopover();
+      }
+      const text = anchorNode.data;
+      const atIndex = this.commentUtilities.getAtIndexWithAnchorPosition(anchorOffset, text);
+      if (atIndex === -1) {
+        return this.onHidePopover();
+      }
+      if (atIndex === 0 || text[atIndex - 1] === ' ') {
+        if (atIndex === anchorOffset - 1) {
+          filteredCollaborators = [...collaborators];
+        } else {
+          const searchingText = text.substring(atIndex + 1);
+          if (searchingText) {
+            filteredCollaborators = (0, _dtableUtils.searchCollaborators)(collaborators, searchingText);
+          }
+        }
+      }
+      if (filteredCollaborators.length === 0) {
+        return this.onHidePopover();
+      }
+      this.setState({
+        filteredCollaborators,
+        activeCollaboratorIndex: 0,
+        caretPosition: (0, _utils.getSelectionCoords)(),
+        range: selection.getRangeAt(0)
+      }, () => {
+        this.setPopoverPosition();
+      });
+    };
+    this.handleSelectingCollaborator = (event, direction) => {
+      event.stopPropagation();
+      const {
+        filteredCollaborators,
+        activeCollaboratorIndex
+      } = this.state;
+      const collaboratorsLen = filteredCollaborators.length;
+      if (collaboratorsLen === 0) {
+        return;
+      }
+      let nextActiveCollaboratorIndex = activeCollaboratorIndex;
+      if (direction === DOWN) {
+        nextActiveCollaboratorIndex++;
+        if (nextActiveCollaboratorIndex >= collaboratorsLen) {
+          nextActiveCollaboratorIndex = 0;
+        }
+      } else {
+        nextActiveCollaboratorIndex--;
+        if (nextActiveCollaboratorIndex < 0) {
+          nextActiveCollaboratorIndex = collaboratorsLen - 1;
+        }
+      }
+      this.setState({
+        activeCollaboratorIndex: nextActiveCollaboratorIndex
+      });
+    };
+    this.handleSelectCollaborator = () => {
+      const {
+        filteredCollaborators,
+        activeCollaboratorIndex
+      } = this.state;
+      if (filteredCollaborators.length === 0) {
+        return;
+      }
+      this.onSelectCollaborator(filteredCollaborators[activeCollaboratorIndex]);
+    };
+    this.state = {
+      filteredCollaborators: [],
+      caretPosition: {},
+      range: null,
+      imageUrlList: [],
+      activeCollaboratorIndex: 0,
+      largeImageIndex: -1
+    };
+    this.commentUtilities = new _utils.Utilities();
+  }
+  componentDidMount() {
+    document.addEventListener('mousedown', this.hidePopover);
+    if (this.props.autoFocusInput) {
+      this.commentRef.focus();
+    }
+  }
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.hidePopover);
+  }
+  render() {
+    const {
+      api
+    } = this.props;
+    const {
+      imageUrlList,
+      largeImageIndex,
+      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
+    }));
+  }
+}
+var _default = exports.default = Input;