text: /* @flow */
  
  import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import {
    toggleCustomInlineStyle,
    getSelectionCustomInlineStyle,
  } from 'draftjs-utils';
  
  import LayoutComponent from './Component';
  
  export default class FontSize extends Component {
    static propTypes = {
      onChange: PropTypes.func.isRequired,
      editorState: PropTypes.object,
      modalHandler: PropTypes.object,
      config: PropTypes.object,
      translations: PropTypes.object,
      wrapperId: PropTypes.string,
    };
  
    state: Object = {
      expanded: undefined,
      currentFontSize: undefined,
    };
  
    componentWillMount(): void {
      const { editorState, modalHandler } = this.props;
      if (editorState) {
        this.setState({
          currentFontSize:
            getSelectionCustomInlineStyle(editorState, ['FONTSIZE']).FONTSIZE,
        });
      }
      modalHandler.registerCallBack(this.expandCollapse);
    }
  
    componentWillReceiveProps(properties: Object): void {
      if (properties.editorState &&
        this.props.editorState !== properties.editorState) {
        this.setState({
          currentFontSize:
            getSelectionCustomInlineStyle(properties.editorState, ['FONTSIZE']).FONTSIZE,
        });
      }
    }
  
    componentWillUnmount(): void {
      const { modalHandler } = this.props;
      modalHandler.deregisterCallBack(this.expandCollapse);
    }
  
    onExpandEvent: Function = (): void => {
      this.signalExpanded = !this.state.expanded;
    };
  
    expandCollapse: Function = (): void => {
      this.setState({
        expanded: this.signalExpanded,
      });
      this.signalExpanded = false;
    }
  
    doExpand: Function = (): void => {
      this.setState({
        expanded: true,
      });
    };
  
    doCollapse: Function = (): void => {
      this.setState({
        expanded: false,
      });
    };
  
    toggleFontSize: Function = (fontSize: number) => {
      const { editorState, onChange } = this.props;
      const newState = toggleCustomInlineStyle(
        editorState,
        'fontSize',
        fontSize,
      );
      if (newState) {
        onChange(newState);
      }
    };
  
    render(): Object {
      const { config, translations, wrapperId } = this.props;
      const { expanded, currentFontSize } = this.state;
      const FontSizeComponent = config.component || LayoutComponent;
      const fontSize = currentFontSize && Number(currentFontSize.substring(9));
      return (
        <FontSizeComponent
          wrapperId={wrapperId}
          config={config}
          translations={translations}
          currentState={{ fontSize }}
          onChange={this.toggleFontSize}
          expanded={expanded}
          onExpandEvent={this.onExpandEvent}
          doExpand={this.doExpand}
          doCollapse={this.doCollapse}
        />
      );
    }
  }
  