feat(Overlay): 新增对动画更多控制参数

79E · Jan 12, 2023 · d62f7bd · d62f7bd
1 parent 74285f5
commit d62f7bd
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 2 deletions.
diff --git a/src/components/overlay/overlay.tsx b/src/components/overlay/overlay.tsx
@@ -6,7 +6,7 @@ import { joinTrim } from '../../utils';
 import { OverlayProps } from './types';
 
 export const Overlay: FunctionComponent<OverlayProps> = props => {
- const { visible = false, duration = 500, lockScroll = true } = props;
+ const { visible = false, duration = 500, lockScroll = true, ...rest } = props;
 
  const { prefix } = useContext(ConfigProviderContext);
  const ns = useNamespace('overlay', prefix);
@@ -41,7 +41,19 @@ export const Overlay: FunctionComponent<OverlayProps> = props => {
  };
 
  return (
- <Transition in={visible} timeout={duration} nodeRef={nodeRef} mountOnEnter unmountOnExit>
+ <Transition
+ in={visible}
+ timeout={duration}
+ nodeRef={nodeRef}
+ mountOnEnter
+ unmountOnExit
+ onEnter={props.onEnter}
+ onEntered={props.onEntered}
+ onExit={props.onExit}
+ onExited={props.onExited}
+ transitionStyles={props.transitionStyles}
+ {...rest}
+ >
  {renderOverlay()}
  </Transition>
  );

diff --git a/src/components/overlay/types.ts b/src/components/overlay/types.ts
@@ -1,5 +1,6 @@
 import React from 'react';
 import { BaseTypeProps } from '../../utils';
+import { TransitionStyles } from '../transition';
 
 // 定义接受到的参数 类型
 export interface OverlayProps extends BaseTypeProps {
@@ -19,8 +20,28 @@ export interface OverlayProps extends BaseTypeProps {
  * 是否锁定背景滚动，锁定时蒙层里的内容也将无法滚动
  */
  lockScroll?: boolean;
+ /**
+ * 自定义动画
+ */
+ transitionStyles?: TransitionStyles;
  /**
  * 点击时触发
  */
  onClick?: (e: React.MouseEvent) => void;
+ /**
+ * 出现时候触发
+ */
+ onEnter?: () => void;
+ /**
+ * 出现后动画执行完触发
+ */
+ onEntered?: () => void;
+ /**
+ * 退出时候触发
+ */
+ onExit?: () => void;
+ /**
+ * 退出后动画执行完触发
+ */
+ onExited?: () => void;
 }