Skip to content

Commit

Permalink
feat: Add ActionMenuItemWrapper for actions menus item
Browse files Browse the repository at this point in the history
code from MesPapiers app. Careful we create a `componentsProps`
to replace original `iconProps` and `typographyProps`
  • Loading branch information
JF-Cozy committed Mar 23, 2023
1 parent d89a9a5 commit 068f247
Showing 1 changed file with 81 additions and 0 deletions.
@@ -0,0 +1,81 @@
import React from 'react'
import cx from 'classnames'
import PropTypes from 'prop-types'

import { makeStyles } from '../../../../styles'
import Typography from '../../../../Typography'
import Icon, { iconPropType } from '../../../../Icon'
import { ActionMenuItem } from '../../../../ActionMenu'

const useStyles = makeStyles(theme => ({
disabledItem: {
cursor: 'default',
'&:hover': {
backgroundColor: 'initial'
}
},
disabledIcon: {
fill: theme.palette.text.disabled
},
disabledTypography: {
color: theme.palette.text.disabled
}
}))

const ActionMenuItemWrapper = ({
icon,
className,
isEnabled,
componentsProps,
children,
onClick
}) => {
const styles = useStyles()

return (
<ActionMenuItem
className={cx(`u-flex-items-center ${className}`, {
[styles.disabledItem]: !isEnabled
})}
left={
<Icon
icon={icon}
className={cx({
[styles.disabledIcon]: !isEnabled
})}
{...componentsProps?.iconProps}
/>
}
onClick={onClick}
>
<Typography
className={cx({
[styles.disabledTypography]: !isEnabled
})}
{...componentsProps?.typographyProps}
>
{children}
</Typography>
</ActionMenuItem>
)
}

ActionMenuItemWrapper.defaultProps = {
className: '',
isEnabled: true,
componentsProps: {}
}

ActionMenuItemWrapper.propTypes = {
icon: iconPropType,
className: PropTypes.string,
isEnabled: PropTypes.bool,
componentsProps: PropTypes.shape({
iconProps: PropTypes.object,
typographyProps: PropTypes.object
}),
children: PropTypes.node,
onClick: PropTypes.func
}

export default ActionMenuItemWrapper

0 comments on commit 068f247

Please sign in to comment.