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

package/lib/Comment/index.js

@@ -0,0 +1,305 @@
+"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 => {
+        console.log(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;

package/lib/Comment/utils/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _common = require("./common");
+Object.keys(_common).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _common[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _common[key];
+    }
+  });
+});
+var _utilities = require("./utilities");
+Object.keys(_utilities).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _utilities[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _utilities[key];
+    }
+  });
+});

package/lib/Comment/utils/utilities.js

@@ -0,0 +1,176 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Utilities = void 0;
+var _getEventTransfer = _interopRequireDefault(require("../../utils/get-event-transfer"));
+class Utilities {
+  constructor() {
+    this.onInsertElement = _ref => {
+      let {
+        commentRef,
+        selection,
+        range,
+        content,
+        nodeType
+      } = _ref;
+      if (range) {
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+      return this.createHtmlElement({
+        commentRef,
+        selection,
+        range,
+        content,
+        nodeType
+      });
+    };
+    this.getHtmlElement = (nodeType, content) => {
+      switch (nodeType) {
+        case 'image':
+          {
+            let parentElement = document.createElement('div');
+            parentElement.className = 'image-container';
+            parentElement.contentEditable = 'false';
+            let imageContainer = document.createElement('img');
+            imageContainer.src = content;
+            imageContainer.height = 60;
+            parentElement.appendChild(imageContainer);
+            return parentElement.outerHTML;
+          }
+        default:
+          {
+            return '';
+          }
+      }
+    };
+    this.createHtmlElement = _ref2 => {
+      let {
+        commentRef,
+        selection,
+        range,
+        content,
+        nodeType
+      } = _ref2;
+      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 = 'true';
+        spanNode1.innerHTML = "@".concat(content.name);
+        spanNode2.innerHTML = ' ';
+      }
+      let frag = document.createDocumentFragment();
+      let lastNode;
+      frag.appendChild(spanNode1);
+      lastNode = frag.appendChild(spanNode2.firstChild);
+      if (range) {
+        range.insertNode(frag);
+      } else {
+        commentRef.appendChild(frag);
+        range = selection.getRangeAt(0);
+      }
+      if (lastNode) {
+        range = range.cloneRange();
+        range.setStartAfter(lastNode);
+        range.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+      return range;
+    };
+    this.onSelectParticipant = _ref3 => {
+      let {
+        selection,
+        range,
+        participant,
+        callBack,
+        commentRef
+      } = _ref3;
+      if (range) {
+        // delete '@xxx';
+        selection.removeAllRanges();
+        selection.addRange(range);
+        const textNode = range.startContainer;
+        const atIndex = this.getAtIndexWithAnchorPosition(range.startOffset, textNode.data);
+        if (atIndex > -1) {
+          range.setStart(textNode, atIndex);
+          range.setEnd(textNode, range.endOffset);
+          range.deleteContents();
+        }
+      }
+      let newRange = this.createHtmlElement({
+        selection,
+        range,
+        content: participant,
+        nodeType: 'collaborator',
+        commentRef
+      });
+      if (callBack) {
+        callBack();
+      }
+      if (commentRef) {
+        commentRef.focus();
+      }
+      return newRange;
+    };
+    /**
+     * get the index of '@' from anchor position.
+     * @param {*} anchorPosition '@text|anchor position|'
+     * @param {*} text '@abc'
+     * @returns index
+     * e.g. '@abc|anchor position|' // 0
+     *      '@123 @|anchor position| @abc' // 5
+     */
+    this.getAtIndexWithAnchorPosition = (anchorPosition, text) => {
+      let atIndex = -1;
+      for (let i = anchorPosition - 1; i > -1; i--) {
+        if (text[i] === '@') {
+          atIndex = i;
+          break;
+        }
+      }
+      return atIndex;
+    };
+    this.onPaste = (event, callBack) => {
+      event.stopPropagation();
+      let cliperData = (0, _getEventTransfer.default)(event);
+      if (cliperData.files) {
+        let file = cliperData.files[0];
+        let isImage = /image/i.test(file.type);
+        if (isImage) {
+          event.preventDefault();
+          if (callBack) {
+            callBack(cliperData.files);
+          }
+        }
+      } else {
+        event.preventDefault();
+        let text = cliperData.text;
+        if (document.queryCommandSupported('insertText')) {
+          document.execCommand('insertText', false, text);
+        } else {
+          document.execCommand('paste', false, text);
+        }
+      }
+    };
+  }
+}
+exports.Utilities = Utilities;

package/lib/DigitalSignEditor/index.js

@@ -94,7 +94,7 @@ class DigitalSignEditor extends _react.Component {
           failedCallback: error => {
             const errMsg = (0, _utils2.getErrorMsg)(error, true);
             if (!error.response || error.response.status !== 403) {
-              _toaster.default.danger(this.props.t(errMsg));
+              _toaster.default.danger((0, _lang.getLocale)(errMsg));
             }
             this.setState({
               saving: false

package/lib/FileEditor/index.js

@@ -13,6 +13,8 @@ var _constants = require("../constants");
 var _DTableModalHeader = _interopRequireDefault(require("../DTableModalHeader"));
 var _lang = require("../lang");
 var _constants2 = require("./constants");
+var _utils = require("../utils/utils");
+var _toaster = _interopRequireDefault(require("../toaster"));
 require("./index.css");
 class FileEditor extends _react.default.Component {
   constructor(props) {
@@ -207,10 +209,22 @@ class FileEditor extends _react.default.Component {
         this.setState({
           value: newValue
         });
-      }).catch(error => {});
+      }).catch(error => {
+        const errorMessage = (0, _utils.getErrorMsg)(error);
+        if (!error.response || error.response.status !== 403) {
+          _toaster.default.danger((0, _lang.getLocale)(errorMessage));
+        }
+      });
     };
     this.onRotateImage = (url, degree) => {
-      this.props.rotateImage(url, degree).then(res => {}).catch(error => {});
+      this.props.rotateImage(url, degree).then(res => {
+        // todo
+      }).catch(error => {
+        const errorMessage = (0, _utils.getErrorMsg)(error);
+        if (!error.response || error.response.status !== 403) {
+          _toaster.default.danger((0, _lang.getLocale)(errorMessage));
+        }
+      });
     };
     this.state = {
       value: props.value || [],