@madup-inc/react-imagemarker/dist/index.js

Awesome react image marker

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);

function DefaultMarker(_ref) {
  var id = _ref.id;
  return React__default.createElement("div", {
    className: 'default-marker'
  }, React__default.createElement("div", null, id));
}

var index = (function (_ref) {
  var src = _ref.src,
      markers = _ref.markers,
      onImageClick = _ref.onImageClick;
  var wrapperRef = React.useRef(null);

  var handleClick = function handleClick(clickEvent) {
    var nativeEvent = clickEvent.nativeEvent;

    if (!wrapperRef || !wrapperRef.current) {
      throw Error('image wrapper is not found');
    }

    var newLocation = {
      x: nativeEvent.offsetX / wrapperRef.current.clientWidth * 100,
      y: nativeEvent.offsetY / wrapperRef.current.clientHeight * 100
    };
    onImageClick(newLocation, clickEvent, wrapperRef.current);
  };

  return React__default.createElement("div", {
    className: "react-imagemarker",
    style: {
      background: "url(" + src + ") center center / contain no-repeat"
    },
    ref: wrapperRef,
    onClick: handleClick
  }, markers.map(function (marker) {
    return React__default.createElement("div", {
      className: "marker",
      style: {
        top: "calc(" + marker.y + "% - 10px)",
        left: "calc(" + marker.x + "% - 10px)"
      },
      onClick: function onClick(e) {
        return e.stopPropagation();
      },
      key: marker.id
    }, typeof marker.render === 'function' ? marker.render({
      id: marker.id,
      x: marker.x,
      y: marker.y
    }) : React__default.createElement(DefaultMarker, {
      id: marker.id
    }));
  }));
});

exports.DefaultMarker = DefaultMarker;
exports.default = index;
//# sourceMappingURL=index.js.map