From 5572029a750c4a7a5a593b82b2ca8b76443f71bf Mon Sep 17 00:00:00 2001
From: yehuozhili <673632758@qq.com>
Date: Thu, 9 Jul 2020 14:46:03 +0800
Subject: [PATCH] fix(transition): may cause wranning in strict mode

---
 src/components/Alert/alert.tsx                | 14 ++++++++++--
 src/components/Carousel/carousel.tsx          | 10 +++++++--
 src/components/Menu/submenu.tsx               | 12 +++++++---
 src/components/Modal/modal.tsx                |  7 +++++-
 src/components/Select/select.tsx              |  5 +++--
 .../Transition/transition.stories.mdx         | 22 +++++++++++++++----
 src/components/Transition/transition.tsx      |  3 +--
 7 files changed, 57 insertions(+), 16 deletions(-)

diff --git a/src/components/Alert/alert.tsx b/src/components/Alert/alert.tsx
index 697350c..7f19b9e 100644
--- a/src/components/Alert/alert.tsx
+++ b/src/components/Alert/alert.tsx
@@ -1,4 +1,12 @@
-import React, { FC, useState, useEffect, ReactNode, CSSProperties, DOMAttributes } from "react";
+import React, {
+	FC,
+	useState,
+	useEffect,
+	ReactNode,
+	CSSProperties,
+	DOMAttributes,
+	useRef
+} from "react";
 import classNames from "classnames";
 import Button from "../Button";
 import Icon from "../Icon";
@@ -76,6 +84,7 @@ export const Alert: FC<AlertProps> = function(props: AlertProps) {
 		`bigbear-alert-${type}`,
 		className ? className : ""
 	);
+	const nodeRef = useRef(null);
 	const [state, setState] = useState(!initAnimate);
 	useEffect(() => {
 		if (initAnimate) {
@@ -97,8 +106,9 @@ export const Alert: FC<AlertProps> = function(props: AlertProps) {
 			classNames={animateClassName ? animateClassName : ""}
 			timeout={timeout!}
 			wrapper={wrapper}
+			nodeRef={nodeRef}
 		>
-			<div className={classes} style={style} {...restProps}>
+			<div ref={nodeRef} className={classes} style={style} {...restProps}>
 				<span>
 					{icon && icon}
 					{title}
diff --git a/src/components/Carousel/carousel.tsx b/src/components/Carousel/carousel.tsx
index 6474ef9..953a4c9 100644
--- a/src/components/Carousel/carousel.tsx
+++ b/src/components/Carousel/carousel.tsx
@@ -139,14 +139,19 @@ function Carousel(props: PropsWithChildren<CarouselType>) {
 		}
 		return () => clearTimeout(timer);
 	}, [autoplay, autoplayDelay, indexMap, totalLen]);
-
+	const nodeRef = useRef(null);
 	return (
 		<div className="bigbear-carousel-wrapper" ref={ref} style={{ width: `100%` }}>
 			<div
 				className="bigbear-carousel-viewport"
 				style={{ width: `100%`, height: `${height!}px` }}
 			>
-				<Transition in={animation.in} timeout={delay!} classNames={"bigbear-carousel"}>
+				<Transition
+					nodeRef={nodeRef}
+					in={animation.in}
+					timeout={delay!}
+					classNames={"bigbear-carousel"}
+				>
 					<div
 						style={{
 							display: "flex",
@@ -155,6 +160,7 @@ function Carousel(props: PropsWithChildren<CarouselType>) {
 							left: `${-bound?.width!}px`
 						}}
 						className={animation.direction}
+						ref={nodeRef}
 					>
 						{state.map((v, i) => (
 							<div
diff --git a/src/components/Menu/submenu.tsx b/src/components/Menu/submenu.tsx
index 104302d..5bcecb1 100644
--- a/src/components/Menu/submenu.tsx
+++ b/src/components/Menu/submenu.tsx
@@ -44,7 +44,8 @@ const renderChildren = (
 	index: string | undefined,
 	mode: "horizontal" | "vertical" | undefined,
 	setMenuopen: React.Dispatch<React.SetStateAction<boolean>>,
-	delay: number
+	delay: number,
+	nodeRef: React.RefObject<HTMLUListElement>
 ) => {
 	const classes = classNames("bigbear-submenu-children", {
 		"bigbear-menuopen": menuopen
@@ -60,13 +61,17 @@ const renderChildren = (
 			console.error("submenu must in menuItem");
 		}
 	});
+
 	return (
 		<Transition
+			nodeRef={nodeRef}
 			in={menuopen}
 			timeout={delay}
 			classNames={mode === "horizontal" ? "menu-zoom-in-top" : "menu-zoom-in-top-vertical"}
 		>
-			<ul className={classes}>{childrenComponent}</ul>
+			<ul ref={nodeRef} className={classes}>
+				{childrenComponent}
+			</ul>
 		</Transition>
 	);
 };
@@ -131,6 +136,7 @@ export const SubMenu: FC<SubMenuProps> = (props) => {
 			setMenuopen(true);
 		}
 	}, [isopen]);
+	const nodeRef = useRef<HTMLUListElement>(null);
 	return (
 		<li
 			key={index}
@@ -148,7 +154,7 @@ export const SubMenu: FC<SubMenuProps> = (props) => {
 				{title ? title : null}
 				{icon && <Icon icon="angle-down" className="bigbear-submenu-icon"></Icon>}
 			</div>
-			{renderChildren(children, menuopen, index, context.mode, setMenuopen, delay!)}
+			{renderChildren(children, menuopen, index, context.mode, setMenuopen, delay!, nodeRef)}
 		</li>
 	);
 };
diff --git a/src/components/Modal/modal.tsx b/src/components/Modal/modal.tsx
index ed2152f..174c7a4 100644
--- a/src/components/Modal/modal.tsx
+++ b/src/components/Modal/modal.tsx
@@ -84,7 +84,12 @@ function Modal(props: PropsWithChildren<ModalType>) {
 	const ref = useRef<HTMLDivElement>(null);
 	const render = useMemo(() => {
 		return createPortal(
-			<Transition in={visible} timeout={delay!} classNames={`bigbear-modal-animation`}>
+			<Transition
+				nodeRef={ref}
+				in={visible}
+				timeout={delay!}
+				classNames={`bigbear-modal-animation`}
+			>
 				<div
 					className={`bigbear-modal-potral ${visible ? "open" : ""} ${
 						className ? className : ""
diff --git a/src/components/Select/select.tsx b/src/components/Select/select.tsx
index d4f4ba2..db5ffc9 100644
--- a/src/components/Select/select.tsx
+++ b/src/components/Select/select.tsx
@@ -51,6 +51,7 @@ function Select(props: PropsWithChildren<SelectProps>) {
 	const [state, setState] = useState<string>(defaultValue!);
 	const [open, setOpen] = useState(false);
 	const ref = useRef(null);
+	const nodeRef = useRef(null);
 	useClickOutside(ref, () => setOpen(false));
 	useEffect(() => {
 		if (callback) callback(state);
@@ -68,8 +69,8 @@ function Select(props: PropsWithChildren<SelectProps>) {
 				</div>
 				{icon ? <div className="bigbear-select-icon">{icon}</div> : null}
 			</div>
-			<Transition in={open} animation="zoom-in-top" timeout={timeout!}>
-				<div className="bigbear-select-options">
+			<Transition nodeRef={nodeRef} in={open} animation="zoom-in-top" timeout={timeout!}>
+				<div ref={nodeRef} className="bigbear-select-options">
 					{data.map((item, index) => {
 						let renderRes = renderTemplate ? (
 							renderTemplate(item, index, setState, setOpen)
diff --git a/src/components/Transition/transition.stories.mdx b/src/components/Transition/transition.stories.mdx
index 4a6c9a6..1b66ee7 100644
--- a/src/components/Transition/transition.stories.mdx
+++ b/src/components/Transition/transition.stories.mdx
@@ -9,17 +9,31 @@ import  Transition  from './transition';
 
 
 ```jsx
- <Transition 
- in={state} //开启关闭状态
- animation={`zoom-in-top`}
+<Transition 
+in={state} //开启关闭状态
+animation={`zoom-in-top`}
 timeout={300} //动画持续时间
 wrapper={wrapper} > 
 {...your code}
 </Transition>
 ```
 
+## 注意，严格模式警告需要传递nodeRef消除
+
+```jsx
+const MyComponent = () => {
+  const nodeRef = React.useRef(null)
+  return (
+    <Transition nodeRef={nodeRef} in timeout={200} classNames="fade">
+      <div ref={nodeRef}>Fade</div>
+    </Transition>
+  )
+}
+```
+
+
 ## 属性详情
 
-unmountOnExit boolean 表示是否退出时卸载组件。
+unmountOnExit boolean 退出时卸载组件
 
 <Props of={Transition}   />
\ No newline at end of file
diff --git a/src/components/Transition/transition.tsx b/src/components/Transition/transition.tsx
index 84a96b3..0aee986 100644
--- a/src/components/Transition/transition.tsx
+++ b/src/components/Transition/transition.tsx
@@ -1,6 +1,5 @@
 import React, { FC } from "react";
 import { CSSTransition } from "react-transition-group";
-import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
 import { TransitionProps } from "react-transition-group/Transition";
 
 export type AnimationName =
@@ -12,7 +11,7 @@ export type AnimationName =
 
 type InnerProps = TransitionProps & {
 	/** 需要自行添加css，动画名-enter，-enter-active,exit，-exit-active，原理就是改变类名产生动画效果 */
-	classNames?: string | CSSTransitionClassNames;
+	classNames?: string;
 };
 
 export type TransitionProp = InnerProps & {