react-font-style/src/ui/FontFamilyDropdown.js

React font style editor

// Edit from https://github.com/nardeas/react-font-picker
import React, { Component } from 'react';
import styles from './FontFamilyDropdown.css';

class FontFamilyDropdown extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOptionsVisible: false
    }
  }

  onWrapperClick = () => {
    this.setState({isOptionsVisible: !this.state.isOptionsVisible});
  }

  onOptionClick = (e, font) => {
    e.stopPropagation();

    if (this.state.isOptionsVisible == false)
      return;

    if (this.props.onChange)
      this.props.onChange(font);

    this.setState({isOptionsVisible: false});
  }

  render() {
    const {label, choices} = this.props;
    const value = this.props.selectedKey;
    return (
      <div className={styles.wrapper} onClick={this.onWrapperClick}>
        <div className={value === "" ? styles.label : styles.labelFloat}>{label}</div>
        <div className={styles.selectedOption}>
          {value}
        </div>
        <div className={styles.button}></div>
        <div className={this.state.isOptionsVisible ? styles.options : styles.optionsHidden}>
          {choices.map((item, i) => {
            const {label} = item;
            const style = {fontFamily: item.style.fontFamily}
            if (value == label) {
              style.color = '#333';
            }

            return (
              <div className={styles.option}
                   style={style}
                   key={i}
                   onMouseUp={(e) => this.onOptionClick(e, label)}
                   onClick={(e) => this.onOptionClick(e, label)}>
                {label}
              </div>
            );
          })}
        </div>
      </div>
    );
  }
}

export default FontFamilyDropdown;