dtable-ui-component 6.0.1140-oal.3 → 7.0.0

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

@@ -10,6 +10,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
 var _seafileEditor = require("@seafile/seafile-editor");
 var _ImagePreviewerLightbox = _interopRequireDefault(require("../../ImagePreviewerLightbox"));
+var _DTableDropdownMenu = _interopRequireDefault(require("../../DTableDropdownMenu"));
+var _DTableDropdownItem = _interopRequireDefault(require("../../DTableDropdownItem"));
 var _lang = require("../../lang");
 var _jsxRuntime = require("react/jsx-runtime");
 class Comment extends _react.PureComponent {
@@ -26,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
         });
@@ -74,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", {
@@ -128,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;
@@ -161,24 +155,20 @@ class Comment extends _react.PureComponent {
               title: moreOperationsText,
               "aria-label": moreOperationsText
             })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.DropdownMenu, {
-            className: "dtable-dropdown-menu dropdown-menu dtable-ui-comment-dropdown-list",
-            children: [!comment.resolved && onResolve && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.DropdownItem, {
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DTableDropdownMenu.default, {
+            className: "dtable-ui-comment-dropdown-list",
+            children: [!comment.resolved && onResolve && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableDropdownItem.default, {
               onClick: event => onResolve(event, comment.id),
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: "comment-icon dtable-font dtable-icon-mark mr-2"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: "comment-text",
-                children: (0, _lang.getLocale)('Mark_as_resolved')
-              })]
-            }), comment.author === username && onDelete && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.DropdownItem, {
+              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "comment-icon dtable-font dtable-icon-mark"
+              }),
+              content: (0, _lang.getLocale)('Mark_as_resolved')
+            }), comment.author === username && onDelete && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableDropdownItem.default, {
               onClick: event => onDelete(event, comment.id),
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: "comment-icon dtable-font dtable-icon-delete mr-2"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: "comment-text",
-                children: (0, _lang.getLocale)('Delete')
-              })]
+              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "comment-icon dtable-font dtable-icon-delete"
+              }),
+              content: (0, _lang.getLocale)('Delete')
             })]
           })]
         })]

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _reactstrap = require("reactstrap");
+var _DTableToolTip = _interopRequireDefault(require("../../../DTableToolTip"));
 var _participant = _interopRequireDefault(require("./participant"));
 var _participantSelect = _interopRequireDefault(require("./participant-select"));
 var _lang = require("../../../lang");
@@ -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,
@@ -50,11 +49,7 @@ class Participants extends _react.default.Component {
           "aria-hidden": "true",
           className: "dtable-font dtable-icon-add"
         })
-      }), this.addIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.UncontrolledTooltip, {
-        delay: {
-          show: 0,
-          hide: 0
-        },
+      }), this.addIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableToolTip.default, {
         target: this.addIcon,
         placement: "bottom",
         children: (0, _lang.getLocale)('Add_participants')

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

@@ -1,18 +1,17 @@
 "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 _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",
@@ -21,11 +20,7 @@ const Participant = _ref => {
       className: "avatar",
       ref: ref,
       alt: "avatar"
-    }), ref.current && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.UncontrolledTooltip, {
-      delay: {
-        show: 0,
-        hide: 0
-      },
+    }), ref.current && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableToolTip.default, {
       target: ref,
       placement: "bottom",
       children: participant.name

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,15 +71,13 @@ 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 => {
           let selectedIndex = participants.findIndex(item => item.email === participant.email);
           return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "dropdown-item dtable-ui-participant-item",
+            className: "dtable-ui-participant-item",
             onClick: this.onSelectParticipant.bind(this, participant),
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
               className: "dtable-ui-participant-container",
@@ -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, {