dtable-ui-component 7.0.0-xia.1 → 7.0.0-xii.2

package/lib/CollapsibleSettingLayout/index.js

@@ -1,22 +1,24 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const CollapsibleSettingLayout = props => {
-  const {
-    className,
-    title,
-    children
-  } = props;
-  const [isShowSettings, setIsShowSettings] = (0, _react.useState)(true);
+  const className = props.className,
+    title = props.title,
+    children = props.children;
+  const _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isShowSettings = _useState2[0],
+    setIsShowSettings = _useState2[1];
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames.default)('collapsible-setting-layout', className),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

package/lib/Comment/body/comment.js

@@ -28,10 +28,9 @@ class Comment extends _react.PureComponent {
       const mdString = mdFile.replaceAll('&', '&');
       _seafileEditor.processor.process(mdString).then(result => {
         let commentContent = String(result);
-        let {
-          isScrollBottom,
-          onScrollBottom
-        } = this.props;
+        let _this$props = this.props,
+          isScrollBottom = _this$props.isScrollBottom,
+          onScrollBottom = _this$props.onScrollBottom;
         this.setState({
           commentContent: commentContent
         });
@@ -76,15 +75,11 @@ class Comment extends _react.PureComponent {
       });
     };
     this.isCommentUserExist = commentItem => {
-      const {
-        collaborators
-      } = this.props;
+      const collaborators = this.props.collaborators;
       return !!collaborators.find(collaborator => collaborator.email === commentItem.author);
     };
     this.renderInfo = comment => {
-      const {
-        collaborators
-      } = this.props;
+      const collaborators = this.props.collaborators;
       let authorInfo = Array.isArray(collaborators) && collaborators.find(collaborator => comment.author === collaborator.email);
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
@@ -130,14 +125,11 @@ class Comment extends _react.PureComponent {
     }
   }
   render() {
-    const {
-      comment,
-      onResolve,
-      onDelete
-    } = this.props;
-    const {
-      username
-    } = window.dtable;
+    const _this$props2 = this.props,
+      comment = _this$props2.comment,
+      onResolve = _this$props2.onResolve,
+      onDelete = _this$props2.onDelete;
+    const username = window.dtable.username;
     const moreOperationsText = (0, _lang.getLocale)('More_operations');
     if (!this.isCommentUserExist(comment)) return null;
     const isShowDropdownMenu = comment.author === username || !comment.resolved;

package/lib/Comment/body/index.js

@@ -14,10 +14,8 @@ require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["comments", "isFirstLoading"];
 const Body = _ref => {
-  let {
-      comments,
-      isFirstLoading
-    } = _ref,
+  let comments = _ref.comments,
+    isFirstLoading = _ref.isFirstLoading,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   if (comments.length === 0) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

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

@@ -40,9 +40,7 @@ class Btns extends _react.default.Component {
       this.props.onInsertElement(uploadFileMessage.url, 'image');
     };
     this.getCollaboratorContent = () => {
-      const {
-        collaborators
-      } = this.props;
+      const collaborators = this.props.collaborators;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "comment-popover-list",
         children: collaborators.map(participant => {
@@ -75,10 +73,9 @@ class Btns extends _react.default.Component {
     return nextProps.isAdding !== this.props.isAdding || nextState.isShowPopover !== this.state.isShowPopover;
   }
   render() {
-    const {
-      isAdding,
-      canUpdateParticipants
-    } = this.props;
+    const _this$props = this.props,
+      isAdding = _this$props.isAdding,
+      canUpdateParticipants = _this$props.canUpdateParticipants;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "dtable-ui-comment-input-btns",

package/lib/Comment/footer/index.js

@@ -17,10 +17,8 @@ class Footer extends _react.default.Component {
   constructor(_props) {
     super(_props);
     this.initParticipants = props => {
-      const {
-        row,
-        collaborators
-      } = props;
+      const row = props.row,
+        collaborators = props.collaborators;
       if (row._participants && Array.isArray(row._participants)) {
         let rowParticipants = row._participants.filter(Boolean);
         rowParticipants = rowParticipants.filter(participant => {
@@ -45,12 +43,8 @@ class Footer extends _react.default.Component {
     };
     this.addParticipant = email => {
       if (!email) return;
-      const {
-        participants
-      } = this.state;
-      const {
-        collaborators
-      } = this.props;
+      const participants = this.state.participants;
+      const collaborators = this.props.collaborators;
       const isExist = participants.some(participant => participant.email === email);
       if (isExist) return;
       let newParticipantList = participants.slice(0);
@@ -106,9 +100,7 @@ class Footer extends _react.default.Component {
       const comment = this.convertComment(commentValue);
       if (!comment.trim()) return;
       this.addComment(comment);
-      const {
-        username
-      } = window.dtable;
+      const username = window.dtable.username;
       this.addParticipant(username);
     };
     this.onInsertElement = (content, nodeType) => {
@@ -130,13 +122,10 @@ class Footer extends _react.default.Component {
     }
   }
   render() {
-    const {
-      isAdding,
-      participants
-    } = this.state;
-    const {
-      collaborators
-    } = this.props;
+    const _this$state = this.state,
+      isAdding = _this$state.isAdding,
+      participants = _this$state.participants;
+    const collaborators = this.props.collaborators;
     const canUpdateParticipants = Boolean(this.props.onChangeParticipants);
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "dtable-ui-comments-footer",

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

@@ -42,13 +42,10 @@ class Input extends _react.default.Component {
       }
     };
     this.setPopoverPosition = () => {
-      const {
-        caretPosition
-      } = this.state;
-      let {
-        right,
-        left
-      } = this.commentRef.getBoundingClientRect();
+      const caretPosition = this.state.caretPosition;
+      let _this$commentRef$getB = this.commentRef.getBoundingClientRect(),
+        right = _this$commentRef$getB.right,
+        left = _this$commentRef$getB.left;
       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) {
@@ -108,10 +105,9 @@ class Input extends _react.default.Component {
       this.props.onInputBlur && this.props.onInputBlur();
     };
     this.setScrollTop = (offsetTop, itemOffsetHeight, mouseDownType) => {
-      let {
-        offsetHeight,
-        scrollTop
-      } = this.commentPopoverRef;
+      let _this$commentPopoverR = this.commentPopoverRef,
+        offsetHeight = _this$commentPopoverR.offsetHeight,
+        scrollTop = _this$commentPopoverR.scrollTop;
       if (mouseDownType === DOWN) {
         if (offsetTop + itemOffsetHeight - scrollTop - offsetHeight + POPOVER_PADDING_HEIGHT > 0) {
           let top = offsetTop + itemOffsetHeight - offsetHeight + POPOVER_PADDING_HEIGHT;
@@ -132,9 +128,7 @@ class Input extends _react.default.Component {
     };
     this.onInsertElement = (content, nodeType) => {
       const selection = window.getSelection();
-      let {
-        range
-      } = this.state;
+      let range = this.state.range;
       let newRange = this.commentUtilities.onInsertElement({
         selection,
         range,
@@ -195,9 +189,7 @@ class Input extends _react.default.Component {
     };
     this.onSelectCollaborator = collaborator => {
       const selection = window.getSelection();
-      let {
-        range
-      } = this.state;
+      let range = this.state.range;
       let callBack = () => {
         this.onHidePopover();
         this.props.addParticipant(collaborator.email);
@@ -279,14 +271,10 @@ class Input extends _react.default.Component {
       });
     };
     this.checkMentionOperation = event => {
-      const {
-        keyCode
-      } = event;
-      const {
-        Escape,
-        LeftArrow,
-        RightArrow
-      } = _constants.KeyCodes;
+      const keyCode = event.keyCode;
+      const Escape = _constants.KeyCodes.Escape,
+        LeftArrow = _constants.KeyCodes.LeftArrow,
+        RightArrow = _constants.KeyCodes.RightArrow;
       if (keyCode === Escape || keyCode === LeftArrow || keyCode === RightArrow) {
         return false;
       }
@@ -301,15 +289,11 @@ class Input extends _react.default.Component {
         return this.onHidePopover();
       }
       const selection = window.getSelection();
-      const {
-        collaborators
-      } = this.props;
+      const collaborators = this.props.collaborators;
       let filteredCollaborators = [];
-      const {
-        isCollapsed,
-        anchorNode,
-        anchorOffset
-      } = selection;
+      const isCollapsed = selection.isCollapsed,
+        anchorNode = selection.anchorNode,
+        anchorOffset = selection.anchorOffset;
       if (!isCollapsed || !anchorNode || !anchorNode.data) {
         return this.onHidePopover();
       }
@@ -342,10 +326,9 @@ class Input extends _react.default.Component {
     };
     this.handleSelectingCollaborator = (event, direction) => {
       event.stopPropagation();
-      const {
-        filteredCollaborators,
-        activeCollaboratorIndex
-      } = this.state;
+      const _this$state = this.state,
+        filteredCollaborators = _this$state.filteredCollaborators,
+        activeCollaboratorIndex = _this$state.activeCollaboratorIndex;
       const collaboratorsLen = filteredCollaborators.length;
       if (collaboratorsLen === 0) {
         return;
@@ -367,10 +350,9 @@ class Input extends _react.default.Component {
       });
     };
     this.handleSelectCollaborator = () => {
-      const {
-        filteredCollaborators,
-        activeCollaboratorIndex
-      } = this.state;
+      const _this$state2 = this.state,
+        filteredCollaborators = _this$state2.filteredCollaborators,
+        activeCollaboratorIndex = _this$state2.activeCollaboratorIndex;
       if (filteredCollaborators.length === 0) {
         return;
       }
@@ -396,15 +378,12 @@ class Input extends _react.default.Component {
     document.removeEventListener('mousedown', this.hidePopover);
   }
   render() {
-    const {
-      api
-    } = this.props;
-    const {
-      imageUrlList,
-      largeImageIndex,
-      filteredCollaborators,
-      activeCollaboratorIndex
-    } = this.state;
+    const api = this.props.api;
+    const _this$state3 = this.state,
+      imageUrlList = _this$state3.imageUrlList,
+      largeImageIndex = _this$state3.largeImageIndex,
+      filteredCollaborators = _this$state3.filteredCollaborators,
+      activeCollaboratorIndex = _this$state3.activeCollaboratorIndex;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: (0, _classnames.default)('dtable-ui-comment-input', {

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

@@ -28,11 +28,10 @@ class Participant extends _react.default.Component {
     }
   }
   render() {
-    const {
-      participant,
-      index,
-      activeIndex
-    } = this.props;
+    const _this$props = this.props,
+      participant = _this$props.participant,
+      index = _this$props.index,
+      activeIndex = _this$props.activeIndex;
     const active = index === activeIndex;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "comment-participant-item ".concat(active ? 'active' : ''),

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

@@ -30,11 +30,10 @@ class Participants extends _react.default.Component {
     };
   }
   render() {
-    const {
-      canUpdate,
-      participants,
-      collaborators
-    } = this.props;
+    const _this$props = this.props,
+      canUpdate = _this$props.canUpdate,
+      participants = _this$props.participants,
+      collaborators = _this$props.collaborators;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "dtable-ui-comments-participants mb-2 position-relative",
       ref: ref => this.ref = ref,

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

@@ -11,9 +11,7 @@ var _DTableToolTip = _interopRequireDefault(require("../../../../DTableToolTip")
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const Participant = _ref => {
-  let {
-    participant
-  } = _ref;
+  let participant = _ref.participant;
   const ref = (0, _react.useRef)(null);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
     className: "dtable-ui-participant-avatar",

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

@@ -32,18 +32,12 @@ class ParticipantSelect extends _react.Component {
       }
     };
     this.getFilteredParticipants = () => {
-      let {
-        collaborators
-      } = window.app.state;
-      let {
-        searchVal
-      } = this.state;
+      let collaborators = window.app.state.collaborators;
+      let searchVal = this.state.searchVal;
       return (0, _dtableUtils.searchCollaborators)(collaborators, searchVal);
     };
     this.removeParticipant = participant => {
-      let {
-        participants
-      } = this.state;
+      let participants = this.state.participants;
       let updatedValue = participants.slice(0);
       let participant_index = participants.findIndex(participantItem => participantItem.email === participant.email);
       updatedValue.splice(participant_index, 1);
@@ -53,9 +47,7 @@ class ParticipantSelect extends _react.Component {
       });
     };
     this.onChangeSearch = event => {
-      let {
-        searchVal
-      } = this.state;
+      let searchVal = this.state.searchVal;
       if (searchVal === event.target.value) {
         return;
       }
@@ -65,9 +57,7 @@ class ParticipantSelect extends _react.Component {
       });
     };
     this.onSelectParticipant = participant => {
-      let {
-        participants
-      } = this.state;
+      let participants = this.state.participants;
       participants = participants.slice(0);
       let participant_index = participants.findIndex(participantItem => participantItem.email === participant.email);
       if (participant_index > -1) {
@@ -81,9 +71,7 @@ class ParticipantSelect extends _react.Component {
       });
     };
     this.renderMenuContent = () => {
-      let {
-        participants
-      } = this.state;
+      let participants = this.state.participants;
       let filteredParticipants = this.getFilteredParticipants();
       if (filteredParticipants.length > 0) {
         return filteredParticipants.map(participant => {
@@ -138,9 +126,7 @@ class ParticipantSelect extends _react.Component {
     this.unregisterHandlers();
   }
   renderParticipantList() {
-    const {
-      collaborators
-    } = this.props;
+    const collaborators = this.props.collaborators;
     const selectedParticipants = collaborators.filter(item => {
       return this.state.participants.find(participant => participant.email === item.email);
     });
@@ -158,9 +144,7 @@ class ParticipantSelect extends _react.Component {
     });
   }
   render() {
-    const {
-      target
-    } = this.props;
+    const target = this.props.target;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       ref: ref => this.outerRef = ref,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Popover, {

package/lib/Comment/index.js

@@ -42,9 +42,7 @@ class Comment extends _react.default.Component {
       let isGetCount = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
       _this.initComments(row, 1, pageNum);
       if (!isGetCount) return;
-      const {
-        api
-      } = _this.props;
+      const api = _this.props.api;
       api.getCount(row).then(res => {
         const count = res.data.count;
         _this.updateCount(row, count);
@@ -55,9 +53,7 @@ class Comment extends _react.default.Component {
     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;
+      const api = _this.props.api;
       api.get(row, page, perPage).then(res => {
         let comments = res.data.comment_list || [];
         let newComments = [];
@@ -74,14 +70,11 @@ class Comment extends _react.default.Component {
       });
     };
     this.addComment = (newComment, _ref) => {
-      let {
-        successCallback,
-        failCallback
-      } = _ref;
-      const {
-        row,
-        api
-      } = this.props;
+      let successCallback = _ref.successCallback,
+        failCallback = _ref.failCallback;
+      const _this$props = this.props,
+        row = _this$props.row,
+        api = _this$props.api;
       api.add(row, newComment).then(res => api.getCount(row)).then(res => {
         const count = res.data.count;
         this.updateCount(row, count);
@@ -96,10 +89,9 @@ class Comment extends _react.default.Component {
     };
     this.resolveComment = (event, commentID) => {
       event.persist();
-      const {
-        row,
-        api
-      } = this.props;
+      const _this$props2 = this.props,
+        row = _this$props2.row,
+        api = _this$props2.api;
       api.update(row, commentID, null, 1).then(() => {
         this.reCalculateComments(row);
       }).catch(error => {
@@ -107,10 +99,9 @@ class Comment extends _react.default.Component {
       });
     };
     this.deleteComment = (event, commentID) => {
-      const {
-        api,
-        row
-      } = this.props;
+      const _this$props3 = this.props,
+        api = _this$props3.api,
+        row = _this$props3.row;
       api.delete(row, commentID).then(() => {
         this.reCalculateComments(row);
       }).catch(e => {
@@ -119,17 +110,14 @@ class Comment extends _react.default.Component {
     };
     // notification
     this.onNewNotification = notification => {
-      const {
-        msg_type
-      } = notification;
+      const msg_type = notification.msg_type;
       if (msg_type !== ROW_COMMENT) return;
       this.setState({
         isFirstLoading: true
       });
-      const {
-        row,
-        api
-      } = this.props;
+      const _this$props4 = this.props,
+        row = _this$props4.row,
+        api = _this$props4.api;
       api.getCount(row).then(res => {
         const count = res.data.count;
         this.updateCount(row, count);
@@ -140,11 +128,9 @@ class Comment extends _react.default.Component {
     };
     // collaborators
     this.initCollaborators = props => {
-      const {
-        columns,
-        row,
-        collaborators
-      } = props;
+      const columns = props.columns,
+        row = props.row,
+        collaborators = props.collaborators;
       let collaboratorColumnKeyList = [];
       columns.forEach(column => {
         if (column.type === _dtableUtils.CellType.COLLABORATOR) {
@@ -193,14 +179,12 @@ class Comment extends _react.default.Component {
     };
     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;
+      const _this$props5 = this.props,
+        api = _this$props5.api,
+        row = _this$props5.row;
+      const _this$state = this.state,
+        comments = _this$state.comments,
+        count = _this$state.count;
       let currentCommentsLength = comments.length;
       if (currentCommentsLength < count) {
         // Have pagination
@@ -257,21 +241,19 @@ class Comment extends _react.default.Component {
     this.unsubscribeNotification();
   }
   render() {
-    const {
-      collaborators,
-      comments,
-      isLoading,
-      isFirstLoading
-    } = this.state;
-    const {
-      autoFocusInput,
-      row,
-      columns,
-      onInputFocus,
-      onInputBlur,
-      api,
-      uploadFile
-    } = this.props;
+    const _this$state2 = this.state,
+      collaborators = _this$state2.collaborators,
+      comments = _this$state2.comments,
+      isLoading = _this$state2.isLoading,
+      isFirstLoading = _this$state2.isFirstLoading;
+    const _this$props6 = this.props,
+      autoFocusInput = _this$props6.autoFocusInput,
+      row = _this$props6.row,
+      columns = _this$props6.columns,
+      onInputFocus = _this$props6.onInputFocus,
+      onInputBlur = _this$props6.onInputBlur,
+      api = _this$props6.api,
+      uploadFile = _this$props6.uploadFile;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "dtable-ui-comments h-100 w-100",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/lib/Comment/utils/utilities.js

@@ -9,13 +9,11 @@ var _getEventTransfer = _interopRequireDefault(require("../../utils/get-event-tr
 class Utilities {
   constructor() {
     this.onInsertElement = _ref => {
-      let {
-        commentRef,
-        selection,
-        range,
-        content,
-        nodeType
-      } = _ref;
+      let commentRef = _ref.commentRef,
+        selection = _ref.selection,
+        range = _ref.range,
+        content = _ref.content,
+        nodeType = _ref.nodeType;
       if (range) {
         selection.removeAllRanges();
         selection.addRange(range);
@@ -48,13 +46,11 @@ class Utilities {
       }
     };
     this.createHtmlElement = _ref2 => {
-      let {
-        commentRef,
-        selection,
-        range,
-        content,
-        nodeType
-      } = _ref2;
+      let commentRef = _ref2.commentRef,
+        selection = _ref2.selection,
+        range = _ref2.range,
+        content = _ref2.content,
+        nodeType = _ref2.nodeType;
       let spanNode1;
       let spanNode2;
       let imageContainer;
@@ -97,13 +93,11 @@ class Utilities {
       return range;
     };
     this.onSelectParticipant = _ref3 => {
-      let {
-        selection,
-        range,
-        participant,
-        callBack,
-        commentRef
-      } = _ref3;
+      let selection = _ref3.selection,
+        range = _ref3.range,
+        participant = _ref3.participant,
+        callBack = _ref3.callBack,
+        commentRef = _ref3.commentRef;
       if (range) {
         // delete '@xxx';
         selection.removeAllRanges();