wini-web-components 2.5.6 → 2.5.9
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.
- package/.early.coverage/v8/coverage-final.json +1 -0
- package/dist/component/popup/popup.js +14 -15
- package/dist/component/rating/rating.js +4 -4
- package/dist/component/wini-icon/winicon.d.ts +5 -1
- package/dist/component/wini-icon/winicon.js +115 -2
- package/dist/index.js +1 -1
- package/package.json +1 -1
|
@@ -84,13 +84,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
84
84
|
};
|
|
85
85
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
86
86
|
exports.Winicon = Winicon;
|
|
87
|
+
var react_dom_1 = __importDefault(require("react-dom"));
|
|
87
88
|
var react_1 = __importStar(require("react"));
|
|
88
89
|
var winicon_module_css_1 = __importDefault(require("./winicon.module.css"));
|
|
90
|
+
var text_1 = require("../text/text");
|
|
89
91
|
function Winicon(_a) {
|
|
90
92
|
var _this = this;
|
|
91
|
-
var id = _a.id, src = _a.src, link = _a.link, className = _a.className, style = _a.style, size = _a.size, color = _a.color, alt = _a.alt, onClick = _a.onClick;
|
|
93
|
+
var id = _a.id, src = _a.src, link = _a.link, className = _a.className, style = _a.style, size = _a.size, color = _a.color, alt = _a.alt, onClick = _a.onClick, tooltip = _a.tooltip;
|
|
94
|
+
var ref = (0, react_1.useRef)(null);
|
|
92
95
|
var _b = (0, react_1.useState)(), svgData = _b[0], setSvgData = _b[1];
|
|
96
|
+
var _c = (0, react_1.useState)(false), showTooltip = _c[0], setShowTooltip = _c[1];
|
|
93
97
|
var cdnSrc = "https://cdn.jsdelivr.net/gh/WiniGit/icon-library@latest/";
|
|
98
|
+
var extendAttribute = (0, react_1.useMemo)(function () {
|
|
99
|
+
if (tooltip)
|
|
100
|
+
return {
|
|
101
|
+
"tooltip-value": tooltip,
|
|
102
|
+
onMouseOver: function () { setShowTooltip(true); },
|
|
103
|
+
onMouseOut: function () { setShowTooltip(false); }
|
|
104
|
+
};
|
|
105
|
+
return {};
|
|
106
|
+
}, [tooltip]);
|
|
94
107
|
(0, react_1.useEffect)(function () {
|
|
95
108
|
if (src) {
|
|
96
109
|
fetch(cdnSrc + src + ".svg").then(function (res) { return __awaiter(_this, void 0, void 0, function () { var _a; return __generator(this, function (_b) {
|
|
@@ -117,5 +130,105 @@ function Winicon(_a) {
|
|
|
117
130
|
}); }); });
|
|
118
131
|
}
|
|
119
132
|
}, [src, link]);
|
|
120
|
-
return react_1.default.createElement(
|
|
133
|
+
return react_1.default.createElement(react_1.default.Fragment, null,
|
|
134
|
+
react_1.default.createElement("div", __assign({ ref: ref, id: id, onClick: onClick, className: "".concat(winicon_module_css_1.default['wini-icon'], " ").concat(svgData ? "" : "skeleton-loading", " ").concat(onClick ? winicon_module_css_1.default['clickable'] : '', " ").concat(className !== null && className !== void 0 ? className : '', " ").concat(src ? src.split("/").map(function (e, i) { return i === 0 ? "".concat(e, "-icon") : e.replace(" ", "-"); }).join(" ") : '').concat(link ? ' link-icon' : ""), style: (style ? __assign(__assign({}, style), { '--size': size, '--color': color }) : { '--size': size, '--color': color }), dangerouslySetInnerHTML: { __html: svgData !== null && svgData !== void 0 ? svgData : '' } }, extendAttribute)),
|
|
135
|
+
tooltip && showTooltip && react_dom_1.default.createPortal((function () {
|
|
136
|
+
var _a;
|
|
137
|
+
if (!ref.current)
|
|
138
|
+
return null;
|
|
139
|
+
var rect = ref.current.getBoundingClientRect();
|
|
140
|
+
var pos = (_a = tooltip.position) !== null && _a !== void 0 ? _a : "bottom";
|
|
141
|
+
if (document.body.offsetHeight - rect.bottom < 100 && pos === "bottom")
|
|
142
|
+
pos = "top";
|
|
143
|
+
else if (rect.top < 100 && pos === "top")
|
|
144
|
+
pos = "bottom";
|
|
145
|
+
if (document.body.offsetWidth - rect.right < 100 && pos === "right")
|
|
146
|
+
pos = "left";
|
|
147
|
+
else if (rect.left < 100 && pos === "left")
|
|
148
|
+
pos = "right";
|
|
149
|
+
switch (pos) {
|
|
150
|
+
case "top":
|
|
151
|
+
return react_1.default.createElement("div", { ref: function (r) {
|
|
152
|
+
if (r) {
|
|
153
|
+
var _r = r.getBoundingClientRect();
|
|
154
|
+
if (_r.x < 0) {
|
|
155
|
+
r.style.left = "0px";
|
|
156
|
+
r.style.transform = "translateX(0)";
|
|
157
|
+
r.style.alignItems = "start";
|
|
158
|
+
}
|
|
159
|
+
else if (_r.right > document.body.offsetWidth) {
|
|
160
|
+
r.style.left = "unset";
|
|
161
|
+
r.style.right = "0px";
|
|
162
|
+
r.style.transform = "translateX(0)";
|
|
163
|
+
r.style.alignItems = "end";
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
}, className: "col ".concat(winicon_module_css_1.default['tooltip-container']), style: { alignItems: "center", bottom: document.body.offsetHeight - rect.top - 4, left: rect.left + (rect.width / 2), transform: "translateX(-50%)" } },
|
|
167
|
+
react_1.default.createElement(text_1.Text, { className: "body-3 ".concat(winicon_module_css_1.default['tooltip-message']), maxLine: 2 }, tooltip.message),
|
|
168
|
+
react_1.default.createElement("div", { className: "row", style: { padding: "0 1.2rem", transform: "translateY(-0.2rem)" } },
|
|
169
|
+
react_1.default.createElement("div", { style: { borderLeft: "0.6rem solid transparent", borderRight: "0.6rem solid transparent", borderTop: "0.8rem solid var(--neutral-main-reverse-background-color)", borderRadius: 2 } })));
|
|
170
|
+
case "bottom":
|
|
171
|
+
return react_1.default.createElement("div", { ref: function (r) {
|
|
172
|
+
if (r) {
|
|
173
|
+
var _r = r.getBoundingClientRect();
|
|
174
|
+
if (_r.x < 0) {
|
|
175
|
+
r.style.left = "0px";
|
|
176
|
+
r.style.transform = "translateX(0)";
|
|
177
|
+
r.style.alignItems = "start";
|
|
178
|
+
}
|
|
179
|
+
else if (_r.right > document.body.offsetWidth) {
|
|
180
|
+
r.style.left = "unset";
|
|
181
|
+
r.style.right = "0px";
|
|
182
|
+
r.style.transform = "translateX(0)";
|
|
183
|
+
r.style.alignItems = "end";
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
}, className: "col ".concat(winicon_module_css_1.default['tooltip-container']), style: { alignItems: "center", top: rect.bottom + 4, left: rect.left + (rect.width / 2), transform: "translateX(-50%)" } },
|
|
187
|
+
react_1.default.createElement("div", { className: "row", style: { padding: "0 1.2rem", transform: "translateY(0.2rem)" } },
|
|
188
|
+
react_1.default.createElement("div", { style: { borderLeft: "0.6rem solid transparent", borderRight: "0.6rem solid transparent", borderBottom: "0.8rem solid var(--neutral-main-reverse-background-color)", borderRadius: 2 } })),
|
|
189
|
+
react_1.default.createElement(text_1.Text, { className: "body-3 ".concat(winicon_module_css_1.default['tooltip-message']), maxLine: 2 }, tooltip.message));
|
|
190
|
+
case "left":
|
|
191
|
+
return react_1.default.createElement("div", { ref: function (r) {
|
|
192
|
+
if (r) {
|
|
193
|
+
var _r = r.getBoundingClientRect();
|
|
194
|
+
if (_r.y < 0) {
|
|
195
|
+
r.style.top = "0px";
|
|
196
|
+
r.style.transform = "translateY(0)";
|
|
197
|
+
r.style.alignItems = "start";
|
|
198
|
+
}
|
|
199
|
+
else if (_r.right > document.body.offsetWidth) {
|
|
200
|
+
r.style.top = "unset";
|
|
201
|
+
r.style.bottom = "0px";
|
|
202
|
+
r.style.transform = "translateY(0)";
|
|
203
|
+
r.style.alignItems = "end";
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
}, className: "row ".concat(winicon_module_css_1.default['tooltip-container']), style: { top: rect.top + (rect.height / 2), right: document.body.offsetWidth - rect.left - 4, transform: "translateY(-50%)" } },
|
|
207
|
+
react_1.default.createElement(text_1.Text, { className: "body-3 ".concat(winicon_module_css_1.default['tooltip-message']), maxLine: 2 }, tooltip.message),
|
|
208
|
+
react_1.default.createElement("div", { className: "row", style: { padding: "0 1.2rem", transform: "translateX(-0.2rem)" } },
|
|
209
|
+
react_1.default.createElement("div", { style: { borderTop: "0.6rem solid transparent", borderBottom: "0.6rem solid transparent", borderLeft: "0.8rem solid var(--neutral-main-reverse-background-color)", borderRadius: 2 } })));
|
|
210
|
+
case "right":
|
|
211
|
+
return react_1.default.createElement("div", { ref: function (r) {
|
|
212
|
+
if (r) {
|
|
213
|
+
var _r = r.getBoundingClientRect();
|
|
214
|
+
if (_r.y < 0) {
|
|
215
|
+
r.style.top = "0px";
|
|
216
|
+
r.style.transform = "translateY(0)";
|
|
217
|
+
r.style.alignItems = "start";
|
|
218
|
+
}
|
|
219
|
+
else if (_r.right > document.body.offsetWidth) {
|
|
220
|
+
r.style.top = "unset";
|
|
221
|
+
r.style.bottom = "0px";
|
|
222
|
+
r.style.transform = "translateY(0)";
|
|
223
|
+
r.style.alignItems = "end";
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
}, className: "row ".concat(winicon_module_css_1.default['tooltip-container']), style: { top: rect.top + (rect.height / 2), left: rect.right + 4, transform: "translateY(-50%)" } },
|
|
227
|
+
react_1.default.createElement("div", { className: "row", style: { padding: "0 1.2rem", transform: "translateX(0.2rem)" } },
|
|
228
|
+
react_1.default.createElement("div", { style: { borderTop: "0.6rem solid transparent", borderBottom: "0.6rem solid transparent", borderRight: "0.8rem solid var(--neutral-main-reverse-background-color)", borderRadius: 2 } })),
|
|
229
|
+
react_1.default.createElement(text_1.Text, { className: "body-3 ".concat(winicon_module_css_1.default['tooltip-message']), maxLine: 2 }, tooltip.message));
|
|
230
|
+
default:
|
|
231
|
+
return react_1.default.createElement("div", null);
|
|
232
|
+
}
|
|
233
|
+
})(), document.body));
|
|
121
234
|
}
|