From 62c60d22cb613775e9260e82b3a42bc5045cd40b Mon Sep 17 00:00:00 2001 From: Beier Luo Date: Sat, 10 Nov 2018 10:58:38 +1100 Subject: [PATCH] remove mount and unmount prop --- package.json | 2 +- src/animate.js | 54 +++++++------------------------- src/utils/attributesGenerator.js | 8 ++--- test/animate.test.js | 9 ------ 4 files changed, 14 insertions(+), 59 deletions(-) diff --git a/package.json b/package.json index 2be2c0c..8d7c072 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-simple-animate", - "version": "2.1.8", + "version": "2.1.9-beta.1", "description": "react simple animate", "main": "lib/index.js", "keywords": [ diff --git a/src/animate.js b/src/animate.js index 1a91379..a57d432 100644 --- a/src/animate.js +++ b/src/animate.js @@ -27,8 +27,6 @@ export type Props = { onComplete?: () => mixed, className?: string, render?: Object => any, - unMount?: boolean, - mount?: boolean, sequenceId?: string, sequenceIndex?: number, register?: any => void, @@ -38,8 +36,6 @@ export type Props = { export type State = { willComplete: boolean, play: boolean, - shouldUnMount: boolean, - shouldMount: boolean, }; export class AnimateChild extends React.PureComponent { @@ -57,9 +53,11 @@ export class AnimateChild extends React.PureComponent { constructor(props: Props) { super(props); - const { play, mount } = props; - if (play && !mount) { + const { play, register } = props; + register && register(this.props); + + if (play) { this.isMountWithPlay = true; this.initialPlayTimer = setTimeout(() => { @@ -72,19 +70,8 @@ export class AnimateChild extends React.PureComponent { state: State = { willComplete: false, play: false, - shouldUnMount: false, - shouldMount: false, }; - componentDidMount() { - const { register, mount } = this.props; - register && register(this.props); - - if (mount && !this.state.shouldMount) { - this.mountTimeout = setTimeout(() => this.setState({ shouldMount: true })); - } - } - static getDerivedStateFromProps(nextProps: Props, prevState: State) { const { animationStates, play, sequenceId, sequenceIndex, onCompleteStyle } = nextProps; const id = sequenceId || sequenceIndex; @@ -103,27 +90,7 @@ export class AnimateChild extends React.PureComponent { }; } - componentDidUpdate(prevProps: Props) { - const { durationSeconds, unMount } = this.props; - - this.onComplete(); - - if (!prevProps.unMount && unMount) { - this.unMountTimeout = setTimeout( - () => this.setState({ shouldUnMount: true }), - parseFloat(durationSeconds) * 1000, - ); - } - } - - componentWillUnmount() { - clearTimeout(this.completeTimeout); - clearTimeout(this.unMountTimeout); - clearTimeout(this.mountTimeout); - clearTimeout(this.initialPlayTimer); - } - - onComplete(): void { + componentDidUpdate() { const { delaySeconds, play, @@ -151,19 +118,20 @@ export class AnimateChild extends React.PureComponent { } } + componentWillUnmount() { + clearTimeout(this.completeTimeout); + clearTimeout(this.unMountTimeout); + clearTimeout(this.initialPlayTimer); + } + completeTimeout: TimeoutID; unMountTimeout: TimeoutID; - mountTimeout: TimeoutID; - initialPlayTimer: TimeoutID; render() { const { tag = 'div', children, render } = this.props; - const { shouldUnMount } = this.state; - - if (shouldUnMount) return null; const props = attributesGenerator(this.props, this.state, this.isMountWithPlay); return render ? render(props) : React.createElement(tag, props, children); diff --git a/src/utils/attributesGenerator.js b/src/utils/attributesGenerator.js index db7940e..4c10174 100644 --- a/src/utils/attributesGenerator.js +++ b/src/utils/attributesGenerator.js @@ -2,7 +2,7 @@ import type { State, Props } from '../animate'; import mapSequenceOverProps from './mapSequenceOverProps'; -export default function attributesGenerator(props: Props, { willComplete, shouldMount }: State, isMountWithPlay: boolean): Object { +export default function attributesGenerator(props: Props, { willComplete }: State, isMountWithPlay: boolean): Object { const { animationStates, sequenceId, sequenceIndex } = props; const id = sequenceId || sequenceIndex; const { @@ -16,22 +16,18 @@ export default function attributesGenerator(props: Props, { willComplete, should className, reverseDurationSeconds = 0, reverseDelaySeconds = 0, - unMount, - mount, forwardedRef, } = mapSequenceOverProps(props, id); let style = startStyle; let transition = `all ${durationSeconds}s ${easeType} ${delaySeconds}s`; - const willMountOrUnMount = unMount || (mount && !shouldMount); if (!play && (reverseDurationSeconds || reverseDelaySeconds)) { transition = `all ${reverseDurationSeconds || durationSeconds}s ${easeType} ${reverseDelaySeconds}s`; - } else if (!willMountOrUnMount && !isMountWithPlay) { + } else if (!isMountWithPlay) { if (willComplete && onCompleteStyle && play) { style = onCompleteStyle; transition = ''; } else if ( - mount || play || ((id || id === 0) && Object.keys(animationStates).length && diff --git a/test/animate.test.js b/test/animate.test.js index f810805..6bb8a59 100644 --- a/test/animate.test.js +++ b/test/animate.test.js @@ -85,15 +85,6 @@ describe('Animate', () => { expect(tree.state('willComplete')).toEqual(true); }); - it('should set shouldUnMount to true when prop have been set to unmount', () => { - const tree = shallow(); - tree.setProps({ - unMount: true, - }); - jest.runAllTimers(); - expect(tree.state('shouldUnMount')).toBeTruthy(); - }); - it('should call on complete function when animation is completed', () => { const onComplete = jest.fn(); const tree = shallow();