rc-cropping@1.0.0

// use jsx to render html, do not modify simple.html

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import { Cropper } from 'rc-cropping';

import 'rc-cropping/assets/index.css';
import 'rc-dialog/assets/index.css';


function CropperContainer(props) {
  return (<div>
    {props.title}
    {props.children}
    {props.footer}
  </div>);
}

CropperContainer.propTypes = {
  title: PropTypes.any,
  children: PropTypes.any,
  footer: PropTypes.any,
};


class Test extends React.Component {
  constructor() {
    super();
    this.state = {
      file: null,
      croppedFile: null,
    };
  }
  onChange = () => {
    this.setState({ file: this.refs.file.files[0] });
  }
  croppeFile = (fileBlob) => {
    const reader = new FileReader();
    reader.readAsDataURL(fileBlob);
    reader.onload = () => {
      this.setState({
        croppedFile: reader.result,
      });
    };
  }
  render() {
    const { croppedFile, file } = this.state;
    if (croppedFile) {
      return <img src={croppedFile} />;
    }
    if (!file) {
      return <input type="file" onChange={this.onChange} ref="file" />;
    }
    return (<Cropper
      size={[64, 64]}
      file={this.state.file}
      getSpinContent={() => <span>loading...</span> }
      renderModal={(props) => <CropperContainer {...props} />}
      onChange={this.croppeFile}
    />);
  }
}

ReactDOM.render(<Test />, document.getElementById('__react-content'));