dtable-ui-component 5.3.5 → 5.3.7

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

@@ -0,0 +1,104 @@
+.dtable-ui-participants-editor {
+  min-height: 160px;
+  width: 280px;
+  left: -140px;
+}
+
+/* header */
+.dtable-ui-participants-editor .dtable-ui-participants-editor-header {
+  background-color: #f6f6f6;
+  padding: 5px 10px 3px;
+  border-bottom: 1px solid #dde2ea;
+  border-radius: 3px 3px 0 0;
+  min-height: 34px;
+}
+
+.dtable-ui-participants-editor .dtable-ui-participants-editor-header .dtable-ui-participant {
+  display: inline-flex;
+  height: 20px;
+  margin-right: 10px;
+  padding: 0 8px 0 2px;
+  font-size: 13px;
+  border-radius: 10px;
+  background: #eaeaea;
+}
+
+/* search */
+.dtable-ui-participants-editor .dtable-ui-participants-editor-search {
+  padding: 10px;
+}
+
+.dtable-ui-participants-editor .dtable-ui-participants-editor-search input {
+  height: 28px;
+}
+
+
+/* container */
+.dtable-ui-participants-editor .dtable-ui-participants-editor-participants-container {
+  max-height: 200px;
+  padding: 0 0 10px;
+  overflow: auto;
+}
+
+.dtable-ui-participants-editor .dtable-ui-participants-editor-participants-container .dtable-ui-participant-item {
+  display: flex;
+  align-items: center;
+  padding: 0 8px 0 0;
+}
+
+.dtable-ui-participants-editor .dtable-ui-participants-editor-participants-container .dtable-ui-participant-item:hover {
+  background: none;
+}
+
+.dtable-ui-participants-editor .dtable-ui-participants-editor-participants-container .dtable-ui-participant-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 30px;
+  border-radius: 2px;
+  font-size: 14px;
+}
+
+.dtable-ui-participants-editor .dtable-ui-participants-editor-participants-container .dtable-ui-participant-container:hover {
+  background: #f5f5f5;
+  cursor: pointer;
+}
+
+.dtable-ui-participants-editor .dtable-ui-participants-editor-participants-container .dtable-ui-participant {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  max-width: calc(100% - 20px);
+}
+
+.dtable-ui-participants-editor .dtable-ui-participants-editor-participants-container .dtable-ui-participant-avatar {
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  margin-left: 10px;
+}
+
+.dtable-ui-participants-editor .dtable-ui-participants-editor-participants-container .dtable-ui-participant-name {
+  margin-left: 4px;
+  flex: 1;
+  color: #16181b;
+}
+
+.dtable-ui-participants-editor .dtable-ui-participants-editor-participants-container .dtable-ui-participant-check-icon {
+  width: 20px;
+  text-align: center;
+}
+
+.dtable-ui-participants-editor .dtable-ui-participants-editor-participants-container .dtable-ui-participant-check-icon .dtable-font {
+  font-size: 12px;
+  color: #798d99;
+}
+
+/* none */
+.dtable-ui-participants-editor .none-search-result {
+  width: 100%;
+  padding: 10px;
+  font-size: 14px;
+  opacity: 0.5;
+  display: inline-block;
+}

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

