react-geo-charts
Version:
A simple react worldmap and countrymaps component svg base
65 lines (64 loc) • 2.13 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
class SVGComponent extends _react.default.Component {
constructor(props) {
super(props);
this.state = {};
this.targetRef = /*#__PURE__*/_react.default.createRef();
this.tooltip = null;
}
onMouseEnter(e, obj, ISOIdentifier, identifierdata) {
const {
tooltipdisable
} = this.props;
if ((!tooltipdisable || !obj?.regiontooltipdisable) && !obj?.disable) {
this.tooltip = document.createElement('div');
this.tooltip.className = 'hover-badge';
this.tooltip.innerText = obj?.identifierdata || identifierdata[ISOIdentifier];
document.body.appendChild(this.tooltip);
const rect = this.targetRef.current.getBoundingClientRect();
this.tooltip.style.top = `${rect.top - 35 + window.scrollY}px`;
this.tooltip.style.left = `${rect.left + rect.width / 2 - this.tooltip.offsetWidth / 2 + window.scrollX}px`;
}
}
onMouseLeave(e, obj) {
const {
tooltipdisable
} = this.props;
if ((!tooltipdisable || !obj?.regiontooltipdisable) && !obj?.disable) {
if (this.tooltip) {
this.tooltip.remove();
this.tooltip = null;
}
}
}
render() {
const {
ISOIdentifier,
path,
fill,
stroke,
customize,
onClick,
identifierdata
} = this.props;
return /*#__PURE__*/_react.default.createElement("path", {
key: ISOIdentifier,
d: path,
fill: fill,
stroke: stroke,
"data-name": ISOIdentifier,
className: `${customize[ISOIdentifier]?.disable ? "path-disable" : ""} ${ISOIdentifier.toLowerCase()}`,
onClick: e => onClick(e, ISOIdentifier),
ref: this.targetRef,
onMouseEnter: e => this.onMouseEnter(e, customize[ISOIdentifier], ISOIdentifier, identifierdata),
onMouseLeave: e => this.onMouseLeave(e, customize[ISOIdentifier])
});
}
}
exports.default = SVGComponent;