// Package imports. import classNames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; import Toggle from 'react-toggle'; // Components. import Icon from 'flavours/glitch/components/icon'; // Utils. import { assignHandlers } from 'flavours/glitch/util/react_helpers'; // Handlers. const handlers = { // This function activates the dropdown item. handleActivate (e) { const { name, onChange, onClose, options: { on }, } = this.props; // If the escape key was pressed, we close the dropdown. if (e.key === 'Escape' && onClose) { onClose(); // Otherwise, we both close the dropdown and change the value. } else if (onChange && (!e.key || e.key === 'Enter')) { e.preventDefault(); // Prevents change in focus on click if ((on === null || typeof on === 'undefined') && onClose) { onClose(); } onChange(name); } }, }; // The component. export default class ComposerOptionsDropdownContentItem extends React.PureComponent { // Constructor. constructor (props) { super(props); assignHandlers(this, handlers); } // Rendering. render () { const { handleActivate } = this.handlers; const { active, options: { icon, meta, on, text, }, } = this.props; const computedClass = classNames('composer--options--dropdown--content--item', { active, lengthy: meta, 'toggled-off': !on && on !== null && typeof on !== 'undefined', 'toggled-on': on, 'with-icon': icon, }); // The result. return (