@@ -0,0 +1,182 @@
+"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 _dtableUtils = require("dtable-utils");
+var _lang = require("../../../../lang");
+var _CollaboratorItem = _interopRequireDefault(require("../../../../CollaboratorItem"));
+require("./index.css");
+class ParticipantSelect extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.registerHandlers = () => {
+      document.addEventListener('mousedown', this.handleOutsideClick);
+    };
+    this.unregisterHandlers = () => {
+      document.removeEventListener('mousedown', this.handleOutsideClick);
+    };
+    this.handleOutsideClick = e => {
+      if (!this.participantsRef.contains(e.target)) {
+        this.unregisterHandlers();
+        if (e.target.className === 'dtable-ui-participants-add' || e.target.parentNode.className === 'dtable-ui-participants-add') {
+          return;
+        }
+        this.props.onClose();
+      }
+    };
+    this.getFilteredParticipants = () => {
+      let {
+        collaborators
+      } = window.app.state;
+      let {
+        searchVal
+      } = this.state;
+      return (0, _dtableUtils.searchCollaborators)(collaborators, searchVal);
+    };
+    this.removeParticipant = participant => {
+      let {
+        participants
+      } = this.state;
+      let updatedValue = participants.slice(0);
+      let participant_index = participants.findIndex(participantItem => participantItem.email === participant.email);
+      updatedValue.splice(participant_index, 1);
+      this.props.onChange(updatedValue);
+      this.setState({
+        participants: updatedValue
+      });
+    };
+    this.onChangeSearch = event => {
+      let {
+        searchVal
+      } = this.state;
+      if (searchVal === event.target.value) {
+        return;
+      }
+      searchVal = event.target.value;
+      this.setState({
+        searchVal
+      });
+    };
+    this.onSelectParticipant = participant => {
+      let {
+        participants
+      } = this.state;
+      participants = participants.slice(0);
+      let participant_index = participants.findIndex(participantItem => participantItem.email === participant.email);
+      if (participant_index > -1) {
+        participants.splice(participant_index, 1);
+      } else {
+        participants.push(participant);
+      }
+      this.props.onChange(participants);
+      this.setState({
+        participants
+      });
+    };
+    this.renderMenuContent = () => {
+      let {
+        participants
+      } = this.state;
+      let filteredParticipants = this.getFilteredParticipants();
+      if (filteredParticipants.length > 0) {
+        return filteredParticipants.map(participant => {
+          let selectedIndex = participants.findIndex(item => item.email === participant.email);
+          return /*#__PURE__*/_react.default.createElement("div", {
+            key: participant.email,
+            className: "dropdown-item dtable-ui-participant-item",
+            onClick: this.onSelectParticipant.bind(this, participant)
+          }, /*#__PURE__*/_react.default.createElement("div", {
+            className: "dtable-ui-participant-container"
+          }, /*#__PURE__*/_react.default.createElement("div", {
+            className: "dtable-ui-participant"
+          }, /*#__PURE__*/_react.default.createElement("img", {
+            className: "dtable-ui-participant-avatar",
+            alt: participant.name,
+            src: participant.avatar_url
+          }), /*#__PURE__*/_react.default.createElement("span", {
+            className: "dtable-ui-participant-name text-truncate"
+          }, participant.name)), /*#__PURE__*/_react.default.createElement("div", {
+            className: "dtable-ui-participant-check-icon"
+          }, selectedIndex > -1 && /*#__PURE__*/_react.default.createElement("i", {
+            "aria-hidden": "true",
+            className: "dtable-font dtable-icon-check-mark"
+          }))));
+        });
+      } else {
+        return /*#__PURE__*/_react.default.createElement("span", {
+          className: "none-search-result"
+        }, (0, _lang.getLocale)('No_collaborators_available'));
+      }
+    };
+    this.state = {
+      participants: props.participants || [],
+      searchVal: ''
+    };
+  }
+  componentDidMount() {
+    let collaboratorListHeight = this.participantsRef.offsetHeight;
+    this.participantsRef.style.top = "".concat(-collaboratorListHeight + 10, "px");
+    this.registerHandlers();
+  }
+  componentDidUpdate() {
+    let collaboratorListHeight = this.participantsRef.offsetHeight;
+    this.participantsRef.style.top = "".concat(-collaboratorListHeight + 10, "px");
+  }
+  componentWillUnmount() {
+    this.unregisterHandlers();
+  }
+  renderParticipantList() {
+    const {
+      collaborators
+    } = this.props;
+    const selectedParticipants = collaborators.filter(item => {
+      return this.state.participants.find(participant => participant.email === item.email);
+    });
+    if (selectedParticipants.length === 0) return null;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-participants-editor-header"
+    }, selectedParticipants.map(participant => {
+      return /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
+        key: participant.email,
+        collaborator: participant,
+        className: "dtable-ui-participant",
+        enableDeleteCollaborator: true,
+        onDeleteCollaborator: this.removeParticipant
+      });
+    }));
+  }
+  render() {
+    const {
+      target
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: ref => this.outerRef = ref
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Popover, {
+      placement: "top",
+      isOpen: true,
+      target: target,
+      fade: false,
+      hideArrow: true
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dropdown-menu dtable-ui-participants-editor show m-0 p-0",
+      ref: ref => this.participantsRef = ref
+    }, this.renderParticipantList(), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-participants-editor-search"
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      className: "form-control",
+      type: "text",
+      placeholder: (0, _lang.getLocale)('Search_collaborator'),
+      value: this.state.searchVal,
+      onChange: this.onChangeSearch
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-participants-editor-participants-container"
+    }, this.renderMenuContent()))));
+  }
+}
+var _default = exports.default = ParticipantSelect;

