{"size": 1606, "ext": "js", "max_stars_repo_path": "src/projected-layer.js", "max_stars_repo_name": "isabella232/react-mapbox-gl", "max_stars_repo_stars_event_min_datetime": "2017-03-12T13:23:15.000Z", "max_stars_repo_stars_event_max_datetime": "2020-10-07T16:48:51.000Z", "max_issues_repo_path": "src/projected-layer.js", "max_issues_repo_name": "unsplash/react-mapbox-gl", "max_issues_repo_issues_event_min_datetime": "2021-02-26T11:20:58.000Z", "max_issues_repo_issues_event_max_datetime": "2021-02-26T11:20:58.000Z", "max_forks_repo_path": "src/projected-layer.js", "max_forks_repo_name": "isabella232/react-mapbox-gl", "max_forks_repo_forks_event_min_datetime": "2021-02-26T11:20:03.000Z", "max_forks_repo_forks_event_max_datetime": "2021-02-26T11:20:03.000Z"}
{"max_stars_count": 6, "max_issues_count": 1, "max_forks_count": 1, "avg_line_length": 19.5853658537, "max_line_length": 80, "alphanum_fraction": 0.6114570361}
import React, { PropTypes } from 'react';
import {
  OverlayPropTypes,
  overlayState,
  overlayTransform,
} from './util/overlays';

const defaultStyle = {
  zIndex: 3,
};

export default class ProjectedLayer extends React.Component {
  static contextTypes = {
    map: PropTypes.object,
  };

  static propTypes = {
    coordinates: PropTypes.arrayOf(PropTypes.number).isRequired,
    anchor: OverlayPropTypes.anchor,
    offset: OverlayPropTypes.offset,
    children: PropTypes.node,
    onClick: PropTypes.func,
    style: PropTypes.object,
  };

  static defaultProps = {
    offset: 0,
    onClick: (...args) => args,
  };

  state = {};

  setContainer = (el) => {
    if (el) {
      this.container = el;
    }
  };

  handleMapMove = () => {
    if (!this.prevent) {
      this.setState(overlayState(this.props, this.context.map, this.container));
    }
  };

  componentDidMount() {
    const { map } = this.context;

    map.on('move', this.handleMapMove);
    // Now this.container is rendered and the size of container is known.
    // Recalculate the anchor/position
    this.handleMapMove();
  }

  componentWillUnmount() {
    const { map } = this.context;

    this.prevent = true;

    map.off('move', this.handleMapMove);
  }

  render() {
    const { style, children, className } = this.props;

    const finalStyle = {
      ...defaultStyle,
      ...style,
      transform: overlayTransform(this.state).join(' '),
    };

    return (
      <div
        className={className}
        style={finalStyle}
        ref={this.setContainer}>
        { children }
      </div>
    );
  }
}

