dtable-ui-component 5.3.6 → 5.3.8-beta

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;

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

@@ -0,0 +1,53 @@
+"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"));
+class Participant extends _react.default.Component {
+  constructor() {
+    super(...arguments);
+    this.onSelect = event => {
+      event.stopPropagation();
+      event.preventDefault();
+      this.props.onSelect();
+    };
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.showParticipantActiveIndex === this.props.participantIndex && nextProps.showParticipantActiveIndex !== this.props.showParticipantActiveIndex) {
+      let offsetHeight = this.participantItem.offsetHeight;
+      let offsetTop = this.participantItem.offsetTop;
+      if (nextProps.showParticipantActiveIndex > this.props.showParticipantActiveIndex) {
+        this.props.setScrollTop(offsetTop, offsetHeight, 'down');
+      } else {
+        this.props.setScrollTop(offsetTop, offsetHeight, 'up');
+      }
+    }
+  }
+  render() {
+    const {
+      participant,
+      index,
+      activeIndex
+    } = this.props;
+    const active = index === activeIndex;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "comment-participant-item ".concat(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))));
+  }
+}
+var _default = exports.default = Participant;

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

@@ -0,0 +1,22 @@
+.dtable-ui-comments-participants {
+  min-height: 28px;
+}
+
+.dtable-ui-comments-participants .dtable-ui-participants-add {
+  position: absolute;
+  cursor: pointer;
+  bottom: -3px;
+}
+
+.dtable-ui-comments-participants .dtable-ui-participants-add i {
+  background-color: #fff;
+  font-size: 16px;
+  color: #FF8000;
+  border: 2px solid #fff;
+  border-radius: 50%;
+}
+
+.dtable-ui-comments-participants .dtable-ui-participant-avatar,
+.dtable-ui-comments-participants .dtable-ui-participants-add {
+  margin-right: -0.5rem;
+}

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

@@ -0,0 +1,68 @@
+"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 _reactstrap = require("reactstrap");
+var _participant = _interopRequireDefault(require("./participant"));
+var _participantSelect = _interopRequireDefault(require("./participant-select"));
+var _lang = require("../../../lang");
+require("./index.css");
+class Participants extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.closeParticipantSelect = () => {
+      this.setState({
+        showParticipantSelect: false
+      });
+    };
+    this.toggleParticipantSelect = () => {
+      this.setState({
+        showParticipantSelect: !this.state.showParticipantSelect
+      });
+    };
+    this.state = {
+      showParticipantSelect: false
+    };
+  }
+  render() {
+    const {
+      canUpdate,
+      participants,
+      collaborators
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement("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
+    }));
+  }
+}
+var _default = exports.default = Participants;

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

@@ -0,0 +1,5 @@
+.dtable-ui-comments-participants .dtable-ui-participant-avatar .avatar {
+  width: 28px;
+  height: 28px;
+  border: 2px solid #fff;
+}

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

@@ -0,0 +1,32 @@
+"use strict";
+
+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");
+require("./index.css");
+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));
+};
+var _default = exports.default = Participant;