package/lib/Comment/index.css

@@ -0,0 +1,19 @@
+.dtable-ui-comments {
+  border-left: 1px solid #e6e6dd;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  overflow: auto;
+  border-left: 0;
+}
+
+.dtable-ui-comments .dtable-ui-comments-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem 0.75rem;
+}
+
+.dtable-ui-participant-avatar {
+  border-radius: 50%;
+  vertical-align: middle;
+}

package/lib/Comment/index.js

@@ -0,0 +1,304 @@
+"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 _dtableUtils = require("dtable-utils");
+var _Loading = _interopRequireDefault(require("../Loading"));
+var _toaster = _interopRequireDefault(require("../toaster"));
+var _body = _interopRequireDefault(require("./body"));
+var _footer = _interopRequireDefault(require("./footer"));
+var _model = _interopRequireDefault(require("./model"));
+var _utils = require("../utils/utils");
+var _lang = require("../lang");
+require("./index.css");
+const ROW_COMMENT = 'row_comment';
+class Comment extends _react.default.Component {
+  constructor(_props) {
+    var _this;
+    super(_props);
+    _this = this;
+    this.handleError = error => {
+      let errMsg = (0, _utils.getErrorMsg)(error, true);
+      if (!error.response || error.response.status !== 403) {
+        _toaster.default.danger((0, _lang.getLocale)(errMsg));
+      }
+    };
+    // comment and count
+    this.updateCount = function (row) {
+      let count = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      _this.setState({
+        count
+      }, () => {
+        _this.props.updateCount && _this.props.updateCount(row, count);
+      });
+    };
+    this.reCalculateComments = function (row) {
+      let pageNum = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
+      let isGetCount = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+      _this.initComments(row, 1, pageNum);
+      if (!isGetCount) return;
+      const {
+        api
+      } = _this.props;
+      api.getCount(row).then(res => {
+        const count = res.data.count;
+        _this.updateCount(row, count);
+      }).catch(e => {
+        _this.handleError(e);
+      });
+    };
+    this.initComments = function (row) {
+      let page = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+      let perPage = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 10;
+      const {
+        api
+      } = _this.props;
+      api.get(row, page, perPage).then(res => {
+        let comments = res.data.comment_list || [];
+        let newComments = [];
+        comments.forEach(item => {
+          const comment = new _model.default(item);
+          newComments.push(comment);
+        });
+        _this.setState({
+          comments: newComments,
+          isLoading: false
+        });
+      }).catch(e => {
+        _this.handleError(e);
+      });
+    };
+    this.addComment = (newComment, _ref) => {
+      let {
+        successCallback,
+        failCallback
+      } = _ref;
+      const {
+        row,
+        api
+      } = this.props;
+      api.add(row, newComment).then(res => api.getCount(row)).then(res => {
+        const count = res.data.count;
+        this.updateCount(row, count);
+        this.reCalculateComments(row, count, false);
+        successCallback();
+      }).catch(error => {
+        failCallback && failCallback(error);
+      });
+      this.setState({
+        isFirstLoading: true
+      });
+    };
+    this.resolveComment = (event, commentID) => {
+      event.persist();
+      const {
+        row,
+        api
+      } = this.props;
+      api.update(row, commentID, null, 1).then(() => {
+        this.reCalculateComments(row);
+      }).catch(error => {
+        this.handleError(error);
+      });
+    };
+    this.deleteComment = (event, commentID) => {
+      const {
+        api,
+        row
+      } = this.props;
+      api.delete(row, commentID).then(() => {
+        this.reCalculateComments(row);
+      }).catch(e => {
+        this.handleError(e);
+      });
+    };
+    // notification
+    this.onNewNotification = notification => {
+      const {
+        msg_type
+      } = notification;
+      if (msg_type !== ROW_COMMENT) return;
+      this.setState({
+        isFirstLoading: true
+      });
+      const {
+        row,
+        api
+      } = this.props;
+      api.getCount(row).then(res => {
+        const count = res.data.count;
+        this.updateCount(row, count);
+        this.reCalculateComments(row, count, false);
+      }).catch(e => {
+        this.handleError(e);
+      });
+    };
+    // collaborators
+    this.initCollaborators = props => {
+      const {
+        columns,
+        row,
+        collaborators
+      } = props;
+      let collaboratorColumnKeyList = [];
+      columns.forEach(column => {
+        if (column.type === _dtableUtils.CellType.COLLABORATOR) {
+          collaboratorColumnKeyList.push(column.key);
+        }
+      });
+      if (collaboratorColumnKeyList.length === 0) {
+        this.setState({
+          collaborators
+        });
+        return;
+      }
+      let rowCollaborators = [];
+      collaboratorColumnKeyList.forEach(collaboratorKey => {
+        if (row[collaboratorKey] && row[collaboratorKey].length > 0) {
+          rowCollaborators.push(...row[collaboratorKey]);
+        }
+      });
+      rowCollaborators = Array.from(new Set(rowCollaborators));
+      let newCollaborators = [];
+      if (rowCollaborators.length > 0) {
+        collaborators.forEach(collaborator => {
+          let rowCollaborator = rowCollaborators.find(rowCollaboratorItem => {
+            return rowCollaboratorItem === collaborator.email;
+          });
+          if (rowCollaborator) {
+            newCollaborators.unshift(collaborator);
+          } else {
+            newCollaborators.push(collaborator);
+          }
+        });
+      } else {
+        newCollaborators = collaborators;
+      }
+      this.setState({
+        collaborators: newCollaborators
+      });
+    };
+    // scroll
+    this.onScrollBottom = () => {
+      const commentListPaddingHeight = 16;
+      this.body.scrollTop = this.bodyContent.offsetHeight - this.body.offsetHeight + commentListPaddingHeight;
+      this.setState({
+        isFirstLoading: false
+      });
+    };
+    this.onScroll = () => {
+      if (this.body.offsetHeight + this.body.scrollTop + 1 < this.bodyContent.offsetHeight + 32) return; // 16 is padding height
+      const {
+        api,
+        row
+      } = this.props;
+      const {
+        comments,
+        count
+      } = this.state;
+      let currentCommentsLength = comments.length;
+      if (currentCommentsLength < count) {
+        // Have pagination
+        let page = currentCommentsLength % 10 === 0 ? Math.floor(currentCommentsLength / 10) + 1 : Math.ceil(currentCommentsLength / 10);
+        if (page === 0) return;
+        api.get(row, page, 10).then(res => {
+          let newComments = comments.slice(0);
+          const nextPageCommentList = res.data.comment_list || [];
+          nextPageCommentList.forEach(item => {
+            const comment = new Comment(item);
+            const commentId = comment.id;
+            const commentIndex = newComments.findIndex(item => item.id === commentId);
+            if (commentIndex === -1) {
+              newComments.push(comment);
+            }
+          });
+          this.setState({
+            comments: newComments,
+            isFirstLoading: false
+          });
+        }).catch(e => {
+          this.handleError(e);
+        });
+      }
+    };
+    this.state = {
+      count: 0,
+      collaborators: _props.collaborators || [],
+      comments: [],
+      isLoading: true,
+      isFirstLoading: true
+    };
+    this.unsubscribeNotification = null;
+  }
+  componentDidMount() {
+    var _this$props$eventBus;
+    this.initComments(this.props.row);
+    this.initCollaborators(this.props);
+    this.unsubscribeNotification = (_this$props$eventBus = this.props.eventBus) === null || _this$props$eventBus === void 0 ? void 0 : _this$props$eventBus.subscribe('new-notification', this.onNewNotification);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.props.row._id !== nextProps.row._id) {
+      this.initComments(nextProps.row);
+      this.initCollaborators(nextProps);
+      this.setState({
+        isFirstLoading: true,
+        isLoading: true
+      });
+    }
+  }
+  componentWillUnmount() {
+    this.body = null;
+    this.bodyContent = null;
+    this.unsubscribeNotification();
+  }
+  render() {
+    const {
+      collaborators,
+      comments,
+      isLoading,
+      isFirstLoading
+    } = this.state;
+    const {
+      autoFocusInput,
+      row,
+      columns,
+      onInputFocus,
+      onInputBlur,
+      api,
+      uploadFile
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-comments h-100 w-100"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-comments-body",
+      onScroll: this.onScroll,
+      ref: ref => this.body = ref
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      ref: ref => this.bodyContent = ref
+    }, isLoading ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "w-100 h-100 d-flex align-items-center justify-content-center"
+    }, /*#__PURE__*/_react.default.createElement(_Loading.default, null)) : /*#__PURE__*/_react.default.createElement(_body.default, {
+      isFirstLoading: isFirstLoading,
+      comments: comments,
+      collaborators: collaborators,
+      onDelete: this.deleteComment,
+      onResolve: this.resolveComment,
+      onScrollBottom: this.onScrollBottom
+    }))), /*#__PURE__*/_react.default.createElement(_footer.default, {
+      autoFocusInput: autoFocusInput,
+      collaborators: collaborators,
+      row: row,
+      columns: columns,
+      addComment: this.addComment,
+      onChangeParticipants: api.modifyParticipants,
+      uploadFile: uploadFile,
+      onInputFocus: onInputFocus,
+      onInputBlur: onInputBlur
+    }));
+  }
+}
+var _default = exports.default = Comment;

