{"size": 1016, "ext": "js", "max_stars_repo_path": "src/components/MovementVisualizer/component.js", "max_stars_repo_name": "ukrainian256/real-time-chart-playground", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/MovementVisualizer/component.js", "max_issues_repo_name": "ukrainian256/real-time-chart-playground", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/MovementVisualizer/component.js", "max_forks_repo_name": "ukrainian256/real-time-chart-playground", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 28.2222222222, "max_line_length": 108, "alphanum_fraction": 0.5570866142}
import React, {Component} from 'react';
import {PropTypes} from 'prop-types';
import {Motion, spring} from 'react-motion';

export default class MovementVisualizer extends Component {

    static propTypes = {
        objects: PropTypes.arrayOf(PropTypes.shape({
            name: PropTypes.string.isRequired,
            x: PropTypes.number.isRequired,
            y: PropTypes.number.isRequired,
            height: PropTypes.number.isRequired,
            width: PropTypes.number.isRequired
        }))
    };

    componentWillReceiveProps(newProps) {

    }

    render() {

        return <Motion style={{x: spring(this.props.x), y: spring(this.props.y)}}>
            {
                ({x, y}) =>
                    <div className="movementVisualizerContainer">
                        <div className="movementVisualizerObject"
                             style={{height: this.props.height, width: this.props.width, top: y, left: x}}/>
                    </div>
            }
        </Motion>;

    }

}
