wini-web-components 2.5.7 → 2.6.0

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.
Files changed (4) hide show
  1. package/dist/component/popup/popup.js +14 -15
  2. package/dist/component/wini-icon/winicon.js +13 -13
  3. package/dist/index.js +1 -1
  4. package/package.json +1 -1
package/dist/component/popup/popup.js CHANGED
@@ -97,22 +97,7 @@ var Popup = /** @class */ (function (_super) {
97
97
  this.setState({ open: false });
98
98
  };
99
99
  Popup.prototype.componentDidUpdate = function (prevProps, prevState) {
100
- var _a;
101
100
  if (prevState.open !== this.state.open && this.state.open && this.state.style) {
102
- var thisPopupRect = (_a = this.ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
103
- if (thisPopupRect) {
104
- var style = void 0;
105
- if (thisPopupRect.right > document.body.offsetWidth) {
106
- style = __assign(__assign({}, this.state.style), { right: '0.4rem' });
107
- delete style.left;
108
- }
109
- if (thisPopupRect.bottom > document.body.offsetHeight) {
110
- style = style ? __assign(__assign({}, style), { bottom: '0.4rem' }) : __assign(__assign({}, this.state.style), { bottom: '0.4rem' });
111
- delete style.top;
112
- }
113
- if (style)
114
- this.setState(__assign(__assign({}, this.state), { style: style }));
115
- }
116
101
  }
117
102
  };
118
103
  Popup.prototype.render = function () {
@@ -149,5 +134,19 @@ function PopupOverlay(_a) {
149
134
  if (overlayRef.current && onOpen)
150
135
  onOpen(overlayRef.current);
151
136
  }, [overlayRef, onOpen]);
137
+ (0, react_1.useEffect)(function () {
138
+ if (overlayRef.current && overlayRef.current.firstChild) {
139
+ var popupContent = overlayRef.current.firstChild;
140
+ var rect = popupContent.getBoundingClientRect();
141
+ if (rect.x < 0)
142
+ popupContent.style.left = "0px";
143
+ else if (rect.right > document.body.offsetWidth)
144
+ popupContent.style.right = "0px";
145
+ if (rect.y < 0)
146
+ popupContent.style.top = "0px";
147
+ else if (rect.bottom > document.body.offsetHeight)
148
+ popupContent.style.bottom = "0px";
149
+ }
150
+ }, [overlayRef]);
152
151
  return react_1.default.createElement("div", { ref: overlayRef, className: "popup-overlay ".concat(className !== null && className !== void 0 ? className : ""), style: style }, children);
153
152
  }
package/dist/component/wini-icon/winicon.js CHANGED
@@ -132,7 +132,7 @@ function Winicon(_a) {
132
132
  }, [src, link]);
133
133
  return react_1.default.createElement(react_1.default.Fragment, null,
134
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 () {
135
+ tooltip && showTooltip && react_dom_1.default.createPortal((function () {
136
136
  var _a;
137
137
  if (!ref.current)
138
138
  return null;
@@ -163,9 +163,9 @@ function Winicon(_a) {
163
163
  r.style.alignItems = "end";
164
164
  }
165
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" } },
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
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
170
  case "bottom":
171
171
  return react_1.default.createElement("div", { ref: function (r) {
@@ -183,10 +183,10 @@ function Winicon(_a) {
183
183
  r.style.alignItems = "end";
184
184
  }
185
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" } },
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
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));
189
+ react_1.default.createElement(text_1.Text, { className: "body-3 ".concat(winicon_module_css_1.default['tooltip-message']), maxLine: 2 }, tooltip.message));
190
190
  case "left":
191
191
  return react_1.default.createElement("div", { ref: function (r) {
192
192
  if (r) {
@@ -203,9 +203,9 @@ function Winicon(_a) {
203
203
  r.style.alignItems = "end";
204
204
  }
205
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" } },
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
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
210
  case "right":
211
211
  return react_1.default.createElement("div", { ref: function (r) {
@@ -223,10 +223,10 @@ function Winicon(_a) {
223
223
  r.style.alignItems = "end";
224
224
  }
225
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" } },
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
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));
229
+ react_1.default.createElement(text_1.Text, { className: "body-3 ".concat(winicon_module_css_1.default['tooltip-message']), maxLine: 2 }, tooltip.message));
230
230
  default:
231
231
  return react_1.default.createElement("div", null);
232
232
  }