import React from 'react'; import PropTypes from 'prop-types'; import { injectIntl, defineMessages } from 'react-intl'; import TextIconButton from './text_icon_button'; import Overlay from 'react-overlays/lib/Overlay'; import Motion from 'flavours/glitch/features/ui/util/optional_motion'; import spring from 'react-motion/lib/spring'; import { supportsPassiveEvents } from 'detect-passive-events'; import classNames from 'classnames'; import { languages as preloadedLanguages } from 'flavours/glitch/initial_state'; import { loupeIcon, deleteIcon } from 'flavours/glitch/utils/icons'; import fuzzysort from 'fuzzysort'; const messages = defineMessages({ changeLanguage: { id: 'compose.language.change', defaultMessage: 'Change language' }, search: { id: 'compose.language.search', defaultMessage: 'Search languages...' }, clear: { id: 'emoji_button.clear', defaultMessage: 'Clear' }, }); const listenerOptions = supportsPassiveEvents ? { passive: true } : false; class LanguageDropdownMenu extends React.PureComponent { static propTypes = { style: PropTypes.object, value: PropTypes.string.isRequired, frequentlyUsedLanguages: PropTypes.arrayOf(PropTypes.string).isRequired, placement: PropTypes.string.isRequired, onClose: PropTypes.func.isRequired, onChange: PropTypes.func.isRequired, languages: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)), intl: PropTypes.object, }; static defaultProps = { languages: preloadedLanguages, }; state = { mounted: false, searchValue: '', }; handleDocumentClick = e => { if (this.node && !this.node.contains(e.target)) { this.props.onClose(); } } componentDidMount () { document.addEventListener('click', this.handleDocumentClick, false); document.addEventListener('touchend', this.handleDocumentClick, listenerOptions); this.setState({ mounted: true }); // Because of https://github.com/react-bootstrap/react-bootstrap/issues/2614 we need // to wait for a frame before focusing requestAnimationFrame(() => { if (this.node) { const element = this.node.querySelector('input[type="search"]'); if (element) element.focus(); } }); } componentWillUnmount () { document.removeEventListener('click', this.handleDocumentClick, false); document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions); } setRef = c => { this.node = c; } setListRef = c => { this.listNode = c; } handleSearchChange = ({ target }) => { this.setState({ searchValue: target.value }); } search () { const { languages, value, frequentlyUsedLanguages } = this.props; const { searchValue } = this.state; if (searchValue === '') { return [...languages].sort((a, b) => { // Push current selection to the top of the list if (a[0] === value) { return -1; } else if (b[0] === value) { return 1; } else { // Sort according to frequently used languages const indexOfA = frequentlyUsedLanguages.indexOf(a[0]); const indexOfB = frequentlyUsedLanguages.indexOf(b[0]); return ((indexOfA > -1 ? indexOfA : Infinity) - (indexOfB > -1 ? indexOfB : Infinity)); } }); } return fuzzysort.go(searchValue, languages, { keys: ['0', '1', '2'], limit: 5, threshold: -10000, }).map(result => result.obj); } frequentlyUsed () { const { languages, value } = this.props; const current = languages.find(lang => lang[0] === value); const results = []; if (current) { results.push(current); } return results; } handleClick = e => { const value = e.currentTarget.getAttribute('data-index'); e.preventDefault(); this.props.onClose(); this.props.onChange(value); } handleKeyDown = e => { const { onClose } = this.props; const index = Array.from(this.listNode.childNodes).findIndex(node => node === e.currentTarget); let element = null; switch(e.key) { case 'Escape': onClose(); break; case 'Enter': this.handleClick(e); break; case 'ArrowDown': element = this.listNode.childNodes[index + 1] || this.listNode.firstChild; break; case 'ArrowUp': element = this.listNode.childNodes[index - 1] || this.listNode.lastChild; break; case 'Tab': if (e.shiftKey) { element = this.listNode.childNodes[index - 1] || this.listNode.lastChild; } else { element = this.listNode.childNodes[index + 1] || this.listNode.firstChild; } break; case 'Home': element = this.listNode.firstChild; break; case 'End': element = this.listNode.lastChild; break; } if (element) { element.focus(); e.preventDefault(); e.stopPropagation(); } } handleSearchKeyDown = e => { const { onChange, onClose } = this.props; const { searchValue } = this.state; let element = null; switch(e.key) { case 'Tab': case 'ArrowDown': element = this.listNode.firstChild; if (element) { element.focus(); e.preventDefault(); e.stopPropagation(); } break; case 'Enter': element = this.listNode.firstChild; if (element) { onChange(element.getAttribute('data-index')); onClose(); } break; case 'Escape': if (searchValue !== '') { e.preventDefault(); this.handleClear(); } break; } } handleClear = () => { this.setState({ searchValue: '' }); } renderItem = lang => { const { value } = this.props; return (