react-draft-wysiwyg/src/controls/BlockType/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 Option from '../../../components/Option';
import { Dropdown, DropdownOption } from '../../../components/Dropdown';
import './styles.css';

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

  constructor(props) {
    super(props);
    this.state = {
      blockTypes: this.getBlockTypes(props.translations),
    };
  }

  componentWillReceiveProps(properties: Object): void {
    if (this.props.translations !== properties.translations) {
      this.setState({
        blockTypes: this.getBlockTypes(properties.translations),
      });
    }
  }

  getBlockTypes = translations => [
    { label: 'Normal', displayName: translations['components.controls.blocktype.normal'] },
    { label: 'H1', displayName: translations['components.controls.blocktype.h1'] },
    { label: 'H2', displayName: translations['components.controls.blocktype.h2'] },
    { label: 'H3', displayName: translations['components.controls.blocktype.h3'] },
    { label: 'H4', displayName: translations['components.controls.blocktype.h4'] },
    { label: 'H5', displayName: translations['components.controls.blocktype.h5'] },
    { label: 'H6', displayName: translations['components.controls.blocktype.h6'] },
    { label: 'Blockquote', displayName: translations['components.controls.blocktype.blockquote'] },
    { label: 'Code', displayName: translations['components.controls.blocktype.code'] },
  ];

  renderFlat(blocks: Array<Object>): void {
    const { config: { className }, onChange, currentState: { blockType } } = this.props;
    return (
      <div className={classNames('rdw-inline-wrapper', className)}>
        {
          blocks.map((block, index) =>
            (<Option
              key={index}
              value={block.label}
              active={blockType === block.label}
              onClick={onChange}
            >
              {block.displayName}
            </Option>),
          )
        }
      </div>
    );
  }

  renderInDropdown(blocks: Array<Object>): void {
    const {
      config: { className, dropdownClassName, title },
      currentState: { blockType },
      expanded,
      doExpand,
      onExpandEvent,
      doCollapse,
      onChange,
      translations,
    } = this.props;
    const { blockTypes } = this.state;
    const currentBlockData = blockTypes.filter(blk => blk.label === blockType);
    const currentLabel = currentBlockData && currentBlockData[0] && currentBlockData[0].displayName;
    return (
      <div className="rdw-block-wrapper" aria-label="rdw-block-control">
        <Dropdown
          className={classNames('rdw-block-dropdown', className)}
          optionWrapperClassName={classNames(dropdownClassName)}
          onChange={onChange}
          expanded={expanded}
          doExpand={doExpand}
          doCollapse={doCollapse}
          onExpandEvent={onExpandEvent}
          title={title || translations['components.controls.blocktype.blocktype']}
        >
          <span>{currentLabel || translations['components.controls.blocktype.blocktype']}</span>
          {
            blocks.map((block, index) =>
              (<DropdownOption
                active={blockType === block.label}
                value={block.label}
                key={index}
              >
                {block.displayName}
              </DropdownOption>))
          }
        </Dropdown>
      </div>
    );
  }

  render(): void {
    const { config } = this.props;
    const { inDropdown } = config;
    const { blockTypes } = this.state;
    const blocks = blockTypes.filter(({ label }) => config.options.includes(label));
    return inDropdown ? this.renderInDropdown(blocks) : this.renderFlat(blocks);
  }
}

export default LayoutComponent;