Skip to content

Commit

Permalink
Fix Transition passes through all props to children in production build
Browse files Browse the repository at this point in the history
  • Loading branch information
koba04 committed Jul 20, 2017
1 parent 20b16c6 commit 5b34d66
Showing 1 changed file with 137 additions and 136 deletions.
273 changes: 137 additions & 136 deletions src/Transition.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
* <Transition timeout={150}>
* {(status) => (
* <MyComponent className={`fade fade-${status}`} />
* )}
* </Transition>
* ```
*/
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 `<Transition>` 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 `<Transition>` 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
Expand Down Expand Up @@ -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)
Expand All @@ -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
* <Transition timeout={150}>
* {(status) => (
* <MyComponent className={`fade fade-${status}`} />
* )}
* </Transition>
* ```
*/
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 `<Transition>` 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 `<Transition>` 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() {}
Expand Down

0 comments on commit 5b34d66

Please sign in to comment.