From f87ce13afc25b4ea56b6d7e4a85eac4cee5591da Mon Sep 17 00:00:00 2001 From: Claire Date: Wed, 9 Feb 2022 12:23:57 +0100 Subject: [PATCH] Refactor dropdown and action modal code slightly Simplify it a bit and make it closer to upstream --- .../glitch/components/dropdown_menu.js | 11 +++-- .../containers/dropdown_menu_container.js | 3 +- .../compose/components/dropdown_menu.js | 8 +--- .../features/ui/components/actions_modal.js | 48 +++++++------------ 4 files changed, 25 insertions(+), 45 deletions(-) diff --git a/app/javascript/flavours/glitch/components/dropdown_menu.js b/app/javascript/flavours/glitch/components/dropdown_menu.js index 023fecb9ab2..a4d0dfc50d6 100644 --- a/app/javascript/flavours/glitch/components/dropdown_menu.js +++ b/app/javascript/flavours/glitch/components/dropdown_menu.js @@ -116,7 +116,7 @@ class DropdownMenu extends React.PureComponent { if (typeof action === 'function') { e.preventDefault(); - action(); + action(e); } else if (to) { e.preventDefault(); this.context.router.history.push(to); @@ -128,11 +128,11 @@ class DropdownMenu extends React.PureComponent { return
  • ; } - const { text, href = '#' } = option; + const { text, href = '#', target = '_blank', method } = option; return (
  • - + {text}
  • @@ -149,7 +149,7 @@ class DropdownMenu extends React.PureComponent { // It should not be transformed when mounting because the resulting // size will be used to determine the coordinate of the menu by // react-overlays -
    +
      @@ -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]; this.handleClose(); diff --git a/app/javascript/flavours/glitch/containers/dropdown_menu_container.js b/app/javascript/flavours/glitch/containers/dropdown_menu_container.js index 1c0385b740b..d18e640a4d7 100644 --- a/app/javascript/flavours/glitch/containers/dropdown_menu_container.js +++ b/app/javascript/flavours/glitch/containers/dropdown_menu_container.js @@ -18,11 +18,12 @@ const mapDispatchToProps = (dispatch, { status, items, scrollKey }) => ({ (item, i) => item ? { ...item, name: `${item.text}-${i}`, - onClick: item.action ? ((e) => { return onItemClick(i, e) }) : null, } : null ), + onClick: onItemClick, }) : openDropdownMenu(id, dropdownPlacement, keyboard, scrollKey)); }, + onClose(id) { dispatch(closeModal('ACTIONS')); dispatch(closeDropdownMenu(id)); diff --git a/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js b/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js index bee06e64c7f..c2446c6ddfe 100644 --- a/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js +++ b/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js @@ -154,13 +154,7 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent const active = (name === (this.props.value || this.state.value)); - const computedClass = classNames('composer--options--dropdown--content--item', { - active, - lengthy: meta, - 'toggled-off': !on && on !== null && typeof on !== 'undefined', - 'toggled-on': on, - 'with-icon': icon, - }); + const computedClass = classNames('composer--options--dropdown--content--item', { active }); let prefix = null; diff --git a/app/javascript/flavours/glitch/features/ui/components/actions_modal.js b/app/javascript/flavours/glitch/features/ui/components/actions_modal.js index 24169036ca5..4ae3a476632 100644 --- a/app/javascript/flavours/glitch/features/ui/components/actions_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/actions_modal.js @@ -8,13 +8,13 @@ import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp'; import DisplayName from 'flavours/glitch/components/display_name'; import classNames from 'classnames'; import Icon from 'flavours/glitch/components/icon'; -import Link from 'flavours/glitch/components/link'; import Toggle from 'react-toggle'; export default class ActionsModal extends ImmutablePureComponent { static propTypes = { status: ImmutablePropTypes.map, + onClick: PropTypes.func, actions: PropTypes.arrayOf(PropTypes.shape({ active: PropTypes.bool, href: PropTypes.string, @@ -46,43 +46,27 @@ export default class ActionsModal extends ImmutablePureComponent { return (
    • - - {function () { - - // We render a `` if we were provided an `on` - // property, and otherwise show an `` if available. - switch (true) { - case on !== null && typeof on !== 'undefined': - return ( - - ); - case !!icon: - return ( - - ); - default: - return null; - } - }()} + + {on !== null && typeof on !== 'undefined' && ( + + )} + {icon && ( + + )} {meta ? (
      {text} {meta}
      ) :
      {text}
      } - +
    • ); }