package/lib/Comment/model.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _dayjs = _interopRequireDefault(require("dayjs"));
+class Comment {
+  constructor(object) {
+    this.id = object.id || null;
+    this.author = object.author || null;
+    this.comment = object.comment || null;
+    this.dtable_uuid = object.dtable_uuid || null;
+    this.row_id = object.row_id || null;
+    this.created_at = object.created_at || null;
+    this.updated_at = object.updated_at || null;
+    this.resolved = object.resolved || 0;
+    if (this.created_at) {
+      const time = new Date(this.created_at).getTime();
+      this.created_at = (0, _dayjs.default)(time).format('YYYY-MM-DD HH:mm');
+    }
+  }
+}
+var _default = exports.default = Comment;

package/lib/Comment/utils/common.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSelectionCoords = void 0;
+const getSelectionCoords = () => {
+  let doc = window.document;
+  let sel = doc.selection;
+  let range;
+  let rects;
+  let rect;
+  let x = 0;
+  let y = 0;
+  if (sel) {
+    if (sel.type !== 'Control') {
+      range = sel.createRange();
+      range.collapse(true);
+      x = range.boundingLeft;
+      y = range.boundingTop;
+    }
+  } else if (window.getSelection) {
+    sel = window.getSelection();
+    if (sel.rangeCount) {
+      range = sel.getRangeAt(0).cloneRange();
+      if (range.getClientRects) {
+        range.collapse(true);
+        rects = range.getClientRects();
+        if (rects.length > 0) {
+          rect = rects[0];
+        }
+        // When the cursor is at the beginning of the line, rect is undefined
+        if (rect) {
+          x = rect.left;
+          y = rect.top;
+        }
+      }
+      // Fall back to inserting a temporary element
+      if (x === 0 && y === 0 || rect === undefined) {
+        let span = doc.createElement('span');
+        if (span.getClientRects) {
+          // Ensure span has dimensions and position by
+          // adding a zero-width space character
+          span.appendChild(doc.createTextNode('\u200b'));
+          range.insertNode(span);
+          rect = span.getClientRects()[0];
+          x = rect.left;
+          y = rect.top;
+          let spanParent = span.parentNode;
+          spanParent.removeChild(span);
+          // Glue any broken text nodes back together
+          spanParent.normalize();
+        }
+      }
+    }
+  }
+  return {
+    x: x,
+    y: y
+  };
+};
+exports.getSelectionCoords = getSelectionCoords;