dtable-ui-component 6.0.52-beta.2 → 6.0.53-beta.1

package/lib/DTableColorPicker/ColorPickerPortal/index.js

@@ -14,54 +14,77 @@ 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: "".concat(left + 1, "px"),
+      visibility: 'visible'
+    };
+    if (spaceAbove < portalRectHeight) {
+      newPosition.top = "calc(".concat(spaceAbove, "px + 2.375rem)");
+    } else {
+      newPosition.top = "calc(".concat(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]);
+  }, [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: children

package/lib/DTableSwitch/index.css

@@ -20,7 +20,7 @@
 }
 
 .dtable-switch.sm .custom-switch .custom-switch-description {
-  width: auto;
+  width: 192px;
   margin: 0;
   padding-right: 5px;
   color: #212529;

package/lib/DTableSwitch/index.js

@@ -19,7 +19,6 @@ function DTableSwitch(_ref) {
     size = 'sm',
     switchPosition = 'right',
     switchClassName,
-    innerClassName,
     inputId
   } = _ref;
   const switchNode = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -38,9 +37,7 @@ function DTableSwitch(_ref) {
       [switchClassName]: switchClassName
     }),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-      className: (0, _classnames.default)('custom-switch', {
-        [innerClassName]: innerClassName
-      }),
+      className: "custom-switch",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
         className: "custom-switch-input",
         type: "checkbox",

package/lib/toaster/toaster.js

@@ -63,9 +63,13 @@ class Toaster {
       });
     };
     if (!isBrowser) return;
-    const container = document.createElement('div');
-    container.setAttribute('data-evergreen-toaster-container', '');
-    document.body.appendChild(container);
+    let container = document.querySelector('[data-evergreen-toaster-container]');
+    console.log('container 是！！！', container);
+    if (!container) {
+      container = document.createElement('div');
+      container.setAttribute('data-evergreen-toaster-container', '');
+      document.body.appendChild(container);
+    }
     const root = (0, _client.createRoot)(container);
     root.render( /*#__PURE__*/(0, _jsxRuntime.jsx)(_toastManager.default, {
       bindNotify: this._bindNotify,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "6.0.52-beta.2",
+  "version": "6.0.53-beta.1",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "4.0.2",