Spaces:
Runtime error
Runtime error
File size: 5,297 Bytes
8fd7a1d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 |
import classNames from 'classnames';
import bindAll from 'lodash.bindall';
import PropTypes from 'prop-types';
import React from 'react';
import {FormattedMessage} from 'react-intl';
import {connect} from 'react-redux';
import locales from '@turbowarp/scratch-l10n';
import check from './check.svg';
import {MenuItem, Submenu} from '../menu/menu.jsx';
import languageIcon from '../language-selector/language-icon.svg';
import {languageMenuOpen, openLanguageMenu} from '../../reducers/menus.js';
import {selectLocale} from '../../reducers/locales.js';
import styles from './settings-menu.css';
import dropdownCaret from './dropdown-caret.svg';
class LanguageMenu extends React.PureComponent {
constructor (props) {
super(props);
bindAll(this, [
'setRef',
'handleMouseOver'
]);
}
componentDidUpdate (prevProps) {
// If the submenu has been toggled open, try scrolling the selected option into view.
if (!prevProps.menuOpen && this.props.menuOpen && this.selectedRef) {
this.scrollSelectedIntoView();
}
}
setRef (component) {
this.selectedRef = component;
}
handleMouseOver () {
// If we are using hover rather than clicks for submenus, scroll the selected option into view
if (!this.props.menuOpen && this.selectedRef) {
this.scrollSelectedIntoView();
}
}
scrollSelectedIntoView () {
// the native scrollIntoView() scrolls the entire page when used outside the editor,
// so we do this manually instead.
// selectedRef is the checkmark <img>, its parent is a <div> from <MenuItem>, then a <div> from <SubMenu>
const menuItem = this.selectedRef.parentNode;
const scrollContainer = menuItem.parentNode;
const itemHeight = menuItem.offsetHeight;
const selectedItemPosition = menuItem.offsetTop;
const visibleHeight = scrollContainer.offsetHeight;
scrollContainer.scrollTop = selectedItemPosition - (visibleHeight / 2) + (itemHeight / 2);
}
render () {
return (
<MenuItem
expanded={this.props.menuOpen}
>
<div
className={styles.option}
onClick={this.props.onRequestOpen}
onMouseOver={this.handleMouseOver}
>
<img
className={styles.icon}
src={languageIcon}
draggable={false}
/>
<span className={styles.submenuLabel}>
<FormattedMessage
defaultMessage="Language"
description="Language sub-menu"
id="gui.menuBar.language"
/>
</span>
<img
className={styles.expandCaret}
src={dropdownCaret}
draggable={false}
/>
</div>
<Submenu
className={styles.languageSubmenu}
place={this.props.isRtl ? 'left' : 'right'}
>
{
Object.keys(locales)
.map(locale => (
<MenuItem
key={locale}
className={styles.languageMenuItem}
// eslint-disable-next-line react/jsx-no-bind
onClick={() => this.props.onChangeLanguage(locale)}
>
<img
className={classNames(styles.check, {
[styles.selected]: this.props.currentLocale === locale
})}
src={check}
draggable={false}
{...(this.props.currentLocale === locale && {ref: this.setRef})}
/>
{locales[locale].name}
</MenuItem>
))
}
</Submenu>
</MenuItem>
);
}
}
LanguageMenu.propTypes = {
currentLocale: PropTypes.string,
isRtl: PropTypes.bool,
label: PropTypes.string,
menuOpen: PropTypes.bool,
onChangeLanguage: PropTypes.func,
onRequestCloseSettings: PropTypes.func,
onRequestOpen: PropTypes.func
};
const mapStateToProps = state => ({
currentLocale: state.locales.locale,
isRtl: state.locales.isRtl,
menuOpen: languageMenuOpen(state),
messagesByLocale: state.locales.messagesByLocale
});
const mapDispatchToProps = (dispatch, ownProps) => ({
onChangeLanguage: locale => {
dispatch(selectLocale(locale));
ownProps.onRequestCloseSettings();
},
onRequestOpen: () => dispatch(openLanguageMenu())
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(LanguageMenu);
|