react-draft-wysiwyg/src/controls/History/Component/index.js

A wysiwyg on top of DraftJS.

/* @flow */

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import { getFirstIcon } from '../../../utils/toolbar';
import Option from '../../../components/Option';
import { Dropdown, DropdownOption } from '../../../components/Dropdown';
import './styles.css';

export default class History extends Component {
  static propTypes = {
    expanded: PropTypes.bool,
    doExpand: PropTypes.func,
    doCollapse: PropTypes.func,
    onExpandEvent: PropTypes.func,
    config: PropTypes.object,
    onChange: PropTypes.func,
    currentState: PropTypes.object,
    translations: PropTypes.object,
  };

  onChange = (obj) => {
    const { onChange } = this.props;
    onChange(obj);
  }

  renderInDropDown(): Object {
    const {
      config,
      expanded,
      doExpand,
      onExpandEvent,
      doCollapse,
      currentState: { undoDisabled, redoDisabled },
      translations,
    } = this.props;
    const { options, undo, redo, className, dropdownClassName, title } = config;
    return (
      <Dropdown
        className={classNames('rdw-history-dropdown', className)}
        optionWrapperClassName={classNames(dropdownClassName)}
        expanded={expanded}
        doExpand={doExpand}
        doCollapse={doCollapse}
        onExpandEvent={onExpandEvent}
        aria-label="rdw-history-control"
        title={title || translations['components.controls.history.history']}
      >
        <img
          src={getFirstIcon(config)}
          alt=""
        />
        {options.indexOf('undo') >= 0 && <DropdownOption
          value="undo"
          onClick={this.onChange}
          disabled={undoDisabled}
          className={classNames('rdw-history-dropdownoption', undo.className)}
          title={undo.title || translations['components.controls.history.undo']}
        >
          <img
            src={undo.icon}
            alt=""
          />
        </DropdownOption>}
        {options.indexOf('redo') >= 0 && <DropdownOption
          value="redo"
          onClick={this.onChange}
          disabled={redoDisabled}
          className={classNames('rdw-history-dropdownoption', redo.className)}
          title={redo.title || translations['components.controls.history.redo']}
        >
          <img
            src={redo.icon}
            alt=""
          />
        </DropdownOption>}
      </Dropdown>
    );
  }

  renderInFlatList(): Object {
    const {
      config: { options, undo, redo, className },
      currentState: { undoDisabled, redoDisabled },
      translations,
    } = this.props;
    return (
      <div className={classNames('rdw-history-wrapper', className)} aria-label="rdw-history-control">
        {options.indexOf('undo') >= 0 && <Option
          value="undo"
          onClick={this.onChange}
          className={classNames(undo.className)}
          disabled={undoDisabled}
          title={undo.title || translations['components.controls.history.undo']}
        >
          <img
            src={undo.icon}
            alt=""
          />
        </Option>}
        {options.indexOf('redo') >= 0 && <Option
          value="redo"
          onClick={this.onChange}
          className={classNames(redo.className)}
          disabled={redoDisabled}
          title={redo.title || translations['components.controls.history.redo']}
        >
          <img
            src={redo.icon}
            alt=""
          />
        </Option>}
      </div>
    );
  }

  render(): Object {
    const { config } = this.props;
    if (config.inDropdown) {
      return this.renderInDropDown();
    }
    return this.renderInFlatList();
  }
}