content: import React from 'react';
  import PropTypes from 'prop-types';
  import { Editor } from 'react-draft-wysiwyg';
  
  export default class TabUploadPost extends React.Component {
    static propTypes = {
      state: PropTypes.object,
      onEditorStateChange: PropTypes.func,
      uploadImageCallBack: PropTypes.func,
      toggleChangeTextFormatPostButton: PropTypes.func,
      savePost: PropTypes.func,
      changePostType: PropTypes.func,
      postTypeText: PropTypes.string,
    };
    render() {
      const { editorState } = this.props.state;
      return (
        <div className="tab-pane active" id="create-post" role="tabpanel" aria-expanded="true">
          <Editor
            editorState={editorState}
            toolbarClassName="toolbarClassName"
            wrapperClassName="wrapperClassName"
            editorClassName="editorClassName"
            onEditorStateChange={this.props.onEditorStateChange}
            toolbar={{
              options: ['inline', 'blockType', 'fontSize', 'list', 'textAlign', 'colorPicker', 'link', 'embedded', 'emoji', 'image', 'remove'],
              inline: { inDropdown: true },
              list: { inDropdown: true },
              textAlign: { inDropdown: true },
              link: { inDropdown: true },
              history: { inDropdown: true },
              image: {
                uploadEnabled: true,
                alignmentEnabled: true,
                uploadCallback: this.props.uploadImageCallBack,
                inputAccept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg',
                alt: { present: false, mandatory: false },
                defaultSize: {
                  height: 'auto',
                  width: 'auto',
                },
              },
            }}
          />
          <div className="row float-right mt-1" style={{ paddingRight: '20px', paddingBottom: '5px' }}>
            <div className="btn-group mr-2">
              <button type="button" className="btn btn-sm btn-secondary dropdown-toggle float-right" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                {this.props.postTypeText}
              </button>
              <div className="dropdown-menu">
                <a className="dropdown-item" onClick={() => this.props.changePostType('photo')}>Định dạng 1(Photo)</a>
                <a className="dropdown-item" onClick={() => this.props.changePostType('withFeatureImage')}>Định dạng 2(With Feature Image)</a>
                <a className="dropdown-item" onClick={() => this.props.changePostType('quote')}>Định dạng 3 (Quote)</a>
                <a className="dropdown-item" onClick={() => this.props.changePostType('default')}>Định dạng 4 (Default)</a>
              </div>
            </div>
            <div className="btn-group mr-2">
              <button type="button" className="btn btn-sm btn-secondary dropdown-toggle float-right" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                {this.props.state.formatPostButtonText}
              </button>
              <div className="dropdown-menu">
                <a className="dropdown-item" onClick={() => this.props.toggleChangeTextFormatPostButton('public')}>Công khai</a>
                <a className="dropdown-item" onClick={() => this.props.toggleChangeTextFormatPostButton('private')}>Chỉ mình tôi</a>
              </div>
            </div>
            <button onClick={() => this.props.savePost('post')} type="button" className="btn waves-effect waves-light btn-info btn-sm">Đăng</button>
          </div>
        </div>
      );
    }
  }
  