diff options
Diffstat (limited to 'app/javascript/mastodon/components/dropdown_menu.js')
| -rw-r--r-- | app/javascript/mastodon/components/dropdown_menu.js | 19 |
1 files changed, 15 insertions, 4 deletions
diff --git a/app/javascript/mastodon/components/dropdown_menu.js b/app/javascript/mastodon/components/dropdown_menu.js index 12e1b44fa..98323b069 100644 --- a/app/javascript/mastodon/components/dropdown_menu.js +++ b/app/javascript/mastodon/components/dropdown_menu.js @@ -14,6 +14,7 @@ export default class DropdownMenu extends React.PureComponent { size: PropTypes.number.isRequired, direction: PropTypes.string, ariaLabel: PropTypes.string, + disabled: PropTypes.bool, }; static defaultProps = { @@ -68,9 +69,19 @@ export default class DropdownMenu extends React.PureComponent { } render () { - const { icon, items, size, direction, ariaLabel } = this.props; - const { expanded } = this.state; + const { icon, items, size, direction, ariaLabel, disabled } = this.props; + const { expanded } = this.state; const directionClass = (direction === 'left') ? 'dropdown__left' : 'dropdown__right'; + const iconStyle = { fontSize: `${size}px`, width: `${size}px`, lineHeight: `${size}px` }; + const iconClassname = `fa fa-fw fa-${icon} dropdown__icon`; + + if (disabled) { + return ( + <div className='icon-button disabled' style={iconStyle} aria-label={ariaLabel}> + <i className={iconClassname} aria-hidden /> + </div> + ); + } const dropdownItems = expanded && ( <ul className='dropdown__content-list'> @@ -80,8 +91,8 @@ export default class DropdownMenu extends React.PureComponent { return ( <Dropdown ref={this.setRef} onShow={this.handleShow} onHide={this.handleHide}> - <DropdownTrigger className='icon-button' style={{ fontSize: `${size}px`, width: `${size}px`, lineHeight: `${size}px` }} aria-label={ariaLabel}> - <i className={`fa fa-fw fa-${icon} dropdown__icon`} aria-hidden /> + <DropdownTrigger className='icon-button' style={iconStyle} aria-label={ariaLabel}> + <i className={iconClassname} aria-hidden /> </DropdownTrigger> <DropdownContent className={directionClass}> |