dtable-ui-component 6.0.52-alpha.2 → 6.0.52

package/lib/DTableColorPicker/ColorPickerPortal/index.js

@@ -14,84 +14,54 @@ function ColorPickerPortal(_ref) {
   let {
     target,
     scrollContainerId,
-    throttleDelay = 16,
+    throttleDelay,
     children
   } = _ref;
   const containerRef = (0, _react.useRef)(null);
-  const [isPositioned, setIsPositioned] = (0, _react.useState)(false);
-  const [position, setPosition] = (0, _react.useState)(() => {
-    return {
-      top: '-9999px',
-      left: '-9999px',
-      visibility: 'hidden'
-    };
+  const [position, setPosition] = (0, _react.useState)({
+    top: 0,
+    left: 0
   });
-  const updatePosition = (0, _react.useCallback)(() => {
-    if (!target || !containerRef.current) return;
-    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);
+    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'
+      });
     };
-
-    // 使用setTimeout确保DOM更新后再计算位置
-    const timer = setTimeout(initialPosition, 0);
+    updatePosition();
     const throttledUpdatePosition = (0, _utils.throttle)(updatePosition, throttleDelay);
     const scrollContainer = scrollContainerId ? document.getElementById(scrollContainerId) : null;
-
-    // 添加事件监听
-    scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.addEventListener('scroll', throttledUpdatePosition, {
-      passive: true
-    });
-    window.addEventListener('resize', throttledUpdatePosition, {
-      passive: true
-    });
+    scrollContainer && scrollContainer.addEventListener('scroll', throttledUpdatePosition);
+    window.addEventListener('resize', updatePosition);
     return () => {
-      clearTimeout(timer);
-      window.removeEventListener('resize', throttledUpdatePosition);
-      scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.removeEventListener('scroll', throttledUpdatePosition);
+      window.removeEventListener('resize', updatePosition);
+      scrollContainer && scrollContainer.removeEventListener('scroll', throttledUpdatePosition);
     };
-  }, [target, scrollContainerId, throttleDelay, updatePosition]);
-  if (!target) return null;
+  }, [target, containerRef, scrollContainerId, throttleDelay]);
   return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "dtable-color-picker-portal",
     style: {
-      position: 'fixed',
-      zIndex: '1049',
+      position: 'absolute',
+      zIndex: '10',
       left: position.left,
       top: position.top,
       width: '240px',
-      height: '370px',
-      visibility: position.visibility,
-      opacity: isPositioned ? 1 : 0,
-      transition: 'opacity 0.15s ease-in-out'
+      height: '370px'
     },
     ref: containerRef,
     children: children

package/lib/DTableSwitch/index.css

@@ -15,10 +15,6 @@
   cursor: default;
 }
 
-.dtable-switch.sm .custom-switch {
-  width: 100%;
-}
-
 .dtable-switch.sm .custom-switch .custom-switch-description {
   width: 192px;
   margin: 0;

package/lib/DTableSwitch/index.js

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

package/package.json

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