mirror of
https://github.com/strapi/strapi.git
synced 2025-09-13 02:28:44 +00:00
51 lines
1.5 KiB
JavaScript
51 lines
1.5 KiB
JavaScript
/**
|
|
*
|
|
* SelectOption
|
|
*
|
|
*/
|
|
|
|
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import getFlag, { formatLanguageLocale } from '../../utils/getFlag';
|
|
import styles from './styles.scss';
|
|
|
|
/* eslint-disable react/require-default-props */
|
|
class SelectOptionLanguage extends React.Component { // eslint-disable-line react/prefer-stateless-function
|
|
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
|
handleSelect = (event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
this.props.onSelect(this.props.option, event);
|
|
}
|
|
|
|
handleMouseEnter = (event) => {
|
|
this.props.onFocus(this.props.option, event);
|
|
}
|
|
|
|
handleMouseMove = (event) => {
|
|
if (this.props.isFocused) return;
|
|
this.props.onFocus(this.props.option, event);
|
|
}
|
|
|
|
render() {
|
|
const flagName = formatLanguageLocale(this.props.option.value);
|
|
const flag = getFlag(flagName);
|
|
|
|
return (
|
|
<div className={styles.selectOption} onMouseEnter={this.handleMouseEnter} onMouseMove={this.handleMouseMove} onFocus={this.props.onFocus} onClick={this.handleSelect} id={this.props.option.value}>
|
|
<span className={`${styles.flagContainer} flag-icon flag-icon-${flag}`} />
|
|
<span className={styles.optionLabel}>{this.props.option.label}</span>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
SelectOptionLanguage.propTypes = {
|
|
isFocused: PropTypes.bool,
|
|
onFocus: PropTypes.func,
|
|
onSelect: PropTypes.func,
|
|
option: PropTypes.object,
|
|
};
|
|
|
|
export default SelectOptionLanguage;
|