@payloadcms/ui 3.80.0 → 3.81.0-canary.1
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/elements/IframeLoader/index.d.ts +12 -0
- package/dist/elements/IframeLoader/index.d.ts.map +1 -0
- package/dist/elements/IframeLoader/index.js +103 -0
- package/dist/elements/IframeLoader/index.js.map +1 -0
- package/dist/elements/IframeLoader/index.scss +21 -0
- package/dist/elements/LivePreview/Window/index.d.ts.map +1 -1
- package/dist/elements/LivePreview/Window/index.js +79 -144
- package/dist/elements/LivePreview/Window/index.js.map +1 -1
- package/dist/elements/ShimmerEffect/index.d.ts +5 -1
- package/dist/elements/ShimmerEffect/index.d.ts.map +1 -1
- package/dist/elements/ShimmerEffect/index.js +7 -2
- package/dist/elements/ShimmerEffect/index.js.map +1 -1
- package/dist/elements/ShimmerEffect/index.scss +14 -6
- package/dist/exports/client/{CodeEditor-X3UZSEEZ.js → CodeEditor-67I2RYO2.js} +2 -2
- package/dist/exports/client/{chunk-J46CQZ3T.js → chunk-QP5KC7MG.js} +6 -6
- package/dist/exports/client/{chunk-J46CQZ3T.js.map → chunk-QP5KC7MG.js.map} +3 -3
- package/dist/exports/client/index.js +12 -12
- package/dist/exports/client/index.js.map +4 -4
- package/dist/styles.css +1 -1
- package/package.json +5 -5
- package/dist/elements/LivePreview/IFrame/index.d.ts +0 -4
- package/dist/elements/LivePreview/IFrame/index.d.ts.map +0 -1
- package/dist/elements/LivePreview/IFrame/index.js +0 -51
- package/dist/elements/LivePreview/IFrame/index.js.map +0 -1
- package/dist/elements/LivePreview/IFrame/index.scss +0 -9
- /package/dist/exports/client/{CodeEditor-X3UZSEEZ.js.map → CodeEditor-67I2RYO2.js.map} +0 -0
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import './index.scss';
|
|
2
|
+
export type IframeLoaderProps = {
|
|
3
|
+
ref?: React.Ref<HTMLIFrameElement>;
|
|
4
|
+
} & React.IframeHTMLAttributes<HTMLIFrameElement>;
|
|
5
|
+
/**
|
|
6
|
+
* Loads an `iframe` element with the given source behind a loading indicator.
|
|
7
|
+
* Notable behaviors:
|
|
8
|
+
* 1. Only show if the load takes longer than x ms.
|
|
9
|
+
* 2. Once shown, force it to be visible for at least x ms to avoid flickering, even if the iframe loads before then.
|
|
10
|
+
*/
|
|
11
|
+
export declare const IframeLoader: React.FC<IframeLoaderProps>;
|
|
12
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/IframeLoader/index.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;CACnC,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAA;AASjD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyGpD,CAAA"}
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
3
|
+
import { ShimmerEffect } from '../ShimmerEffect/index.js';
|
|
4
|
+
import './index.scss';
|
|
5
|
+
const shimmerDelays = {
|
|
6
|
+
minVisible: 300,
|
|
7
|
+
show: 1000
|
|
8
|
+
};
|
|
9
|
+
const baseClass = 'iframe-loader';
|
|
10
|
+
/**
|
|
11
|
+
* Loads an `iframe` element with the given source behind a loading indicator.
|
|
12
|
+
* Notable behaviors:
|
|
13
|
+
* 1. Only show if the load takes longer than x ms.
|
|
14
|
+
* 2. Once shown, force it to be visible for at least x ms to avoid flickering, even if the iframe loads before then.
|
|
15
|
+
*/
|
|
16
|
+
export const IframeLoader = ({
|
|
17
|
+
onLoad: onLoadFromProps,
|
|
18
|
+
src,
|
|
19
|
+
title,
|
|
20
|
+
...rest
|
|
21
|
+
}) => {
|
|
22
|
+
const [isLoading, setIsLoading] = useState(Boolean(src));
|
|
23
|
+
const [showShimmer, setShowShimmer] = useState(false);
|
|
24
|
+
const shimmerShownAtRef = useRef(0);
|
|
25
|
+
const showTimerRef = useRef(null);
|
|
26
|
+
const hideTimerRef = useRef(null);
|
|
27
|
+
const clearTimers = useCallback(() => {
|
|
28
|
+
if (showTimerRef.current) {
|
|
29
|
+
clearTimeout(showTimerRef.current);
|
|
30
|
+
showTimerRef.current = null;
|
|
31
|
+
}
|
|
32
|
+
if (hideTimerRef.current) {
|
|
33
|
+
clearTimeout(hideTimerRef.current);
|
|
34
|
+
hideTimerRef.current = null;
|
|
35
|
+
}
|
|
36
|
+
}, []);
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
clearTimers();
|
|
39
|
+
setIsLoading(Boolean(src));
|
|
40
|
+
setShowShimmer(false);
|
|
41
|
+
shimmerShownAtRef.current = 0;
|
|
42
|
+
if (!src) {
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
showTimerRef.current = setTimeout(() => {
|
|
46
|
+
setShowShimmer(true);
|
|
47
|
+
shimmerShownAtRef.current = Date.now();
|
|
48
|
+
showTimerRef.current = null;
|
|
49
|
+
}, shimmerDelays.show);
|
|
50
|
+
return () => {
|
|
51
|
+
if (showTimerRef.current) {
|
|
52
|
+
clearTimeout(showTimerRef.current);
|
|
53
|
+
showTimerRef.current = null;
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
}, [clearTimers, src]);
|
|
57
|
+
useEffect(() => {
|
|
58
|
+
return () => {
|
|
59
|
+
clearTimers();
|
|
60
|
+
};
|
|
61
|
+
}, [clearTimers]);
|
|
62
|
+
const onLoad = useCallback(e => {
|
|
63
|
+
if (typeof onLoadFromProps === 'function') {
|
|
64
|
+
onLoadFromProps(e);
|
|
65
|
+
}
|
|
66
|
+
setIsLoading(false);
|
|
67
|
+
if (showTimerRef.current) {
|
|
68
|
+
clearTimeout(showTimerRef.current);
|
|
69
|
+
showTimerRef.current = null;
|
|
70
|
+
}
|
|
71
|
+
if (!showShimmer) {
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
const elapsed = Date.now() - shimmerShownAtRef.current;
|
|
75
|
+
const remainingVisible = Math.max(0, shimmerDelays.minVisible - elapsed);
|
|
76
|
+
if (remainingVisible === 0) {
|
|
77
|
+
setShowShimmer(false);
|
|
78
|
+
return;
|
|
79
|
+
}
|
|
80
|
+
hideTimerRef.current = setTimeout(() => {
|
|
81
|
+
setShowShimmer(false);
|
|
82
|
+
hideTimerRef.current = null;
|
|
83
|
+
}, remainingVisible);
|
|
84
|
+
}, [showShimmer, onLoadFromProps]);
|
|
85
|
+
return /*#__PURE__*/_jsxs("div", {
|
|
86
|
+
className: `${baseClass}__container`,
|
|
87
|
+
children: [showShimmer && /*#__PURE__*/_jsx(ShimmerEffect, {
|
|
88
|
+
"aria-live": "polite",
|
|
89
|
+
height: "100%",
|
|
90
|
+
role: "status",
|
|
91
|
+
transparent: true
|
|
92
|
+
}), /*#__PURE__*/_jsx("iframe", {
|
|
93
|
+
...rest,
|
|
94
|
+
className: [`${baseClass}__iframe`, isLoading && `${baseClass}__iframe--is-loading`].filter(Boolean).join(' '),
|
|
95
|
+
onLoad: onLoad,
|
|
96
|
+
// eslint-disable-next-line
|
|
97
|
+
sandbox: "allow-same-origin allow-scripts allow-forms allow-popups allow-modals allow-downloads",
|
|
98
|
+
src: src,
|
|
99
|
+
title: title
|
|
100
|
+
})]
|
|
101
|
+
});
|
|
102
|
+
};
|
|
103
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["useCallback","useEffect","useRef","useState","ShimmerEffect","shimmerDelays","minVisible","show","baseClass","IframeLoader","onLoad","onLoadFromProps","src","title","rest","isLoading","setIsLoading","Boolean","showShimmer","setShowShimmer","shimmerShownAtRef","showTimerRef","hideTimerRef","clearTimers","current","clearTimeout","setTimeout","Date","now","e","elapsed","remainingVisible","Math","max","_jsxs","className","_jsx","height","role","transparent","filter","join","sandbox"],"sources":["../../../src/elements/IframeLoader/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\nimport './index.scss'\n\nexport type IframeLoaderProps = {\n ref?: React.Ref<HTMLIFrameElement>\n} & React.IframeHTMLAttributes<HTMLIFrameElement>\n\nconst shimmerDelays = {\n minVisible: 300,\n show: 1000,\n}\n\nconst baseClass = 'iframe-loader'\n\n/**\n * Loads an `iframe` element with the given source behind a loading indicator.\n * Notable behaviors:\n * 1. Only show if the load takes longer than x ms.\n * 2. Once shown, force it to be visible for at least x ms to avoid flickering, even if the iframe loads before then.\n */\nexport const IframeLoader: React.FC<IframeLoaderProps> = ({\n onLoad: onLoadFromProps,\n src,\n title,\n ...rest\n}) => {\n const [isLoading, setIsLoading] = useState(Boolean(src))\n const [showShimmer, setShowShimmer] = useState(false)\n const shimmerShownAtRef = useRef(0)\n\n const showTimerRef = useRef<null | ReturnType<typeof setTimeout>>(null)\n\n const hideTimerRef = useRef<null | ReturnType<typeof setTimeout>>(null)\n\n const clearTimers = useCallback(() => {\n if (showTimerRef.current) {\n clearTimeout(showTimerRef.current)\n showTimerRef.current = null\n }\n\n if (hideTimerRef.current) {\n clearTimeout(hideTimerRef.current)\n hideTimerRef.current = null\n }\n }, [])\n\n useEffect(() => {\n clearTimers()\n setIsLoading(Boolean(src))\n setShowShimmer(false)\n shimmerShownAtRef.current = 0\n\n if (!src) {\n return\n }\n\n showTimerRef.current = setTimeout(() => {\n setShowShimmer(true)\n shimmerShownAtRef.current = Date.now()\n showTimerRef.current = null\n }, shimmerDelays.show)\n\n return () => {\n if (showTimerRef.current) {\n clearTimeout(showTimerRef.current)\n showTimerRef.current = null\n }\n }\n }, [clearTimers, src])\n\n useEffect(() => {\n return () => {\n clearTimers()\n }\n }, [clearTimers])\n\n const onLoad = useCallback<React.IframeHTMLAttributes<HTMLIFrameElement>['onLoad']>(\n (e) => {\n if (typeof onLoadFromProps === 'function') {\n onLoadFromProps(e)\n }\n\n setIsLoading(false)\n\n if (showTimerRef.current) {\n clearTimeout(showTimerRef.current)\n showTimerRef.current = null\n }\n\n if (!showShimmer) {\n return\n }\n\n const elapsed = Date.now() - shimmerShownAtRef.current\n const remainingVisible = Math.max(0, shimmerDelays.minVisible - elapsed)\n\n if (remainingVisible === 0) {\n setShowShimmer(false)\n return\n }\n\n hideTimerRef.current = setTimeout(() => {\n setShowShimmer(false)\n hideTimerRef.current = null\n }, remainingVisible)\n },\n [showShimmer, onLoadFromProps],\n )\n\n return (\n <div className={`${baseClass}__container`}>\n {showShimmer && <ShimmerEffect aria-live=\"polite\" height=\"100%\" role=\"status\" transparent />}\n <iframe\n {...rest}\n className={[`${baseClass}__iframe`, isLoading && `${baseClass}__iframe--is-loading`]\n .filter(Boolean)\n .join(' ')}\n onLoad={onLoad}\n // eslint-disable-next-line\n sandbox=\"allow-same-origin allow-scripts allow-forms allow-popups allow-modals allow-downloads\"\n src={src}\n title={title}\n />\n </div>\n )\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
@layer payload-default {
|
|
2
|
+
.iframe-loader__container {
|
|
3
|
+
width: 100%;
|
|
4
|
+
height: 100%;
|
|
5
|
+
position: relative;
|
|
6
|
+
flex: 1;
|
|
7
|
+
min-height: 0;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.iframe-loader__iframe {
|
|
11
|
+
background-color: white;
|
|
12
|
+
border: 0;
|
|
13
|
+
width: 100%;
|
|
14
|
+
height: 100%;
|
|
15
|
+
transform-origin: top left;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.iframe-loader__iframe--is-loading {
|
|
19
|
+
opacity: 0;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/LivePreview/Window/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAG5C,OAAO,KAAoB,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/LivePreview/Window/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAG5C,OAAO,KAAoB,MAAM,OAAO,CAAA;AAUxC,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA0IrD,CAAA"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
-
import { c as _c } from "react/compiler-runtime";
|
|
4
3
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
4
|
import { reduceFieldsToValues } from 'payload/shared';
|
|
6
5
|
import React, { useEffect } from 'react';
|
|
@@ -9,14 +8,12 @@ import { useDocumentEvents } from '../../../providers/DocumentEvents/index.js';
|
|
|
9
8
|
import { useDocumentInfo } from '../../../providers/DocumentInfo/index.js';
|
|
10
9
|
import { useLivePreviewContext } from '../../../providers/LivePreview/context.js';
|
|
11
10
|
import { useLocale } from '../../../providers/Locale/index.js';
|
|
12
|
-
import {
|
|
11
|
+
import { IframeLoader } from '../../IframeLoader/index.js';
|
|
13
12
|
import { DeviceContainer } from '../Device/index.js';
|
|
14
|
-
import { IFrame } from '../IFrame/index.js';
|
|
15
13
|
import { LivePreviewToolbar } from '../Toolbar/index.js';
|
|
16
14
|
import './index.scss';
|
|
17
15
|
const baseClass = 'live-preview-window';
|
|
18
16
|
export const LivePreviewWindow = props => {
|
|
19
|
-
const $ = _c(50);
|
|
20
17
|
const {
|
|
21
18
|
appIsReady,
|
|
22
19
|
breakpoint,
|
|
@@ -25,8 +22,10 @@ export const LivePreviewWindow = props => {
|
|
|
25
22
|
loadedURL,
|
|
26
23
|
popupRef,
|
|
27
24
|
previewWindowType,
|
|
25
|
+
setLoadedURL,
|
|
28
26
|
shouldRenderIframe,
|
|
29
|
-
url
|
|
27
|
+
url,
|
|
28
|
+
zoom
|
|
30
29
|
} = useLivePreviewContext();
|
|
31
30
|
const locale = useLocale();
|
|
32
31
|
const {
|
|
@@ -38,152 +37,88 @@ export const LivePreviewWindow = props => {
|
|
|
38
37
|
collectionSlug,
|
|
39
38
|
globalSlug
|
|
40
39
|
} = useDocumentInfo();
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
40
|
+
/**
|
|
41
|
+
* For client-side apps, send data through `window.postMessage`
|
|
42
|
+
* The preview could either be an iframe embedded on the page
|
|
43
|
+
* Or it could be a separate popup window
|
|
44
|
+
* We need to transmit data to both accordingly
|
|
45
|
+
*/
|
|
46
|
+
useEffect(() => {
|
|
47
|
+
if (!isLivePreviewing || !appIsReady) {
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
// For performance, do not reduce fields to values until after the iframe or popup has loaded
|
|
51
|
+
if (formState) {
|
|
52
|
+
const values = reduceFieldsToValues(formState, true);
|
|
53
|
+
if (!values.id) {
|
|
54
|
+
values.id = id;
|
|
46
55
|
}
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
collectionSlug,
|
|
55
|
-
data: values,
|
|
56
|
-
externallyUpdatedRelationship: mostRecentUpdate,
|
|
57
|
-
globalSlug,
|
|
58
|
-
locale: locale.code
|
|
59
|
-
};
|
|
60
|
-
if (previewWindowType === "popup" && popupRef.current) {
|
|
61
|
-
popupRef.current.postMessage(message, url);
|
|
62
|
-
}
|
|
63
|
-
if (previewWindowType === "iframe" && iframeRef.current) {
|
|
64
|
-
iframeRef.current.contentWindow?.postMessage(message, url);
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
};
|
|
68
|
-
$[0] = appIsReady;
|
|
69
|
-
$[1] = collectionSlug;
|
|
70
|
-
$[2] = formState;
|
|
71
|
-
$[3] = globalSlug;
|
|
72
|
-
$[4] = id;
|
|
73
|
-
$[5] = iframeRef;
|
|
74
|
-
$[6] = isLivePreviewing;
|
|
75
|
-
$[7] = locale;
|
|
76
|
-
$[8] = mostRecentUpdate;
|
|
77
|
-
$[9] = popupRef;
|
|
78
|
-
$[10] = previewWindowType;
|
|
79
|
-
$[11] = url;
|
|
80
|
-
$[12] = t0;
|
|
81
|
-
} else {
|
|
82
|
-
t0 = $[12];
|
|
83
|
-
}
|
|
84
|
-
let t1;
|
|
85
|
-
if ($[13] !== appIsReady || $[14] !== collectionSlug || $[15] !== formState || $[16] !== globalSlug || $[17] !== id || $[18] !== iframeRef || $[19] !== isLivePreviewing || $[20] !== loadedURL || $[21] !== locale || $[22] !== mostRecentUpdate || $[23] !== popupRef || $[24] !== previewWindowType || $[25] !== url) {
|
|
86
|
-
t1 = [formState, url, collectionSlug, globalSlug, id, previewWindowType, popupRef, appIsReady, iframeRef, mostRecentUpdate, locale, isLivePreviewing, loadedURL];
|
|
87
|
-
$[13] = appIsReady;
|
|
88
|
-
$[14] = collectionSlug;
|
|
89
|
-
$[15] = formState;
|
|
90
|
-
$[16] = globalSlug;
|
|
91
|
-
$[17] = id;
|
|
92
|
-
$[18] = iframeRef;
|
|
93
|
-
$[19] = isLivePreviewing;
|
|
94
|
-
$[20] = loadedURL;
|
|
95
|
-
$[21] = locale;
|
|
96
|
-
$[22] = mostRecentUpdate;
|
|
97
|
-
$[23] = popupRef;
|
|
98
|
-
$[24] = previewWindowType;
|
|
99
|
-
$[25] = url;
|
|
100
|
-
$[26] = t1;
|
|
101
|
-
} else {
|
|
102
|
-
t1 = $[26];
|
|
103
|
-
}
|
|
104
|
-
useEffect(t0, t1);
|
|
105
|
-
let t2;
|
|
106
|
-
if ($[27] !== appIsReady || $[28] !== iframeRef || $[29] !== isLivePreviewing || $[30] !== popupRef || $[31] !== previewWindowType || $[32] !== url) {
|
|
107
|
-
t2 = () => {
|
|
108
|
-
if (!isLivePreviewing || !appIsReady) {
|
|
109
|
-
return;
|
|
110
|
-
}
|
|
111
|
-
const message_0 = {
|
|
112
|
-
type: "payload-document-event"
|
|
56
|
+
const message = {
|
|
57
|
+
type: 'payload-live-preview',
|
|
58
|
+
collectionSlug,
|
|
59
|
+
data: values,
|
|
60
|
+
externallyUpdatedRelationship: mostRecentUpdate,
|
|
61
|
+
globalSlug,
|
|
62
|
+
locale: locale.code
|
|
113
63
|
};
|
|
114
|
-
|
|
115
|
-
|
|
64
|
+
// Post message to external popup window
|
|
65
|
+
if (previewWindowType === 'popup' && popupRef.current) {
|
|
66
|
+
popupRef.current.postMessage(message, url);
|
|
116
67
|
}
|
|
117
|
-
|
|
118
|
-
|
|
68
|
+
// Post message to embedded iframe
|
|
69
|
+
if (previewWindowType === 'iframe' && iframeRef.current) {
|
|
70
|
+
iframeRef.current.contentWindow?.postMessage(message, url);
|
|
119
71
|
}
|
|
72
|
+
}
|
|
73
|
+
}, [formState, url, collectionSlug, globalSlug, id, previewWindowType, popupRef, appIsReady, iframeRef, mostRecentUpdate, locale, isLivePreviewing, loadedURL]);
|
|
74
|
+
/**
|
|
75
|
+
* To support SSR, we transmit a `window.postMessage` event without a payload
|
|
76
|
+
* This is because the event will ultimately trigger a server-side roundtrip
|
|
77
|
+
* i.e., save, save draft, autosave, etc. will fire `router.refresh()`
|
|
78
|
+
*/
|
|
79
|
+
useEffect(() => {
|
|
80
|
+
if (!isLivePreviewing || !appIsReady) {
|
|
81
|
+
return;
|
|
82
|
+
}
|
|
83
|
+
const message_0 = {
|
|
84
|
+
type: 'payload-document-event'
|
|
120
85
|
};
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
let t3;
|
|
132
|
-
if ($[34] !== appIsReady || $[35] !== iframeRef || $[36] !== isLivePreviewing || $[37] !== mostRecentUpdate || $[38] !== popupRef || $[39] !== previewWindowType || $[40] !== url) {
|
|
133
|
-
t3 = [mostRecentUpdate, iframeRef, popupRef, previewWindowType, url, isLivePreviewing, appIsReady];
|
|
134
|
-
$[34] = appIsReady;
|
|
135
|
-
$[35] = iframeRef;
|
|
136
|
-
$[36] = isLivePreviewing;
|
|
137
|
-
$[37] = mostRecentUpdate;
|
|
138
|
-
$[38] = popupRef;
|
|
139
|
-
$[39] = previewWindowType;
|
|
140
|
-
$[40] = url;
|
|
141
|
-
$[41] = t3;
|
|
142
|
-
} else {
|
|
143
|
-
t3 = $[41];
|
|
144
|
-
}
|
|
145
|
-
useEffect(t2, t3);
|
|
146
|
-
if (previewWindowType !== "iframe") {
|
|
86
|
+
// Post message to external popup window
|
|
87
|
+
if (previewWindowType === 'popup' && popupRef.current) {
|
|
88
|
+
popupRef.current.postMessage(message_0, url);
|
|
89
|
+
}
|
|
90
|
+
// Post message to embedded iframe
|
|
91
|
+
if (previewWindowType === 'iframe' && iframeRef.current) {
|
|
92
|
+
iframeRef.current.contentWindow?.postMessage(message_0, url);
|
|
93
|
+
}
|
|
94
|
+
}, [mostRecentUpdate, iframeRef, popupRef, previewWindowType, url, isLivePreviewing, appIsReady]);
|
|
95
|
+
if (previewWindowType !== 'iframe') {
|
|
147
96
|
return null;
|
|
148
97
|
}
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
}), _jsx("div", {
|
|
170
|
-
className: `${baseClass}__main`,
|
|
171
|
-
children: _jsx(DeviceContainer, {
|
|
172
|
-
children: url && shouldRenderIframe ? _jsx(IFrame, {}) : _jsx(ShimmerEffect, {
|
|
173
|
-
height: "100%"
|
|
174
|
-
})
|
|
98
|
+
return /*#__PURE__*/_jsx("div", {
|
|
99
|
+
className: [baseClass, isLivePreviewing && `${baseClass}--is-live-previewing`, breakpoint && breakpoint !== 'responsive' && `${baseClass}--has-breakpoint`].filter(Boolean).join(' '),
|
|
100
|
+
children: /*#__PURE__*/_jsxs("div", {
|
|
101
|
+
className: `${baseClass}__wrapper`,
|
|
102
|
+
children: [/*#__PURE__*/_jsx(LivePreviewToolbar, {
|
|
103
|
+
...props
|
|
104
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
105
|
+
className: `${baseClass}__main`,
|
|
106
|
+
children: /*#__PURE__*/_jsx(DeviceContainer, {
|
|
107
|
+
children: shouldRenderIframe && /*#__PURE__*/_jsx(IframeLoader, {
|
|
108
|
+
className: "live-preview-iframe",
|
|
109
|
+
id: "live-preview-iframe",
|
|
110
|
+
onLoad: () => {
|
|
111
|
+
setLoadedURL(url);
|
|
112
|
+
},
|
|
113
|
+
ref: iframeRef,
|
|
114
|
+
src: url,
|
|
115
|
+
style: {
|
|
116
|
+
transform: typeof zoom === 'number' ? `scale(${zoom}) ` : undefined
|
|
117
|
+
}
|
|
175
118
|
})
|
|
176
|
-
})
|
|
177
|
-
})
|
|
178
|
-
})
|
|
179
|
-
|
|
180
|
-
$[46] = shouldRenderIframe;
|
|
181
|
-
$[47] = t7;
|
|
182
|
-
$[48] = url;
|
|
183
|
-
$[49] = t8;
|
|
184
|
-
} else {
|
|
185
|
-
t8 = $[49];
|
|
186
|
-
}
|
|
187
|
-
return t8;
|
|
119
|
+
})
|
|
120
|
+
})]
|
|
121
|
+
})
|
|
122
|
+
});
|
|
188
123
|
};
|
|
189
124
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["
|
|
1
|
+
{"version":3,"file":"index.js","names":["reduceFieldsToValues","React","useEffect","useAllFormFields","useDocumentEvents","useDocumentInfo","useLivePreviewContext","useLocale","IframeLoader","DeviceContainer","LivePreviewToolbar","baseClass","LivePreviewWindow","props","appIsReady","breakpoint","iframeRef","isLivePreviewing","loadedURL","popupRef","previewWindowType","setLoadedURL","shouldRenderIframe","url","zoom","locale","mostRecentUpdate","formState","id","collectionSlug","globalSlug","values","message","type","data","externallyUpdatedRelationship","code","current","postMessage","contentWindow","_jsx","className","filter","Boolean","join","_jsxs","onLoad","ref","src","style","transform","undefined"],"sources":["../../../../src/elements/LivePreview/Window/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload'\n\nimport { reduceFieldsToValues } from 'payload/shared'\nimport React, { useEffect } from 'react'\n\nimport { useAllFormFields } from '../../../forms/Form/context.js'\nimport { useDocumentEvents } from '../../../providers/DocumentEvents/index.js'\nimport { useDocumentInfo } from '../../../providers/DocumentInfo/index.js'\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\nimport { useLocale } from '../../../providers/Locale/index.js'\nimport { IframeLoader } from '../../IframeLoader/index.js'\nimport { DeviceContainer } from '../Device/index.js'\nimport { LivePreviewToolbar } from '../Toolbar/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-window'\n\nexport const LivePreviewWindow: React.FC<EditViewProps> = (props) => {\n const {\n appIsReady,\n breakpoint,\n iframeRef,\n isLivePreviewing,\n loadedURL,\n popupRef,\n previewWindowType,\n setLoadedURL,\n shouldRenderIframe,\n url,\n zoom,\n } = useLivePreviewContext()\n\n const locale = useLocale()\n\n const { mostRecentUpdate } = useDocumentEvents()\n\n const [formState] = useAllFormFields()\n const { id, collectionSlug, globalSlug } = useDocumentInfo()\n\n /**\n * For client-side apps, send data through `window.postMessage`\n * The preview could either be an iframe embedded on the page\n * Or it could be a separate popup window\n * We need to transmit data to both accordingly\n */\n useEffect(() => {\n if (!isLivePreviewing || !appIsReady) {\n return\n }\n\n // For performance, do not reduce fields to values until after the iframe or popup has loaded\n if (formState) {\n const values = reduceFieldsToValues(formState, true)\n\n if (!values.id) {\n values.id = id\n }\n\n const message = {\n type: 'payload-live-preview',\n collectionSlug,\n data: values,\n externallyUpdatedRelationship: mostRecentUpdate,\n globalSlug,\n locale: locale.code,\n }\n\n // Post message to external popup window\n if (previewWindowType === 'popup' && popupRef.current) {\n popupRef.current.postMessage(message, url)\n }\n\n // Post message to embedded iframe\n if (previewWindowType === 'iframe' && iframeRef.current) {\n iframeRef.current.contentWindow?.postMessage(message, url)\n }\n }\n }, [\n formState,\n url,\n collectionSlug,\n globalSlug,\n id,\n previewWindowType,\n popupRef,\n appIsReady,\n iframeRef,\n mostRecentUpdate,\n locale,\n isLivePreviewing,\n loadedURL,\n ])\n\n /**\n * To support SSR, we transmit a `window.postMessage` event without a payload\n * This is because the event will ultimately trigger a server-side roundtrip\n * i.e., save, save draft, autosave, etc. will fire `router.refresh()`\n */\n useEffect(() => {\n if (!isLivePreviewing || !appIsReady) {\n return\n }\n\n const message = {\n type: 'payload-document-event',\n }\n\n // Post message to external popup window\n if (previewWindowType === 'popup' && popupRef.current) {\n popupRef.current.postMessage(message, url)\n }\n\n // Post message to embedded iframe\n if (previewWindowType === 'iframe' && iframeRef.current) {\n iframeRef.current.contentWindow?.postMessage(message, url)\n }\n }, [mostRecentUpdate, iframeRef, popupRef, previewWindowType, url, isLivePreviewing, appIsReady])\n\n if (previewWindowType !== 'iframe') {\n return null\n }\n\n return (\n <div\n className={[\n baseClass,\n isLivePreviewing && `${baseClass}--is-live-previewing`,\n breakpoint && breakpoint !== 'responsive' && `${baseClass}--has-breakpoint`,\n ]\n .filter(Boolean)\n .join(' ')}\n >\n <div className={`${baseClass}__wrapper`}>\n <LivePreviewToolbar {...props} />\n <div className={`${baseClass}__main`}>\n <DeviceContainer>\n {shouldRenderIframe && (\n <IframeLoader\n className=\"live-preview-iframe\"\n id=\"live-preview-iframe\"\n onLoad={() => {\n setLoadedURL(url)\n }}\n ref={iframeRef}\n src={url}\n style={{\n transform: typeof zoom === 'number' ? `scale(${zoom}) ` : undefined,\n }}\n />\n )}\n </DeviceContainer>\n </div>\n </div>\n </div>\n )\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -5,8 +5,12 @@ export type ShimmerEffectProps = {
|
|
|
5
5
|
readonly className?: string;
|
|
6
6
|
readonly disableInlineStyles?: boolean;
|
|
7
7
|
readonly height?: number | string;
|
|
8
|
+
/**
|
|
9
|
+
* When true, adjusts the gradient to allow the natural background of the element to shine through.
|
|
10
|
+
*/
|
|
11
|
+
transparent?: boolean;
|
|
8
12
|
readonly width?: number | string;
|
|
9
|
-
}
|
|
13
|
+
} & React.HTMLAttributes<HTMLDivElement>;
|
|
10
14
|
export declare const ShimmerEffect: React.FC<ShimmerEffectProps>;
|
|
11
15
|
export type StaggeredShimmersProps = {
|
|
12
16
|
className?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ShimmerEffect/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,CAAA;IAChC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACjC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACjC,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ShimmerEffect/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,CAAA;IAChC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACjC;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACjC,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAIxC,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6BtD,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA6B9D,CAAA"}
|
|
@@ -5,16 +5,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
5
5
|
import * as React from 'react';
|
|
6
6
|
import { useDelay } from '../../hooks/useDelay.js';
|
|
7
7
|
import './index.scss';
|
|
8
|
+
const baseClass = 'shimmer-effect';
|
|
8
9
|
export const ShimmerEffect = ({
|
|
9
10
|
animationDelay = '0ms',
|
|
10
11
|
className,
|
|
11
12
|
disableInlineStyles = false,
|
|
12
13
|
height = '60px',
|
|
13
|
-
|
|
14
|
+
transparent,
|
|
15
|
+
width = '100%',
|
|
16
|
+
...rest
|
|
14
17
|
}) => {
|
|
15
18
|
return /*#__PURE__*/_jsx("div", {
|
|
16
|
-
|
|
19
|
+
...rest,
|
|
20
|
+
className: [baseClass, transparent && `${baseClass}--transparent`, className].filter(Boolean).join(' '),
|
|
17
21
|
style: {
|
|
22
|
+
...(rest?.style || {}),
|
|
18
23
|
height: !disableInlineStyles && (typeof height === 'number' ? `${height}px` : height),
|
|
19
24
|
width: !disableInlineStyles && (typeof width === 'number' ? `${width}px` : width)
|
|
20
25
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["c","_c","React","useDelay","ShimmerEffect","animationDelay","className","disableInlineStyles","height","width","_jsx","filter","Boolean","join","style","StaggeredShimmers","t0","$","count","renderDelay","t1","shimmerDelay","t2","shimmerItemClassName","undefined","shimmerDelayToPass","hasDelayed","t3","Array","t4","children","map","_","i"],"sources":["../../../src/elements/ShimmerEffect/index.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nimport { useDelay } from '../../hooks/useDelay.js'\nimport './index.scss'\n\nexport type ShimmerEffectProps = {\n readonly animationDelay?: string\n readonly className?: string\n readonly disableInlineStyles?: boolean\n readonly height?: number | string\n readonly width?: number | string\n}\n\nexport const ShimmerEffect: React.FC<ShimmerEffectProps> = ({\n animationDelay = '0ms',\n className,\n disableInlineStyles = false,\n height = '60px',\n width = '100%',\n}) => {\n return (\n <div\n className={[
|
|
1
|
+
{"version":3,"file":"index.js","names":["c","_c","React","useDelay","baseClass","ShimmerEffect","animationDelay","className","disableInlineStyles","height","transparent","width","rest","_jsx","filter","Boolean","join","style","StaggeredShimmers","t0","$","count","renderDelay","t1","shimmerDelay","t2","shimmerItemClassName","undefined","shimmerDelayToPass","hasDelayed","t3","Array","t4","children","map","_","i"],"sources":["../../../src/elements/ShimmerEffect/index.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nimport { useDelay } from '../../hooks/useDelay.js'\nimport './index.scss'\n\nexport type ShimmerEffectProps = {\n readonly animationDelay?: string\n readonly className?: string\n readonly disableInlineStyles?: boolean\n readonly height?: number | string\n /**\n * When true, adjusts the gradient to allow the natural background of the element to shine through.\n */\n transparent?: boolean\n readonly width?: number | string\n} & React.HTMLAttributes<HTMLDivElement>\n\nconst baseClass = 'shimmer-effect'\n\nexport const ShimmerEffect: React.FC<ShimmerEffectProps> = ({\n animationDelay = '0ms',\n className,\n disableInlineStyles = false,\n height = '60px',\n transparent,\n width = '100%',\n ...rest\n}) => {\n return (\n <div\n {...rest}\n className={[baseClass, transparent && `${baseClass}--transparent`, className]\n .filter(Boolean)\n .join(' ')}\n style={{\n ...(rest?.style || {}),\n height: !disableInlineStyles && (typeof height === 'number' ? `${height}px` : height),\n width: !disableInlineStyles && (typeof width === 'number' ? `${width}px` : width),\n }}\n >\n <div\n className=\"shimmer-effect__shine\"\n style={{\n animationDelay,\n }}\n />\n </div>\n )\n}\n\nexport type StaggeredShimmersProps = {\n className?: string\n count: number\n height?: number | string\n renderDelay?: number\n shimmerDelay?: number | string\n shimmerItemClassName?: string\n width?: number | string\n}\n\nexport const StaggeredShimmers: React.FC<StaggeredShimmersProps> = ({\n className,\n count,\n height,\n renderDelay = 500,\n shimmerDelay = 25,\n shimmerItemClassName,\n width,\n}) => {\n const shimmerDelayToPass = typeof shimmerDelay === 'number' ? `${shimmerDelay}ms` : shimmerDelay\n const [hasDelayed] = useDelay(renderDelay, true)\n\n if (!hasDelayed) {\n return null\n }\n\n return (\n <div className={className}>\n {[...Array(count)].map((_, i) => (\n <div className={shimmerItemClassName} key={i}>\n <ShimmerEffect\n animationDelay={`calc(${i} * ${shimmerDelayToPass})`}\n height={height}\n width={width}\n />\n </div>\n ))}\n </div>\n )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,YAAYC,KAAA,MAAW;AAEvB,SAASC,QAAQ,QAAQ;AACzB,OAAO;AAcP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,aAAA,GAA8CA,CAAC;EAC1DC,cAAA,GAAiB,KAAK;EACtBC,SAAS;EACTC,mBAAA,GAAsB,KAAK;EAC3BC,MAAA,GAAS,MAAM;EACfC,WAAW;EACXC,KAAA,GAAQ,MAAM;EACd,GAAGC;AAAA,CACJ;EACC,oBACEC,IAAA,CAAC;IACE,GAAGD,IAAI;IACRL,SAAA,EAAW,CAACH,SAAA,EAAWM,WAAA,IAAe,GAAGN,SAAA,eAAwB,EAAEG,SAAA,CAAU,CAC1EO,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;IACRC,KAAA,EAAO;MACL,IAAIL,IAAA,EAAMK,KAAA,IAAS,CAAC,CAAC;MACrBR,MAAA,EAAQ,CAACD,mBAAA,KAAwB,OAAOC,MAAA,KAAW,WAAW,GAAGA,MAAA,IAAU,GAAGA,MAAK;MACnFE,KAAA,EAAO,CAACH,mBAAA,KAAwB,OAAOG,KAAA,KAAU,WAAW,GAAGA,KAAA,IAAS,GAAGA,KAAI;IACjF;cAEA,aAAAE,IAAA,CAAC;MACCN,SAAA,EAAU;MACVU,KAAA,EAAO;QACLX;MACF;;;AAIR;AAYA,OAAO,MAAMY,iBAAA,GAAsDC,EAAA;EAAA,MAAAC,CAAA,GAAAnB,EAAA;EAAC;IAAAM,SAAA;IAAAc,KAAA;IAAAZ,MAAA;IAAAa,WAAA,EAAAC,EAAA;IAAAC,YAAA,EAAAC,EAAA;IAAAC,oBAAA;IAAAf;EAAA,IAAAQ,EAQnE;EAJC,MAAAG,WAAA,GAAAC,EAAiB,KAAAI,SAAA,SAAjBJ,EAAiB;EACjB,MAAAC,YAAA,GAAAC,EAAiB,KAAAE,SAAA,QAAjBF,EAAiB;EAIjB,MAAAG,kBAAA,GAA2B,OAAOJ,YAAA,KAAiB,WAAW,GAAGA,YAAA,IAAgB,GAAGA,YAAA;EACpF,OAAAK,UAAA,IAAqB1B,QAAA,CAASmB,WAAA,MAAa;EAAA,KAEtCO,UAAA;IAAA;EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAV,CAAA,QAAAC,KAAA;IAMAS,EAAA,OAAIC,KAAA,CAAMV,KAAA;IAAOD,CAAA,MAAAC,KAAA;IAAAD,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EAAA,IAAAY,EAAA;EAAA,IAAAZ,CAAA,QAAAb,SAAA,IAAAa,CAAA,QAAAX,MAAA,IAAAW,CAAA,QAAAQ,kBAAA,IAAAR,CAAA,QAAAM,oBAAA,IAAAN,CAAA,QAAAU,EAAA,IAAAV,CAAA,QAAAT,KAAA;IADpBqB,EAAA,GAAAnB,IAAA,CAAC;MAAAN,SAAA;MAAA0B,QAAA,EACEH,EAAiB,CAAAI,GAAA,EAAAC,CAAA,EAAAC,CAAA,KAChBvB,IAAA,CAAC;QAAAN,SAAA,EAAemB,oBAAA;QAAAO,QAAA,EACdpB,IAAA,CAAAR,aAAA;UAAAC,cAAA,EACkB,QAAQ8B,CAAA,MAAOR,kBAAA,GAAqB;UAAAnB,MAAA;UAAAE;QAAA,C;SAFbyB,CAAA;IAAA,C;;;;;;;;;;;SAF/CJ,E;CAYJ","ignoreList":[]}
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
@layer payload-default {
|
|
2
2
|
.shimmer-effect {
|
|
3
|
+
--shine-bg: var(--theme-elevation-50);
|
|
4
|
+
--shine-fg: var(--theme-elevation-150);
|
|
5
|
+
|
|
3
6
|
position: relative;
|
|
4
7
|
overflow: hidden;
|
|
5
|
-
background-color: var(--
|
|
8
|
+
background-color: var(--shine-bg);
|
|
6
9
|
|
|
7
10
|
&__shine {
|
|
8
11
|
position: absolute;
|
|
@@ -14,13 +17,18 @@
|
|
|
14
17
|
opacity: 0.75;
|
|
15
18
|
background: linear-gradient(
|
|
16
19
|
100deg,
|
|
17
|
-
var(--
|
|
18
|
-
var(--
|
|
19
|
-
var(--
|
|
20
|
-
var(--
|
|
21
|
-
var(--
|
|
20
|
+
var(--shine-bg) 0%,
|
|
21
|
+
var(--shine-bg) 15%,
|
|
22
|
+
var(--shine-fg) 50%,
|
|
23
|
+
var(--shine-bg) 85%,
|
|
24
|
+
var(--shine-bg) 100%
|
|
22
25
|
);
|
|
23
26
|
}
|
|
27
|
+
|
|
28
|
+
&--transparent {
|
|
29
|
+
--shine-bg: transparent;
|
|
30
|
+
--shine-fg: var(--theme-elevation-100);
|
|
31
|
+
}
|
|
24
32
|
}
|
|
25
33
|
|
|
26
34
|
@keyframes shimmer {
|
|
@@ -10,5 +10,5 @@ function require(m) {
|
|
|
10
10
|
}
|
|
11
11
|
// Workaround end
|
|
12
12
|
|
|
13
|
-
import{l as a}from"./chunk-
|
|
14
|
-
//# sourceMappingURL=CodeEditor-
|
|
13
|
+
import{l as a}from"./chunk-QP5KC7MG.js";import"./chunk-5LKBKI4T.js";export{a as default};
|
|
14
|
+
//# sourceMappingURL=CodeEditor-67I2RYO2.js.map
|