@datlv-trustshop/shopify-inapp-components 0.2.7 → 0.2.8
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/dist/components/TopBanner.js +40 -16
- package/package.json +1 -1
|
@@ -6,12 +6,18 @@ import { useTopBanner } from "../hooks/useBanner";
|
|
|
6
6
|
import { DashboardContext } from "../provider/DashboardProvider";
|
|
7
7
|
const BANNER_MIN_HEIGHT = 100;
|
|
8
8
|
const TopBannerSkeleton = ({ className, visible }) => {
|
|
9
|
+
// When not visible, return zero-space container
|
|
10
|
+
if (!visible) {
|
|
11
|
+
return (_jsx("div", { className: className, style: {
|
|
12
|
+
width: "100%",
|
|
13
|
+
height: 0,
|
|
14
|
+
overflow: "hidden",
|
|
15
|
+
position: "absolute",
|
|
16
|
+
pointerEvents: "none",
|
|
17
|
+
}, "aria-hidden": "true" }));
|
|
18
|
+
}
|
|
9
19
|
return (_jsxs("div", { className: className, style: {
|
|
10
20
|
width: "100%",
|
|
11
|
-
opacity: visible ? 1 : 0,
|
|
12
|
-
visibility: visible ? "visible" : "hidden",
|
|
13
|
-
transition: "opacity 0.2s ease, visibility 0.2s ease",
|
|
14
|
-
pointerEvents: visible ? "auto" : "none",
|
|
15
21
|
}, children: [_jsxs("div", { style: {
|
|
16
22
|
minHeight: `${BANNER_MIN_HEIGHT}px`,
|
|
17
23
|
padding: "16px",
|
|
@@ -103,36 +109,54 @@ export const TopBanner = ({ className = "", open = true, onClose, onAction, clos
|
|
|
103
109
|
const shouldShow = open && !isDismissed;
|
|
104
110
|
const showSkeleton = shouldShow && (!dismissChecked || !isInitialized || isLoading);
|
|
105
111
|
const showBanner = shouldShow && dismissChecked && isInitialized && !isLoading && banner;
|
|
112
|
+
// Always render skeleton during loading, but control visibility
|
|
106
113
|
if (!dismissChecked || !isInitialized || isLoading) {
|
|
107
114
|
return _jsx(TopBannerSkeleton, { className: className, visible: showSkeleton });
|
|
108
115
|
}
|
|
116
|
+
// No banner data available - render invisible container to maintain mount
|
|
109
117
|
if (!banner) {
|
|
110
118
|
return (_jsx("div", { className: className, style: {
|
|
111
119
|
width: "100%",
|
|
112
120
|
height: 0,
|
|
113
121
|
overflow: "hidden",
|
|
114
|
-
|
|
115
|
-
|
|
122
|
+
position: "absolute",
|
|
123
|
+
pointerEvents: "none",
|
|
116
124
|
}, "aria-hidden": "true" }));
|
|
117
125
|
}
|
|
126
|
+
// Custom render function with visibility control
|
|
118
127
|
if (renderBanner) {
|
|
128
|
+
// When not showing, render zero-space container
|
|
129
|
+
if (!showBanner) {
|
|
130
|
+
return (_jsx("div", { className: className, style: {
|
|
131
|
+
width: "100%",
|
|
132
|
+
height: 0,
|
|
133
|
+
overflow: "hidden",
|
|
134
|
+
position: "absolute",
|
|
135
|
+
pointerEvents: "none",
|
|
136
|
+
}, "aria-hidden": "true" }));
|
|
137
|
+
}
|
|
119
138
|
return (_jsx("div", { style: {
|
|
120
|
-
opacity:
|
|
121
|
-
visibility:
|
|
122
|
-
transition: "opacity 0.3s ease
|
|
123
|
-
pointerEvents: showBanner ? "auto" : "none",
|
|
139
|
+
opacity: 1,
|
|
140
|
+
visibility: "visible",
|
|
141
|
+
transition: "opacity 0.3s ease",
|
|
124
142
|
}, children: renderBanner(banner, {
|
|
125
143
|
onClose: handleClose,
|
|
126
144
|
onAction: handleAction,
|
|
127
145
|
}) }));
|
|
128
146
|
}
|
|
147
|
+
// Default banner render with visibility control
|
|
148
|
+
// When not showing, render zero-space container
|
|
149
|
+
if (!showBanner) {
|
|
150
|
+
return (_jsx("div", { className: className, style: {
|
|
151
|
+
width: "100%",
|
|
152
|
+
height: 0,
|
|
153
|
+
overflow: "hidden",
|
|
154
|
+
position: "absolute",
|
|
155
|
+
pointerEvents: "none",
|
|
156
|
+
}, "aria-hidden": "true" }));
|
|
157
|
+
}
|
|
129
158
|
return (_jsx("div", { className: className, style: {
|
|
130
159
|
width: "100%",
|
|
131
|
-
minHeight:
|
|
132
|
-
opacity: showBanner ? 1 : 0,
|
|
133
|
-
visibility: showBanner ? "visible" : "hidden",
|
|
134
|
-
transition: "opacity 0.3s ease, visibility 0.3s ease, min-height 0.3s ease",
|
|
135
|
-
pointerEvents: showBanner ? "auto" : "none",
|
|
136
|
-
overflow: "hidden",
|
|
160
|
+
minHeight: `${BANNER_MIN_HEIGHT}px`,
|
|
137
161
|
}, children: _jsx(Banner, { hideIcon: true, onDismiss: closable ? handleClose : undefined, children: _jsxs(InlineStack, { gap: "400", blockAlign: "center", wrap: false, children: [banner.icon && (_jsx("div", { style: { flexShrink: 0 }, children: _jsx("img", { src: banner.icon, alt: "", width: 72, height: 72, style: { borderRadius: "8px" }, loading: "eager" }) })), _jsx("div", { style: { flex: 1, minWidth: 0 }, children: _jsxs(BlockStack, { gap: "100", align: "space-between", children: [_jsxs(BlockStack, { gap: "100", children: [_jsx(Text, { variant: "headingSm", as: "h3", children: banner.title }), banner.description && (_jsx(Text, { variant: "bodyMd", tone: "subdued", as: "p", children: banner.description }))] }), banner.link && (_jsx("div", { style: { flexShrink: 0 }, children: _jsx(Button, { icon: ExternalIcon, onClick: handleAction, children: banner.linkText || "Learn More" }) }))] }) })] }) }) }));
|
|
138
162
|
};
|