@ludo.ninja/components 2.1.61 → 2.1.62
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.
|
@@ -27,17 +27,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
27
27
|
};
|
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
29
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
30
|
-
const
|
|
31
|
-
const
|
|
32
|
-
// import { useCreationStore } from "@/store/creation";
|
|
30
|
+
const react_1 = __importStar(require("react"));
|
|
31
|
+
const link_1 = __importDefault(require("next/link"));
|
|
33
32
|
const ScreenWidth_1 = require("../../../../styles/ScreenWidth");
|
|
34
33
|
const imageProportionsSize_1 = require("../../../../utils/imageProportionsSize");
|
|
35
|
-
const colors_1 = require("@ludo.ninja/ui/build/styles/colors");
|
|
36
|
-
const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
37
|
-
const link_1 = __importDefault(require("next/link"));
|
|
38
|
-
const react_1 = __importStar(require("react"));
|
|
39
34
|
const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
|
|
40
35
|
const styled_components_1 = __importStar(require("styled-components"));
|
|
36
|
+
const colors_1 = require("@ludo.ninja/ui/build/styles/colors");
|
|
37
|
+
const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
38
|
+
const vars_1 = require("../../../../fonts/vars");
|
|
41
39
|
const SScreenshotContainer = styled_components_1.default.div `
|
|
42
40
|
border-radius: 16px;
|
|
43
41
|
overflow: hidden;
|
|
@@ -153,16 +151,8 @@ const ImageContainer = styled_components_1.default.div `
|
|
|
153
151
|
}
|
|
154
152
|
`;
|
|
155
153
|
const AssetImage = ({ imageUrl, errorImg, originalUrl, alt, isScreenshot, }) => {
|
|
156
|
-
// const { urlsActive, addUrlsActive } = useCreationStore((state) => ({
|
|
157
|
-
// urlsActive: state.urlsActive,
|
|
158
|
-
// addUrlsActive: state.addUrlsActive,
|
|
159
|
-
// }));
|
|
160
|
-
const isFirstLoading = !creation_1.urlsActive[imageUrl];
|
|
161
154
|
const [size, setSize] = (0, react_1.useState)({});
|
|
162
|
-
const [loading, setLoading] = (0, react_1.useState)(
|
|
163
|
-
if (isFirstLoading) {
|
|
164
|
-
(0, creation_1.addUrlsActive)(imageUrl);
|
|
165
|
-
}
|
|
155
|
+
const [loading, setLoading] = (0, react_1.useState)(true);
|
|
166
156
|
const ref = (0, react_1.useRef)(null);
|
|
167
157
|
(0, react_1.useLayoutEffect)(() => {
|
|
168
158
|
const { width, height } = (0, imageProportionsSize_1.defineImgProportion)(ref, 80);
|
|
@@ -172,22 +162,24 @@ const AssetImage = ({ imageUrl, errorImg, originalUrl, alt, isScreenshot, }) =>
|
|
|
172
162
|
}
|
|
173
163
|
}, [imageUrl]);
|
|
174
164
|
const LinkComponent = originalUrl ? link_1.default : react_1.default.Fragment;
|
|
175
|
-
const ScreenShotContainer = isScreenshot
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
165
|
+
const ScreenShotContainer = isScreenshot
|
|
166
|
+
? SScreenshotContainer
|
|
167
|
+
: react_1.default.Fragment;
|
|
168
|
+
return ((0, jsx_runtime_1.jsx)(LinkComponent, { href: `${originalUrl}`, target: "_blank", children: (0, jsx_runtime_1.jsxs)(ScreenShotContainer, { children: [(0, jsx_runtime_1.jsxs)(ImageContainer, { isScreenshot: isScreenshot, children: [loading && ((0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { height: '100%', width: '100%', style: {
|
|
169
|
+
lineHeight: 'normal',
|
|
170
|
+
position: 'absolute',
|
|
179
171
|
top: 0,
|
|
180
172
|
left: 0,
|
|
181
|
-
visibility: `${loading ?
|
|
173
|
+
visibility: `${loading ? 'hidden' : 'visible'}`,
|
|
182
174
|
} })), (0, jsx_runtime_1.jsx)("img", { alt: alt, ref: ref, src: imageUrl, onError: (e) => {
|
|
183
175
|
e.target.src = errorImg;
|
|
184
|
-
setSize({ width:
|
|
176
|
+
setSize({ width: '100%', height: '100%' });
|
|
185
177
|
}, onLoad: () => setLoading(false), style: {
|
|
186
|
-
opacity: loading ?
|
|
178
|
+
opacity: loading ? '0' : '1',
|
|
187
179
|
...(isScreenshot
|
|
188
180
|
? {
|
|
189
|
-
maxHeight:
|
|
190
|
-
maxWidth:
|
|
181
|
+
maxHeight: '100%',
|
|
182
|
+
maxWidth: '100%',
|
|
191
183
|
}
|
|
192
184
|
: size),
|
|
193
185
|
} })] }), isScreenshot && originalUrl && ((0, jsx_runtime_1.jsx)("div", { className: "link", title: originalUrl, children: (0, jsx_runtime_1.jsx)("span", { children: originalUrl }) }))] }) }));
|
|
@@ -4,15 +4,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
|
+
const creation_1 = require("../../../../store/creation");
|
|
8
|
+
const Image_1 = __importDefault(require("../../Styles/Image"));
|
|
7
9
|
const react_1 = require("react");
|
|
8
10
|
const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
|
|
9
|
-
const Image_1 = __importDefault(require("../../Styles/Image"));
|
|
10
11
|
// Component
|
|
11
|
-
const CardImage = ({ imgSrc, errorImg, alt
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
12
|
+
const CardImage = ({ imgSrc, errorImg, alt }) => {
|
|
13
|
+
const isFirstLoading = !creation_1.urlsActive[imgSrc];
|
|
14
|
+
const [loading, setLoading] = (0, react_1.useState)(isFirstLoading);
|
|
15
|
+
if (isFirstLoading) {
|
|
16
|
+
(0, creation_1.addUrlsActive)(imgSrc);
|
|
17
|
+
}
|
|
18
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [loading && ((0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { height: "100%", width: "100%", style: {
|
|
19
|
+
lineHeight: "normal",
|
|
20
|
+
visibility: `${loading ? "hidden" : "visible"}`,
|
|
16
21
|
} })), (0, jsx_runtime_1.jsx)(Image_1.default, { isLoading: loading, src: imgSrc, alt: alt, onError: (e) => (e.target.src = errorImg), onLoad: () => setLoading(false) })] }));
|
|
17
22
|
};
|
|
18
23
|
// Export
|