From 5b34d666610ad0b5454c3654382e460d3d2c84b1 Mon Sep 17 00:00:00 2001 From: Toru Kobayashi Date: Thu, 20 Jul 2017 17:26:39 +0900 Subject: [PATCH] Fix Transition passes through all props to children in production build --- src/Transition.js | 273 +++++++++++++++++++++++----------------------- 1 file changed, 137 insertions(+), 136 deletions(-) diff --git a/src/Transition.js b/src/Transition.js index c6118abc..ff744720 100644 --- a/src/Transition.js +++ b/src/Transition.js @@ -10,6 +10,141 @@ export const ENTERING = 'entering'; export const ENTERED = 'entered'; export const EXITING = 'exiting'; +const propTypes = { + /** + * A `function` child can be used instead of a React element. + * This function is called with the current transition status + * ('entering', 'entered', 'exiting', 'exited', 'unmounted'), which can used + * to apply context specific props to a component. + * + * ```jsx + * + * {(status) => ( + * + * )} + * + * ``` + */ + children: PropTypes.oneOfType([ + PropTypes.func.isRequired, + PropTypes.element.isRequired, + ]).isRequired, + + /** + * Show the component; triggers the enter or exit states + */ + in: PropTypes.bool, + + /** + * By default the child component is mounted immediately along with + * the parent `Transition` component. If you want to "lazy mount" the component on the + * first `in={true}` you can set `mountOnEnter`. After the first enter transition the component will stay + * mounted, even on "exited", unless you also specify `unmountOnExit`. + */ + mountOnEnter: PropTypes.bool, + + /** + * By default the child component stays mounted after it reaches the `'exited'` state. + * Set `unmountOnExit` if you'd prefer to unmount the component after it finishes exiting. + */ + unmountOnExit: PropTypes.bool, + + /** + * Normally a component is not transitioned if it shown when the `` component mounts. + * If you want to transition on the first mount set `appear` to `true`, and the + * component will transition in as soon as the `` mounts. + * + * > Note: there are no specific "appear" states. `apprear` only an additional `enter` transition. + */ + appear: PropTypes.bool, + + /** + * Enable or disable enter transitions. + */ + enter: PropTypes.bool, + + /** + * Enable or disable exit transitions. + */ + exit: PropTypes.bool, + + /** + * The duration for the transition, in milliseconds. + * + * You may specify a single timeout for all transitions like: `timeout={500}`, + * or individually like: + * + * ```jsx + * timeout={{ + * enter: 300, + * exit: 500, + * }} + * ``` + * + * @type {number | { enter?: number, exit?: number }} + */ + timeout: timeoutsShape, + + /** + * Add a custom transition end trigger. Called with the transitioning + * DOM node and a `done` callback. Allows for more fine grained transition end + * logic. **Note:** Timeouts are still used as a fallback. + * + * ```jsx + * addEndListener={(node, done) => { + * // use the css transitionend event to mark the finish of a transition + * node.addEventListener('transitionend', done, false); + * }} + * ``` + */ + addEndListener: PropTypes.func, + + /** + * Callback fired before the "entering" status is applied. An extra parameter + * `isAppearing` is supplied to indicate if the enter stage is occuring on the initial mount + * + * @type Function(node: HtmlElement, isAppearing: bool) -> void + */ + onEnter: PropTypes.func, + + /** + * Callback fired after the "entering" status is applied. An extra parameter + * `isAppearing` is supplied to indicate if the enter stage is occuring on the initial mount + * + * @type Function(node: HtmlElement, isAppearing: bool) + */ + onEntering: PropTypes.func, + + /** + * Callback fired after the "enter" status is applied. An extra parameter + * `isAppearing` is supplied to indicate if the enter stage is occuring on the initial mount + * + * @type Function(node: HtmlElement, isAppearing: bool) -> void + */ + onEntered: PropTypes.func, + + /** + * Callback fired before the "exiting" status is applied. + * + * @type Function(node: HtmlElement) -> void + */ + onExit: PropTypes.func, + + /** + * Callback fired after the "exiting" status is applied. + * + * @type Function(node: HtmlElement) -> void + */ + onExiting: PropTypes.func, + + /** + * Callback fired after the "exited" status is applied. + * + * @type Function(node: HtmlElement) -> void + */ + onExited: PropTypes.func, +}; + /** * The Transition component lets you describe a transition from one component * state to another _over time_ with a simple declarative API. Most commonly @@ -303,7 +438,7 @@ class Transition extends React.Component { } const {children, ...childProps} = this.props; - Object.keys(Transition.propTypes).forEach(key => delete childProps[key]); + Object.keys(propTypes).forEach(key => delete childProps[key]); if (typeof children === 'function') { return children(status, childProps) @@ -313,141 +448,7 @@ class Transition extends React.Component { return React.cloneElement(child, childProps); } } - -Transition.propTypes = { - /** - * A `function` child can be used instead of a React element. - * This function is called with the current transition status - * ('entering', 'entered', 'exiting', 'exited', 'unmounted'), which can used - * to apply context specific props to a component. - * - * ```jsx - * - * {(status) => ( - * - * )} - * - * ``` - */ - children: PropTypes.oneOfType([ - PropTypes.func.isRequired, - PropTypes.element.isRequired, - ]).isRequired, - - /** - * Show the component; triggers the enter or exit states - */ - in: PropTypes.bool, - - /** - * By default the child component is mounted immediately along with - * the parent `Transition` component. If you want to "lazy mount" the component on the - * first `in={true}` you can set `mountOnEnter`. After the first enter transition the component will stay - * mounted, even on "exited", unless you also specify `unmountOnExit`. - */ - mountOnEnter: PropTypes.bool, - - /** - * By default the child component stays mounted after it reaches the `'exited'` state. - * Set `unmountOnExit` if you'd prefer to unmount the component after it finishes exiting. - */ - unmountOnExit: PropTypes.bool, - - /** - * Normally a component is not transitioned if it shown when the `` component mounts. - * If you want to transition on the first mount set `appear` to `true`, and the - * component will transition in as soon as the `` mounts. - * - * > Note: there are no specific "appear" states. `apprear` only an additional `enter` transition. - */ - appear: PropTypes.bool, - - /** - * Enable or disable enter transitions. - */ - enter: PropTypes.bool, - - /** - * Enable or disable exit transitions. - */ - exit: PropTypes.bool, - - /** - * The duration for the transition, in milliseconds. - * - * You may specify a single timeout for all transitions like: `timeout={500}`, - * or individually like: - * - * ```jsx - * timeout={{ - * enter: 300, - * exit: 500, - * }} - * ``` - * - * @type {number | { enter?: number, exit?: number }} - */ - timeout: timeoutsShape, - - /** - * Add a custom transition end trigger. Called with the transitioning - * DOM node and a `done` callback. Allows for more fine grained transition end - * logic. **Note:** Timeouts are still used as a fallback. - * - * ```jsx - * addEndListener={(node, done) => { - * // use the css transitionend event to mark the finish of a transition - * node.addEventListener('transitionend', done, false); - * }} - * ``` - */ - addEndListener: PropTypes.func, - - /** - * Callback fired before the "entering" status is applied. An extra parameter - * `isAppearing` is supplied to indicate if the enter stage is occuring on the initial mount - * - * @type Function(node: HtmlElement, isAppearing: bool) -> void - */ - onEnter: PropTypes.func, - - /** - * Callback fired after the "entering" status is applied. An extra parameter - * `isAppearing` is supplied to indicate if the enter stage is occuring on the initial mount - * - * @type Function(node: HtmlElement, isAppearing: bool) - */ - onEntering: PropTypes.func, - - /** - * Callback fired after the "enter" status is applied. An extra parameter - * `isAppearing` is supplied to indicate if the enter stage is occuring on the initial mount - * - * @type Function(node: HtmlElement, isAppearing: bool) -> void - */ - onEntered: PropTypes.func, - - /** - * Callback fired before the "exiting" status is applied. - * - * @type Function(node: HtmlElement) -> void - */ - onExit: PropTypes.func, - - /** - * Callback fired after the "exiting" status is applied. - * - * @type Function(node: HtmlElement) -> void - */ - onExiting: PropTypes.func, - - /** - * Callback fired after the "exited" status is applied. - * - * @type Function(node: HtmlElement) -> void - */ - onExited: PropTypes.func, -}; +Transition.propTypes = propTypes; // Name the function so it is clearer in the documentation function noop() {}