dtable-ui-component 6.0.89 → 6.0.92

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

@@ -12,6 +12,7 @@ var _dtableUtils = require("dtable-utils");
 var _lang = require("../../../../lang");
 var _CollaboratorItem = _interopRequireDefault(require("../../../../CollaboratorItem"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class ParticipantSelect extends _react.Component {
   constructor(props) {
     super(props);
@@ -87,31 +88,36 @@ class ParticipantSelect extends _react.Component {
       if (filteredParticipants.length > 0) {
         return filteredParticipants.map(participant => {
           let selectedIndex = participants.findIndex(item => item.email === participant.email);
-          return /*#__PURE__*/_react.default.createElement("div", {
-            key: participant.email,
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: "dropdown-item dtable-ui-participant-item",
-            onClick: this.onSelectParticipant.bind(this, participant)
-          }, /*#__PURE__*/_react.default.createElement("div", {
-            className: "dtable-ui-participant-container"
-          }, /*#__PURE__*/_react.default.createElement("div", {
-            className: "dtable-ui-participant"
-          }, /*#__PURE__*/_react.default.createElement("img", {
-            className: "dtable-ui-participant-avatar",
-            alt: participant.name,
-            src: participant.avatar_url
-          }), /*#__PURE__*/_react.default.createElement("span", {
-            className: "dtable-ui-participant-name text-truncate"
-          }, participant.name)), /*#__PURE__*/_react.default.createElement("div", {
-            className: "dtable-ui-participant-check-icon"
-          }, selectedIndex > -1 && /*#__PURE__*/_react.default.createElement("i", {
-            "aria-hidden": "true",
-            className: "dtable-font dtable-icon-check-mark"
-          }))));
+            onClick: this.onSelectParticipant.bind(this, participant),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "dtable-ui-participant-container",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: "dtable-ui-participant",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                  className: "dtable-ui-participant-avatar",
+                  alt: participant.name,
+                  src: participant.avatar_url
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  className: "dtable-ui-participant-name text-truncate",
+                  children: participant.name
+                })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "dtable-ui-participant-check-icon",
+                children: selectedIndex > -1 && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+                  "aria-hidden": "true",
+                  className: "dtable-font dtable-icon-check-mark"
+                })
+              })]
+            })
+          }, participant.email);
         });
       } else {
-        return /*#__PURE__*/_react.default.createElement("span", {
-          className: "none-search-result"
-        }, (0, _lang.getLocale)('No_collaborators_available'));
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "none-search-result",
+          children: (0, _lang.getLocale)('No_collaborators_available')
+        });
       }
     };
     this.state = {
@@ -121,12 +127,12 @@ 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();
@@ -139,44 +145,49 @@ class ParticipantSelect extends _react.Component {
       return this.state.participants.find(participant => participant.email === item.email);
     });
     if (selectedParticipants.length === 0) return null;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-participants-editor-header"
-    }, selectedParticipants.map(participant => {
-      return /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
-        key: participant.email,
-        collaborator: participant,
-        className: "dtable-ui-participant",
-        enableDeleteCollaborator: true,
-        onDeleteCollaborator: this.removeParticipant
-      });
-    }));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "dtable-ui-participants-editor-header",
+      children: selectedParticipants.map(participant => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CollaboratorItem.default, {
+          collaborator: participant,
+          className: "dtable-ui-participant",
+          enableDeleteCollaborator: true,
+          onDeleteCollaborator: this.removeParticipant
+        }, participant.email);
+      })
+    });
   }
   render() {
     const {
       target
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      ref: ref => this.outerRef = ref
-    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Popover, {
-      placement: "top",
-      isOpen: true,
-      target: target,
-      fade: false,
-      hideArrow: true
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dropdown-menu dtable-ui-participants-editor show m-0 p-0",
-      ref: ref => this.participantsRef = ref
-    }, this.renderParticipantList(), /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-participants-editor-search"
-    }, /*#__PURE__*/_react.default.createElement("input", {
-      className: "form-control",
-      type: "text",
-      placeholder: (0, _lang.getLocale)('Search_collaborator'),
-      value: this.state.searchVal,
-      onChange: this.onChangeSearch
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-participants-editor-participants-container"
-    }, this.renderMenuContent()))));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: ref => this.outerRef = ref,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Popover, {
+        placement: "top",
+        isOpen: true,
+        target: target,
+        fade: false,
+        hideArrow: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "dropdown-menu dtable-ui-participants-editor show m-0 p-0",
+          ref: ref => this.participantsRef = ref,
+          children: [this.renderParticipantList(), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "dtable-ui-participants-editor-search",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+              className: "form-control",
+              type: "text",
+              placeholder: (0, _lang.getLocale)('Search_collaborator'),
+              value: this.state.searchVal,
+              onChange: this.onChangeSearch
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "dtable-ui-participants-editor-participants-container",
+            children: this.renderMenuContent()
+          })]
+        })
+      })
+    });
   }
 }
 var _default = exports.default = ParticipantSelect;

