blixify-ui-web 0.2.9 → 0.2.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,20 +1,10 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { ReactElement } from "react";
|
|
2
2
|
import "../../../index.css";
|
|
3
3
|
interface Props {
|
|
4
|
-
content:
|
|
4
|
+
content: ReactElement;
|
|
5
5
|
icon: ReactElement;
|
|
6
|
-
type: "
|
|
7
|
-
infoTextColor?: string;
|
|
8
|
-
infoCardClassName?: string;
|
|
9
|
-
infoCardBackgroundColor?: string;
|
|
10
|
-
}
|
|
11
|
-
interface State {
|
|
12
|
-
open: boolean;
|
|
13
|
-
}
|
|
14
|
-
export declare class InfoWindow extends Component<Props> {
|
|
15
|
-
state: State;
|
|
16
|
-
renderLayout: () => React.JSX.Element;
|
|
17
|
-
render(): React.JSX.Element;
|
|
6
|
+
type: "left" | "right";
|
|
18
7
|
}
|
|
8
|
+
export declare const InfoWindow: (props: Props) => React.JSX.Element;
|
|
19
9
|
export {};
|
|
20
10
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/advanced/infoWindow/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/advanced/infoWindow/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,YAAY,EAA+B,MAAM,OAAO,CAAC;AAEzE,OAAO,oBAAoB,CAAC;AAE5B,UAAU,KAAK;IACb,OAAO,EAAE,YAAY,CAAC;IACtB,IAAI,EAAE,YAAY,CAAC;IACnB,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,UAAW,KAAK,sBAoDtC,CAAC"}
|
|
@@ -1,19 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __extends = (this && this.__extends) || (function () {
|
|
3
|
-
var extendStatics = function (d, b) {
|
|
4
|
-
extendStatics = Object.setPrototypeOf ||
|
|
5
|
-
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
6
|
-
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
7
|
-
return extendStatics(d, b);
|
|
8
|
-
};
|
|
9
|
-
return function (d, b) {
|
|
10
|
-
if (typeof b !== "function" && b !== null)
|
|
11
|
-
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
12
|
-
extendStatics(d, b);
|
|
13
|
-
function __() { this.constructor = d; }
|
|
14
|
-
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
15
|
-
};
|
|
16
|
-
})();
|
|
17
2
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
18
3
|
if (k2 === undefined) k2 = k;
|
|
19
4
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -37,57 +22,55 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
37
22
|
__setModuleDefault(result, mod);
|
|
38
23
|
return result;
|
|
39
24
|
};
|
|
25
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
+
};
|
|
40
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
41
29
|
exports.InfoWindow = void 0;
|
|
42
30
|
var react_1 = __importStar(require("react"));
|
|
31
|
+
var react_dom_1 = __importDefault(require("react-dom"));
|
|
43
32
|
require("../../../index.css");
|
|
44
|
-
var InfoWindow =
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
33
|
+
var InfoWindow = function (props) {
|
|
34
|
+
var iconRef = (0, react_1.useRef)(null);
|
|
35
|
+
var _a = (0, react_1.useState)(false), isVisible = _a[0], setIsVisible = _a[1];
|
|
36
|
+
var _b = (0, react_1.useState)({ top: 0, left: 0 }), position = _b[0], setPosition = _b[1];
|
|
37
|
+
(0, react_1.useEffect)(function () {
|
|
38
|
+
var iconElement = iconRef.current;
|
|
39
|
+
var handleMouseEnter = function (event) {
|
|
40
|
+
var clientX = event.clientX, clientY = event.clientY;
|
|
41
|
+
setPosition({ top: clientY, left: clientX });
|
|
42
|
+
setIsVisible(true);
|
|
50
43
|
};
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
var layoutClassName = "";
|
|
54
|
-
var arrowClasses = "w-3 h-3 ".concat(_this.props.infoCardBackgroundColor
|
|
55
|
-
? _this.props.infoCardBackgroundColor
|
|
56
|
-
: "bg-gray-200", " transform rotate-45 ");
|
|
57
|
-
var arrowPosition = "";
|
|
58
|
-
switch (_this.props.type) {
|
|
59
|
-
case "top":
|
|
60
|
-
layoutClassName = "".concat(defaultClassName, " mb-7 flex flex-col");
|
|
61
|
-
arrowPosition = "-mt-1.5";
|
|
62
|
-
break;
|
|
63
|
-
case "left":
|
|
64
|
-
layoutClassName = "".concat(defaultClassName, " top-0 right-7 flex flex-row ");
|
|
65
|
-
arrowPosition = "-ml-1.5";
|
|
66
|
-
break;
|
|
67
|
-
default:
|
|
68
|
-
layoutClassName = "".concat(defaultClassName, " top-0 ml-7 flex flex-row ");
|
|
69
|
-
arrowPosition = "-mr-1.5";
|
|
70
|
-
}
|
|
71
|
-
return (react_1.default.createElement("div", { className: layoutClassName },
|
|
72
|
-
_this.props.type === "right" && (react_1.default.createElement("div", { className: "".concat(arrowClasses, " ").concat(arrowPosition) })),
|
|
73
|
-
react_1.default.createElement("div", { className: "w-full p-4 ".concat(_this.props.infoCardBackgroundColor
|
|
74
|
-
? _this.props.infoCardBackgroundColor
|
|
75
|
-
: "bg-gray-200", " rounded z-10") },
|
|
76
|
-
react_1.default.createElement("p", { className: _this.props.infoTextColor
|
|
77
|
-
? _this.props.infoTextColor
|
|
78
|
-
: "text-gray-500" }, _this.props.content && _this.props.content)),
|
|
79
|
-
_this.props.type !== "right" && (react_1.default.createElement("div", { className: "".concat(arrowClasses, " ").concat(arrowPosition) }))));
|
|
44
|
+
var handleMouseLeave = function () {
|
|
45
|
+
setIsVisible(false);
|
|
80
46
|
};
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
47
|
+
iconElement === null || iconElement === void 0 ? void 0 : iconElement.addEventListener("mouseenter", handleMouseEnter);
|
|
48
|
+
iconElement === null || iconElement === void 0 ? void 0 : iconElement.addEventListener("mouseleave", handleMouseLeave);
|
|
49
|
+
return function () {
|
|
50
|
+
iconElement === null || iconElement === void 0 ? void 0 : iconElement.removeEventListener("mouseenter", handleMouseEnter);
|
|
51
|
+
iconElement === null || iconElement === void 0 ? void 0 : iconElement.removeEventListener("mouseleave", handleMouseLeave);
|
|
52
|
+
};
|
|
53
|
+
}, [isVisible]);
|
|
54
|
+
(0, react_1.useEffect)(function () {
|
|
55
|
+
if (isVisible) {
|
|
56
|
+
var popoutElement_1 = document.createElement("div");
|
|
57
|
+
popoutElement_1.className =
|
|
58
|
+
"absolute z-50 " +
|
|
59
|
+
(props.type === "left" ? "transform -translate-x-full" : "");
|
|
60
|
+
popoutElement_1.style.position = "absolute";
|
|
61
|
+
popoutElement_1.style.top = "".concat(position.top, "px");
|
|
62
|
+
popoutElement_1.style.left = "".concat(position.left, "px");
|
|
63
|
+
document.body.appendChild(popoutElement_1);
|
|
64
|
+
react_dom_1.default.render(props.content, popoutElement_1);
|
|
65
|
+
return function () {
|
|
66
|
+
document.body.removeChild(popoutElement_1);
|
|
67
|
+
react_dom_1.default.unmountComponentAtNode(popoutElement_1);
|
|
68
|
+
};
|
|
69
|
+
}
|
|
70
|
+
return function () { };
|
|
71
|
+
}, [isVisible, props.content, props.type, position.top, position.left]);
|
|
72
|
+
var refIcon = react_1.default.cloneElement(props.icon, { ref: iconRef });
|
|
73
|
+
return react_1.default.createElement("div", null, refIcon);
|
|
74
|
+
};
|
|
92
75
|
exports.InfoWindow = InfoWindow;
|
|
93
76
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/advanced/infoWindow/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/advanced/infoWindow/index.tsx"],"names":[],"mappings":"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"}
|