refactor: Upgrade utils and replace useMergedState (#451)

* refactor: Upgrade utils and replace useMergedState

* Update src/PreviewGroup.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

* feat: use useEvent

---------

Co-authored-by: 刘欢 <[email protected]>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

Author: 3 people

package.json

@@ -42,7 +42,7 @@
   "dependencies": {
     "@rc-component/portal": "^2.0.0",
     "@rc-component/motion": "^1.0.0",
-    "@rc-component/util": "^1.0.0",
+    "@rc-component/util": "^1.3.0",
     "classnames": "^2.2.6"
   },
   "devDependencies": {

src/Image.tsx

@@ -1,4 +1,4 @@
-import useMergedState from '@rc-component/util/lib/hooks/useMergedState';
+import useControlledState from '@rc-component/util/lib/hooks/useControlledState';
 import classnames from 'classnames';
 import * as React from 'react';
 import { useContext, useMemo, useState } from 'react';
@@ -125,18 +125,18 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
     ...restProps
   }: PreviewConfig = preview && typeof preview === 'object' ? preview : {};
 
-  const coverPlacement = typeof cover === 'object' && (cover as CoverConfig).placement ?
-    (cover as CoverConfig).placement || 'center' :
-    'center';
+  const coverPlacement =
+    typeof cover === 'object' && (cover as CoverConfig).placement
+      ? (cover as CoverConfig).placement || 'center'
+      : 'center';
 
-  const coverNode = typeof cover === 'object' && (cover as CoverConfig).coverNode ?
-    (cover as CoverConfig).coverNode :
-    cover as React.ReactNode;
+  const coverNode =
+    typeof cover === 'object' && (cover as CoverConfig).coverNode
+      ? (cover as CoverConfig).coverNode
+      : (cover as React.ReactNode);
 
   // ============================ Open ============================
-  const [isShowPreview, setShowPreview] = useMergedState(!!previewOpen, {
-    value: previewOpen,
-  });
+  const [isShowPreview, setShowPreview] = useControlledState(!!previewOpen, previewOpen);
 
   const [mousePosition, setMousePosition] = useState<null | { x: number; y: number }>(null);
 
@@ -249,7 +249,11 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
         {/* Preview Click Mask */}
         {cover !== false && canPreview && (
           <div
-            className={classnames(`${prefixCls}-cover`, classNames.cover, `${prefixCls}-cover-${coverPlacement}`)}
+            className={classnames(
+              `${prefixCls}-cover`,
+              classNames.cover,
+              `${prefixCls}-cover-${coverPlacement}`,
+            )}
             style={{
               display: style?.display === 'none' ? 'none' : undefined,
               ...styles.cover,

src/PreviewGroup.tsx

@@ -1,4 +1,5 @@
-import useMergedState from '@rc-component/util/lib/hooks/useMergedState';
+import useControlledState from '@rc-component/util/lib/hooks/useControlledState';
+import useEvent from '@rc-component/util/lib/hooks/useEvent';
 import * as React from 'react';
 import { useState } from 'react';
 import type { ImgInfo } from './Image';
@@ -60,20 +61,19 @@ const Group: React.FC<PreviewGroupProps> = ({
 
   // ========================= Preview ==========================
   // >>> Index
-  const [current, setCurrent] = useMergedState(0, {
-    value: currentIndex,
-  });
+  const [current, setCurrent] = useControlledState(0, currentIndex);
 
   const [keepOpenIndex, setKeepOpenIndex] = useState(false);
 
   // >>> Image
   const { src, ...imgCommonProps } = mergedItems[current]?.data || {};
   // >>> Visible
-  const [isShowPreview, setShowPreview] = useMergedState(!!previewOpen, {
-    value: previewOpen,
-    onChange: val => {
-      onOpenChange?.(val, { current });
-    },
+  const [isShowPreview, setShowPreview] = useControlledState(!!previewOpen, previewOpen);
+  const triggerShowPreview = useEvent((next: boolean) => {
+    setShowPreview(next);
+    if (next !== isShowPreview) {
+      onOpenChange?.(next, { current });
+    }
   });
 
   // >>> Position
@@ -87,7 +87,7 @@ const Group: React.FC<PreviewGroupProps> = ({
 
       setCurrent(index < 0 ? 0 : index);
 
-      setShowPreview(true);
+      triggerShowPreview(true);
       setMousePosition({ x: mouseX, y: mouseY });
 
       setKeepOpenIndex(true);
@@ -114,7 +114,7 @@ const Group: React.FC<PreviewGroupProps> = ({
   };
 
   const onPreviewClose = () => {
-    setShowPreview(false);
+    triggerShowPreview(false);
     setMousePosition(null);
   };