chore: tmp of it

Author: zombieJ

docs/examples/multiple-Portal.tsx

@@ -24,6 +24,7 @@ const Demo: React.FC = () => {
       onClose={onToggleDialog}
       forceRender
       title="basic modal"
+      mask={false}
     >
       <p>
         <button type="button" onClick={onToggleDrawer}>
@@ -46,7 +47,7 @@ const Demo: React.FC = () => {
         open dialog
       </button>
       {dialog}
-      {drawer}
+      {/* {drawer} */}
     </div>
   );
 };

package.json

@@ -37,7 +37,7 @@
     "lint:tsc": "tsc -p tsconfig.json --noEmit",
     "now-build": "npm run docs:build",
     "prepare": "husky install",
-    "prepublishOnly": "npm run compile && np --yolo --no-publish",
+    "prepublishOnly": "npm run compile && rc-np",
     "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
     "start": "dumi dev",
     "test": "rc-test"
@@ -49,14 +49,14 @@
     ]
   },
   "dependencies": {
-    "@babel/runtime": "^7.10.1",
     "@rc-component/portal": "^1.0.0-8",
     "@rc-component/util": "^1.0.1",
     "classnames": "^2.2.6",
-    "rc-motion": "^2.3.0"
+    "@rc-component/motion": "^1.1.0"
   },
   "devDependencies": {
-    "@rc-component/father-plugin": "^2.0.1",
+    "@rc-component/father-plugin": "^2.0.2",
+    "@rc-component/np": "^1.0.3",
     "@testing-library/jest-dom": "^6.1.6",
     "@testing-library/react": "^13.0.0",
     "@types/jest": "^29.4.0",
@@ -77,7 +77,6 @@
     "husky": "^8.0.3",
     "less": "^4.1.3",
     "lint-staged": "^15.2.0",
-    "np": "^10.0.5",
     "prettier": "^3.2.1",
     "rc-drawer": "^7.0.0",
     "rc-select": "^14.11.0",

src/Dialog/Content/index.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import { useRef } from 'react';
 import classNames from 'classnames';
-import CSSMotion from 'rc-motion';
+import CSSMotion from '@rc-component/motion';
 import { offset } from '../../util';
 import type { PanelProps, ContentRef } from './Panel';
 import Panel from './Panel';
 
+console.log(CSSMotion);
+
 export type ContentProps = {
   motionName: string;
   ariaId: string;
@@ -27,7 +29,10 @@ const Content = React.forwardRef<ContentRef, ContentProps>((props, ref) => {
     mousePosition,
   } = props;
 
-  const dialogRef = useRef<HTMLDivElement>();
+  const dialogRef = useRef<{
+    nativeElement: HTMLDivElement;
+    inMotion: () => boolean;
+  }>();
 
   // ============================= Style ==============================
   const [transformOrigin, setTransformOrigin] = React.useState<string>();
@@ -38,7 +43,8 @@ const Content = React.forwardRef<ContentRef, ContentProps>((props, ref) => {
   }
 
   function onPrepare() {
-    const elementOffset = offset(dialogRef.current);
+    console.log('onPrepare', dialogRef.current);
+    const elementOffset = offset(dialogRef.current?.nativeElement);
 
     setTransformOrigin(
       mousePosition && (mousePosition.x || mousePosition.y)
@@ -47,6 +53,12 @@ const Content = React.forwardRef<ContentRef, ContentProps>((props, ref) => {
     );
   }
 
+  const bbb = React.useCallback((aaa) => {
+    console.log('???', aaa);
+    dialogRef.current = aaa;
+  }, []);
+  console.log('render....');
+
   // ============================= Render =============================
   return (
     <CSSMotion
@@ -57,7 +69,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>((props, ref) => {
       forceRender={forceRender}
       motionName={motionName}
       removeOnLeave={destroyOnClose}
-      ref={dialogRef}
+      ref={bbb}
     >
       {({ className: motionClassName, style: motionStyle }, motionRef) => (
         <Panel

src/Dialog/Mask.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import CSSMotion from 'rc-motion';
+import CSSMotion from '@rc-component/motion';
 
 export type MaskProps = {
   prefixCls: string;

tests/index.spec.tsx

@@ -1,14 +1,14 @@
 /* eslint-disable react/no-render-return-value, max-classes-per-file, func-names, no-console */
 import { fireEvent, render, act } from '@testing-library/react';
-import { Provider } from 'rc-motion';
+import { Provider } from '@rc-component/motion';
 import KeyCode from '@rc-component/util/lib/KeyCode';
 import React, { cloneElement, useEffect } from 'react';
 import type { DialogProps } from '../src';
 import Dialog from '../src';
 
-jest.mock('rc-motion', () => {
+jest.mock('@rc-component/motion', () => {
   const OriReact = jest.requireActual('react');
-  const origin = jest.requireActual('rc-motion');
+  const origin = jest.requireActual('@rc-component/motion');
   const OriCSSMotion = origin.default;
 
   const ProxyCSSMotion = OriReact.forwardRef((props: any, ref: any) => {

tests/ref.spec.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-render-return-value, max-classes-per-file, func-names, no-console */
 import { render } from '@testing-library/react';
-import { Provider } from 'rc-motion';
+import { Provider } from '@rc-component/motion';
 import React from 'react';
 import Dialog from '../src';