diff --git a/src/CSSMotionList.tsx b/src/CSSMotionList.tsx index bbe0c54..b3fa3ed 100644 --- a/src/CSSMotionList.tsx +++ b/src/CSSMotionList.tsx @@ -11,6 +11,7 @@ import { parseKeys, KeyObject, } from './util/diff'; +import { ListMotionEndEventHandler } from './interface'; const MOTION_PROP_NAMES = [ 'eventProps', @@ -35,9 +36,10 @@ const MOTION_PROP_NAMES = [ 'onLeaveEnd', ]; -export interface CSSMotionListProps extends CSSMotionProps { +export interface CSSMotionListProps extends Omit { keys: (React.Key | { key: React.Key; [name: string]: any })[]; component?: string | React.ComponentType | false; + onLeaveEnd?: ListMotionEndEventHandler; } export interface CSSMotionListState { @@ -118,7 +120,7 @@ export function genCSSMotionList( render() { const { keyEntities } = this.state; - const { component, children, ...restProps } = this.props; + const { component, children, onLeaveEnd, ...restProps } = this.props; const Component = component || React.Fragment; @@ -140,8 +142,8 @@ export function genCSSMotionList( visible={visible} eventProps={eventProps} onLeaveEnd={(...args) => { - if (motionProps.onLeaveEnd) { - motionProps.onLeaveEnd(...args); + if (onLeaveEnd) { + onLeaveEnd(...args, { key: eventProps.key }); } this.removeKey(eventProps.key); }} diff --git a/src/interface.ts b/src/interface.ts index 47f9ff8..6bc8b9b 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -37,3 +37,9 @@ export type MotionEndEventHandler = ( element: HTMLElement, event: MotionEvent, ) => boolean | void; + +export type ListMotionEndEventHandler = ( + element: HTMLElement, + event: MotionEvent, + info: { key: React.Key }, +) => void;