mirror of
https://github.com/lunaisnotaboy/mastodon.git
synced 2024-09-06 10:16:34 +00:00
Some more refactoring
This commit is contained in:
parent
f87ce13afc
commit
f03dc97070
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue