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() {}