ar
/
mastodon
forked from treehouse/mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Some more refactoring

rebase/4.0.0rc2
Claire 2022-02-09 13:41:17 +01:00
parent f87ce13afc
commit f03dc97070
1 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js
View File

@ -77,14 +77,16 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent
document.removeEventListener('touchend', this.handleDocumentClick, withPassive); document.removeEventListener('touchend', this.handleDocumentClick, withPassive);
} }
handleClick = (name, e) => { handleClick = (e) => {
const i = Number(e.currentTarget.getAttribute('data-index'));
const { const {
onChange, onChange,
onClose, onClose,
items, items,
} = this.props; } = this.props;
const { on } = this.props.items.find(item => item.name === name); const { on, name } = this.props.items[i];
e.preventDefault(); // Prevents change in focus on click e.preventDefault(); // Prevents change in focus on click
if ((on === null || typeof on === 'undefined')) { if ((on === null || typeof on === 'undefined')) {
onClose(); onClose();
@ -101,11 +103,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 { items } = this.props;
const index = items.findIndex(item => {
return (item.name === name);
});
let element = null; let element = null;
switch(e.key) { switch(e.key) {
@ -139,7 +139,7 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent
if (element) { if (element) {
element.focus(); element.focus();
this.handleChange(element.getAttribute('data-index')); this.handleChange(this.props.items[Number(element.getAttribute('data-index'))].name);
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
} }
@ -149,7 +149,7 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent
this.focusedItem = c; this.focusedItem = c;
} }
renderItem = (item) => { renderItem = (item, i) => {
const { name, icon, meta, on, text } = item; const { name, icon, meta, on, text } = item;
const active = (name === (this.props.value || this.state.value)); const active = (name === (this.props.value || this.state.value));
@ -159,7 +159,7 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent
let prefix = null; let prefix = null;
if (on !== null && typeof on !== 'undefined') { if (on !== null && typeof on !== 'undefined') {
prefix = <Toggle checked={on} onChange={this.handleClick.bind(this, name)} />; prefix = <Toggle checked={on} onChange={this.handleClick} />;
} else if (icon) { } else if (icon) {
prefix = <Icon className='icon' fixedWidth id={icon} /> prefix = <Icon className='icon' fixedWidth id={icon} />
} }
@ -167,12 +167,12 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent
return ( return (
<div <div
className={computedClass} className={computedClass}
onClick={this.handleClick.bind(this, name)} onClick={this.handleClick}
onKeyDown={this.handleKeyDown.bind(this, name)} onKeyDown={this.handleKeyDown}
role='option' role='option'
tabIndex='0' tabIndex='0'
key={name} key={name}
data-index={name} data-index={i}
ref={active ? this.setFocusRef : null} ref={active ? this.setFocusRef : null}
> >
{prefix} {prefix}
@ -223,7 +223,7 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent
transform: mounted ? `scale(${scaleX}, ${scaleY})` : null, transform: mounted ? `scale(${scaleX}, ${scaleY})` : null,
}} }}
> >
{!!items && items.map(item => this.renderItem(item))} {!!items && items.map((item, i) => this.renderItem(item, i))}
</div> </div>
)} )}
</Motion> </Motion>