// copy from https://github.com/ant-design/ant-design/blob/master/components/_util/motion.tsx
import { CSSMotionProps, MotionEventHandler, MotionEndEventHandler } from 'rc-motion'

const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 })
const getRealHeight: MotionEventHandler = node => ({ height: node.scrollHeight, opacity: 1 })
const getCurrentHeight: MotionEventHandler = node => ({ height: node.offsetHeight })
const skipOpacityTransition: MotionEndEventHandler = (_, event) => (event as TransitionEvent).propertyName === 'height'

const collapseMotion: CSSMotionProps = {
  onEnterStart: getCollapsedHeight,
  onEnterActive: getRealHeight,
  onLeaveStart: getCurrentHeight,
  onLeaveActive: getCollapsedHeight,
  onEnterEnd: skipOpacityTransition,
  onLeaveEnd: skipOpacityTransition,
  motionDeadline: 500
}

export default collapseMotion