Revert "refactor(components/transition): 调整transition组件"，因为有两个元素时默认模式…

…不符合预期 This reverts commit feb33889decef2ffc5c60c78b7a77087a1822f42.
js-tool-pack · Jun 4, 2023 · 1d42f23 · 1d42f23
1 parent 09a250a
commit 1d42f23
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 60 deletions.
diff --git a/internal/playground/src/views/TransitionPage.tsx b/internal/playground/src/views/TransitionPage.tsx
@@ -21,11 +21,6 @@ export function TransitionPage() {
           )}
         </Transition>
       </div>
-      <div className="box">
-        <Transition name="fade" appear>
-          {visible && 'single'}
-        </Transition>
-      </div>
       <div className="box">
         <Transition name="fade" mode="out-in">
           {visible ? (

diff --git a/packages/components/src/transition/Transition.tsx b/packages/components/src/transition/Transition.tsx
@@ -1,36 +1,42 @@
 import React, { memo } from 'react';
 import { useDispatcher, useTransition } from './transition.hooks';
-import { TransitionProps } from './transition.types';
+import type { Mode, CB } from './transition.types';
 
-export const Transition: React.FC<TransitionProps> = memo(
-  ({
+const Transition: React.FC<{
+  // show?: boolean;
+  name?: string;
+  mode?: Mode;
+  children?: React.ReactElement | boolean;
+  appear?: boolean;
+  on?: CB;
+}> = ({
+  children,
+  name = 'trans',
+  mode = 'default' /* , show */,
+  appear = false,
+  ...props
+}): React.ReactElement => {
+  const [prev, next, prevStatus, nextStatus, handler] = useDispatcher(
+    mode,
+    // show,
+    appear,
     children,
-    name = 'trans',
-    mode = 'default' /* , show */,
-    appear = false,
-    ...props
-  }): React.ReactElement => {
-    const [prev, next, prevStatus, nextStatus, handler] = useDispatcher(
-      mode,
-      // show,
-      appear,
-      children,
-      props.on,
-    );
+    props.on,
+  );
 
-    // const prevView = useTransition('prev', prevStatus, name, prev, onAfterCb);
-    // const nextView = useTransition('next', nextStatus, name, next, onAfterCb);
-    const prevView = useTransition(prevStatus, name, prev, handler);
-    const nextView = useTransition(nextStatus, name, next, handler);
+  // const prevView = useTransition('prev', prevStatus, name, prev, onAfterCb);
+  // const nextView = useTransition('next', nextStatus, name, next, onAfterCb);
+  const prevView = useTransition(prevStatus, name, prev, handler);
+  const nextView = useTransition(nextStatus, name, next, handler);
 
-    if (prevView && !nextView) return prevView;
-    if (!prevView && nextView) return nextView;
+  if (prevView && !nextView) return prevView;
+  if (!prevView && nextView) return nextView;
 
-    return (
-      <>
-        {prevView}
-        {nextView}
-      </>
-    );
-  },
-);
+  return (
+    <>
+      {prevView}
+      {nextView}
+    </>
+  );
+};
+export default memo(Transition);
diff --git a/packages/components/src/transition/index.ts b/packages/components/src/transition/index.ts
@@ -1,5 +1,4 @@
-export type { TransitionProps } from './transition.types';
-export * from './Transition';
+export { default as Transition } from './Transition';
 export {
   STATUS as TRANSITION_STATUS,
   LIFE_CIRCLE as TRANSITION_LIFE_CIRCLE,

diff --git a/packages/components/src/transition/transition.hooks.tsx b/packages/components/src/transition/transition.hooks.tsx
@@ -1,10 +1,4 @@
-import React, {
-  cloneElement,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-} from 'react';
+import { cloneElement, useCallback, useEffect, useMemo, useRef } from 'react';
 import { addTransition, getClasses } from './transition.utils';
 import { LIFE_CIRCLE, STATUS } from './transition.enums';
 import type { CB, El, Mode } from './transition.types';
@@ -57,7 +51,7 @@ export function useDispatcher(
   );
 
   useEffect(() => {
-    setChild(prev!, next!);
+    setChild(prev, next);
 
     if (isInitDep && !appear) {
       setStatus(STATUS.idle, STATUS.idle);
@@ -152,11 +146,6 @@ export function useTransition(
 
   if (!children || STATUS.none === status || typeof children === 'boolean')
     return;
-
-  if (!React.isValidElement(children))
-    return <div ref={elRef as React.RefObject<HTMLDivElement>}>{children}</div>;
-
   if (status === STATUS.idle) return children;
-
-  return cloneElement(children as React.ReactElement, { ref: elRef });
+  return <>{cloneElement(children, { ref: elRef })}</>;
 }
diff --git a/packages/components/src/transition/transition.types.ts b/packages/components/src/transition/transition.types.ts
@@ -1,7 +1,7 @@
 import React from 'react';
 import { LIFE_CIRCLE, STATUS } from './transition.enums';
 
-export type El = React.ReactNode;
+export type El = React.ReactElement | void | boolean;
 
 export type Mode = 'out-in' | 'in-out' | 'default';
 
@@ -10,12 +10,3 @@ export type CB = (
   status: STATUS,
   lifeCircle: LIFE_CIRCLE,
 ) => void;
-
-export interface TransitionProps {
-  // show?: boolean;
-  name?: string;
-  mode?: Mode;
-  children?: React.ReactNode;
-  appear?: boolean;
-  on?: CB;
-}