{"size": 2557, "ext": "js", "max_stars_repo_path": "src/scripts/components/range-selection/dragger.js", "max_stars_repo_name": "nasa-gibs/worldview-timeline-components", "max_stars_repo_stars_event_min_datetime": "2016-12-17T03:30:31.000Z", "max_stars_repo_stars_event_max_datetime": "2018-07-03T13:15:39.000Z", "max_issues_repo_path": "src/scripts/components/range-selection/dragger.js", "max_issues_repo_name": "nasa-gibs/worldview-components", "max_issues_repo_issues_event_min_datetime": "2016-12-05T22:15:16.000Z", "max_issues_repo_issues_event_max_datetime": "2018-09-25T13:43:12.000Z", "max_forks_repo_path": "src/scripts/components/range-selection/dragger.js", "max_forks_repo_name": "nasa-gibs/worldview-timeline-components", "max_forks_repo_forks_event_min_datetime": "2016-12-18T08:17:27.000Z", "max_forks_repo_forks_event_max_datetime": "2017-01-20T21:55:38.000Z"}
{"max_stars_count": 6, "max_issues_count": 24, "max_forks_count": 4, "avg_line_length": 24.1226415094, "max_line_length": 119, "alphanum_fraction": 0.564333203}
import React from 'react';
import PropTypes from 'prop-types';
import Draggable from 'react-draggable';

/*
 * A react component, is a draggable svg
 * group
 *
 * @class TimelineDragger
 * @extends React.Component
 */
class TimelineDragger extends React.Component {
  /*
   * @constructor
   */
  checkVisibility() {
    var visibility = 'visible';
    if (this.props.position < 0 || this.props.position > this.props.max) {
      visibility = 'hidden';
    }
    this.state = {
      visibility: visibility
    };
  }
  /*
   * When the component is dragged,
   * this function passes the id
   * and change-in-x of the drag
   * to onDrag callback
   *
   * @method handleDrag
   *
   * @return {void}
   */
  handleDrag(e, d) {
    e.stopPropagation();
    this.props.onDrag(d.deltaX, this.props.id);
  }

  /*
   * @method render
   */
  render() {
    this.checkVisibility();
    return (
      <Draggable
        onDrag={this.handleDrag.bind(this)}
        position={{x: this.props.position, y: 0}}
        onStop={this.props.onStop}
        axis="x"
      >
        <g>
          <rect
            width={this.props.width}
            height={this.props.height}
            style={{
              fill: this.props.color,
              visibility: this.state.visibility
            }}
          />
          {
            /*
             * this polygon element builds a triangle
             * based on the width and height of the
             * rectangle element
             */
          }
          <polygon
            points={'0,0,' + this.props.height / 1.5 + ',0 ' + this.props.height / 3 + ', ' + this.props.height / 1.5 }
            transform={'translate(' + (-(this.props.width * 2.45)) + ', ' + (-(this.props.height / 2)) + ')'}
            id={this.props.draggerID}
            style={{
              fill: this.props.triangleColor,
              visibility: this.state.visibility,
              stroke: '#000',
              cursor: 'pointer'
            }}
          />
        </g>
      </Draggable>
    );
  }
}
TimelineDragger.defaultProps = {
  visible: true
};

TimelineDragger.propTypes = {
  opacity: PropTypes.number,
  startLocation: PropTypes.number,
  endLocation: PropTypes.number,
  max: PropTypes.number,
  height: PropTypes.number,
  onDrag: PropTypes.func,
  onClick: PropTypes.func,
  color: PropTypes.string,
  position: PropTypes.number,
  id: PropTypes.string,
  onStop: PropTypes.func,
  width: PropTypes.number,
  triangleColor: PropTypes.string,
  draggerID: PropTypes.string
};

export default TimelineDragger;
