Merge branch 'deprecate-transitions-appear-default-prop' into 'master'

Déprécier les props `appear` des composants de transition

See merge request !2

src/Collapse/Collapse.js

@@ -103,6 +103,7 @@ class Collapse extends React.Component {
 
   render() {
     const {
+      appear = false,
       children,
       classes,
       className,
@@ -121,6 +122,7 @@ class Collapse extends React.Component {
 
     return (
       <Transition
+        appear={appear}
         onEnter={this.handleEnter}
         onEntered={this.handleEntered}
         onEntering={this.handleEntering}
@@ -166,7 +168,20 @@ Collapse.propTypes = {
   /**
    * Déclenche une transition lorsque le composant est monté
    */
-  appear: PropTypes.bool,
+  appear: (props, propName, componentName, location, propFullName) => {
+    const componentNameSafe = componentName || '<<anonymous>>';
+    const propFullNameSafe = propFullName || propName;
+
+    if (typeof props[propName] === 'undefined') {
+      return new Error(
+        `The default value of ${location} \`${propFullNameSafe}\` of ` +
+          `\`${componentNameSafe}\` and will change to \`true\` in v2.0. ` +
+          `Explicitly set the value to turn off this warning.`
+      );
+    }
+
+    return null;
+  },
 
   /**
    * Contenu du composant

src/Collapse/demos/DynamicProps.js

@@ -82,6 +82,7 @@ class DynamicProps extends Component {
         </div>
         <div className={classes.wrapper}>
           <Collapse
+            appear={false}
             duration={{
               enter: durationEnter,
               exit: durationExit
@@ -91,6 +92,7 @@ class DynamicProps extends Component {
             <div className={classes.box}>Play with me !</div>
           </Collapse>
           <Collapse
+            appear={false}
             duration={{
               enter: durationEnter,
               exit: durationExit

src/Dialog/Dialog.js

@@ -28,7 +28,7 @@ function Dialog({
   onClose
 }) {
   return (
-    <Fade mountOnEnter unmountOnExit in={open}>
+    <Fade appear={false} mountOnEnter unmountOnExit in={open}>
       <Modal
         className={classNames(classes.modal, {
           [classes.fullScreen]: fullScreen

src/Drawer/Drawer.js

@@ -48,14 +48,18 @@ class Drawer extends Component {
     return (
       <Fragment>
         {!disableOverlay && (
-          <Fade in={open} mountOnEnter unmountOnExit>
+          <Fade appear={false} in={open} mountOnEnter unmountOnExit>
             <Overlay
               onClick={this.handleOverlayClick}
               className={classes.overlay}
             />
           </Fade>
         )}
-        <Slide in={open} direction={position === 'left' ? 'right' : 'left'}>
+        <Slide
+          appear={false}
+          in={open}
+          direction={position === 'left' ? 'right' : 'left'}
+        >
           <Paper
             {...otherProps}
             className={classNames(

src/Fade/Fade.js

@@ -14,13 +14,15 @@ class Fade extends Component {
   constructor(props) {
     super(props);
 
-    // Permet de forcer le masquage lorsque le composant est monté avec `in` à false, sinon il s'affiche par défaut car
-    // aucune classe de transition n'est présente
+    // Permet de forcer le masquage lorsque le composant est monté avec `in`
+    // à `false`, sinon il s'affiche par défaut car aucune classe de
+    // transition n'est présente.
     this.firstOut = !props.in;
   }
 
   render() {
     const {
+      appear = false,
       children,
       classes,
       className,
@@ -36,6 +38,7 @@ class Fade extends Component {
 
     return (
       <CSSTransition
+        appear={appear}
         className={classNames(
           { [classes.hide]: forceOut },
           React.isValidElement(children) && children.props.className
@@ -43,6 +46,7 @@ class Fade extends Component {
         classNames={{
           appear: classes.enter,
           appearActive: classes.enterActive,
+          appearDone: classes.enterDone,
           enter: classes.enter,
           enterActive: classes.enterActive,
           enterDone: classes.enterDone,
@@ -65,7 +69,20 @@ Fade.propTypes = {
   /**
    * Déclenche une transition lorsque le composant est monté
    */
-  appear: PropTypes.bool,
+  appear: (props, propName, componentName, location, propFullName) => {
+    const componentNameSafe = componentName || '<<anonymous>>';
+    const propFullNameSafe = propFullName || propName;
+
+    if (typeof props[propName] === 'undefined') {
+      return new Error(
+        `The default value of ${location} \`${propFullNameSafe}\` of ` +
+          `\`${componentNameSafe}\` and will change to \`true\` in v2.0. ` +
+          `Explicitly set the value to turn off this warning.`
+      );
+    }
+
+    return null;
+  },
 
   /**
    * Contenu du composant, voir la documentation de
@@ -155,7 +172,6 @@ Fade.propTypes = {
 };
 
 Fade.defaultProps = {
-  appear: false,
   enableEnterTransition: true,
   enableExitTransition: true,
   mountOnEnter: false,

src/Fade/demos/DynamicProps.js

@@ -75,6 +75,7 @@ class DynamicProps extends Component {
           />
         </div>
         <Fade
+          appear={false}
           duration={{
             enter: durationEnter,
             exit: durationExit

src/List/demos/NestedList.js

@@ -60,7 +60,7 @@ class NestedList extends Component {
             <MdKeyboardArrowDown />
           </ListItemIcon>
         </ListItem>
-        <Collapse in={!collapsed} duration='auto'>
+        <Collapse appear={false} in={!collapsed} duration='auto'>
           <List>
             <ListItem>
               <ListItemText>Une autre liste...</ListItemText>

src/Modal/demos/SimpleModal.js

@@ -60,7 +60,7 @@ function SimpleModal({ classes }) {
           <Button onClick={() => setOpen(true)}>Ouvrir modale</Button>
         </Col>
       </Row>
-      <Fade mountOnEnter unmountOnExit in={open}>
+      <Fade appear mountOnEnter unmountOnExit in={open}>
         <Modal open={open} onClose={() => setOpen(false)} />
       </Fade>
 
@@ -80,7 +80,7 @@ function SimpleModal({ classes }) {
           </Button>
         </Col>
       </Row>
-      <Fade mountOnEnter unmountOnExit in={openDialog}>
+      <Fade appear mountOnEnter unmountOnExit in={openDialog}>
         <Modal
           className={classes.root}
           open={openDialog}

src/Slide/Slide.js

@@ -191,6 +191,7 @@ class Slide extends Component {
 
   render() {
     const {
+      appear = false,
       children,
       direction,
       duration,
@@ -223,6 +224,7 @@ class Slide extends Component {
     return (
       <EventListener target='window' onResize={this.handleResize}>
         <Transition
+          appear={appear}
           onEnter={this.handleEnter}
           onEntering={this.handleEntering}
           onExit={this.handleExit}
@@ -248,7 +250,20 @@ Slide.propTypes = {
   /**
    * Déclenche une transition lorsque le composant est monté
    */
-  appear: PropTypes.bool,
+  appear: (props, propName, componentName, location, propFullName) => {
+    const componentNameSafe = componentName || '<<anonymous>>';
+    const propFullNameSafe = propFullName || propName;
+
+    if (typeof props[propName] === 'undefined') {
+      return new Error(
+        `The default value of ${location} \`${propFullNameSafe}\` of ` +
+          `\`${componentNameSafe}\` and will change to \`true\` in v2.0. ` +
+          `Explicitly set the value to turn off this warning.`
+      );
+    }
+
+    return null;
+  },
 
   /**
    * Contenu du composant, voir la documentation de
@@ -336,7 +351,6 @@ Slide.propTypes = {
 };
 
 Slide.defaultProps = {
-  appear: false,
   direction: 'up',
   enableEnterTransition: true,
   enableExitTransition: true,

src/Slide/demos/DynamicProps.js

@@ -101,6 +101,7 @@ class DynamicProps extends Component {
         </div>
         <div className={classes.wrapper}>
           <Slide
+            appear={false}
             direction={direction}
             duration={{
               enter: durationEnter,