chore: migrate to @rc-component namespace and update dependencies

.dumirc.ts

@@ -3,8 +3,8 @@ import path from 'path';
 
 export default defineConfig({
   alias: {
-    'rc-image$': path.resolve('src'),
-    'rc-image/es': path.resolve('src'),
+    '@rc-component/image$': path.resolve('src'),
+    '@rc-component/image/es': path.resolve('src'),
   },
   favicons: ['https://avatars0.githubusercontent.com/u/9441414?s=200&v=4'],
   themeConfig: {

README.md

@@ -55,7 +55,7 @@ npm start
 ```
 
 ```js
-import Image from 'rc-image';
+import Image from '@rc-component/image';
 
 export default () => (
   <Image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
@@ -96,7 +96,7 @@ export default () => (
 preview the merged src
 
 ```js
-import Image from 'rc-image';
+import Image from '@rc-component/image';
 
 export default () => (
   <Image.PreviewGroup>

docs/examples/album.tsx

@@ -1,4 +1,4 @@
-import Image from 'rc-image';
+import Image from '@rc-component/image';
 import React from 'react';
 import '../../assets/index.less';
 import { defaultIcons } from './common';

docs/examples/basic.tsx

@@ -1,4 +1,4 @@
-import Image from 'rc-image';
+import Image from '@rc-component/image';
 import * as React from 'react';
 import '../../assets/index.less';
 import { defaultIcons } from './common';

docs/examples/controlled.tsx

@@ -1,4 +1,4 @@
-import Image from 'rc-image';
+import Image from '@rc-component/image';
 import * as React from 'react';
 import '../../assets/index.less';
 import { defaultIcons } from './common';

docs/examples/controlledWithGroup.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable global-require */
-import Image from 'rc-image';
+import Image from '@rc-component/image';
 import * as React from 'react';
 import '../../assets/index.less';
 import { defaultIcons } from './common';

docs/examples/fallback.tsx

@@ -1,4 +1,4 @@
-import Image from 'rc-image';
+import Image from '@rc-component/image';
 import * as React from 'react';
 import '../../assets/index.less';
 import { defaultIcons } from './common';

docs/examples/imageRender.tsx

@@ -1,4 +1,4 @@
-import Image from 'rc-image';
+import Image from '@rc-component/image';
 import React from 'react';
 import '../../assets/index.less';
 import { defaultIcons } from './common';

docs/examples/placeholder.tsx

@@ -1,4 +1,4 @@
-import Image from 'rc-image';
+import Image from '@rc-component/image';
 import * as React from 'react';
 import '../../assets/index.less';
 import { defaultIcons } from './common';

docs/examples/previewgroup-items.tsx

@@ -1,4 +1,4 @@
-import Image from 'rc-image';
+import Image from '@rc-component/image';
 import * as React from 'react';
 import '../../assets/index.less';
 

docs/examples/previewgroup.tsx

@@ -8,7 +8,7 @@ import {
   ZoomInOutlined,
   ZoomOutOutlined,
 } from '@ant-design/icons';
-import Image from 'rc-image';
+import Image from '@rc-component/image';
 import React from 'react';
 import '../../assets/index.less';
 

docs/examples/thumbnail.tsx

@@ -1,4 +1,4 @@
-import Image from 'rc-image';
+import Image from '@rc-component/image';
 import * as React from 'react';
 import '../../assets/index.less';
 import { defaultIcons } from './common';

docs/examples/toolbarRender.tsx

@@ -1,4 +1,4 @@
-import Image from 'rc-image';
+import Image from '@rc-component/image';
 import React from 'react';
 import '../../assets/index.less';
 import { defaultIcons } from './common';
@@ -38,7 +38,7 @@ export default function ToolbarRender() {
                 <button onClick={onZoomOut}>zoomOut</button>
                 <button onClick={() => onReset()}>reset</button>
                 <button onClick={onClose}>close</button>
-                
+
               </div>
             );
           },

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "rc-image",
-  "version": "7.11.0",
+  "name": "@rc-component/image",
+  "version": "1.0.0",
   "description": "React easy to use image component",
   "keywords": [
     "react",
@@ -32,22 +32,23 @@
     "docs:deploy": "gh-pages -d docs-dist",
     "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md",
     "now-build": "npm run docs:build",
-    "prepublishOnly": "npm run compile && np --yolo --no-publish --any-branch",
+    "prepublishOnly": "npm run compile && rc-np",
     "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
     "start": "dumi dev",
-    "test": "rc-test"
+    "test": "rc-test",
+    "tsc": "bunx tsc --noEmit"
   },
   "dependencies": {
-    "@babel/runtime": "^7.11.2",
-    "@rc-component/portal": "^1.0.2",
-    "classnames": "^2.2.6",
-    "rc-dialog": "~9.6.0",
-    "rc-motion": "^2.6.2",
-    "rc-util": "^5.34.1"
+    "@rc-component/portal": "^2.0.0",
+    "@rc-component/motion": "^1.0.0",
+    "@rc-component/util": "^1.0.0",
+    "@rc-component/dialog": "~1.2.0",
+    "classnames": "^2.2.6"
   },
   "devDependencies": {
     "@ant-design/icons": "^5.0.1",
-    "@rc-component/father-plugin": "^1.0.2",
+    "@rc-component/father-plugin": "^2.0.2",
+    "@rc-component/np": "^1.0.0",
     "@testing-library/jest-dom": "^6.4.0",
     "@testing-library/react": "^15.0.6",
     "@types/classnames": "^2.2.10",
@@ -61,7 +62,6 @@
     "father": "^4.0.0",
     "glob": "^7.1.6",
     "less": "^4.1.3",
-    "np": "^7.0.0",
     "rc-test": "^7.0.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

src/Image.tsx

@@ -1,8 +1,7 @@
+import type { IDialogPropTypes } from '@rc-component/dialog/lib/IDialogPropTypes';
+import type { GetContainer } from '@rc-component/util/lib/PortalWrapper';
+import useMergedState from '@rc-component/util/lib/hooks/useMergedState';
 import cn from 'classnames';
-import type { IDialogPropTypes } from 'rc-dialog/lib/IDialogPropTypes';
-import { getOffset } from 'rc-util/lib/Dom/css';
-import type { GetContainer } from 'rc-util/lib/PortalWrapper';
-import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import * as React from 'react';
 import { useContext, useMemo, useState } from 'react';
 import type { PreviewProps, ToolbarRenderInfoType } from './Preview';
@@ -14,6 +13,7 @@ import type { TransformType } from './hooks/useImageTransform';
 import useRegisterImage from './hooks/useRegisterImage';
 import useStatus from './hooks/useStatus';
 import type { ImageElementProps } from './interface';
+import { getOffset } from './util';
 
 export interface ImgInfo {
   url: string;
@@ -166,7 +166,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
 
   // ========================== Preview ===========================
   const onPreview: React.MouseEventHandler<HTMLDivElement> = e => {
-    const { left, top } = getOffset(e.target);
+    const { left, top } = getOffset(e.target as HTMLDivElement);
     if (groupContext) {
       groupContext.onPreview(imageId, src, left, top);
     } else {

src/Operations.tsx

@@ -1,7 +1,7 @@
 import Portal from '@rc-component/portal';
 import classnames from 'classnames';
-import CSSMotion from 'rc-motion';
-import KeyCode from 'rc-util/lib/KeyCode';
+import CSSMotion from '@rc-component/motion';
+import KeyCode from '@rc-component/util/lib/KeyCode';
 import * as React from 'react';
 import { useContext } from 'react';
 import type { ImgInfo } from './Image';
@@ -140,20 +140,20 @@ const Operations: React.FC<OperationsProps> = props => {
 
   const switchPrevNode = showSwitch
     ? renderOperation({
-        icon: left,
-        onClick: e => handleActive(e, -1),
-        type: 'prev',
-        disabled: current === 0,
-      })
+      icon: left,
+      onClick: e => handleActive(e, -1),
+      type: 'prev',
+      disabled: current === 0,
+    })
     : undefined;
 
   const switchNextNode = showSwitch
     ? renderOperation({
-        icon: right,
-        onClick: e => handleActive(e, 1),
-        type: 'next',
-        disabled: current === count - 1,
-      })
+      icon: right,
+      onClick: e => handleActive(e, 1),
+      type: 'next',
+      disabled: current === count - 1,
+    })
     : undefined;
 
   const flipYNode = renderOperation({
@@ -252,31 +252,31 @@ const Operations: React.FC<OperationsProps> = props => {
 
               {toolbarRender
                 ? toolbarRender(toolbarNode, {
-                    icons: {
-                      prevIcon: switchPrevNode,
-                      nextIcon: switchNextNode,
-                      flipYIcon: flipYNode,
-                      flipXIcon: flipXNode,
-                      rotateLeftIcon: rotateLeftNode,
-                      rotateRightIcon: rotateRightNode,
-                      zoomOutIcon: zoomOutNode,
-                      zoomInIcon: zoomInNode,
-                    },
-                    actions: {
-                      onActive,
-                      onFlipY,
-                      onFlipX,
-                      onRotateLeft,
-                      onRotateRight,
-                      onZoomOut,
-                      onZoomIn,
-                      onReset,
-                      onClose,
-                    },
-                    transform,
-                    ...(groupContext ? { current, total: count } : {}),
-                    image,
-                  })
+                  icons: {
+                    prevIcon: switchPrevNode,
+                    nextIcon: switchNextNode,
+                    flipYIcon: flipYNode,
+                    flipXIcon: flipXNode,
+                    rotateLeftIcon: rotateLeftNode,
+                    rotateRightIcon: rotateRightNode,
+                    zoomOutIcon: zoomOutNode,
+                    zoomInIcon: zoomInNode,
+                  },
+                  actions: {
+                    onActive,
+                    onFlipY,
+                    onFlipX,
+                    onRotateLeft,
+                    onRotateRight,
+                    onZoomOut,
+                    onZoomIn,
+                    onReset,
+                    onClose,
+                  },
+                  transform,
+                  ...(groupContext ? { current, total: count } : {}),
+                  image,
+                })
                 : toolbarNode}
             </div>
           </div>

src/Preview.tsx

@@ -1,8 +1,7 @@
+import type { DialogProps as IDialogPropTypes } from '@rc-component/dialog';
+import Dialog from '@rc-component/dialog';
+import KeyCode from '@rc-component/util/lib/KeyCode';
 import classnames from 'classnames';
-import type { DialogProps as IDialogPropTypes } from 'rc-dialog';
-import Dialog from 'rc-dialog';
-import addEventListener from 'rc-util/lib/Dom/addEventListener';
-import KeyCode from 'rc-util/lib/KeyCode';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import type { ImgInfo } from './Image';
 import Operations from './Operations';
@@ -220,7 +219,7 @@ const Preview: React.FC<PreviewProps> = props => {
     setEnableTransition(false);
     resetTransform(offset < 0 ? 'prev' : 'next');
     onChange?.(position, current);
-  }
+  };
 
   const onKeyDown = (event: KeyboardEvent) => {
     if (!visible || !showLeftOrRightSwitches) return;
@@ -248,10 +247,10 @@ const Preview: React.FC<PreviewProps> = props => {
   };
 
   useEffect(() => {
-    const onKeyDownListener = addEventListener(window, 'keydown', onKeyDown, false);
+    window.addEventListener('keydown', onKeyDown, false);
 
     return () => {
-      onKeyDownListener.remove();
+      window.removeEventListener('keydown', onKeyDown);
     };
   }, [visible, showLeftOrRightSwitches, current]);
 
@@ -264,8 +263,9 @@ const Preview: React.FC<PreviewProps> = props => {
       className={`${prefixCls}-img`}
       alt={alt}
       style={{
-        transform: `translate3d(${transform.x}px, ${transform.y}px, 0) scale3d(${transform.flipX ? '-' : ''
-          }${scale}, ${transform.flipY ? '-' : ''}${scale}, 1) rotate(${rotate}deg)`,
+        transform: `translate3d(${transform.x}px, ${transform.y}px, 0) scale3d(${
+          transform.flipX ? '-' : ''
+        }${scale}, ${transform.flipY ? '-' : ''}${scale}, 1) rotate(${rotate}deg)`,
         transitionDuration: (!enableTransition || isTouching) && '0s',
       }}
       fallback={fallback}

src/PreviewGroup.tsx

@@ -1,4 +1,4 @@
-import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import useMergedState from '@rc-component/util/lib/hooks/useMergedState';
 import * as React from 'react';
 import { useState } from 'react';
 import type { ImgInfo, ImagePreviewType } from './Image';

src/getFixScaleEleTransPosition.ts

@@ -1,4 +1,4 @@
-import { getClientSize } from 'rc-util/lib/Dom/css';
+import { getClientSize } from "./util";
 
 function fixPoint(key: 'x' | 'y', start: number, width: number, clientWidth: number) {
   const startAddWidth = start + width;

src/hooks/useImageTransform.ts

@@ -1,6 +1,6 @@
-import { getClientSize } from 'rc-util/lib/Dom/css';
-import isEqual from 'rc-util/lib/isEqual';
-import raf from 'rc-util/lib/raf';
+import { getClientSize } from '../util';
+import isEqual from '@rc-component/util/lib/isEqual';
+import raf from '@rc-component/util/lib/raf';
 import { useRef, useState } from 'react';
 
 export type TransformType = {