File Contents: /home/planet5/www/wp-content/plugins/monarch/core/ui/components/controls/dropdown/menu/item.jsx

// External dependencies
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';

// Internal dependencies
import ETBuilderIcon from '../../../icon/icon';

import styles from './item.scss';

class ETCoreMenuItem extends React.PureComponent {
  static propTypes = {
    className: PropTypes.string,
    itemKey: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number,
    ]),
    value: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number,
    ]),
    isSelected: PropTypes.bool,
    tooltip: PropTypes.string,
  };

static defaultProps = {
    isSelected: false,
  };

constructor(props) {
    super(props);

this.state = {
      hovered: false,
    };
  }

handleMouseEnter = () => {
    this.setState({
      hovered: true,
    });
  };

handleMouseLeave = () => {
    this.setState({
      hovered: false,
    });
  };

handleMouseDown = (e) => {
    if (e.nativeEvent.which === 1) {
      const { onSelect, itemKey, value } = this.props;

onSelect && onSelect({
        key: itemKey,
        value,
      });
    }
  };

render() {
    const { hovered }    = this.state;
    const { isSelected, className, itemKey, tooltip } = this.props;

const classes = classnames(
      {
        'et-core-control-menu__item': true,
        'et-core-control-menu__item--hovered': hovered,
        'et-core-control-menu__item--selected': isSelected,
      },
      className
    );

const checkMarkColor = hovered ? styles.checkMarkColorHovered : styles.checkMarkColor;

return (
      <li
        key={itemKey}
        className={classes}
        onMouseEnter={this.handleMouseEnter}
        onMouseLeave={this.handleMouseLeave}
        onMouseDown={this.handleMouseDown}
        onTouchStart={this.handleMouseDown}
        data-tip={tooltip}
      >
        <div className="et-core-control-menu__item__content">
          {this.props.children}
        </div>
        {isSelected
        && <div className="et-core-control-menu__item__check-mark">
             <ETBuilderIcon
               icon="check"
               color={checkMarkColor}
             />
           </div>
        }
      </li>
    );
  }
}

export default ETCoreMenuItem;

⬅ Back to Directory