package/lib/Comment/index.js

@@ -15,6 +15,7 @@ var _model = _interopRequireDefault(require("./model"));
 var _utils = require("../utils/utils");
 var _lang = require("../lang");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 const ROW_COMMENT = 'row_comment';
 class Comment extends _react.default.Component {
   constructor(_props) {
@@ -271,34 +272,38 @@ class Comment extends _react.default.Component {
       api,
       uploadFile
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-comments h-100 w-100"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-comments-body",
-      onScroll: this.onScroll,
-      ref: ref => this.body = ref
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      ref: ref => this.bodyContent = ref
-    }, isLoading ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "w-100 h-100 d-flex align-items-center justify-content-center"
-    }, /*#__PURE__*/_react.default.createElement(_Loading.default, null)) : /*#__PURE__*/_react.default.createElement(_body.default, {
-      isFirstLoading: isFirstLoading,
-      comments: comments,
-      collaborators: collaborators,
-      onDelete: this.deleteComment,
-      onResolve: this.resolveComment,
-      onScrollBottom: this.onScrollBottom
-    }))), /*#__PURE__*/_react.default.createElement(_footer.default, {
-      autoFocusInput: autoFocusInput,
-      collaborators: collaborators,
-      row: row,
-      columns: columns,
-      addComment: this.addComment,
-      onChangeParticipants: api.modifyParticipants,
-      uploadFile: uploadFile,
-      onInputFocus: onInputFocus,
-      onInputBlur: onInputBlur
-    }));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "dtable-ui-comments h-100 w-100",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "dtable-ui-comments-body",
+        onScroll: this.onScroll,
+        ref: ref => this.body = ref,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          ref: ref => this.bodyContent = ref,
+          children: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "w-100 h-100 d-flex align-items-center justify-content-center",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.default, {})
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_body.default, {
+            isFirstLoading: isFirstLoading,
+            comments: comments,
+            collaborators: collaborators,
+            onDelete: this.deleteComment,
+            onResolve: this.resolveComment,
+            onScrollBottom: this.onScrollBottom
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_footer.default, {
+        autoFocusInput: autoFocusInput,
+        collaborators: collaborators,
+        row: row,
+        columns: columns,
+        addComment: this.addComment,
+        onChangeParticipants: api.modifyParticipants,
+        uploadFile: uploadFile,
+        onInputFocus: onInputFocus,
+        onInputBlur: onInputBlur
+      })]
+    });
   }
 }
 var _default = exports.default = Comment;

package/lib/Comment/utils/utilities.js

@@ -74,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();

package/lib/CreatorFormatter/index.js

@@ -10,6 +10,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _CollaboratorItem = _interopRequireDefault(require("../CollaboratorItem"));
 var _default_avatar = _interopRequireDefault(require("../assets/images/avatar/default_avatar.png"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 // there will be there conditions
 // 1 value is not exist, typeof value is array, but it's length is 0
 // 2 value is exist, but can't find in collaborators
@@ -35,10 +36,9 @@ class CreatorFormatter extends _react.default.PureComponent {
             avatar_url: _default_avatar.default
           };
         }
-        return /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
-          key: index,
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CollaboratorItem.default, {
           collaborator: collaborator
-        });
+        }, index);
       });
     };
   }
