From fa346e0732581ebf438cd08090a4d5690e5867c9 Mon Sep 17 00:00:00 2001 From: Kristian Ignatov Date: Fri, 22 Dec 2017 17:56:29 +0200 Subject: [PATCH 1/3] Add -done class names --- src/CSSTransition.js | 21 +++++++++++++++++++-- src/utils/PropTypes.js | 2 ++ test/CSSTransition-test.js | 10 ++++++---- 3 files changed, 27 insertions(+), 6 deletions(-) diff --git a/src/CSSTransition.js b/src/CSSTransition.js index 8a3fd10b..35346773 100644 --- a/src/CSSTransition.js +++ b/src/CSSTransition.js @@ -27,8 +27,10 @@ const propTypes = { * appearActive: 'my-active-appear', * enter: 'my-enter', * enterActive: 'my-active-enter', + * enterDone: 'my-done-enter, * exit: 'my-exit', * exitActive: 'my-active-exit', + * exitDone: 'my-done-exit, * }} * ``` * @@ -37,8 +39,10 @@ const propTypes = { * appearActive?: string, * enter?: string, * enterActive?: string, + * enterDone?: string, * exit?: string, * exitActive?: string, + * exitDone?: string, * }} */ classNames: classNamesShape, @@ -131,7 +135,10 @@ class CSSTransition extends React.Component { } onEntered = (node, appearing) => { + const { doneClassName } = this.getClassNames('enter'); + this.removeClasses(node, appearing ? 'appear' : 'enter'); + addClass(node, doneClassName); if (this.props.onEntered) { this.props.onEntered(node) @@ -161,7 +168,10 @@ class CSSTransition extends React.Component { } onExited = (node) => { + const { doneClassName } = this.getClassNames('exit'); + this.removeClasses(node, 'exit'); + addClass(node, doneClassName); if (this.props.onExited) { this.props.onExited(node) @@ -169,7 +179,7 @@ class CSSTransition extends React.Component { } getClassNames = (type) => { - const { classNames } = this.props + const { classNames } = this.props; let className = typeof classNames !== 'string' ? classNames[type] : classNames + '-' + type; @@ -177,7 +187,14 @@ class CSSTransition extends React.Component { let activeClassName = typeof classNames !== 'string' ? classNames[type + 'Active'] : className + '-active'; - return { className, activeClassName } + let doneClassName = typeof classNames !== 'string' ? + classNames[type + 'Done'] : className + '-done'; + + return { + className, + activeClassName, + doneClassName + }; } removeClasses(node, type) { diff --git a/src/utils/PropTypes.js b/src/utils/PropTypes.js index ce528d85..af818dd7 100644 --- a/src/utils/PropTypes.js +++ b/src/utils/PropTypes.js @@ -44,8 +44,10 @@ export const classNamesShape = PropTypes.oneOfType([ }), PropTypes.shape({ enter: PropTypes.string, + enterDone: PropTypes.string, enterActive: PropTypes.string, exit: PropTypes.string, + exitDone: PropTypes.string, exitActive: PropTypes.string, }), ]); diff --git a/test/CSSTransition-test.js b/test/CSSTransition-test.js index 28309848..6d4a1e40 100644 --- a/test/CSSTransition-test.js +++ b/test/CSSTransition-test.js @@ -69,7 +69,7 @@ describe('CSSTransition', () => { }, onEntered(node){ - expect(node.className).toEqual(''); + expect(node.className).toEqual('test-enter-done'); expect(count).toEqual(2); done(); } @@ -84,6 +84,7 @@ describe('CSSTransition', () => { classNames={{ enter: 'custom', enterActive: 'custom-super-active', + enterDone: 'custom-super-done', }} >
@@ -104,7 +105,7 @@ describe('CSSTransition', () => { }, onEntered(node){ - expect(node.className).toEqual(''); + expect(node.className).toEqual('custom-super-done'); expect(count).toEqual(2); done(); } @@ -144,7 +145,7 @@ describe('CSSTransition', () => { }, onExited(node){ - expect(node.className).toEqual(''); + expect(node.className).toEqual('test-exit-done'); expect(count).toEqual(2); done(); } @@ -160,6 +161,7 @@ describe('CSSTransition', () => { classNames={{ exit: 'custom', exitActive: 'custom-super-active', + exitDone: 'custom-super-done', }} >
@@ -180,7 +182,7 @@ describe('CSSTransition', () => { }, onExited(node){ - expect(node.className).toEqual(''); + expect(node.className).toEqual('custom-super-done'); expect(count).toEqual(2); done(); } From 941c2b4700449a3e937543b698e2938d9894dffd Mon Sep 17 00:00:00 2001 From: Kristian Ignatov Date: Tue, 2 Jan 2018 11:28:14 +0200 Subject: [PATCH 2/3] Remove done classes on transition --- src/CSSTransition.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/CSSTransition.js b/src/CSSTransition.js index 35346773..c4893a1a 100644 --- a/src/CSSTransition.js +++ b/src/CSSTransition.js @@ -198,9 +198,10 @@ class CSSTransition extends React.Component { } removeClasses(node, type) { - const { className, activeClassName } = this.getClassNames(type) + const { className, activeClassName, doneClassName } = this.getClassNames(type) className && removeClass(node, className); activeClassName && removeClass(node, activeClassName); + doneClassName && removeClass(node, doneClassName); } reflowAndAddClass(node, className) { From dc796c622de673a7fc979b35674e0229d04853f8 Mon Sep 17 00:00:00 2001 From: Kristian Ignatov Date: Tue, 9 Jan 2018 18:37:32 +0200 Subject: [PATCH 3/3] Add additional documentation for -done classes --- src/CSSTransition.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/CSSTransition.js b/src/CSSTransition.js index c4893a1a..74ac8ef6 100644 --- a/src/CSSTransition.js +++ b/src/CSSTransition.js @@ -14,11 +14,11 @@ const propTypes = { ...Transition.propTypes, /** - * The animation classNames applied to the component as it enters or exits. + * The animation classNames applied to the component as it enters, exits or has finished the transition. * A single name can be provided and it will be suffixed for each stage: e.g. * - * `classNames="fade"` applies `fade-enter`, `fade-enter-active`, - * `fade-exit`, `fade-exit-active`, `fade-appear`, and `fade-appear-active`. + * `classNames="fade"` applies `fade-enter`, `fade-enter-active`, `fade-enter-done`, + * `fade-exit`, `fade-exit-active`, `fade-exit-done`, `fade-appear`, and `fade-appear-active`. * Each individual classNames can also be specified independently like: * * ```js @@ -65,7 +65,7 @@ const propTypes = { /** * A `` callback fired immediately after the 'enter' or - * 'appear' classes are **removed** from the DOM node. + * 'appear' classes are **removed** and the `done` class is added to the DOM node. * * @type Function(node: HtmlElement, isAppearing: bool) */ @@ -89,7 +89,7 @@ const propTypes = { /** * A `` callback fired immediately after the 'exit' classes - * are **removed** from the DOM node. + * are **removed** and the `exit-done` class is added to the DOM node. * * @type Function(node: HtmlElement) */ @@ -102,7 +102,8 @@ const propTypes = { * * `CSSTransition` applies a pair of class names during the `appear`, `enter`, * and `exit` stages of the transition. The first class is applied and then a - * second "active" class in order to activate the css animation. + * second "active" class in order to activate the css animation. After the animation, + * matching `done` class names are applied to persist the animation state. * * When the `in` prop is toggled to `true` the Component will get * the `example-enter` CSS class and the `example-enter-active` CSS class