Commit 783d7471 authored by Mickaël Bourgier's avatar Mickaël Bourgier
Browse files

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

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

See merge request !2
parents d2cb2a34 c980da44
Pipeline #1077 passed with stage
in 1 minute and 53 seconds
......@@ -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
......
......@@ -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
......
......@@ -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
......
......@@ -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(
......
......@@ -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,
......
......@@ -75,6 +75,7 @@ class DynamicProps extends Component {
/>
</div>
<Fade
appear={false}
duration={{
enter: durationEnter,
exit: durationExit
......
......@@ -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>
......
......@@ -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}
......
......@@ -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,
......
......@@ -101,6 +101,7 @@ class DynamicProps extends Component {
</div>
<div className={classes.wrapper}>
<Slide
appear={false}
direction={direction}
duration={{
enter: durationEnter,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment