Material-ui: [transitions] PropTypes should accept function as well as an element for children

[PilotConway]

In the docs, the <Slide> component specifies that <Transition> properties are also available. Transition allows for a function or a React Element for the children prop, but the Slide component is expecting only an element. If you do use a function, it works as defined in the Transition docs, but supplies the invalid prop warning in the console.

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

<Slide> children prop should accept a function that passes in status and returns a React Element as well as a React Element like <Transition>.

Current Behavior

<Slide> only accepts a ReactElement in PropTypes. Passing a function throws a PropTypes warning, but still functions as expected in the <Transition> docs.

Console warning:
Warning: Failed prop type: Invalid prop `children` of type `function` supplied to `Slide`, expected a single ReactElement.

Steps to Reproduce (for bugs)

https://codesandbox.io/s/0348zn430l

Context

We are animating <Paper> elements with Slide transitions based on React Router routes. The problem with just Using slide and an element is React Router will unmount before the slide out animation happens, so we need to always have the Slide element rendered and have the route control the in prop on <Slide>. This however creates some issues because <Slide> always mounts the child, so I need to control whether a dummy empty element, or the element in the route is being displayed based on the status of <Slide>. So when the slide is about to happen, we mount the correct child and when the slide has exited we unmount.

const AnimatedPageRoute = props => (
  <Route
    path={props.path}
    exact={props.exact}
  >
    {({ match }) => (
      <Slide in={match !== null} direction={props.direction} mountOnEnter unmountOnExit>
        {(status) => {
          if (match && status !== 'unmounted') {
            return <Page light>{props.children}</Page>;
          }
          return <Page light><SplitView /></Page>;
        }}

      </Slide>
    )}
  </Route>
);

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.25 |
| React | 16.1.1 |
| browser | Electron 1.8.1 |
| etc | |

[oliviertassinari]

@PilotConway Thanks for raising this issue. You are 💯 right. We need to update the propTypes of our transition components (Grow, Slide, Fade, Collapse). Do you want to work on it? We also need to update the TypeScript definitions.

Reference: https://reactcommunity.org/react-transition-group/#Transition-prop-children.

[PilotConway]

Yeah I can work on that.

[oliviertassinari]

@PilotConway Do you still want to work on it? :)