app/addons/documents/components/results-options.js

import React from 'react';
import PropTypes from 'prop-types';
import Components from '../../components/react-components';
import Constants from '../constants';

const { MenuDropDown } = Components;

export default class ResultsOptions extends React.Component {
  static defaultProps = {
    showDensity: true,
    showFontSize: true
  };
  static propTypes = {
    resultsStyle: PropTypes.object.isRequired,
    updateStyle: PropTypes.func.isRequired,
    showDensity: PropTypes.bool,
    showFontSize: PropTypes.bool
  };

  constructor(props) {
    super(props);
    this.toggleTextOverflow = this.toggleTextOverflow.bind(this);
    this.setFontSize = this.setFontSize.bind(this);
  }

  toggleTextOverflow() {
    if (this.props.resultsStyle.textOverflow === Constants.INDEX_RESULTS_STYLE.TEXT_OVERFLOW_FULL) {
      this.props.updateStyle({
        textOverflow: Constants.INDEX_RESULTS_STYLE.TEXT_OVERFLOW_TRUNCATED
      });
    } else {
      this.props.updateStyle({
        textOverflow: Constants.INDEX_RESULTS_STYLE.TEXT_OVERFLOW_FULL
      });
    }
  }

  setFontSize(size) {
    this.props.updateStyle({
      fontSize: size
    });
  }

  getDensitySection() {
    let menuOptionTitle = 'Show full values';
    if (this.props.resultsStyle.textOverflow === Constants.INDEX_RESULTS_STYLE.TEXT_OVERFLOW_FULL) {
      menuOptionTitle = 'Truncate values';
    }

    const densityItems = [{
      title: menuOptionTitle,
      onClick: this.toggleTextOverflow
    }];

    return {
      title: 'Display density',
      links: densityItems
    };
  }

  getFontSizeSection() {
    const fontSizeItems = [{
      title: 'Small',
      onClick: () => { this.setFontSize(Constants.INDEX_RESULTS_STYLE.FONT_SIZE_SMALL); },
      icon: this.props.resultsStyle.fontSize === Constants.INDEX_RESULTS_STYLE.FONT_SIZE_SMALL ? 'fonticon-ok' : ''
    },
    {
      title: 'Medium',
      onClick: () => { this.setFontSize(Constants.INDEX_RESULTS_STYLE.FONT_SIZE_MEDIUM); },
      icon: this.props.resultsStyle.fontSize === Constants.INDEX_RESULTS_STYLE.FONT_SIZE_MEDIUM ? 'fonticon-ok' : ''
    },
    {
      title: 'Large',
      onClick: () => { this.setFontSize(Constants.INDEX_RESULTS_STYLE.FONT_SIZE_LARGE); },
      icon: this.props.resultsStyle.fontSize === Constants.INDEX_RESULTS_STYLE.FONT_SIZE_LARGE ? 'fonticon-ok' : ''
    }];
    return {
      title: 'Font size',
      links: fontSizeItems
    };
  }

  render() {
    const links = [];
    if (this.props.showDensity) {
      links.push(this.getDensitySection());
    }
    if (this.props.showFontSize) {
      links.push(this.getFontSizeSection());
    }

    return (
      <div className='toolbar-dropdown'>
        <MenuDropDown id="result-style-menu" links={links} icon='fonticon-mixer' hideArrow={true} toggleType='button'/>
      </div>
    );
  }
}