chore: rename hook

Author: json-q

packages/sqi-hooks/src/index.ts

@@ -3,4 +3,4 @@ export * from './useIsomorphicLayoutEffect';
 export * from './useMergeProps';
 export * from './useMergeState';
 export * from './usePrevious';
-export * from './useResizeObserver';
+export * from './useResizeObserverRect';

packages/sqi-hooks/src/useResizeObserver.ts renamed to packages/sqi-hooks/src/useResizeObserverRect.ts

@@ -12,7 +12,7 @@ export interface ObserverSizeInfo {
 
 const SafeResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
 
-export function useResizeObserver(
+export function useResizeObserverRect(
   container?: HTMLElement | null,
   callback?: (sizeInfo: ObserverSizeInfo, target: ResizeObserverEntry) => void,
   enabled = true,

packages/sqi-web/src/_common/ResizeObserver.tsx renamed to packages/sqi-web/src/_common/ResizeObserverRect.tsx

@@ -1,11 +1,11 @@
 import React, { cloneElement, forwardRef, isValidElement, useImperativeHandle, useRef, useState } from 'react';
 import { throttle } from '@sqi-ui/utils';
-import { useResizeObserver, type ObserverSizeInfo } from '@sqi-ui/hooks';
+import { useResizeObserverRect, type ObserverSizeInfo } from '@sqi-ui/hooks';
 import { toArray } from '../_util/toArray';
 import { getDOM, getReactNodeRef, getRefDom } from '../_util/dom';
 import { useComposeRef } from '../_util/ref';
 
-export interface ResizeObserverProps {
+export interface ResizeObserverRectProps {
   onResize?: (sizeInfo: ObserverSizeInfo, target: ResizeObserverEntry) => void;
   children?: React.ReactElement;
   /**
@@ -19,7 +19,7 @@ export interface ResizeObserverProps {
   throttleMs?: number;
 }
 
-const ResizeObserverComponent = forwardRef<HTMLElement, ResizeObserverProps>((props, ref) => {
+const ResizeObserverRect = forwardRef<HTMLElement, ResizeObserverRectProps>((props, ref) => {
   const { children, disabled, throttleMs = 100, onResize } = props;
 
   const isElement = isValidElement(children);
@@ -30,31 +30,31 @@ const ResizeObserverComponent = forwardRef<HTMLElement, ResizeObserverProps>((pr
   const [elementState, setElementState] = useState<HTMLElement | null>(null);
 
   const mergedRef = useComposeRef<HTMLElement>(originRef, elementRef, (node) => {
-    // elementRef 在初次挂载时 useResizeObserver 无法获取到值，使用 state
+    // elementRef 在初次挂载时 useResizeObserverRect 无法获取到值，使用 state
     setElementState(getDOM(node) as HTMLElement);
   });
 
   if (process.env.NODE_ENV !== 'production' && !isElement) {
     if (childNodes.length > 1) {
       console.error(
-        '[@sqi-ui/web]: Find more than one child node with `children` in ResizeObserverComponent. Please ensure only one child node',
+        '[@sqi-ui/web]: Find more than one child node with `children` in ResizeObserverRect. Please ensure only one child node',
       );
     } else if (childNodes.length === 0) {
-      console.error('[@sqi-ui/web]: `children` of ResizeObserverComponent is empty. Nothing is in observe.');
+      console.error('[@sqi-ui/web]: `children` of ResizeObserverRect is empty. Nothing is in observe.');
     } else {
-      console.error('[@sqi-ui/web]: The `children` of ResizeObserverComponent is invalid. Nothing is in observe.');
+      console.error('[@sqi-ui/web]: The `children` of ResizeObserverRect is invalid. Nothing is in observe.');
     }
   }
 
   useImperativeHandle(ref, () => getRefDom(elementRef) as HTMLElement);
 
   const throttleResize = onResize ? throttle(onResize, throttleMs) : undefined;
 
-  useResizeObserver(elementState, throttleResize, !disabled);
+  useResizeObserverRect(elementState, throttleResize, !disabled);
 
   return isElement ? cloneElement(children as any, { ref: mergedRef }) : children;
 });
 
-ResizeObserverComponent.displayName = 'ResizeObserverComponent';
+ResizeObserverRect.displayName = 'ResizeObserverRect';
 
-export default ResizeObserverComponent;
+export default ResizeObserverRect;

packages/sqi-web/src/_common/__tests__/__snapshots__/resize-observer.test.tsx.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`ResizeObserverComponent > should render single child element correctly 1`] = `
+exports[`ResizeObserverRect > should render single child element correctly 1`] = `
 <div
   data-testid="child-element"
 >

packages/sqi-web/src/_common/__tests__/resize-observer.test.tsx

@@ -1,14 +1,14 @@
 import { describe, it, expect, vi } from 'vitest';
 import { render } from '@testing-library/react';
 import * as React from 'react';
-import ResizeObserverComponent from '../ResizeObserver';
+import ResizeObserverRect from '../ResizeObserverRect';
 
-describe('ResizeObserverComponent', () => {
+describe('ResizeObserverRect', () => {
   it('should render single child element correctly', () => {
     const { container } = render(
-      <ResizeObserverComponent>
+      <ResizeObserverRect>
         <div data-testid="child-element">Content</div>
-      </ResizeObserverComponent>,
+      </ResizeObserverRect>,
     );
 
     expect(container.firstChild).toBeInTheDocument();
@@ -20,33 +20,33 @@ describe('ResizeObserverComponent', () => {
 
     const { container } = render(
       // @ts-expect-error
-      <ResizeObserverComponent>Test</ResizeObserverComponent>,
+      <ResizeObserverRect>Test</ResizeObserverRect>,
     );
 
     expect(container.firstChild).instanceOf(Text);
-    expect(errorSpy).toBeCalledWith(expect.stringContaining('The `children` of ResizeObserverComponent is invalid'));
+    expect(errorSpy).toBeCalledWith(expect.stringContaining('The `children` of ResizeObserverRect is invalid'));
   });
 
   it('should console error with multiple children', () => {
     const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => null);
 
     render(
       // @ts-expect-error
-      <ResizeObserverComponent>
+      <ResizeObserverRect>
         <div>1</div>
         <div>2</div>
-      </ResizeObserverComponent>,
+      </ResizeObserverRect>,
     );
 
     expect(errorSpy).toBeCalledWith(
-      expect.stringContaining('Find more than one child node with `children` in ResizeObserverComponent'),
+      expect.stringContaining('Find more than one child node with `children` in ResizeObserverRect'),
     );
   });
 
   it('should console error with empty children', () => {
     const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => null);
-    render(<ResizeObserverComponent></ResizeObserverComponent>);
+    render(<ResizeObserverRect></ResizeObserverRect>);
 
-    expect(errorSpy).toBeCalledWith(expect.stringContaining('`children` of ResizeObserverComponent is empty'));
+    expect(errorSpy).toBeCalledWith(expect.stringContaining('`children` of ResizeObserverRect is empty'));
   });
 });

packages/sqi-web/src/_common/demos/resize-observer.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Checkbox } from '@sqi-ui/web';
-import ResizeObserver, { type ResizeObserverProps } from '../ResizeObserver';
+import ResizeObserver, { type ResizeObserverProps } from '../ResizeObserverRect';
 
 export default function App() {
   const [times, setTimes] = React.useState(0);

packages/sqi-web/src/trigger/Trigger.tsx

@@ -12,7 +12,7 @@ import React, {
 import clsx from 'clsx';
 import { useIsomorphicLayoutEffect, useMergeProps, useMergeState } from '@sqi-ui/hooks';
 
-import ResizeObserverComponent from '../_common/ResizeObserver';
+import ResizeObserverRect from '../_common/ResizeObserverRect';
 import Portal from '../_common/Portal';
 import CSSMotion, { type CSSMotionInstance } from '../_common/CSSMotion';
 import { getReactNodeRef } from '../_util/dom';
@@ -223,11 +223,11 @@ const Trigger = forwardRef<HTMLElement, TriggerProps>((baseProps, ref) => {
 
   return (
     <>
-      <ResizeObserverComponent ref={referenceRef} onResize={() => asyncUpdatePosition()}>
+      <ResizeObserverRect ref={referenceRef} onResize={() => asyncUpdatePosition()}>
         {cloneElement(children as any, {
           ...genTriggerProps(children),
         })}
-      </ResizeObserverComponent>
+      </ResizeObserverRect>
 
       {renderPopper()}
     </>