diff options
author | Claire <claire.github-309c@sitedethib.com> | 2022-02-09 17:25:57 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-02-09 17:25:57 +0100 |
commit | 8987ea4d6b236657b8ea97d619902668768ae8ff (patch) | |
tree | d1be73fd2f80572f4b54857c51bae95327314e40 /app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js | |
parent | 2fd1db7c9d0fe8c1cca159b9b0818c72e7c318aa (diff) | |
parent | 0bb3d445ab0167ac33bd804333c7f9741c7526ae (diff) |
Merge pull request #1682 from ClearlyClaire/glitch-soc/fixes/dropdowns-modals
Refactor and fix dropdown/action dialog
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 | 66 |
1 files changed, 32 insertions, 34 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 bee06e64c..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 = { @@ -77,16 +78,19 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent document.removeEventListener('touchend', this.handleDocumentClick, withPassive); } - handleClick = (name, e) => { + handleClick = (e) => { + const i = Number(e.currentTarget.getAttribute('data-index')); + const { onChange, onClose, + closeOnChange, items, } = this.props; - const { on } = this.props.items.find(item => item.name === name); + 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); @@ -101,11 +105,9 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent } } - handleKeyDown = (name, e) => { + handleKeyDown = (e) => { + const index = Number(e.currentTarget.getAttribute('data-index')); const { items } = this.props; - const index = items.findIndex(item => { - return (item.name === name); - }); let element = null; switch(e.key) { @@ -139,7 +141,7 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent if (element) { element.focus(); - this.handleChange(element.getAttribute('data-index')); + this.handleChange(this.props.items[Number(element.getAttribute('data-index'))].name); e.preventDefault(); e.stopPropagation(); } @@ -149,44 +151,40 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent this.focusedItem = c; } - renderItem = (item) => { - const { name, icon, meta, on, text } = item; + renderItem = (item, i) => { + const { name, icon, meta, text } = item; 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 contents = this.props.renderItemContents && this.props.renderItemContents(item, i); - let prefix = null; + if (!contents) { + contents = ( + <React.Fragment> + {icon && <Icon className='icon' fixedWidth id={icon} />} - if (on !== null && typeof on !== 'undefined') { - prefix = <Toggle checked={on} onChange={this.handleClick.bind(this, name)} />; - } else if (icon) { - prefix = <Icon className='icon' fixedWidth id={icon} /> + <div className='content'> + <strong>{text}</strong> + {meta} + </div> + </React.Fragment> + ); } return ( <div className={computedClass} - onClick={this.handleClick.bind(this, name)} - onKeyDown={this.handleKeyDown.bind(this, name)} + onClick={this.handleClick} + onKeyDown={this.handleKeyDown} role='option' tabIndex='0' key={name} - data-index={name} + data-index={i} ref={active ? this.setFocusRef : null} > - {prefix} - - <div className='content'> - <strong>{text}</strong> - {meta} - </div> + {contents} </div> ); } @@ -229,7 +227,7 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent transform: mounted ? `scale(${scaleX}, ${scaleY})` : null, }} > - {!!items && items.map(item => this.renderItem(item))} + {!!items && items.map((item, i) => this.renderItem(item, i))} </div> )} </Motion> |