{"size": 1840, "ext": "js", "max_stars_repo_path": "app/components/ResizableBox.js", "max_stars_repo_name": "codetony25/FermionJS", "max_stars_repo_stars_event_min_datetime": "2017-08-07T19:20:38.000Z", "max_stars_repo_stars_event_max_datetime": "2022-01-07T07:54:57.000Z", "max_issues_repo_path": "app/components/ResizableBox.js", "max_issues_repo_name": "codetony25/FermionJS", "max_issues_repo_issues_event_min_datetime": "2017-08-11T05:07:00.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-25T18:47:51.000Z", "max_forks_repo_path": "app/components/ResizableBox.js", "max_forks_repo_name": "codetony25/FermionJS", "max_forks_repo_forks_event_min_datetime": "2017-09-04T20:17:13.000Z", "max_forks_repo_forks_event_max_datetime": "2019-11-18T01:00:39.000Z"}
{"max_stars_count": 222, "max_issues_count": 14, "max_forks_count": 5, "avg_line_length": 29.6774193548, "max_line_length": 103, "alphanum_fraction": 0.6152173913}
// @flow
import React from 'react';
import Resizable from 'react-resizable/build/Resizable';

// An example use of Resizable.
export default class ResizableBox extends React.Component {

  onResize(e, data) {
    const { size } = data;
    const { width, height } = size;

    if (this.props.onResize) {
      e.persist && e.persist();
      this.setState(size, () => this.props.onResize && this.props.onResize(e, data));
    } else {
      this.setState(size);
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.width !== this.props.width || nextProps.height !== this.props.height) {
      this.setState({
        width: nextProps.width,
        height: nextProps.height
      });
    }
  }

  render() {
    // Basic wrapper around a Resizable instance.
    // If you use Resizable directly, you are responsible for updating the child component
    // with a new width and height.
    const { handleSize, onResize, onResizeStart, onResizeStop, draggableOpts,
         minConstraints, maxConstraints, lockAspectRatio, axis, width, height, ...props } = this.props;
    return (
      // $FlowIgnore children & defaultProps bug (https://github.com/facebook/flow/issues/1964)
      <Resizable
        handleSize={handleSize}
        width={this.state.width}
        height={this.state.height}
        onResizeStart={onResizeStart}
        onResize={this.onResize}
        onResizeStop={onResizeStop}
        draggableOpts={draggableOpts}
        minConstraints={minConstraints}
        maxConstraints={maxConstraints}
        lockAspectRatio={lockAspectRatio}
        axis={axis}
      >
        <div
          style={{
            width: `${this.state.width}px`,
            height: `${this.state.height}px`,
            display: 'inline-block'
          }}
          {...props}
        />
      </Resizable>
    );
  }
}
