dtable-ui-component 7.0.13 → 7.0.15

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

@@ -42,16 +42,19 @@ 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;
-      this.commentPopoverRef.style.left = "".concat(caretPosition.x + FONT_SIZE_WIDTH, "px");
-      this.commentPopoverRef.style.top = "".concat(caretPosition.y - this.commentPopoverRef.offsetHeight, "px");
+      const {
+        caretPosition
+      } = this.state;
+      let {
+        right,
+        left
+      } = this.commentRef.getBoundingClientRect();
+      this.commentPopoverRef.style.left = `${caretPosition.x + FONT_SIZE_WIDTH}px`;
+      this.commentPopoverRef.style.top = `${caretPosition.y - this.commentPopoverRef.offsetHeight}px`;
       if (caretPosition.x + FONT_SIZE_WIDTH > right - PADDING_WIDTH) {
         // is last code
-        this.commentPopoverRef.style.left = "".concat(left + PADDING_WIDTH + FONT_SIZE_WIDTH, "px");
-        this.commentPopoverRef.style.top = "".concat(caretPosition.y - this.commentPopoverRef.offsetHeight + LINE_HEIGHT, "px");
+        this.commentPopoverRef.style.left = `${left + PADDING_WIDTH + FONT_SIZE_WIDTH}px`;
+        this.commentPopoverRef.style.top = `${caretPosition.y - this.commentPopoverRef.offsetHeight + LINE_HEIGHT}px`;
       }
       if (caretPosition.x + FONT_SIZE_WIDTH + this.commentPopoverRef.offsetWidth > document.body.clientWidth) {
         this.commentPopoverRef.style.right = 0;
@@ -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,
@@ -160,7 +166,7 @@ class Input extends _react.default.Component {
         spanNode2 = document.createElement('span');
         spanNode1.className = 'at-text';
         spanNode1.contentEditable = 'false';
-        spanNode1.innerHTML = "@".concat(content.name);
+        spanNode1.innerHTML = `@${content.name}`;
         spanNode2.innerHTML = ' ';
       }
       let frag = document.createDocumentFragment();
@@ -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,13 +28,14 @@ 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' : ''),
+      className: `comment-participant-item ${active ? 'active' : ''}`,
       ref: ref => this.participantItem = ref,
       onClick: this.onSelect,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

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 => {
@@ -115,18 +127,20 @@ class ParticipantSelect extends _react.Component {
   }
   componentDidMount() {
     let collaboratorListHeight = this.participantsRef.offsetHeight;
-    this.participantsRef.style.top = "".concat(-collaboratorListHeight + 10, "px");
+    this.participantsRef.style.top = `${-collaboratorListHeight + 10}px`;
     this.registerHandlers();
   }
   componentDidUpdate() {
     let collaboratorListHeight = this.participantsRef.offsetHeight;
-    this.participantsRef.style.top = "".concat(-collaboratorListHeight + 10, "px");
+    this.participantsRef.style.top = `${-collaboratorListHeight + 10}px`;
   }
   componentWillUnmount() {
     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;
@@ -70,7 +74,7 @@ class Utilities {
         spanNode2 = document.createElement('span');
         spanNode1.className = 'at-text';
         spanNode1.contentEditable = 'true';
-        spanNode1.innerHTML = "@".concat(content.name);
+        spanNode1.innerHTML = `@${content.name}`;
         spanNode2.innerHTML = ' ';
       }
       let frag = document.createDocumentFragment();
@@ -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();

package/lib/CreatorFormatter/index.js

@@ -20,9 +20,10 @@ class CreatorFormatter extends _react.default.PureComponent {
   constructor() {
     super(...arguments);
     this.getCollaborators = () => {
-      let _this$props = this.props,
-        value = _this$props.value,
-        collaborators = _this$props.collaborators;
+      let {
+        value,
+        collaborators
+      } = this.props;
       if (!Array.isArray(value)) {
         value = [value];
       }
@@ -42,9 +43,10 @@ class CreatorFormatter extends _react.default.PureComponent {
     };
   }
   render() {
-    const _this$props2 = this.props,
-      containerClassName = _this$props2.containerClassName,
-      value = _this$props2.value;
+    const {
+      containerClassName,
+      value
+    } = this.props;
     const classname = (0, _classnames.default)('dtable-ui cell-formatter-container creator-formatter', containerClassName);
     if (!value || Array.isArray(value) && value.length === 0) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/lib/DTableColorPicker/ColorPickerPortal/index.js

@@ -1,54 +1,52 @@
 "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 = ColorPickerPortal;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _utils = require("../../utils/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function ColorPickerPortal(_ref) {
-  let target = _ref.target,
-    scrollContainerId = _ref.scrollContainerId,
-    _ref$throttleDelay = _ref.throttleDelay,
-    throttleDelay = _ref$throttleDelay === void 0 ? 16 : _ref$throttleDelay,
-    children = _ref.children;
+  let {
+    target,
+    scrollContainerId,
+    throttleDelay = 16,
+    children
+  } = _ref;
   const containerRef = (0, _react.useRef)(null);
-  const _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isPositioned = _useState2[0],
-    setIsPositioned = _useState2[1];
-  const _useState3 = (0, _react.useState)(() => {
-      return {
-        top: '-9999px',
-        left: '-9999px',
-        visibility: 'hidden'
-      };
-    }),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    position = _useState4[0],
-    setPosition = _useState4[1];
+  const [isPositioned, setIsPositioned] = (0, _react.useState)(false);
+  const [position, setPosition] = (0, _react.useState)(() => {
+    return {
+      top: '-9999px',
+      left: '-9999px',
+      visibility: 'hidden'
+    };
+  });
   const updatePosition = (0, _react.useCallback)(() => {
     if (!target || !containerRef.current) return;
     const targetRect = target.getBoundingClientRect();
-    const spaceAbove = targetRect.top,
-      left = targetRect.left;
+    const {
+      top: spaceAbove,
+      left
+    } = targetRect;
     const portalRectHeight = containerRef.current.clientHeight;
     const newPosition = {
-      left: "".concat(left + 1, "px"),
+      left: `${left + 1}px`,
       visibility: 'visible'
     };
     if (spaceAbove < portalRectHeight) {
-      newPosition.top = "calc(".concat(spaceAbove, "px + 2.375rem)");
+      newPosition.top = `calc(${spaceAbove}px + 2.375rem)`;
     } else {
-      newPosition.top = "calc(".concat(spaceAbove - portalRectHeight, "px)");
+      newPosition.top = `calc(${spaceAbove - portalRectHeight}px)`;
     }
-    setPosition(prev => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), newPosition));
+    setPosition(prev => ({
+      ...prev,
+      ...newPosition
+    }));
     if (!isPositioned) {
       setIsPositioned(true);
     }