react-image-hotspots
Version:
React component for rendering images with hotspots
45 lines (44 loc) • 4.02 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "default", {
enumerable: true,
get: function() {
return _default;
}
});
const _react = /*#__PURE__*/ _interop_require_default(require("react"));
const _proptypes = /*#__PURE__*/ _interop_require_default(require("prop-types"));
function _interop_require_default(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
class Hotspot extends _react.default.Component {
render() {
const { x, y, content, style = {
fontFamily: 'Sans-Serif',
background: 'white',
boxShadow: '0px 0px 2px 0px rgba(0,0,0,0.5)',
pointerEvents: 'auto'
} } = this.props;
const hotspotStyle = Object.assign({
position: 'absolute',
display: 'block',
top: y + '%',
left: x + '%'
}, style);
return /*#__PURE__*/ _react.default.createElement("div", {
style: hotspotStyle
}, content);
}
}
Hotspot.propTypes = {
/** percentage from the left of the image to show this hotspot */ x: _proptypes.default.number,
/** percentage from the top of the image to show this hotspot */ y: _proptypes.default.number,
/** the content of the hotspot */ content: _proptypes.default.element,
/** the style of the hotspot */ style: _proptypes.default.object
};
const _default = Hotspot;
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Ib3RzcG90LmpzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcydcblxuY2xhc3MgSG90c3BvdCBleHRlbmRzIFJlYWN0LkNvbXBvbmVudCB7XG4gIHJlbmRlciAoKSB7XG4gICAgY29uc3Qge1xuICAgICAgeCwgeSwgY29udGVudCwgc3R5bGUgPSB7XG4gICAgICAgIGZvbnRGYW1pbHk6ICdTYW5zLVNlcmlmJyxcbiAgICAgICAgYmFja2dyb3VuZDogJ3doaXRlJyxcbiAgICAgICAgYm94U2hhZG93OiAnMHB4IDBweCAycHggMHB4IHJnYmEoMCwwLDAsMC41KScsXG4gICAgICAgIHBvaW50ZXJFdmVudHM6ICdhdXRvJ1xuICAgICAgfVxuICAgIH0gPSB0aGlzLnByb3BzXG5cbiAgICBjb25zdCBob3RzcG90U3R5bGUgPSBPYmplY3QuYXNzaWduKHtcbiAgICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgICAgZGlzcGxheTogJ2Jsb2NrJyxcbiAgICAgIHRvcDogeSArICclJyxcbiAgICAgIGxlZnQ6IHggKyAnJSdcbiAgICB9LCBzdHlsZSlcblxuICAgIHJldHVybiA8ZGl2IHN0eWxlPXtob3RzcG90U3R5bGV9Pntjb250ZW50fTwvZGl2PlxuICB9XG59XG5cbkhvdHNwb3QucHJvcFR5cGVzID0ge1xuICAvKiogcGVyY2VudGFnZSBmcm9tIHRoZSBsZWZ0IG9mIHRoZSBpbWFnZSB0byBzaG93IHRoaXMgaG90c3BvdCAqL1xuICB4OiBQcm9wVHlwZXMubnVtYmVyLFxuICAvKiogcGVyY2VudGFnZSBmcm9tIHRoZSB0b3Agb2YgdGhlIGltYWdlIHRvIHNob3cgdGhpcyBob3RzcG90ICovXG4gIHk6IFByb3BUeXBlcy5udW1iZXIsXG4gIC8qKiB0aGUgY29udGVudCBvZiB0aGUgaG90c3BvdCAqL1xuICBjb250ZW50OiBQcm9wVHlwZXMuZWxlbWVudCxcbiAgLyoqIHRoZSBzdHlsZSBvZiB0aGUgaG90c3BvdCAqL1xuICBzdHlsZTogUHJvcFR5cGVzLm9iamVjdFxufVxuXG5leHBvcnQgZGVmYXVsdCBIb3RzcG90XG4iXSwibmFtZXMiOlsiSG90c3BvdCIsIlJlYWN0IiwiQ29tcG9uZW50IiwicmVuZGVyIiwieCIsInkiLCJjb250ZW50Iiwic3R5bGUiLCJmb250RmFtaWx5IiwiYmFja2dyb3VuZCIsImJveFNoYWRvdyIsInBvaW50ZXJFdmVudHMiLCJwcm9wcyIsImhvdHNwb3RTdHlsZSIsIk9iamVjdCIsImFzc2lnbiIsInBvc2l0aW9uIiwiZGlzcGxheSIsInRvcCIsImxlZnQiLCJkaXYiLCJwcm9wVHlwZXMiLCJQcm9wVHlwZXMiLCJudW1iZXIiLCJlbGVtZW50Iiwib2JqZWN0Il0sIm1hcHBpbmdzIjoiOzs7OytCQW9DQTs7O2VBQUE7Ozs4REFwQ2tCO2tFQUNJOzs7Ozs7QUFFdEIsTUFBTUEsZ0JBQWdCQyxjQUFLLENBQUNDLFNBQVM7SUFDbkNDLFNBQVU7UUFDUixNQUFNLEVBQ0pDLENBQUMsRUFBRUMsQ0FBQyxFQUFFQyxPQUFPLEVBQUVDLFFBQVE7WUFDckJDLFlBQVk7WUFDWkMsWUFBWTtZQUNaQyxXQUFXO1lBQ1hDLGVBQWU7UUFDakIsQ0FBQyxFQUNGLEdBQUcsSUFBSSxDQUFDQyxLQUFLO1FBRWQsTUFBTUMsZUFBZUMsT0FBT0MsTUFBTSxDQUFDO1lBQ2pDQyxVQUFVO1lBQ1ZDLFNBQVM7WUFDVEMsS0FBS2IsSUFBSTtZQUNUYyxNQUFNZixJQUFJO1FBQ1osR0FBR0c7UUFFSCxxQkFBTyw2QkFBQ2E7WUFBSWIsT0FBT007V0FBZVA7SUFDcEM7QUFDRjtBQUVBTixRQUFRcUIsU0FBUyxHQUFHO0lBQ2xCLCtEQUErRCxHQUMvRGpCLEdBQUdrQixrQkFBUyxDQUFDQyxNQUFNO0lBQ25CLDhEQUE4RCxHQUM5RGxCLEdBQUdpQixrQkFBUyxDQUFDQyxNQUFNO0lBQ25CLCtCQUErQixHQUMvQmpCLFNBQVNnQixrQkFBUyxDQUFDRSxPQUFPO0lBQzFCLDZCQUE2QixHQUM3QmpCLE9BQU9lLGtCQUFTLENBQUNHLE1BQU07QUFDekI7TUFFQSxXQUFlekIifQ==