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

Merge branch '28-listitem-deprecate-clickable-prop' into 'master'

Add deprecations for "[ListItem] Make `clickable` prop optional when `onClick` is defined"

See merge request !9
parents aadb161d cef86306
Pipeline #1518 passed with stage
in 49 seconds
## v1.3.0 (unreleased)
### Deprecations
- **[Collapse, Fade, Slide]** Using default value of the `appear` prop is
deprecated since it will change from `false` to `true` in v2.0 (!2 by @chapa)
- **[ListItem]** Using a falsy value for the `clickable` prop when `onClick` is
defined is deprecated since it will have no effect in v2.0 (!9 by @chapa)
### Bug fixes
......@@ -11,12 +13,14 @@
or muted
- **[CssBaseline/colors]** Fix all colors were undefined
- **[CssBaseline/reboot]** Use primary color for links
### New features
- **[CssBaseline]** Add "cursor" feature (!7 by @chapa)
- **[CssBaseline]** Add "overflow" feature (!8 by @chapa)
- **[CssBaseline]** Add "text" feature (!6 by @chapa)
- **[ListItem]** Make the `clickable` prop optional if `onClick` is defined (!9
by @chapa)
## v1.2.0 (August 27, 2019) and below
......
......@@ -43,20 +43,10 @@ export const Topbar = () => (
export const Sidemenu = withCloseSidemenu(({ closeSidemenu }) => (
<List component='div'>
<ListItem
component={Link}
to={routes.home}
onClick={closeSidemenu}
clickable
>
<ListItem component={Link} to={routes.home} onClick={closeSidemenu}>
Accueil
</ListItem>
<ListItem
component={Link}
to={routes.contributing}
onClick={closeSidemenu}
clickable
>
<ListItem component={Link} to={routes.contributing} onClick={closeSidemenu}>
Contribution
</ListItem>
<ListItem component='div'>Personnalisation</ListItem>
......
......@@ -54,7 +54,6 @@ export const ComponentsSidemenu = withCloseSidemenu(({ closeSidemenu }) => (
component={Link}
to={routes[component]}
onClick={closeSidemenu}
clickable
>
{component}
</ListItem>
......
......@@ -28,20 +28,10 @@ export const CustomizationTopbar = () => (
export const CustomizationSidemenu = withCloseSidemenu(({ closeSidemenu }) => (
<List component='div'>
<ListItem
component={Link}
to={routes.themes}
onClick={closeSidemenu}
clickable
>
<ListItem component={Link} to={routes.themes} onClick={closeSidemenu}>
Thèmes
</ListItem>
<ListItem
component={Link}
to={routes.defaultTheme}
onClick={closeSidemenu}
clickable
>
<ListItem component={Link} to={routes.defaultTheme} onClick={closeSidemenu}>
Thème par défaut
</ListItem>
</List>
......
......@@ -50,7 +50,7 @@ class NestedList extends Component {
Un deuxième élément avec une icône
</ListItemText>
</ListItem>
<ListItem clickable onClick={this.toggleCollapse}>
<ListItem onClick={this.toggleCollapse}>
<ListItemText>Un troisième clickable</ListItemText>
<ListItemIcon
className={classNames(classes.icon, {
......
import React, { Component } from 'react';
import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import warning from 'warning';
......@@ -19,71 +19,77 @@ import styles from './ListItem.styles';
* - [ListItemIcon](/components/list-item-icon) pour afficher une icône,
* - [ListItemText](/components/list-item-text) pour afficher du texte.
*/
class ListItem extends Component {
handleClick = (...args) => {
const { component, disabled, muted, onClick } = this.props;
if (component === 'a' && (disabled || muted)) {
args[0].preventDefault();
}
if (onClick && !disabled && !muted) {
onClick(...args);
}
};
render() {
const {
classes,
className,
clickable,
component = 'li',
listContext,
onClick,
theme,
variant = 'text',
color = variant !== 'text' ? 'primary' : undefined,
...otherProps
} = this.props;
warning(
isObject(listContext) && listContext.depth >= 0,
`Le composant "ListItem" doit être utilisé à l'intérieur d'un composant "List"`
);
if (variant === 'gradient') {
// Add the paddingLeft here because JSS can't use props in nested style
if (!('style' in otherProps)) {
otherProps.style = {};
const ListItem = props => {
const {
classes,
className,
clickable: clickableProp,
component = 'li',
disabled,
listContext,
muted,
onClick,
theme,
variant = 'text',
color = variant !== 'text' ? 'primary' : undefined,
...otherProps
} = props;
const handleClick = useCallback(
(...args) => {
if (component === 'a' && (disabled || muted)) {
args[0].preventDefault();
}
otherProps.style.paddingLeft = `calc(${multiplyUnit(
theme.components.ListItem.horizontalPadding,
listContext.depth + 1
)} + 1px)`;
if (onClick && !disabled && !muted) {
onClick(...args);
}
},
[component, disabled, muted, onClick]
);
warning(
isObject(listContext) && listContext.depth >= 0,
`Le composant "ListItem" doit être utilisé à l'intérieur d'un composant "List"`
);
if (variant === 'gradient') {
// Add the paddingLeft here because JSS can't use props in nested style
if (!('style' in otherProps)) {
otherProps.style = {};
}
return (
<Box
className={classNames(
classes.root,
{
[classes.clickable]: clickable,
[classes.gradientVariant]: variant === 'gradient',
[classes.noColor]: !color
},
className
)}
color={color}
component={component}
onClick={clickable && onClick ? this.handleClick : undefined}
interactive={clickable}
variant={variant}
{...otherProps}
/>
);
otherProps.style.paddingLeft = `calc(${multiplyUnit(
theme.components.ListItem.horizontalPadding,
listContext.depth + 1
)} + 1px)`;
}
}
const clickable =
clickableProp === undefined ? Boolean(onClick) : clickableProp;
return (
<Box
className={classNames(
classes.root,
{
[classes.clickable]: clickable,
[classes.gradientVariant]: variant === 'gradient',
[classes.noColor]: !color
},
className
)}
color={color}
component={component}
disabled={disabled}
muted={muted}
onClick={clickable ? handleClick : undefined}
interactive={clickable}
variant={variant}
{...otherProps}
/>
);
};
ListItem.propTypes = {
/**
......@@ -102,9 +108,26 @@ ListItem.propTypes = {
className: PropTypes.string,
/**
* @deprecated
* Donne l'impression que l'élément est cliquable
*/
clickable: PropTypes.bool,
clickable: (props, propName, componentName, location, propFullName) => {
const componentNameSafe = componentName || '<<anonymous>>';
const propFullNameSafe = propFullName || propName;
if (!props[propName] && typeof props.onClick !== 'undefined') {
return new Error(
`A falsy value in \`${propFullNameSafe}\` ${location} of ` +
`\`${componentNameSafe}\` will be ignored in v2.0 when the ` +
`\`onClick\` prop is defined. Do not set a falsy value when ` +
`\`onClick\` is defined. See ` +
`https://git.webalternatif.com/webf/react-webf/issues/28 for more ` +
`infos.`
);
}
return null;
},
/**
* Couleur de l'élément, par défaut `'primary'` uniquement si la valeur de
......@@ -163,9 +186,7 @@ ListItem.propTypes = {
};
ListItem.defaultProps = {
component: 'li',
clickable: false,
onClick: () => {}
component: 'li'
};
export default withListContext(
......
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