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.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.js')
-rw-r--r-- | app/javascript/flavours/glitch/features/compose/components/dropdown.js | 78 |
1 files changed, 33 insertions, 45 deletions
diff --git a/app/javascript/flavours/glitch/features/compose/components/dropdown.js b/app/javascript/flavours/glitch/features/compose/components/dropdown.js index abf7cbba1..9f70d6b79 100644 --- a/app/javascript/flavours/glitch/features/compose/components/dropdown.js +++ b/app/javascript/flavours/glitch/features/compose/components/dropdown.js @@ -21,22 +21,25 @@ export default class ComposerOptionsDropdown extends React.PureComponent { icon: PropTypes.string, items: PropTypes.arrayOf(PropTypes.shape({ icon: PropTypes.string, - meta: PropTypes.node, + meta: PropTypes.string, name: PropTypes.string.isRequired, - on: PropTypes.bool, - text: PropTypes.node, + text: PropTypes.string, })).isRequired, onModalOpen: PropTypes.func, onModalClose: PropTypes.func, title: PropTypes.string, value: PropTypes.string, onChange: PropTypes.func, - noModal: PropTypes.bool, container: PropTypes.func, + renderItemContents: PropTypes.func, + closeOnChange: PropTypes.bool, + }; + + static defaultProps = { + closeOnChange: true, }; state = { - needsModalUpdate: false, open: false, openedViaKeyboard: undefined, placement: 'bottom', @@ -44,10 +47,10 @@ export default class ComposerOptionsDropdown extends React.PureComponent { // Toggles opening and closing the dropdown. handleToggle = ({ target, type }) => { - const { onModalOpen, noModal } = this.props; + const { onModalOpen } = this.props; const { open } = this.state; - if (!noModal && isUserTouching()) { + if (isUserTouching()) { if (this.state.open) { this.props.onModalClose(); } else { @@ -107,9 +110,25 @@ export default class ComposerOptionsDropdown extends React.PureComponent { this.setState({ open: false }); } + handleItemClick = (e) => { + const { + items, + onChange, + onModalClose, + closeOnChange, + } = this.props; + + const i = Number(e.currentTarget.getAttribute('data-index')); + + const { name } = items[i]; + + e.preventDefault(); // Prevents focus from changing + if (closeOnChange) onModalClose(); + onChange(name); + }; + // Creates an action modal object. handleMakeModal = () => { - const component = this; const { items, onChange, @@ -125,6 +144,8 @@ export default class ComposerOptionsDropdown extends React.PureComponent { // The object. return { + renderItemContents: this.props.renderItemContents, + onClick: this.handleItemClick, actions: items.map( ({ name, @@ -133,48 +154,11 @@ export default class ComposerOptionsDropdown extends React.PureComponent { ...rest, active: value && name === value, name, - onClick (e) { - e.preventDefault(); // Prevents focus from changing - onModalClose(); - onChange(name); - }, - onPassiveClick (e) { - e.preventDefault(); // Prevents focus from changing - onChange(name); - component.setState({ needsModalUpdate: true }); - }, }) ), }; } - // If our modal is open and our props update, we need to also update - // the modal. - handleUpdate = () => { - const { onModalOpen } = this.props; - const { needsModalUpdate } = this.state; - - // Gets our modal object. - const modal = this.handleMakeModal(); - - // Reopens the modal with the new object. - if (needsModalUpdate && modal && onModalOpen) { - onModalOpen(modal); - } - } - - // Updates our modal as necessary. - componentDidUpdate (prevProps) { - const { items } = this.props; - const { needsModalUpdate } = this.state; - if (needsModalUpdate && items.find( - (item, i) => item.on !== prevProps.items[i].on - )) { - this.handleUpdate(); - this.setState({ needsModalUpdate: false }); - } - } - // Rendering. render () { const { @@ -186,6 +170,8 @@ export default class ComposerOptionsDropdown extends React.PureComponent { onChange, value, container, + renderItemContents, + closeOnChange, } = this.props; const { open, placement } = this.state; const computedClass = classNames('composer--options--dropdown', { @@ -226,10 +212,12 @@ export default class ComposerOptionsDropdown extends React.PureComponent { > <DropdownMenu items={items} + renderItemContents={renderItemContents} onChange={onChange} onClose={this.handleClose} value={value} openedViaKeyboard={this.state.openedViaKeyboard} + closeOnChange={closeOnChange} /> </Overlay> </div> |