wini-web-components 2.5.5 → 2.5.7
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/clover.xml +6 -0
- package/.early.coverage/coverage-final.json +1 -0
- package/.early.coverage/lcov-report/base.css +224 -0
- package/.early.coverage/lcov-report/block-navigation.js +87 -0
- package/.early.coverage/lcov-report/favicon.png +0 -0
- package/.early.coverage/lcov-report/index.html +101 -0
- package/.early.coverage/lcov-report/prettify.css +1 -0
- package/.early.coverage/lcov-report/prettify.js +2 -0
- package/.early.coverage/lcov-report/sort-arrow-sprite.png +0 -0
- package/.early.coverage/lcov-report/sorter.js +196 -0
- package/.early.coverage/lcov.info +0 -0
- package/.early.coverage/v8/coverage-final.json +1 -0
- package/coverage/early.sample.test.js +1 -0
- 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 && 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", style: { alignItems: "center", position: "fixed", 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", style: { color: "var(--neutral-text-body-reverse-color)", padding: "0.4rem 1.2rem", borderRadius: "0.8rem", maxWidth: "21.2rem", textAlign: "center" }, maxLine: 2 }, tooltip.message),
|
|
168
|
+
react_1.default.createElement("div", { className: "row", style: { padding: "0 1.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", style: { alignItems: "center", position: "fixed", 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" } },
|
|
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", style: { color: "var(--neutral-text-body-reverse-color)", padding: "0.4rem 1.2rem", borderRadius: "0.8rem", maxWidth: "21.2rem", textAlign: "center" }, 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", style: { position: "fixed", 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", style: { color: "var(--neutral-text-body-reverse-color)", padding: "0.4rem 1.2rem", borderRadius: "0.8rem", maxWidth: "21.2rem", textAlign: "center" }, maxLine: 2 }, tooltip.message),
|
|
208
|
+
react_1.default.createElement("div", { className: "row", style: { padding: "0 1.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", style: { position: "fixed", 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" } },
|
|
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", style: { color: "var(--neutral-text-body-reverse-color)", padding: "0.4rem 1.2rem", borderRadius: "0.8rem", maxWidth: "21.2rem", textAlign: "center" }, maxLine: 2 }, tooltip.message));
|
|
230
|
+
default:
|
|
231
|
+
return react_1.default.createElement("div", null);
|
|
232
|
+
}
|
|
233
|
+
})(), document.body));
|
|
121
234
|
}
|