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

[ListItem] Transform to functional component

parent 354f9ffd
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,74 @@ 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,
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)`;
}
}
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 && onClick ? handleClick : undefined}
interactive={clickable}
variant={variant}
{...otherProps}
/>
);
};
ListItem.propTypes = {
/**
......
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