dtable-ui-component 6.0.126 → 7.0.0-xia.1

package/lib/CollapsibleSettingLayout/index.js

@@ -1,24 +1,22 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 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 _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 = 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];
+  const {
+    className,
+    title,
+    children
+  } = props;
+  const [isShowSettings, setIsShowSettings] = (0, _react.useState)(true);
   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,9 +28,10 @@ class Comment extends _react.PureComponent {
       const mdString = mdFile.replaceAll('&', '&');
       _seafileEditor.processor.process(mdString).then(result => {
         let commentContent = String(result);
-        let _this$props = this.props,
-          isScrollBottom = _this$props.isScrollBottom,
-          onScrollBottom = _this$props.onScrollBottom;
+        let {
+          isScrollBottom,
+          onScrollBottom
+        } = this.props;
         this.setState({
           commentContent: commentContent
         });
@@ -75,11 +76,15 @@ class Comment extends _react.PureComponent {
       });
     };
     this.isCommentUserExist = commentItem => {
-      const collaborators = this.props.collaborators;
+      const {
+        collaborators
+      } = this.props;
       return !!collaborators.find(collaborator => collaborator.email === commentItem.author);
     };
     this.renderInfo = comment => {
-      const collaborators = this.props.collaborators;
+      const {
+        collaborators
+      } = this.props;
       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", {
@@ -125,11 +130,14 @@ class Comment extends _react.PureComponent {
     }
   }
   render() {
-    const _this$props2 = this.props,
-      comment = _this$props2.comment,
-      onResolve = _this$props2.onResolve,
-      onDelete = _this$props2.onDelete;
-    const username = window.dtable.username;
+    const {
+      comment,
+      onResolve,
+      onDelete
+    } = this.props;
+    const {
+      username
+    } = window.dtable;
     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,8 +14,10 @@ require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["comments", "isFirstLoading"];
 const Body = _ref => {
-  let comments = _ref.comments,
-    isFirstLoading = _ref.isFirstLoading,
+  let {
+      comments,
+      isFirstLoading
+    } = _ref,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   if (comments.length === 0) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

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

@@ -40,7 +40,9 @@ class Btns extends _react.default.Component {
       this.props.onInsertElement(uploadFileMessage.url, 'image');
     };
     this.getCollaboratorContent = () => {
-      const collaborators = this.props.collaborators;
+      const {
+        collaborators
+      } = this.props;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "comment-popover-list",
         children: collaborators.map(participant => {
@@ -73,9 +75,10 @@ class Btns extends _react.default.Component {
     return nextProps.isAdding !== this.props.isAdding || nextState.isShowPopover !== this.state.isShowPopover;
   }
   render() {
-    const _this$props = this.props,
-      isAdding = _this$props.isAdding,
-      canUpdateParticipants = _this$props.canUpdateParticipants;
+    const {
+      isAdding,
+      canUpdateParticipants
+    } = this.props;
     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,8 +17,10 @@ class Footer extends _react.default.Component {
   constructor(_props) {
     super(_props);
     this.initParticipants = props => {
-      const row = props.row,
-        collaborators = props.collaborators;
+      const {
+        row,
+        collaborators
+      } = props;
       if (row._participants && Array.isArray(row._participants)) {
         let rowParticipants = row._participants.filter(Boolean);
         rowParticipants = rowParticipants.filter(participant => {
@@ -43,8 +45,12 @@ class Footer extends _react.default.Component {
     };
     this.addParticipant = email => {
       if (!email) return;
-      const participants = this.state.participants;
-      const collaborators = this.props.collaborators;
+      const {
+        participants
+      } = this.state;
+      const {
+        collaborators
+      } = this.props;
       const isExist = participants.some(participant => participant.email === email);
       if (isExist) return;
       let newParticipantList = participants.slice(0);
@@ -100,7 +106,9 @@ class Footer extends _react.default.Component {
       const comment = this.convertComment(commentValue);
       if (!comment.trim()) return;
       this.addComment(comment);
-      const username = window.dtable.username;
+      const {
+        username
+      } = window.dtable;
       this.addParticipant(username);
     };
     this.onInsertElement = (content, nodeType) => {
@@ -122,10 +130,13 @@ class Footer extends _react.default.Component {
     }
   }
   render() {
-    const _this$state = this.state,
-      isAdding = _this$state.isAdding,
-      participants = _this$state.participants;
-    const collaborators = this.props.collaborators;
+    const {
+      isAdding,
+      participants
+    } = this.state;
+    const {
+      collaborators
+    } = this.props;
     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,10 +42,13 @@ class Input extends _react.default.Component {
       }
     };
     this.setPopoverPosition = () => {
-      const caretPosition = this.state.caretPosition;
-      let _this$commentRef$getB = this.commentRef.getBoundingClientRect(),
-        right = _this$commentRef$getB.right,
-        left = _this$commentRef$getB.left;
+      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) {
@@ -105,9 +108,10 @@ class Input extends _react.default.Component {
       this.props.onInputBlur && this.props.onInputBlur();
     };
     this.setScrollTop = (offsetTop, itemOffsetHeight, mouseDownType) => {
-      let _this$commentPopoverR = this.commentPopoverRef,
-        offsetHeight = _this$commentPopoverR.offsetHeight,
-        scrollTop = _this$commentPopoverR.scrollTop;
+      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;
@@ -128,7 +132,9 @@ class Input extends _react.default.Component {
     };
     this.onInsertElement = (content, nodeType) => {
       const selection = window.getSelection();
-      let range = this.state.range;
+      let {
+        range
+      } = this.state;
       let newRange = this.commentUtilities.onInsertElement({
         selection,
         range,
@@ -189,7 +195,9 @@ class Input extends _react.default.Component {
     };
     this.onSelectCollaborator = collaborator => {
       const selection = window.getSelection();
-      let range = this.state.range;
+      let {
+        range
+      } = this.state;
       let callBack = () => {
         this.onHidePopover();
         this.props.addParticipant(collaborator.email);
@@ -271,10 +279,14 @@ class Input extends _react.default.Component {
       });
     };
     this.checkMentionOperation = event => {
-      const keyCode = event.keyCode;
-      const Escape = _constants.KeyCodes.Escape,
-        LeftArrow = _constants.KeyCodes.LeftArrow,
-        RightArrow = _constants.KeyCodes.RightArrow;
+      const {
+        keyCode
+      } = event;
+      const {
+        Escape,
+        LeftArrow,
+        RightArrow
+      } = _constants.KeyCodes;
       if (keyCode === Escape || keyCode === LeftArrow || keyCode === RightArrow) {
         return false;
       }
@@ -289,11 +301,15 @@ class Input extends _react.default.Component {
         return this.onHidePopover();
       }
       const selection = window.getSelection();
-      const collaborators = this.props.collaborators;
+      const {
+        collaborators
+      } = this.props;
       let filteredCollaborators = [];
-      const isCollapsed = selection.isCollapsed,
-        anchorNode = selection.anchorNode,
-        anchorOffset = selection.anchorOffset;
+      const {
+        isCollapsed,
+        anchorNode,
+        anchorOffset
+      } = selection;
       if (!isCollapsed || !anchorNode || !anchorNode.data) {
         return this.onHidePopover();
       }
@@ -326,9 +342,10 @@ class Input extends _react.default.Component {
     };
     this.handleSelectingCollaborator = (event, direction) => {
       event.stopPropagation();
-      const _this$state = this.state,
-        filteredCollaborators = _this$state.filteredCollaborators,
-        activeCollaboratorIndex = _this$state.activeCollaboratorIndex;
+      const {
+        filteredCollaborators,
+        activeCollaboratorIndex
+      } = this.state;
       const collaboratorsLen = filteredCollaborators.length;
       if (collaboratorsLen === 0) {
         return;
@@ -350,9 +367,10 @@ class Input extends _react.default.Component {
       });
     };
     this.handleSelectCollaborator = () => {
-      const _this$state2 = this.state,
-        filteredCollaborators = _this$state2.filteredCollaborators,
-        activeCollaboratorIndex = _this$state2.activeCollaboratorIndex;
+      const {
+        filteredCollaborators,
+        activeCollaboratorIndex
+      } = this.state;
       if (filteredCollaborators.length === 0) {
         return;
       }
@@ -378,12 +396,15 @@ class Input extends _react.default.Component {
     document.removeEventListener('mousedown', this.hidePopover);
   }
   render() {
-    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;
+    const {
+      api
+    } = this.props;
+    const {
+      imageUrlList,
+      largeImageIndex,
+      filteredCollaborators,
+      activeCollaboratorIndex
+    } = this.state;
     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,10 +28,11 @@ class Participant extends _react.default.Component {
     }
   }
   render() {
-    const _this$props = this.props,
-      participant = _this$props.participant,
-      index = _this$props.index,
-      activeIndex = _this$props.activeIndex;
+    const {
+      participant,
+      index,
+      activeIndex
+    } = this.props;
     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,10 +30,11 @@ class Participants extends _react.default.Component {
     };
   }
   render() {
-    const _this$props = this.props,
-      canUpdate = _this$props.canUpdate,
-      participants = _this$props.participants,
-      collaborators = _this$props.collaborators;
+    const {
+      canUpdate,
+      participants,
+      collaborators
+    } = this.props;
     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,7 +11,9 @@ var _DTableToolTip = _interopRequireDefault(require("../../../../DTableToolTip")
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const Participant = _ref => {
-  let participant = _ref.participant;
+  let {
+    participant
+  } = _ref;
   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,12 +32,18 @@ class ParticipantSelect extends _react.Component {
       }
     };
     this.getFilteredParticipants = () => {
-      let collaborators = window.app.state.collaborators;
-      let searchVal = this.state.searchVal;
+      let {
+        collaborators
+      } = window.app.state;
+      let {
+        searchVal
+      } = this.state;
       return (0, _dtableUtils.searchCollaborators)(collaborators, searchVal);
     };
     this.removeParticipant = participant => {
-      let participants = this.state.participants;
+      let {
+        participants
+      } = this.state;
       let updatedValue = participants.slice(0);
       let participant_index = participants.findIndex(participantItem => participantItem.email === participant.email);
       updatedValue.splice(participant_index, 1);
@@ -47,7 +53,9 @@ class ParticipantSelect extends _react.Component {
       });
     };
     this.onChangeSearch = event => {
-      let searchVal = this.state.searchVal;
+      let {
+        searchVal
+      } = this.state;
       if (searchVal === event.target.value) {
         return;
       }
@@ -57,7 +65,9 @@ class ParticipantSelect extends _react.Component {
       });
     };
     this.onSelectParticipant = participant => {
-      let participants = this.state.participants;
+      let {
+        participants
+      } = this.state;
       participants = participants.slice(0);
       let participant_index = participants.findIndex(participantItem => participantItem.email === participant.email);
       if (participant_index > -1) {
@@ -71,7 +81,9 @@ class ParticipantSelect extends _react.Component {
       });
     };
     this.renderMenuContent = () => {
-      let participants = this.state.participants;
+      let {
+        participants
+      } = this.state;
       let filteredParticipants = this.getFilteredParticipants();
       if (filteredParticipants.length > 0) {
         return filteredParticipants.map(participant => {
@@ -126,7 +138,9 @@ class ParticipantSelect extends _react.Component {
     this.unregisterHandlers();
   }
   renderParticipantList() {
-    const collaborators = this.props.collaborators;
+    const {
+      collaborators
+    } = this.props;
     const selectedParticipants = collaborators.filter(item => {
       return this.state.participants.find(participant => participant.email === item.email);
     });
@@ -144,7 +158,9 @@ class ParticipantSelect extends _react.Component {
     });
   }
   render() {
-    const target = this.props.target;
+    const {
+      target
+    } = this.props;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       ref: ref => this.outerRef = ref,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Popover, {

package/lib/Comment/index.js

@@ -42,7 +42,9 @@ 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.api;
+      const {
+        api
+      } = _this.props;
       api.getCount(row).then(res => {
         const count = res.data.count;
         _this.updateCount(row, count);
@@ -53,7 +55,9 @@ 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.api;
+      const {
+        api
+      } = _this.props;
       api.get(row, page, perPage).then(res => {
         let comments = res.data.comment_list || [];
         let newComments = [];
@@ -70,11 +74,14 @@ class Comment extends _react.default.Component {
       });
     };
     this.addComment = (newComment, _ref) => {
-      let successCallback = _ref.successCallback,
-        failCallback = _ref.failCallback;
-      const _this$props = this.props,
-        row = _this$props.row,
-        api = _this$props.api;
+      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);
@@ -89,9 +96,10 @@ class Comment extends _react.default.Component {
     };
     this.resolveComment = (event, commentID) => {
       event.persist();
-      const _this$props2 = this.props,
-        row = _this$props2.row,
-        api = _this$props2.api;
+      const {
+        row,
+        api
+      } = this.props;
       api.update(row, commentID, null, 1).then(() => {
         this.reCalculateComments(row);
       }).catch(error => {
@@ -99,9 +107,10 @@ class Comment extends _react.default.Component {
       });
     };
     this.deleteComment = (event, commentID) => {
-      const _this$props3 = this.props,
-        api = _this$props3.api,
-        row = _this$props3.row;
+      const {
+        api,
+        row
+      } = this.props;
       api.delete(row, commentID).then(() => {
         this.reCalculateComments(row);
       }).catch(e => {
@@ -110,14 +119,17 @@ class Comment extends _react.default.Component {
     };
     // notification
     this.onNewNotification = notification => {
-      const msg_type = notification.msg_type;
+      const {
+        msg_type
+      } = notification;
       if (msg_type !== ROW_COMMENT) return;
       this.setState({
         isFirstLoading: true
       });
-      const _this$props4 = this.props,
-        row = _this$props4.row,
-        api = _this$props4.api;
+      const {
+        row,
+        api
+      } = this.props;
       api.getCount(row).then(res => {
         const count = res.data.count;
         this.updateCount(row, count);
@@ -128,9 +140,11 @@ class Comment extends _react.default.Component {
     };
     // collaborators
     this.initCollaborators = props => {
-      const columns = props.columns,
-        row = props.row,
-        collaborators = props.collaborators;
+      const {
+        columns,
+        row,
+        collaborators
+      } = props;
       let collaboratorColumnKeyList = [];
       columns.forEach(column => {
         if (column.type === _dtableUtils.CellType.COLLABORATOR) {
@@ -179,12 +193,14 @@ 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 _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;
+      const {
+        api,
+        row
+      } = this.props;
+      const {
+        comments,
+        count
+      } = this.state;
       let currentCommentsLength = comments.length;
       if (currentCommentsLength < count) {
         // Have pagination
@@ -241,19 +257,21 @@ class Comment extends _react.default.Component {
     this.unsubscribeNotification();
   }
   render() {
-    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;
+    const {
+      collaborators,
+      comments,
+      isLoading,
+      isFirstLoading
+    } = this.state;
+    const {
+      autoFocusInput,
+      row,
+      columns,
+      onInputFocus,
+      onInputBlur,
+      api,
+      uploadFile
+    } = this.props;
     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,11 +9,13 @@ var _getEventTransfer = _interopRequireDefault(require("../../utils/get-event-tr
 class Utilities {
   constructor() {
     this.onInsertElement = _ref => {
-      let commentRef = _ref.commentRef,
-        selection = _ref.selection,
-        range = _ref.range,
-        content = _ref.content,
-        nodeType = _ref.nodeType;
+      let {
+        commentRef,
+        selection,
+        range,
+        content,
+        nodeType
+      } = _ref;
       if (range) {
         selection.removeAllRanges();
         selection.addRange(range);
@@ -46,11 +48,13 @@ class Utilities {
       }
     };
     this.createHtmlElement = _ref2 => {
-      let commentRef = _ref2.commentRef,
-        selection = _ref2.selection,
-        range = _ref2.range,
-        content = _ref2.content,
-        nodeType = _ref2.nodeType;
+      let {
+        commentRef,
+        selection,
+        range,
+        content,
+        nodeType
+      } = _ref2;
       let spanNode1;
       let spanNode2;
       let imageContainer;
@@ -93,11 +97,13 @@ class Utilities {
       return range;
     };
     this.onSelectParticipant = _ref3 => {
-      let selection = _ref3.selection,
-        range = _ref3.range,
-        participant = _ref3.participant,
-        callBack = _ref3.callBack,
-        commentRef = _ref3.commentRef;
+      let {
+        selection,
+        range,
+        participant,
+        callBack,
+        commentRef
+      } = _ref3;
       if (range) {
         // delete '@xxx';
         selection.removeAllRanges();