diff options
author | Claire <claire.github-309c@sitedethib.com> | 2022-02-09 14:39:12 +0100 |
---|---|---|
committer | Claire <claire.github-309c@sitedethib.com> | 2022-02-09 16:40:23 +0100 |
commit | e1a4590bcae65275304046e8887f70592196c003 (patch) | |
tree | 36b3708f4790abcb497fff70cbbe2b700ea6e1b3 /app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js | |
parent | bc2eaf3581735e94be0cee3ef6b7241a5650245c (diff) |
Rework actions modal to bring it closer to upstream and fix modal stacking issue
Diffstat (limited to 'app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js')
-rw-r--r-- | app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js | 36 |
1 files changed, 20 insertions, 16 deletions
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 16eb1ef9d..0649fe1ca 100644 --- a/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js +++ b/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js @@ -2,7 +2,6 @@ import PropTypes from 'prop-types'; import React from 'react'; import spring from 'react-motion/lib/spring'; -import Toggle from 'react-toggle'; import ImmutablePureComponent from 'react-immutable-pure-component'; import classNames from 'classnames'; @@ -28,18 +27,20 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent icon: PropTypes.string, meta: PropTypes.node, name: PropTypes.string.isRequired, - on: PropTypes.bool, text: PropTypes.node, })), onChange: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired, style: PropTypes.object, value: PropTypes.string, + renderItemContents: PropTypes.func, openedViaKeyboard: PropTypes.bool, + closeOnChange: PropTypes.bool, }; static defaultProps = { style: {}, + closeOnChange: true, }; state = { @@ -83,12 +84,13 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent const { onChange, onClose, + closeOnChange, items, } = this.props; - const { on, name } = this.props.items[i]; + const { name } = this.props.items[i]; e.preventDefault(); // Prevents change in focus on click - if ((on === null || typeof on === 'undefined')) { + if (closeOnChange) { onClose(); } onChange(name); @@ -150,18 +152,25 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent } renderItem = (item, i) => { - const { name, icon, meta, on, text } = item; + const { name, icon, meta, text } = item; const active = (name === (this.props.value || this.state.value)); const computedClass = classNames('composer--options--dropdown--content--item', { active }); - let prefix = null; + let contents = this.props.renderItemContents && this.props.renderItemContents(item, i); - if (on !== null && typeof on !== 'undefined') { - prefix = <Toggle checked={on} onChange={this.handleClick} />; - } else if (icon) { - prefix = <Icon className='icon' fixedWidth id={icon} /> + if (!contents) { + contents = ( + <React.Fragment> + {icon && <Icon className='icon' fixedWidth id={icon} />} + + <div className='content'> + <strong>{text}</strong> + {meta} + </div> + </React.Fragment> + ); } return ( @@ -175,12 +184,7 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent data-index={i} ref={active ? this.setFocusRef : null} > - {prefix} - - <div className='content'> - <strong>{text}</strong> - {meta} - </div> + {contents} </div> ); } |