dtable-ui-component 5.3.1-beta6 → 5.3.2

package/lib/Comment/footer/index.js

@@ -1,170 +0,0 @@
-"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

@@ -1,52 +0,0 @@
-.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

@@ -1,448 +0,0 @@
-"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;