{"size": 2066, "ext": "js", "max_stars_repo_path": "src/components/Pin.js", "max_stars_repo_name": "AlesJiranek/react-dnd-node-graph", "max_stars_repo_stars_event_min_datetime": "2016-07-02T15:41:22.000Z", "max_stars_repo_stars_event_max_datetime": "2017-08-06T13:08:02.000Z", "max_issues_repo_path": "src/components/Pin.js", "max_issues_repo_name": "AlesJiranek/react-dnd-node-graph", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Pin.js", "max_forks_repo_name": "AlesJiranek/react-dnd-node-graph", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 2, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 26.8311688312, "max_line_length": 147, "alphanum_fraction": 0.6195546951}
import React, {PropTypes} from 'react';


export default class Pin extends React.Component {

  static propTypes = {
    endConnector: PropTypes.func.isRequired,
    getNodeId: PropTypes.func.isRequired,
    getPinId: PropTypes.func.isRequired,
    getPinTitle: PropTypes.func,
    node: PropTypes.object.isRequired,
    pin: PropTypes.object.isRequired,
    pinStyle: PropTypes.object.isRequired,
    startConnector: PropTypes.func.isRequired
  };


  getTitle() {
    const {getPinTitle, pin} = this.props;

    if (typeof getPinTitle === 'function') return getPinTitle(pin);
    return pin.title;
  }


  getStyle() {
    const {pinStyle} = this.props;

    return Object.assign({}, {
      textAlign: 'center'
    }, pinStyle);
  }


  startConnector(e) {
    const {getNodeId, getPinId, node, pin, startConnector} = this.props;
    const nodeId = getNodeId(node);
    const pinId = getPinId(pin);

    startConnector(e, {nodeId, pinId});
  }


  endConnector(e) {
    const {endConnector, getNodeId, getPinId, node, pin} = this.props;
    const nodeId = getNodeId(node);
    const pinId = getPinId(pin);

    endConnector(e, {nodeId, pinId});
  }


  render() {
    const style = this.getStyle();

    return (
      <div style={style}>
        <span className="rdng-pin-in" onMouseUp={e => this.endConnector(e)} style={{float: 'left', height: style.height, cursor: style.cursor}}>
           <svg height={style.height} width={style.height}>
            <circle r="4" fill="none" stroke="black" strokeWidth="1" cx={style.height / 2} cy={style.height / 2} />
          </svg>
        </span>
        <span className="rdng-pin-title">
          {this.getTitle()}
        </span>
        <span className="rdng-pin-out" onMouseDown={e => this.startConnector(e)} style={{float: 'right', cursor: 'pointer', height: style.height}}>
          <svg height={style.height} width={style.height}>
            <circle r="4" fill="none" stroke="black" strokeWidth="1" cx={style.height / 2} cy={style.height / 2} />
          </svg>
        </span>
      </div>
    );

  }

}
