mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
ba54a3d83b
The ESLint config has been updated to v8. The breaking changes are: * The Prettier rule `quoteProps` has been changed from `consistent` to `as-needed`, meaning that if one key requires quoting, only that key is quoted rather than all keys. * The ESLint rule `no-shadow` has been made more strict. It now prevents globals from being shadowed as well. Most of these changes were applied with `yarn lint:fix`. Only the shadowing changes required manual fixing (shadowing variable names were either replaced with destructuring or renamed). The dependency `globalThis` was added to the list of dynamic dependencies in the build system, where it should have been already. This was causing `depcheck` to fail because the new lint rules required removing the one place where `globalThis` had been erroneously imported previously. A rule requiring a newline between multiline blocks and expressions has been disabled temporarily to make this PR smaller and to avoid introducing conflicts with other PRs.
73 lines
1.8 KiB
JavaScript
73 lines
1.8 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classnames from 'classnames';
|
|
|
|
export default function ListItem({
|
|
title,
|
|
subtitle,
|
|
onClick,
|
|
children,
|
|
titleIcon,
|
|
icon,
|
|
rightContent,
|
|
midContent,
|
|
className,
|
|
'data-testid': dataTestId,
|
|
}) {
|
|
const primaryClassName = classnames(
|
|
'list-item',
|
|
className,
|
|
subtitle || children ? '' : 'list-item--single-content-row',
|
|
);
|
|
|
|
return (
|
|
<div
|
|
className={primaryClassName}
|
|
onClick={onClick}
|
|
data-testid={dataTestId}
|
|
role="button"
|
|
tabIndex={0}
|
|
onKeyPress={(event) => {
|
|
if (event.key === 'Enter') {
|
|
onClick();
|
|
}
|
|
}}
|
|
>
|
|
{icon ? <div className="list-item__icon">{icon}</div> : null}
|
|
<div className="list-item__heading">
|
|
{React.isValidElement(title) ? (
|
|
title
|
|
) : (
|
|
<h2 className="list-item__title">{title}</h2>
|
|
)}
|
|
{titleIcon && (
|
|
<div className="list-item__heading-wrap">{titleIcon}</div>
|
|
)}
|
|
</div>
|
|
{subtitle ? (
|
|
<div className="list-item__subheading">{subtitle}</div>
|
|
) : null}
|
|
{children ? <div className="list-item__actions">{children}</div> : null}
|
|
{midContent ? (
|
|
<div className="list-item__mid-content">{midContent}</div>
|
|
) : null}
|
|
{rightContent ? (
|
|
<div className="list-item__right-content">{rightContent}</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
ListItem.propTypes = {
|
|
title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
titleIcon: PropTypes.node,
|
|
subtitle: PropTypes.node,
|
|
children: PropTypes.node,
|
|
icon: PropTypes.node,
|
|
rightContent: PropTypes.node,
|
|
midContent: PropTypes.node,
|
|
className: PropTypes.string,
|
|
onClick: PropTypes.func,
|
|
'data-testid': PropTypes.string,
|
|
};
|