Refactor dropdown and action modal code slightly

Simplify it a bit and make it closer to upstream
This commit is contained in:
Claire 2022-02-09 12:23:57 +01:00
parent 2fd1db7c9d
commit f87ce13afc
4 changed files with 25 additions and 45 deletions

View file

@ -116,7 +116,7 @@ class DropdownMenu extends React.PureComponent {
if (typeof action === 'function') { if (typeof action === 'function') {
e.preventDefault(); e.preventDefault();
action(); action(e);
} else if (to) { } else if (to) {
e.preventDefault(); e.preventDefault();
this.context.router.history.push(to); this.context.router.history.push(to);
@ -128,11 +128,11 @@ class DropdownMenu extends React.PureComponent {
return <li key={`sep-${i}`} className='dropdown-menu__separator' />; return <li key={`sep-${i}`} className='dropdown-menu__separator' />;
} }
const { text, href = '#' } = option; const { text, href = '#', target = '_blank', method } = option;
return ( return (
<li className='dropdown-menu__item' key={`${text}-${i}`}> <li className='dropdown-menu__item' key={`${text}-${i}`}>
<a href={href} target='_blank' rel='noopener noreferrer' role='button' tabIndex='0' ref={i === 0 ? this.setFocusRef : null} onClick={this.handleClick} onKeyPress={this.handleItemKeyPress} data-index={i}> <a href={href} target={target} data-method={method} rel='noopener noreferrer' role='button' tabIndex='0' ref={i === 0 ? this.setFocusRef : null} onClick={this.handleClick} onKeyPress={this.handleItemKeyPress} data-index={i}>
{text} {text}
</a> </a>
</li> </li>
@ -149,7 +149,7 @@ class DropdownMenu extends React.PureComponent {
// It should not be transformed when mounting because the resulting // It should not be transformed when mounting because the resulting
// size will be used to determine the coordinate of the menu by // size will be used to determine the coordinate of the menu by
// react-overlays // react-overlays
<div className='dropdown-menu' style={{ ...style, opacity: opacity, transform: mounted ? `scale(${scaleX}, ${scaleY})` : null }} ref={this.setRef}> <div className={`dropdown-menu ${placement}`} style={{ ...style, opacity: opacity, transform: mounted ? `scale(${scaleX}, ${scaleY})` : null }} ref={this.setRef}>
<div className={`dropdown-menu__arrow ${placement}`} style={{ left: arrowOffsetLeft, top: arrowOffsetTop }} /> <div className={`dropdown-menu__arrow ${placement}`} style={{ left: arrowOffsetLeft, top: arrowOffsetTop }} />
<ul> <ul>
@ -236,7 +236,8 @@ export default class Dropdown extends React.PureComponent {
} }
} }
handleItemClick = (i, e) => { handleItemClick = e => {
const i = Number(e.currentTarget.getAttribute('data-index'));
const { action, to } = this.props.items[i]; const { action, to } = this.props.items[i];
this.handleClose(); this.handleClose();

View file

@ -18,11 +18,12 @@ const mapDispatchToProps = (dispatch, { status, items, scrollKey }) => ({
(item, i) => item ? { (item, i) => item ? {
...item, ...item,
name: `${item.text}-${i}`, name: `${item.text}-${i}`,
onClick: item.action ? ((e) => { return onItemClick(i, e) }) : null,
} : null } : null
), ),
onClick: onItemClick,
}) : openDropdownMenu(id, dropdownPlacement, keyboard, scrollKey)); }) : openDropdownMenu(id, dropdownPlacement, keyboard, scrollKey));
}, },
onClose(id) { onClose(id) {
dispatch(closeModal('ACTIONS')); dispatch(closeModal('ACTIONS'));
dispatch(closeDropdownMenu(id)); dispatch(closeDropdownMenu(id));

View file

@ -154,13 +154,7 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent
const active = (name === (this.props.value || this.state.value)); const active = (name === (this.props.value || this.state.value));
const computedClass = classNames('composer--options--dropdown--content--item', { const computedClass = classNames('composer--options--dropdown--content--item', { active });
active,
lengthy: meta,
'toggled-off': !on && on !== null && typeof on !== 'undefined',
'toggled-on': on,
'with-icon': icon,
});
let prefix = null; let prefix = null;

View file

@ -8,13 +8,13 @@ import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp';
import DisplayName from 'flavours/glitch/components/display_name'; import DisplayName from 'flavours/glitch/components/display_name';
import classNames from 'classnames'; import classNames from 'classnames';
import Icon from 'flavours/glitch/components/icon'; import Icon from 'flavours/glitch/components/icon';
import Link from 'flavours/glitch/components/link';
import Toggle from 'react-toggle'; import Toggle from 'react-toggle';
export default class ActionsModal extends ImmutablePureComponent { export default class ActionsModal extends ImmutablePureComponent {
static propTypes = { static propTypes = {
status: ImmutablePropTypes.map, status: ImmutablePropTypes.map,
onClick: PropTypes.func,
actions: PropTypes.arrayOf(PropTypes.shape({ actions: PropTypes.arrayOf(PropTypes.shape({
active: PropTypes.bool, active: PropTypes.bool,
href: PropTypes.string, href: PropTypes.string,
@ -46,43 +46,27 @@ export default class ActionsModal extends ImmutablePureComponent {
return ( return (
<li key={name || i}> <li key={name || i}>
<Link <a href={href} target='_blank' rel='noopener noreferrer' onClick={on !== null && typeof on !== 'undefined' && onPassiveClick || onClick || this.props.onClick} data-index={i} className={classNames('link', { active })}>
className={classNames('link', { active })} {on !== null && typeof on !== 'undefined' && (
href={href} <Toggle
onClick={on !== null && typeof on !== 'undefined' && onPassiveClick || onClick} checked={on}
role={onClick ? 'button' : null} onChange={onPassiveClick || onClick}
> />
{function () { )}
{icon && (
// We render a `<Toggle>` if we were provided an `on` <Icon
// property, and otherwise show an `<Icon>` if available. className='icon'
switch (true) { fixedWidth
case on !== null && typeof on !== 'undefined': id={icon}
return ( />
<Toggle )}
checked={on}
onChange={onPassiveClick || onClick}
/>
);
case !!icon:
return (
<Icon
className='icon'
fixedWidth
id={icon}
/>
);
default:
return null;
}
}()}
{meta ? ( {meta ? (
<div> <div>
<strong>{text}</strong> <strong>{text}</strong>
{meta} {meta}
</div> </div>
) : <div>{text}</div>} ) : <div>{text}</div>}
</Link> </a>
</li> </li>
); );
} }