@@ -49,14 +49,15 @@ class CreatorFormatter extends _react.default.PureComponent {
     } = 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__*/_react.default.createElement("div", {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: classname
       });
     }
     const collaborators = this.getCollaborators();
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: classname
-    }, collaborators);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classname,
+      children: collaborators
+    });
   }
 }
 CreatorFormatter.defaultProps = {

package/lib/DTableColorPicker/ColorPickerPortal/index.js

@@ -9,59 +9,84 @@ exports.default = ColorPickerPortal;
 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,
     scrollContainerId,
-    throttleDelay,
+    throttleDelay = 16,
     children
   } = _ref;
   const containerRef = (0, _react.useRef)(null);
-  const [position, setPosition] = (0, _react.useState)({
-    top: 0,
-    left: 0
+  const [isPositioned, setIsPositioned] = (0, _react.useState)(false);
+  const [position, setPosition] = (0, _react.useState)(() => {
+    return {
+      top: '-9999px',
+      left: '-9999px',
+      visibility: 'hidden'
+    };
   });
-  (0, _react.useEffect)(() => {
+  const updatePosition = (0, _react.useCallback)(() => {
     if (!target || !containerRef.current) return;
-    const updatePosition = () => {
-      const targetRect = target.getBoundingClientRect();
-      const {
-        top: spaceAbove,
-        left
-      } = targetRect;
-      const portalRectHeight = containerRef.current.clientHeight;
-      if (spaceAbove < portalRectHeight) {
-        setPosition({
-          top: "calc(".concat(spaceAbove, "px + 2.375rem)"),
-          left: left + 1 + 'px'
-        });
-        return;
-      }
-      setPosition({
-        top: "calc(".concat(spaceAbove - portalRectHeight, "px)"),
-        left: left + 1 + 'px'
-      });
+    const targetRect = target.getBoundingClientRect();
+    const {
+      top: spaceAbove,
+      left
+    } = targetRect;
+    const portalRectHeight = containerRef.current.clientHeight;
+    const newPosition = {
+      left: `${left + 1}px`,
+      visibility: 'visible'
+    };
+    if (spaceAbove < portalRectHeight) {
+      newPosition.top = `calc(${spaceAbove}px + 2.375rem)`;
+    } else {
+      newPosition.top = `calc(${spaceAbove - portalRectHeight}px)`;
+    }
+    setPosition(prev => ({
+      ...prev,
+      ...newPosition
+    }));
+    if (!isPositioned) {
+      setIsPositioned(true);
+    }
+  }, [target, isPositioned]);
+  (0, _react.useEffect)(() => {
+    if (!target) return;
+    const initialPosition = () => {
+      updatePosition();
+      requestAnimationFrame(updatePosition);
     };
-    updatePosition();
+    const timer = setTimeout(initialPosition, 0);
     const throttledUpdatePosition = (0, _utils.throttle)(updatePosition, throttleDelay);
     const scrollContainer = scrollContainerId ? document.getElementById(scrollContainerId) : null;
-    scrollContainer && scrollContainer.addEventListener('scroll', throttledUpdatePosition);
-    window.addEventListener('resize', updatePosition);
+    scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.addEventListener('scroll', throttledUpdatePosition, {
+      passive: true
+    });
+    window.addEventListener('resize', throttledUpdatePosition, {
+      passive: true
+    });
     return () => {
-      window.removeEventListener('resize', updatePosition);
-      scrollContainer && scrollContainer.removeEventListener('scroll', throttledUpdatePosition);
+      clearTimeout(timer);
+      window.removeEventListener('resize', throttledUpdatePosition);
+      scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.removeEventListener('scroll', throttledUpdatePosition);
     };
-  }, [target, containerRef, scrollContainerId, throttleDelay]);
-  return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement("div", {
+  }, [target, scrollContainerId, throttleDelay, updatePosition]);
+  if (!target) return null;
+  return /*#__PURE__*/_reactDom.default.createPortal(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "dtable-color-picker-portal",
     style: {
-      position: 'absolute',
-      zIndex: '10',
+      position: 'fixed',
+      zIndex: '1049',
       left: position.left,
       top: position.top,
       width: '240px',
-      height: '370px'
+      height: '370px',
+      visibility: position.visibility,
+      opacity: isPositioned ? 1 : 0,
+      transition: 'opacity 0.15s ease-in-out'
     },
-    ref: containerRef
-  }, children), document.body);
+    ref: containerRef,
+    children: children
+  }), document.body);
 }