@payloadcms/ui 3.44.0-internal.6b79dc2 → 3.45.0-canary.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.
- package/dist/elements/BulkUpload/FileSidebar/index.d.ts.map +1 -1
- package/dist/elements/BulkUpload/FileSidebar/index.js +74 -29
- package/dist/elements/BulkUpload/FileSidebar/index.js.map +1 -1
- package/dist/elements/BulkUpload/FileSidebar/index.scss +5 -4
- package/dist/elements/BulkUpload/FormsManager/index.d.ts +0 -1
- package/dist/elements/BulkUpload/FormsManager/index.d.ts.map +1 -1
- package/dist/elements/BulkUpload/FormsManager/index.js +37 -64
- package/dist/elements/BulkUpload/FormsManager/index.js.map +1 -1
- package/dist/elements/BulkUpload/FormsManager/reducer.d.ts +1 -0
- package/dist/elements/BulkUpload/FormsManager/reducer.d.ts.map +1 -1
- package/dist/elements/BulkUpload/FormsManager/reducer.js +1 -0
- package/dist/elements/BulkUpload/FormsManager/reducer.js.map +1 -1
- package/dist/elements/Button/index.d.ts.map +1 -1
- package/dist/elements/Button/index.js +2 -1
- package/dist/elements/Button/index.js.map +1 -1
- package/dist/elements/Button/index.scss +2 -2
- package/dist/elements/DocumentControls/index.d.ts +1 -0
- package/dist/elements/DocumentControls/index.d.ts.map +1 -1
- package/dist/elements/DocumentControls/index.js +26 -11
- package/dist/elements/DocumentControls/index.js.map +1 -1
- package/dist/elements/DocumentFields/index.d.ts.map +1 -1
- package/dist/elements/DocumentFields/index.js.map +1 -1
- package/dist/elements/LeaveWithoutSaving/usePreventLeave.d.ts.map +1 -1
- package/dist/elements/LeaveWithoutSaving/usePreventLeave.js +14 -10
- package/dist/elements/LeaveWithoutSaving/usePreventLeave.js.map +1 -1
- package/dist/elements/LivePreview/Device/index.d.ts +5 -0
- package/dist/elements/LivePreview/Device/index.d.ts.map +1 -0
- package/dist/elements/LivePreview/Device/index.js +92 -0
- package/dist/elements/LivePreview/Device/index.js.map +1 -0
- package/dist/elements/LivePreview/DeviceContainer/index.d.ts +5 -0
- package/dist/elements/LivePreview/DeviceContainer/index.d.ts.map +1 -0
- package/dist/elements/LivePreview/DeviceContainer/index.js +55 -0
- package/dist/elements/LivePreview/DeviceContainer/index.js.map +1 -0
- package/dist/elements/LivePreview/IFrame/index.d.ts +10 -0
- package/dist/elements/LivePreview/IFrame/index.d.ts.map +1 -0
- package/dist/elements/LivePreview/IFrame/index.js +30 -0
- package/dist/elements/LivePreview/IFrame/index.js.map +1 -0
- package/dist/elements/LivePreview/IFrame/index.scss +9 -0
- package/dist/elements/LivePreview/Toggler/index.d.ts +4 -0
- package/dist/elements/LivePreview/Toggler/index.d.ts.map +1 -0
- package/dist/elements/LivePreview/Toggler/index.js +30 -0
- package/dist/elements/LivePreview/Toggler/index.js.map +1 -0
- package/dist/elements/LivePreview/Toggler/index.scss +48 -0
- package/dist/elements/LivePreview/Toolbar/Controls/index.d.ts +5 -0
- package/dist/elements/LivePreview/Toolbar/Controls/index.d.ts.map +1 -0
- package/dist/elements/LivePreview/Toolbar/Controls/index.js +157 -0
- package/dist/elements/LivePreview/Toolbar/Controls/index.js.map +1 -0
- package/dist/elements/LivePreview/Toolbar/Controls/index.scss +61 -0
- package/dist/elements/LivePreview/Toolbar/SizeInput/index.d.ts +6 -0
- package/dist/elements/LivePreview/Toolbar/SizeInput/index.d.ts.map +1 -0
- package/dist/elements/LivePreview/Toolbar/SizeInput/index.js +101 -0
- package/dist/elements/LivePreview/Toolbar/SizeInput/index.js.map +1 -0
- package/dist/elements/LivePreview/Toolbar/SizeInput/index.scss +12 -0
- package/dist/elements/LivePreview/Toolbar/index.d.ts +7 -0
- package/dist/elements/LivePreview/Toolbar/index.d.ts.map +1 -0
- package/dist/elements/LivePreview/Toolbar/index.js +97 -0
- package/dist/elements/LivePreview/Toolbar/index.js.map +1 -0
- package/dist/elements/LivePreview/Toolbar/index.scss +43 -0
- package/dist/elements/LivePreview/ToolbarArea/index.d.ts +6 -0
- package/dist/elements/LivePreview/ToolbarArea/index.d.ts.map +1 -0
- package/dist/elements/LivePreview/ToolbarArea/index.js +41 -0
- package/dist/elements/LivePreview/ToolbarArea/index.js.map +1 -0
- package/dist/elements/LivePreview/ToolbarArea/index.scss +6 -0
- package/dist/elements/LivePreview/Window/index.d.ts +5 -0
- package/dist/elements/LivePreview/Window/index.d.ts.map +1 -0
- package/dist/elements/LivePreview/Window/index.js +182 -0
- package/dist/elements/LivePreview/Window/index.js.map +1 -0
- package/dist/elements/LivePreview/Window/index.scss +48 -0
- package/dist/elements/PreviewButton/index.d.ts +1 -0
- package/dist/elements/PreviewButton/index.d.ts.map +1 -1
- package/dist/elements/PreviewButton/index.js +13 -10
- package/dist/elements/PreviewButton/index.js.map +1 -1
- package/dist/elements/PreviewButton/index.scss +39 -0
- package/dist/elements/PreviewButton/usePreviewURL.d.ts.map +1 -1
- package/dist/elements/PreviewButton/usePreviewURL.js +1 -1
- package/dist/elements/PreviewButton/usePreviewURL.js.map +1 -1
- package/dist/elements/RelationshipTable/AddNewButton.d.ts +17 -0
- package/dist/elements/RelationshipTable/AddNewButton.d.ts.map +1 -0
- package/dist/elements/RelationshipTable/AddNewButton.js +64 -0
- package/dist/elements/RelationshipTable/AddNewButton.js.map +1 -0
- package/dist/elements/RelationshipTable/index.d.ts.map +1 -1
- package/dist/elements/RelationshipTable/index.js +35 -49
- package/dist/elements/RelationshipTable/index.js.map +1 -1
- package/dist/elements/RelationshipTable/index.scss +4 -0
- package/dist/elements/ShimmerEffect/index.d.ts +2 -0
- package/dist/elements/ShimmerEffect/index.d.ts.map +1 -1
- package/dist/elements/ShimmerEffect/index.js +5 -3
- package/dist/elements/ShimmerEffect/index.js.map +1 -1
- package/dist/elements/Table/index.scss +1 -0
- package/dist/elements/Thumbnail/createThumbnail.d.ts.map +1 -1
- package/dist/elements/Thumbnail/createThumbnail.js +8 -2
- package/dist/elements/Thumbnail/createThumbnail.js.map +1 -1
- package/dist/exports/client/{CodeEditor-Z3ZZJH7C.js → CodeEditor-YP63NRLU.js} +2 -2
- package/dist/exports/client/{chunk-CNCOIY3Y.js → chunk-5EP6VERX.js} +4 -4
- package/dist/exports/client/{chunk-CNCOIY3Y.js.map → chunk-5EP6VERX.js.map} +3 -3
- package/dist/exports/client/index.d.ts +3 -2
- package/dist/exports/client/index.d.ts.map +1 -1
- package/dist/exports/client/index.js +22 -22
- package/dist/exports/client/index.js.map +4 -4
- package/dist/exports/shared/index.js +1 -1
- package/dist/exports/shared/index.js.map +2 -2
- package/dist/fields/DateTime/index.d.ts.map +1 -1
- package/dist/fields/DateTime/index.js +1 -0
- package/dist/fields/DateTime/index.js.map +1 -1
- package/dist/forms/Form/index.d.ts.map +1 -1
- package/dist/forms/Form/index.js +1 -1
- package/dist/forms/Form/index.js.map +1 -1
- package/dist/forms/Form/mergeServerFormState.js +1 -1
- package/dist/forms/Form/mergeServerFormState.js.map +1 -1
- package/dist/hooks/usePopupWindow.d.ts +20 -0
- package/dist/hooks/usePopupWindow.d.ts.map +1 -0
- package/dist/hooks/usePopupWindow.js +144 -0
- package/dist/hooks/usePopupWindow.js.map +1 -0
- package/dist/icons/ExternalLink/index.d.ts.map +1 -0
- package/dist/icons/ExternalLink/index.js.map +1 -0
- package/dist/icons/Eye/index.d.ts +7 -0
- package/dist/icons/Eye/index.d.ts.map +1 -0
- package/dist/icons/Eye/index.js +28 -0
- package/dist/icons/Eye/index.js.map +1 -0
- package/dist/icons/Eye/index.scss +20 -0
- package/dist/providers/ListQuery/types.d.ts +2 -2
- package/dist/providers/ListQuery/types.d.ts.map +1 -1
- package/dist/providers/ListQuery/types.js.map +1 -1
- package/dist/providers/LivePreview/collisionDetection.d.ts +3 -0
- package/dist/providers/LivePreview/collisionDetection.d.ts.map +1 -0
- package/dist/providers/LivePreview/collisionDetection.js +29 -0
- package/dist/providers/LivePreview/collisionDetection.js.map +1 -0
- package/dist/providers/LivePreview/context.d.ts +55 -0
- package/dist/providers/LivePreview/context.d.ts.map +1 -0
- package/dist/providers/LivePreview/context.js +44 -0
- package/dist/providers/LivePreview/context.js.map +1 -0
- package/dist/providers/LivePreview/index.d.ts +16 -0
- package/dist/providers/LivePreview/index.d.ts.map +1 -0
- package/dist/providers/LivePreview/index.js +206 -0
- package/dist/providers/LivePreview/index.js.map +1 -0
- package/dist/providers/LivePreview/index.scss +68 -0
- package/dist/providers/LivePreview/sizeReducer.d.ts +20 -0
- package/dist/providers/LivePreview/sizeReducer.d.ts.map +1 -0
- package/dist/providers/LivePreview/sizeReducer.js +30 -0
- package/dist/providers/LivePreview/sizeReducer.js.map +1 -0
- package/dist/providers/TableColumns/buildColumnState/index.d.ts +3 -3
- package/dist/providers/TableColumns/buildColumnState/index.d.ts.map +1 -1
- package/dist/providers/TableColumns/buildColumnState/index.js.map +1 -1
- package/dist/providers/TableColumns/getInitialColumns.d.ts +2 -2
- package/dist/providers/TableColumns/getInitialColumns.d.ts.map +1 -1
- package/dist/providers/TableColumns/getInitialColumns.js.map +1 -1
- package/dist/providers/TableColumns/types.d.ts +2 -2
- package/dist/providers/TableColumns/types.d.ts.map +1 -1
- package/dist/providers/TableColumns/types.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/utilities/buildTableState.d.ts +2 -2
- package/dist/utilities/buildTableState.d.ts.map +1 -1
- package/dist/utilities/buildTableState.js +4 -4
- package/dist/utilities/buildTableState.js.map +1 -1
- package/dist/utilities/formatDocTitle/index.js +2 -2
- package/dist/utilities/formatDocTitle/index.js.map +1 -1
- package/dist/utilities/renderTable.d.ts +3 -3
- package/dist/utilities/renderTable.d.ts.map +1 -1
- package/dist/utilities/renderTable.js.map +1 -1
- package/dist/views/Edit/index.d.ts.map +1 -1
- package/dist/views/Edit/index.js +52 -41
- package/dist/views/Edit/index.js.map +1 -1
- package/dist/views/Edit/index.scss +39 -1
- package/package.json +4 -4
- package/dist/elements/BulkUpload/index.scss +0 -0
- package/dist/graphics/ExternalLink/index.d.ts.map +0 -1
- package/dist/graphics/ExternalLink/index.js.map +0 -1
- /package/dist/exports/client/{CodeEditor-Z3ZZJH7C.js.map → CodeEditor-YP63NRLU.js.map} +0 -0
- /package/dist/{graphics → icons}/ExternalLink/index.d.ts +0 -0
- /package/dist/{graphics → icons}/ExternalLink/index.js +0 -0
- /package/dist/{graphics → icons}/ExternalLink/index.scss +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["fieldIsSidebar","React","useMemo","RenderFields","Gutter","baseClass","DocumentFields","AfterFields","BeforeFields","Description","docPermissions","fields","forceSidebarWrap","readOnly","schemaPathSegments","hasSidebarFields","mainFields","sidebarFields","reduce","acc","field","push","_jsxs","className","filter","Boolean","join","_jsx","forceRender","parentIndexPath","parentPath","parentSchemaPath","permissions"],"sources":["../../../src/elements/DocumentFields/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, SanitizedDocumentPermissions } from 'payload'\n\nimport { fieldIsSidebar } from 'payload/shared'\nimport React, { useMemo } from 'react'\n\nimport {
|
|
1
|
+
{"version":3,"file":"index.js","names":["fieldIsSidebar","React","useMemo","RenderFields","Gutter","baseClass","DocumentFields","AfterFields","BeforeFields","Description","docPermissions","fields","forceSidebarWrap","readOnly","schemaPathSegments","hasSidebarFields","mainFields","sidebarFields","reduce","acc","field","push","_jsxs","className","filter","Boolean","join","_jsx","forceRender","parentIndexPath","parentPath","parentSchemaPath","permissions"],"sources":["../../../src/elements/DocumentFields/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, SanitizedDocumentPermissions } from 'payload'\n\nimport { fieldIsSidebar } from 'payload/shared'\nimport React, { useMemo } from 'react'\n\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { Gutter } from '../Gutter/index.js'\nimport './index.scss'\n\nconst baseClass = 'document-fields'\n\ntype Args = {\n readonly AfterFields?: React.ReactNode\n readonly BeforeFields?: React.ReactNode\n readonly Description?: React.ReactNode\n readonly docPermissions: SanitizedDocumentPermissions\n readonly fields: ClientField[]\n readonly forceSidebarWrap?: boolean\n readonly readOnly?: boolean\n readonly schemaPathSegments: string[]\n}\n\nexport const DocumentFields: React.FC<Args> = ({\n AfterFields,\n BeforeFields,\n Description,\n docPermissions,\n fields,\n forceSidebarWrap,\n readOnly,\n schemaPathSegments,\n}) => {\n const { hasSidebarFields, mainFields, sidebarFields } = useMemo(() => {\n return fields.reduce(\n (acc, field) => {\n if (fieldIsSidebar(field)) {\n acc.sidebarFields.push(field)\n acc.mainFields.push(null)\n acc.hasSidebarFields = true\n } else {\n acc.mainFields.push(field)\n acc.sidebarFields.push(null)\n }\n return acc\n },\n {\n hasSidebarFields: false,\n mainFields: [] as ClientField[],\n sidebarFields: [] as ClientField[],\n },\n )\n }, [fields])\n\n return (\n <div\n className={[\n baseClass,\n hasSidebarFields ? `${baseClass}--has-sidebar` : `${baseClass}--no-sidebar`,\n forceSidebarWrap && `${baseClass}--force-sidebar-wrap`,\n ]\n .filter(Boolean)\n .join(' ')}\n >\n <div className={`${baseClass}__main`}>\n <Gutter className={`${baseClass}__edit`}>\n {Description ? (\n <header className={`${baseClass}__header`}>\n <div className={`${baseClass}__sub-header`}>{Description}</div>\n </header>\n ) : null}\n {BeforeFields}\n <RenderFields\n className={`${baseClass}__fields`}\n fields={mainFields}\n forceRender\n parentIndexPath=\"\"\n parentPath=\"\"\n parentSchemaPath={schemaPathSegments.join('.')}\n permissions={docPermissions?.fields}\n readOnly={readOnly}\n />\n {AfterFields}\n </Gutter>\n </div>\n {hasSidebarFields ? (\n <div className={`${baseClass}__sidebar-wrap`}>\n <div className={`${baseClass}__sidebar`}>\n <div className={`${baseClass}__sidebar-fields`}>\n <RenderFields\n fields={sidebarFields}\n forceRender\n parentIndexPath=\"\"\n parentPath=\"\"\n parentSchemaPath={schemaPathSegments.join('.')}\n permissions={docPermissions?.fields}\n readOnly={readOnly}\n />\n </div>\n </div>\n </div>\n ) : null}\n </div>\n )\n}\n"],"mappings":"AAAA;;;AAGA,SAASA,cAAc,QAAQ;AAC/B,OAAOC,KAAA,IAASC,OAAO,QAAQ;AAE/B,SAASC,YAAY,QAAQ;AAC7B,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAalB,OAAO,MAAMC,cAAA,GAAiCA,CAAC;EAC7CC,WAAW;EACXC,YAAY;EACZC,WAAW;EACXC,cAAc;EACdC,MAAM;EACNC,gBAAgB;EAChBC,QAAQ;EACRC;AAAkB,CACnB;EACC,MAAM;IAAEC,gBAAgB;IAAEC,UAAU;IAAEC;EAAa,CAAE,GAAGf,OAAA,CAAQ;IAC9D,OAAOS,MAAA,CAAOO,MAAM,CAClB,CAACC,GAAA,EAAKC,KAAA;MACJ,IAAIpB,cAAA,CAAeoB,KAAA,GAAQ;QACzBD,GAAA,CAAIF,aAAa,CAACI,IAAI,CAACD,KAAA;QACvBD,GAAA,CAAIH,UAAU,CAACK,IAAI,CAAC;QACpBF,GAAA,CAAIJ,gBAAgB,GAAG;MACzB,OAAO;QACLI,GAAA,CAAIH,UAAU,CAACK,IAAI,CAACD,KAAA;QACpBD,GAAA,CAAIF,aAAa,CAACI,IAAI,CAAC;MACzB;MACA,OAAOF,GAAA;IACT,GACA;MACEJ,gBAAA,EAAkB;MAClBC,UAAA,EAAY,EAAE;MACdC,aAAA,EAAe;IACjB;EAEJ,GAAG,CAACN,MAAA,CAAO;EAEX,oBACEW,KAAA,CAAC;IACCC,SAAA,EAAW,CACTlB,SAAA,EACAU,gBAAA,GAAmB,GAAGV,SAAA,eAAwB,GAAG,GAAGA,SAAA,cAAuB,EAC3EO,gBAAA,IAAoB,GAAGP,SAAA,sBAA+B,CACvD,CACEmB,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;4BAERC,IAAA,CAAC;MAAIJ,SAAA,EAAW,GAAGlB,SAAA,QAAiB;gBAClC,aAAAiB,KAAA,CAAClB,MAAA;QAAOmB,SAAA,EAAW,GAAGlB,SAAA,QAAiB;mBACpCI,WAAA,gBACCkB,IAAA,CAAC;UAAOJ,SAAA,EAAW,GAAGlB,SAAA,UAAmB;oBACvC,aAAAsB,IAAA,CAAC;YAAIJ,SAAA,EAAW,GAAGlB,SAAA,cAAuB;sBAAGI;;aAE7C,MACHD,YAAA,E,aACDmB,IAAA,CAACxB,YAAA;UACCoB,SAAA,EAAW,GAAGlB,SAAA,UAAmB;UACjCM,MAAA,EAAQK,UAAA;UACRY,WAAW;UACXC,eAAA,EAAgB;UAChBC,UAAA,EAAW;UACXC,gBAAA,EAAkBjB,kBAAA,CAAmBY,IAAI,CAAC;UAC1CM,WAAA,EAAatB,cAAA,EAAgBC,MAAA;UAC7BE,QAAA,EAAUA;YAEXN,WAAA;;QAGJQ,gBAAA,gBACCY,IAAA,CAAC;MAAIJ,SAAA,EAAW,GAAGlB,SAAA,gBAAyB;gBAC1C,aAAAsB,IAAA,CAAC;QAAIJ,SAAA,EAAW,GAAGlB,SAAA,WAAoB;kBACrC,aAAAsB,IAAA,CAAC;UAAIJ,SAAA,EAAW,GAAGlB,SAAA,kBAA2B;oBAC5C,aAAAsB,IAAA,CAACxB,YAAA;YACCQ,MAAA,EAAQM,aAAA;YACRW,WAAW;YACXC,eAAA,EAAgB;YAChBC,UAAA,EAAW;YACXC,gBAAA,EAAkBjB,kBAAA,CAAmBY,IAAI,CAAC;YAC1CM,WAAA,EAAatB,cAAA,EAAgBC,MAAA;YAC7BE,QAAA,EAAUA;;;;SAKhB;;AAGV","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePreventLeave.d.ts","sourceRoot":"","sources":["../../../src/elements/LeaveWithoutSaving/usePreventLeave.tsx"],"names":[],"mappings":"AA4BA,eAAO,MAAM,eAAe,aAAa,CAAC,MAAM,OAAO,CAAC,GAAG,OAAO,YAAmB,MAAM,SA6B1F,CAAA;AAED,eAAO,MAAM,eAAe,4DAMzB;IACD,WAAW,EAAE,OAAO,CAAA;IAEpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IAErB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,OAAO,EAAE,OAAO,CAAA;CACjB,
|
|
1
|
+
{"version":3,"file":"usePreventLeave.d.ts","sourceRoot":"","sources":["../../../src/elements/LeaveWithoutSaving/usePreventLeave.tsx"],"names":[],"mappings":"AA4BA,eAAO,MAAM,eAAe,aAAa,CAAC,MAAM,OAAO,CAAC,GAAG,OAAO,YAAmB,MAAM,SA6B1F,CAAA;AAED,eAAO,MAAM,eAAe,4DAMzB;IACD,WAAW,EAAE,OAAO,CAAA;IAEpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IAErB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,OAAO,EAAE,OAAO,CAAA;CACjB,SA0FA,CAAA"}
|
|
@@ -79,14 +79,18 @@ export const usePreventLeave = ({
|
|
|
79
79
|
// check when page is about to be changed
|
|
80
80
|
useEffect(() => {
|
|
81
81
|
function isAnchorOfCurrentUrl(currentUrl, newUrl) {
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
82
|
+
try {
|
|
83
|
+
const currentUrlObj = new URL(currentUrl);
|
|
84
|
+
const newUrlObj = new URL(newUrl);
|
|
85
|
+
// Compare hostname, pathname, and search parameters
|
|
86
|
+
if (currentUrlObj.hostname === newUrlObj.hostname && currentUrlObj.pathname === newUrlObj.pathname && currentUrlObj.search === newUrlObj.search) {
|
|
87
|
+
// Check if the new URL is just an anchor of the current URL page
|
|
88
|
+
const currentHash = currentUrlObj.hash;
|
|
89
|
+
const newHash = newUrlObj.hash;
|
|
90
|
+
return currentHash !== newHash && currentUrlObj.href.replace(currentHash, '') === newUrlObj.href.replace(newHash, '');
|
|
91
|
+
}
|
|
92
|
+
} catch (err) {
|
|
93
|
+
console.log('Unexpected exception thrown in LeaveWithoutSaving:isAnchorOfCurrentUrl', err);
|
|
90
94
|
}
|
|
91
95
|
return false;
|
|
92
96
|
}
|
|
@@ -118,8 +122,8 @@ export const usePreventLeave = ({
|
|
|
118
122
|
}
|
|
119
123
|
}
|
|
120
124
|
}
|
|
121
|
-
} catch (
|
|
122
|
-
|
|
125
|
+
} catch (err_0) {
|
|
126
|
+
console.log('Unexpected exception thrown in LeaveWithoutSaving:usePreventLeave', err_0);
|
|
123
127
|
}
|
|
124
128
|
}
|
|
125
129
|
// Add the global click event listener
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePreventLeave.js","names":["c","_c","useRouter","useCallback","useEffect","useRef","useRouteTransition","on","obj","args","addEventListener","off","removeEventListener","useBeforeUnload","t0","message","$","enabled","undefined","t1","event","finalEnabled","preventDefault","returnValue","handler","t2","t3","window","usePreventLeave","hasAccepted","onAccept","onPrevent","prevent","startRouteTransition","router","cancelledURL","isAnchorOfCurrentUrl","currentUrl","newUrl","currentUrlObj","URL","newUrlObj","hostname","pathname","search","currentHash","hash","newHash","href","replace","findClosestAnchor","element","tagName","toLowerCase","parentElement","handleClick","target","anchor","location","isAnchor","isDownloadLink","download","isNewTab","metaKey","ctrlKey","isPageLeaving","confirm","current","stopPropagation","err","alert","document","push"],"sources":["../../../src/elements/LeaveWithoutSaving/usePreventLeave.tsx"],"sourcesContent":["'use client'\n// Credit: @Taiki92777\n// - Source: https://github.com/vercel/next.js/discussions/32231#discussioncomment-7284386\n// Credit: `react-use` maintainers\n// - Source: https://github.com/streamich/react-use/blob/ade8d3905f544305515d010737b4ae604cc51024/src/useBeforeUnload.ts#L2\nimport { useRouter } from 'next/navigation.js'\nimport { useCallback, useEffect, useRef } from 'react'\n\nimport { useRouteTransition } from '../../providers/RouteTransition/index.js'\n\nfunction on<T extends Document | EventTarget | HTMLElement | Window>(\n obj: null | T,\n ...args: [string, (() => void) | null, ...any] | Parameters<T['addEventListener']>\n): void {\n if (obj && obj.addEventListener) {\n obj.addEventListener(...(args as Parameters<HTMLElement['addEventListener']>))\n }\n}\n\nfunction off<T extends Document | EventTarget | HTMLElement | Window>(\n obj: null | T,\n ...args: [string, (() => void) | null, ...any] | Parameters<T['removeEventListener']>\n): void {\n if (obj && obj.removeEventListener) {\n obj.removeEventListener(...(args as Parameters<HTMLElement['removeEventListener']>))\n }\n}\n\nexport const useBeforeUnload = (enabled: (() => boolean) | boolean = true, message?: string) => {\n const handler = useCallback(\n (event: BeforeUnloadEvent) => {\n const finalEnabled = typeof enabled === 'function' ? enabled() : true\n\n if (!finalEnabled) {\n return\n }\n\n event.preventDefault()\n\n if (message) {\n event.returnValue = message\n }\n\n return message\n },\n [enabled, message],\n )\n\n useEffect(() => {\n if (!enabled) {\n return\n }\n\n on(window, 'beforeunload', handler)\n\n return () => off(window, 'beforeunload', handler)\n }, [enabled, handler])\n}\n\nexport const usePreventLeave = ({\n hasAccepted = false,\n message = 'Are you sure want to leave this page?',\n onAccept,\n onPrevent,\n prevent = true,\n}: {\n hasAccepted: boolean\n // if no `onPrevent` is provided, the message will be displayed in a confirm dialog\n message?: string\n onAccept?: () => void\n // to use a custom confirmation dialog, provide a function that returns a boolean\n onPrevent?: () => void\n prevent: boolean\n}) => {\n // check when page is about to be reloaded\n useBeforeUnload(prevent, message)\n const { startRouteTransition } = useRouteTransition()\n\n const router = useRouter()\n const cancelledURL = useRef<string>('')\n\n // check when page is about to be changed\n useEffect(() => {\n function isAnchorOfCurrentUrl(currentUrl: string, newUrl: string) {\n const currentUrlObj = new URL(currentUrl)\n const newUrlObj = new URL(newUrl)\n // Compare hostname, pathname, and search parameters\n if (\n currentUrlObj.hostname === newUrlObj.hostname &&\n currentUrlObj.pathname === newUrlObj.pathname &&\n currentUrlObj.search === newUrlObj.search\n ) {\n // Check if the new URL is just an anchor of the current URL page\n const currentHash = currentUrlObj.hash\n const newHash = newUrlObj.hash\n return (\n currentHash !== newHash &&\n currentUrlObj.href.replace(currentHash, '') === newUrlObj.href.replace(newHash, '')\n )\n }\n return false\n }\n\n function findClosestAnchor(element: HTMLElement | null): HTMLAnchorElement | null {\n while (element && element.tagName.toLowerCase() !== 'a') {\n element = element.parentElement\n }\n return element as HTMLAnchorElement\n }\n\n function handleClick(event: MouseEvent) {\n try {\n const target = event.target as HTMLElement\n const anchor = findClosestAnchor(target)\n if (anchor) {\n const currentUrl = window.location.href\n const newUrl = anchor.href\n const isAnchor = isAnchorOfCurrentUrl(currentUrl, newUrl)\n const isDownloadLink = anchor.download !== ''\n const isNewTab = anchor.target === '_blank' || event.metaKey || event.ctrlKey\n\n const isPageLeaving = !(newUrl === currentUrl || isAnchor || isDownloadLink || isNewTab)\n\n if (isPageLeaving && prevent && (!onPrevent ? !window.confirm(message) : true)) {\n // Keep a reference of the href\n cancelledURL.current = newUrl\n\n // Cancel the route change\n event.preventDefault()\n event.stopPropagation()\n\n if (typeof onPrevent === 'function') {\n onPrevent()\n }\n }\n }\n } catch (err) {\n alert(err)\n }\n }\n\n // Add the global click event listener\n document.addEventListener('click', handleClick, true)\n\n // Clean up the global click event listener when the component is unmounted\n return () => {\n document.removeEventListener('click', handleClick, true)\n }\n }, [onPrevent, prevent, message])\n\n useEffect(() => {\n if (hasAccepted && cancelledURL.current) {\n if (onAccept) {\n onAccept()\n }\n\n startRouteTransition(() => router.push(cancelledURL.current))\n }\n }, [hasAccepted, onAccept, router, startRouteTransition])\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"usePreventLeave.js","names":["c","_c","useRouter","useCallback","useEffect","useRef","useRouteTransition","on","obj","args","addEventListener","off","removeEventListener","useBeforeUnload","t0","message","$","enabled","undefined","t1","event","finalEnabled","preventDefault","returnValue","handler","t2","t3","window","usePreventLeave","hasAccepted","onAccept","onPrevent","prevent","startRouteTransition","router","cancelledURL","isAnchorOfCurrentUrl","currentUrl","newUrl","currentUrlObj","URL","newUrlObj","hostname","pathname","search","currentHash","hash","newHash","href","replace","err","console","log","findClosestAnchor","element","tagName","toLowerCase","parentElement","handleClick","target","anchor","location","isAnchor","isDownloadLink","download","isNewTab","metaKey","ctrlKey","isPageLeaving","confirm","current","stopPropagation","document","push"],"sources":["../../../src/elements/LeaveWithoutSaving/usePreventLeave.tsx"],"sourcesContent":["'use client'\n// Credit: @Taiki92777\n// - Source: https://github.com/vercel/next.js/discussions/32231#discussioncomment-7284386\n// Credit: `react-use` maintainers\n// - Source: https://github.com/streamich/react-use/blob/ade8d3905f544305515d010737b4ae604cc51024/src/useBeforeUnload.ts#L2\nimport { useRouter } from 'next/navigation.js'\nimport { useCallback, useEffect, useRef } from 'react'\n\nimport { useRouteTransition } from '../../providers/RouteTransition/index.js'\n\nfunction on<T extends Document | EventTarget | HTMLElement | Window>(\n obj: null | T,\n ...args: [string, (() => void) | null, ...any] | Parameters<T['addEventListener']>\n): void {\n if (obj && obj.addEventListener) {\n obj.addEventListener(...(args as Parameters<HTMLElement['addEventListener']>))\n }\n}\n\nfunction off<T extends Document | EventTarget | HTMLElement | Window>(\n obj: null | T,\n ...args: [string, (() => void) | null, ...any] | Parameters<T['removeEventListener']>\n): void {\n if (obj && obj.removeEventListener) {\n obj.removeEventListener(...(args as Parameters<HTMLElement['removeEventListener']>))\n }\n}\n\nexport const useBeforeUnload = (enabled: (() => boolean) | boolean = true, message?: string) => {\n const handler = useCallback(\n (event: BeforeUnloadEvent) => {\n const finalEnabled = typeof enabled === 'function' ? enabled() : true\n\n if (!finalEnabled) {\n return\n }\n\n event.preventDefault()\n\n if (message) {\n event.returnValue = message\n }\n\n return message\n },\n [enabled, message],\n )\n\n useEffect(() => {\n if (!enabled) {\n return\n }\n\n on(window, 'beforeunload', handler)\n\n return () => off(window, 'beforeunload', handler)\n }, [enabled, handler])\n}\n\nexport const usePreventLeave = ({\n hasAccepted = false,\n message = 'Are you sure want to leave this page?',\n onAccept,\n onPrevent,\n prevent = true,\n}: {\n hasAccepted: boolean\n // if no `onPrevent` is provided, the message will be displayed in a confirm dialog\n message?: string\n onAccept?: () => void\n // to use a custom confirmation dialog, provide a function that returns a boolean\n onPrevent?: () => void\n prevent: boolean\n}) => {\n // check when page is about to be reloaded\n useBeforeUnload(prevent, message)\n const { startRouteTransition } = useRouteTransition()\n\n const router = useRouter()\n const cancelledURL = useRef<string>('')\n\n // check when page is about to be changed\n useEffect(() => {\n function isAnchorOfCurrentUrl(currentUrl: string, newUrl: string) {\n try {\n const currentUrlObj = new URL(currentUrl)\n const newUrlObj = new URL(newUrl)\n // Compare hostname, pathname, and search parameters\n if (\n currentUrlObj.hostname === newUrlObj.hostname &&\n currentUrlObj.pathname === newUrlObj.pathname &&\n currentUrlObj.search === newUrlObj.search\n ) {\n // Check if the new URL is just an anchor of the current URL page\n const currentHash = currentUrlObj.hash\n const newHash = newUrlObj.hash\n return (\n currentHash !== newHash &&\n currentUrlObj.href.replace(currentHash, '') === newUrlObj.href.replace(newHash, '')\n )\n }\n } catch (err) {\n console.log('Unexpected exception thrown in LeaveWithoutSaving:isAnchorOfCurrentUrl', err)\n }\n return false\n }\n\n function findClosestAnchor(element: HTMLElement | null): HTMLAnchorElement | null {\n while (element && element.tagName.toLowerCase() !== 'a') {\n element = element.parentElement\n }\n return element as HTMLAnchorElement\n }\n\n function handleClick(event: MouseEvent) {\n try {\n const target = event.target as HTMLElement\n const anchor = findClosestAnchor(target)\n if (anchor) {\n const currentUrl = window.location.href\n const newUrl = anchor.href\n const isAnchor = isAnchorOfCurrentUrl(currentUrl, newUrl)\n const isDownloadLink = anchor.download !== ''\n const isNewTab = anchor.target === '_blank' || event.metaKey || event.ctrlKey\n\n const isPageLeaving = !(newUrl === currentUrl || isAnchor || isDownloadLink || isNewTab)\n\n if (isPageLeaving && prevent && (!onPrevent ? !window.confirm(message) : true)) {\n // Keep a reference of the href\n cancelledURL.current = newUrl\n\n // Cancel the route change\n event.preventDefault()\n event.stopPropagation()\n\n if (typeof onPrevent === 'function') {\n onPrevent()\n }\n }\n }\n } catch (err) {\n console.log('Unexpected exception thrown in LeaveWithoutSaving:usePreventLeave', err)\n }\n }\n\n // Add the global click event listener\n document.addEventListener('click', handleClick, true)\n\n // Clean up the global click event listener when the component is unmounted\n return () => {\n document.removeEventListener('click', handleClick, true)\n }\n }, [onPrevent, prevent, message])\n\n useEffect(() => {\n if (hasAccepted && cancelledURL.current) {\n if (onAccept) {\n onAccept()\n }\n\n startRouteTransition(() => router.push(cancelledURL.current))\n }\n }, [hasAccepted, onAccept, router, startRouteTransition])\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/LivePreview/Device/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAKxC,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAmGA,CAAA"}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
4
|
+
import React, { useEffect } from 'react';
|
|
5
|
+
import { useResize } from '../../../hooks/useResize.js';
|
|
6
|
+
import { useLivePreviewContext } from '../../../providers/LivePreview/context.js';
|
|
7
|
+
export const DeviceContainer = props => {
|
|
8
|
+
const {
|
|
9
|
+
children
|
|
10
|
+
} = props;
|
|
11
|
+
const deviceFrameRef = React.useRef(null);
|
|
12
|
+
const outerFrameRef = React.useRef(null);
|
|
13
|
+
const {
|
|
14
|
+
breakpoint,
|
|
15
|
+
setMeasuredDeviceSize,
|
|
16
|
+
size: desiredSize,
|
|
17
|
+
zoom
|
|
18
|
+
} = useLivePreviewContext();
|
|
19
|
+
// Keep an accurate measurement of the actual device size as it is truly rendered
|
|
20
|
+
// This is helpful when `sizes` are non-number units like percentages, etc.
|
|
21
|
+
const {
|
|
22
|
+
size: measuredDeviceSize
|
|
23
|
+
} = useResize(deviceFrameRef.current);
|
|
24
|
+
const {
|
|
25
|
+
size: outerFrameSize
|
|
26
|
+
} = useResize(outerFrameRef.current);
|
|
27
|
+
let deviceIsLargerThanFrame = false;
|
|
28
|
+
// Sync the measured device size with the context so that other components can use it
|
|
29
|
+
// This happens from the bottom up so that as this component mounts and unmounts,
|
|
30
|
+
// its size is freshly populated again upon re-mounting, i.e. going from iframe->popup->iframe
|
|
31
|
+
useEffect(() => {
|
|
32
|
+
if (measuredDeviceSize) {
|
|
33
|
+
setMeasuredDeviceSize(measuredDeviceSize);
|
|
34
|
+
}
|
|
35
|
+
}, [measuredDeviceSize, setMeasuredDeviceSize]);
|
|
36
|
+
let x = '0';
|
|
37
|
+
let margin = '0';
|
|
38
|
+
if (breakpoint && breakpoint !== 'responsive') {
|
|
39
|
+
x = '-50%';
|
|
40
|
+
if (desiredSize && measuredDeviceSize && typeof zoom === 'number' && typeof desiredSize.width === 'number' && typeof desiredSize.height === 'number' && typeof measuredDeviceSize.width === 'number' && typeof measuredDeviceSize.height === 'number') {
|
|
41
|
+
margin = '0 auto';
|
|
42
|
+
const scaledDesiredWidth = desiredSize.width / zoom;
|
|
43
|
+
const scaledDeviceWidth = measuredDeviceSize.width * zoom;
|
|
44
|
+
const scaledDeviceDifferencePixels = scaledDesiredWidth - desiredSize.width;
|
|
45
|
+
deviceIsLargerThanFrame = scaledDeviceWidth > outerFrameSize.width;
|
|
46
|
+
if (deviceIsLargerThanFrame) {
|
|
47
|
+
if (zoom > 1) {
|
|
48
|
+
const differenceFromDeviceToFrame = measuredDeviceSize.width - outerFrameSize.width;
|
|
49
|
+
if (differenceFromDeviceToFrame < 0) {
|
|
50
|
+
x = `${differenceFromDeviceToFrame / 2}px`;
|
|
51
|
+
} else {
|
|
52
|
+
x = '0';
|
|
53
|
+
}
|
|
54
|
+
} else {
|
|
55
|
+
x = '0';
|
|
56
|
+
}
|
|
57
|
+
} else {
|
|
58
|
+
if (zoom >= 1) {
|
|
59
|
+
x = `${scaledDeviceDifferencePixels / 2}px`;
|
|
60
|
+
} else {
|
|
61
|
+
const differenceFromDeviceToFrame_0 = outerFrameSize.width - scaledDeviceWidth;
|
|
62
|
+
x = `${differenceFromDeviceToFrame_0 / 2}px`;
|
|
63
|
+
margin = '0';
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
let width = zoom ? `${100 / zoom}%` : '100%';
|
|
69
|
+
let height = zoom ? `${100 / zoom}%` : '100%';
|
|
70
|
+
if (breakpoint !== 'responsive') {
|
|
71
|
+
width = `${desiredSize?.width / (typeof zoom === 'number' ? zoom : 1)}px`;
|
|
72
|
+
height = `${desiredSize?.height / (typeof zoom === 'number' ? zoom : 1)}px`;
|
|
73
|
+
}
|
|
74
|
+
return /*#__PURE__*/_jsx("div", {
|
|
75
|
+
ref: outerFrameRef,
|
|
76
|
+
style: {
|
|
77
|
+
height: '100%',
|
|
78
|
+
width: '100%'
|
|
79
|
+
},
|
|
80
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
81
|
+
ref: deviceFrameRef,
|
|
82
|
+
style: {
|
|
83
|
+
height,
|
|
84
|
+
margin,
|
|
85
|
+
transform: `translate3d(${x}, 0, 0)`,
|
|
86
|
+
width
|
|
87
|
+
},
|
|
88
|
+
children: children
|
|
89
|
+
})
|
|
90
|
+
});
|
|
91
|
+
};
|
|
92
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useEffect","useResize","useLivePreviewContext","DeviceContainer","props","children","deviceFrameRef","useRef","outerFrameRef","breakpoint","setMeasuredDeviceSize","size","desiredSize","zoom","measuredDeviceSize","current","outerFrameSize","deviceIsLargerThanFrame","x","margin","width","height","scaledDesiredWidth","scaledDeviceWidth","scaledDeviceDifferencePixels","differenceFromDeviceToFrame","_jsx","ref","style","transform"],"sources":["../../../../src/elements/LivePreview/Device/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect } from 'react'\n\nimport { useResize } from '../../../hooks/useResize.js'\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\n\nexport const DeviceContainer: React.FC<{\n children: React.ReactNode\n}> = (props) => {\n const { children } = props\n\n const deviceFrameRef = React.useRef<HTMLDivElement>(null)\n const outerFrameRef = React.useRef<HTMLDivElement>(null)\n\n const { breakpoint, setMeasuredDeviceSize, size: desiredSize, zoom } = useLivePreviewContext()\n\n // Keep an accurate measurement of the actual device size as it is truly rendered\n // This is helpful when `sizes` are non-number units like percentages, etc.\n\n const { size: measuredDeviceSize } = useResize(deviceFrameRef.current)\n\n const { size: outerFrameSize } = useResize(outerFrameRef.current)\n\n let deviceIsLargerThanFrame: boolean = false\n\n // Sync the measured device size with the context so that other components can use it\n // This happens from the bottom up so that as this component mounts and unmounts,\n // its size is freshly populated again upon re-mounting, i.e. going from iframe->popup->iframe\n useEffect(() => {\n if (measuredDeviceSize) {\n setMeasuredDeviceSize(measuredDeviceSize)\n }\n }, [measuredDeviceSize, setMeasuredDeviceSize])\n\n let x = '0'\n let margin = '0'\n\n if (breakpoint && breakpoint !== 'responsive') {\n x = '-50%'\n\n if (\n desiredSize &&\n measuredDeviceSize &&\n typeof zoom === 'number' &&\n typeof desiredSize.width === 'number' &&\n typeof desiredSize.height === 'number' &&\n typeof measuredDeviceSize.width === 'number' &&\n typeof measuredDeviceSize.height === 'number'\n ) {\n margin = '0 auto'\n const scaledDesiredWidth = desiredSize.width / zoom\n const scaledDeviceWidth = measuredDeviceSize.width * zoom\n const scaledDeviceDifferencePixels = scaledDesiredWidth - desiredSize.width\n deviceIsLargerThanFrame = scaledDeviceWidth > outerFrameSize.width\n\n if (deviceIsLargerThanFrame) {\n if (zoom > 1) {\n const differenceFromDeviceToFrame = measuredDeviceSize.width - outerFrameSize.width\n if (differenceFromDeviceToFrame < 0) {\n x = `${differenceFromDeviceToFrame / 2}px`\n } else {\n x = '0'\n }\n } else {\n x = '0'\n }\n } else {\n if (zoom >= 1) {\n x = `${scaledDeviceDifferencePixels / 2}px`\n } else {\n const differenceFromDeviceToFrame = outerFrameSize.width - scaledDeviceWidth\n x = `${differenceFromDeviceToFrame / 2}px`\n margin = '0'\n }\n }\n }\n }\n\n let width = zoom ? `${100 / zoom}%` : '100%'\n let height = zoom ? `${100 / zoom}%` : '100%'\n\n if (breakpoint !== 'responsive') {\n width = `${desiredSize?.width / (typeof zoom === 'number' ? zoom : 1)}px`\n height = `${desiredSize?.height / (typeof zoom === 'number' ? zoom : 1)}px`\n }\n\n return (\n <div\n ref={outerFrameRef}\n style={{\n height: '100%',\n width: '100%',\n }}\n >\n <div\n ref={deviceFrameRef}\n style={{\n height,\n margin,\n transform: `translate3d(${x}, 0, 0)`,\n width,\n }}\n >\n {children}\n </div>\n </div>\n )\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/LivePreview/DeviceContainer/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CA+CA,CAAA"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { c as _c } from "react/compiler-runtime";
|
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import { useLivePreviewContext } from '../../../providers/LivePreview/context.js';
|
|
7
|
+
export const DeviceContainer = props => {
|
|
8
|
+
const $ = _c(6);
|
|
9
|
+
const {
|
|
10
|
+
children
|
|
11
|
+
} = props;
|
|
12
|
+
const {
|
|
13
|
+
breakpoint,
|
|
14
|
+
breakpoints,
|
|
15
|
+
size,
|
|
16
|
+
zoom
|
|
17
|
+
} = useLivePreviewContext();
|
|
18
|
+
const foundBreakpoint = breakpoint && breakpoints?.find(bp => bp.name === breakpoint);
|
|
19
|
+
let x = "0";
|
|
20
|
+
let margin = "0";
|
|
21
|
+
if (foundBreakpoint && breakpoint !== "responsive") {
|
|
22
|
+
x = "-50%";
|
|
23
|
+
if (typeof zoom === "number" && typeof size.width === "number" && typeof size.height === "number") {
|
|
24
|
+
const scaledWidth = size.width / zoom;
|
|
25
|
+
const difference = scaledWidth - size.width;
|
|
26
|
+
x = `${difference / 2}px`;
|
|
27
|
+
margin = "0 auto";
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
const t0 = foundBreakpoint && foundBreakpoint?.name !== "responsive" ? `${size?.height / (typeof zoom === "number" ? zoom : 1)}px` : typeof zoom === "number" ? `${100 / zoom}%` : "100%";
|
|
31
|
+
const t1 = `translate3d(${x}, 0, 0)`;
|
|
32
|
+
const t2 = foundBreakpoint && foundBreakpoint?.name !== "responsive" ? `${size?.width / (typeof zoom === "number" ? zoom : 1)}px` : typeof zoom === "number" ? `${100 / zoom}%` : "100%";
|
|
33
|
+
let t3;
|
|
34
|
+
if ($[0] !== children || $[1] !== margin || $[2] !== t0 || $[3] !== t1 || $[4] !== t2) {
|
|
35
|
+
t3 = _jsx("div", {
|
|
36
|
+
style: {
|
|
37
|
+
height: t0,
|
|
38
|
+
margin,
|
|
39
|
+
transform: t1,
|
|
40
|
+
width: t2
|
|
41
|
+
},
|
|
42
|
+
children
|
|
43
|
+
});
|
|
44
|
+
$[0] = children;
|
|
45
|
+
$[1] = margin;
|
|
46
|
+
$[2] = t0;
|
|
47
|
+
$[3] = t1;
|
|
48
|
+
$[4] = t2;
|
|
49
|
+
$[5] = t3;
|
|
50
|
+
} else {
|
|
51
|
+
t3 = $[5];
|
|
52
|
+
}
|
|
53
|
+
return t3;
|
|
54
|
+
};
|
|
55
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["c","_c","React","useLivePreviewContext","DeviceContainer","props","$","children","breakpoint","breakpoints","size","zoom","foundBreakpoint","find","bp","name","x","margin","width","height","scaledWidth","difference","t0","t1","t2","t3","_jsx","style","transform"],"sources":["../../../../src/elements/LivePreview/DeviceContainer/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\n\nexport const DeviceContainer: React.FC<{\n children: React.ReactNode\n}> = (props) => {\n const { children } = props\n\n const { breakpoint, breakpoints, size, zoom } = useLivePreviewContext()\n\n const foundBreakpoint = breakpoint && breakpoints?.find((bp) => bp.name === breakpoint)\n\n let x = '0'\n let margin = '0'\n\n if (foundBreakpoint && breakpoint !== 'responsive') {\n x = '-50%'\n\n if (\n typeof zoom === 'number' &&\n typeof size.width === 'number' &&\n typeof size.height === 'number'\n ) {\n const scaledWidth = size.width / zoom\n const difference = scaledWidth - size.width\n x = `${difference / 2}px`\n margin = '0 auto'\n }\n }\n\n return (\n <div\n style={{\n height:\n foundBreakpoint && foundBreakpoint?.name !== 'responsive'\n ? `${size?.height / (typeof zoom === 'number' ? zoom : 1)}px`\n : typeof zoom === 'number'\n ? `${100 / zoom}%`\n : '100%',\n margin,\n transform: `translate3d(${x}, 0, 0)`,\n width:\n foundBreakpoint && foundBreakpoint?.name !== 'responsive'\n ? `${size?.width / (typeof zoom === 'number' ? zoom : 1)}px`\n : typeof zoom === 'number'\n ? `${100 / zoom}%`\n : '100%',\n }}\n >\n {children}\n </div>\n )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,qBAAqB,QAAQ;AAEtC,OAAO,MAAMC,eAAA,GAERC,KAAA;EAAA,MAAAC,CAAA,GAAAL,EAAA;EACH;IAAAM;EAAA,IAAqBF,KAAA;EAErB;IAAAG,UAAA;IAAAC,WAAA;IAAAC,IAAA;IAAAC;EAAA,IAAgDR,qBAAA;EAEhD,MAAAS,eAAA,GAAwBJ,UAAA,IAAcC,WAAA,EAAAI,IAAA,CAAAC,EAAA,IAA0BA,EAAA,CAAAC,IAAA,KAAYP,UAAA;EAE5E,IAAAQ,CAAA,GAAQ;EACR,IAAAC,MAAA,GAAa;EAAA,IAETL,eAAA,IAAmBJ,UAAA,KAAe;IACpCQ,CAAA,CAAAA,CAAA,CAAIA,MAAA;IAAJ,IAGE,OAAOL,IAAA,KAAS,YAChB,OAAOD,IAAA,CAAAQ,KAAA,KAAe,YACtB,OAAOR,IAAA,CAAAS,MAAA,KAAgB;MAEvB,MAAAC,WAAA,GAAoBV,IAAA,CAAAQ,KAAA,GAAaP,IAAA;MACjC,MAAAU,UAAA,GAAmBD,WAAA,GAAcV,IAAA,CAAAQ,KAAU;MAC3CF,CAAA,CAAAA,CAAA,CAAIA,GAAGK,UAAA,IAAa,IAAK;MACzBJ,MAAA,CAAAA,CAAA,CAASA,QAAA;IAAT;EAAA;EAQI,MAAAK,EAAA,GAAAV,eAAA,IAAmBA,eAAA,EAAAG,IAAA,KAA0B,eACzC,GAAGL,IAAA,EAAAS,MAAA,IAAgB,OAAOR,IAAA,KAAS,WAAWA,IAAA,IAAO,KAAM,GAC3D,OAAOA,IAAA,KAAS,WACd,GAAG,MAAMA,IAAA,GAAO,GAChB;EAEG,MAAAY,EAAA,kBAAeP,CAAA,SAAU;EAElC,MAAAQ,EAAA,GAAAZ,eAAA,IAAmBA,eAAA,EAAAG,IAAA,KAA0B,eACzC,GAAGL,IAAA,EAAAQ,KAAA,IAAe,OAAOP,IAAA,KAAS,WAAWA,IAAA,IAAO,KAAM,GAC1D,OAAOA,IAAA,KAAS,WACd,GAAG,MAAMA,IAAA,GAAO,GAChB;EAAA,IAAAc,EAAA;EAAA,IAAAnB,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAW,MAAA,IAAAX,CAAA,QAAAgB,EAAA,IAAAhB,CAAA,QAAAiB,EAAA,IAAAjB,CAAA,QAAAkB,EAAA;IAfZC,EAAA,GAAAC,IAAA,CAAC;MAAAC,KAAA;QAAAR,MAAA,EAGKG,EAIM;QAAAL,MAAA;QAAAW,SAAA,EAEGL,EAAyB;QAAAL,KAAA,EAElCM;MAIM;MAAAjB;IAAA,C;;;;;;;;;;SAfZkB,E;CAqBJ","ignoreList":[]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './index.scss';
|
|
3
|
+
type Props = {
|
|
4
|
+
ref: React.RefObject<HTMLIFrameElement>;
|
|
5
|
+
setIframeHasLoaded: (value: boolean) => void;
|
|
6
|
+
url: string;
|
|
7
|
+
};
|
|
8
|
+
export declare const IFrame: React.FC<Props>;
|
|
9
|
+
export {};
|
|
10
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/LivePreview/IFrame/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAIrB,KAAK,KAAK,GAAG;IACX,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAA;IACvC,kBAAkB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5C,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmBlC,CAAA"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import { useLivePreviewContext } from '../../../providers/LivePreview/context.js';
|
|
6
|
+
import './index.scss';
|
|
7
|
+
const baseClass = 'live-preview-iframe';
|
|
8
|
+
export const IFrame = props => {
|
|
9
|
+
const {
|
|
10
|
+
ref,
|
|
11
|
+
setIframeHasLoaded,
|
|
12
|
+
url
|
|
13
|
+
} = props;
|
|
14
|
+
const {
|
|
15
|
+
zoom
|
|
16
|
+
} = useLivePreviewContext();
|
|
17
|
+
return /*#__PURE__*/_jsx("iframe", {
|
|
18
|
+
className: baseClass,
|
|
19
|
+
onLoad: () => {
|
|
20
|
+
setIframeHasLoaded(true);
|
|
21
|
+
},
|
|
22
|
+
ref: ref,
|
|
23
|
+
src: url,
|
|
24
|
+
style: {
|
|
25
|
+
transform: typeof zoom === 'number' ? `scale(${zoom}) ` : undefined
|
|
26
|
+
},
|
|
27
|
+
title: url
|
|
28
|
+
});
|
|
29
|
+
};
|
|
30
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useLivePreviewContext","baseClass","IFrame","props","ref","setIframeHasLoaded","url","zoom","_jsx","className","onLoad","src","style","transform","undefined","title"],"sources":["../../../../src/elements/LivePreview/IFrame/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-iframe'\n\ntype Props = {\n ref: React.RefObject<HTMLIFrameElement>\n setIframeHasLoaded: (value: boolean) => void\n url: string\n}\n\nexport const IFrame: React.FC<Props> = (props) => {\n const { ref, setIframeHasLoaded, url } = props\n\n const { zoom } = useLivePreviewContext()\n\n return (\n <iframe\n className={baseClass}\n onLoad={() => {\n setIframeHasLoaded(true)\n }}\n ref={ref}\n src={url}\n style={{\n transform: typeof zoom === 'number' ? `scale(${zoom}) ` : undefined,\n }}\n title={url}\n />\n )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,SAASC,qBAAqB,QAAQ;AACtC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAQlB,OAAO,MAAMC,MAAA,GAA2BC,KAAA;EACtC,MAAM;IAAEC,GAAG;IAAEC,kBAAkB;IAAEC;EAAG,CAAE,GAAGH,KAAA;EAEzC,MAAM;IAAEI;EAAI,CAAE,GAAGP,qBAAA;EAEjB,oBACEQ,IAAA,CAAC;IACCC,SAAA,EAAWR,SAAA;IACXS,MAAA,EAAQA,CAAA;MACNL,kBAAA,CAAmB;IACrB;IACAD,GAAA,EAAKA,GAAA;IACLO,GAAA,EAAKL,GAAA;IACLM,KAAA,EAAO;MACLC,SAAA,EAAW,OAAON,IAAA,KAAS,WAAW,SAASA,IAAA,IAAQ,GAAGO;IAC5D;IACAC,KAAA,EAAOT;;AAGb","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/LivePreview/Toggler/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAkBtC,CAAA"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { EyeIcon } from '../../../icons/Eye/index.js';
|
|
4
|
+
import { useLivePreviewContext } from '../../../providers/LivePreview/context.js';
|
|
5
|
+
import { useTranslation } from '../../../providers/Translation/index.js';
|
|
6
|
+
import './index.scss';
|
|
7
|
+
const baseClass = 'live-preview-toggler';
|
|
8
|
+
export const LivePreviewToggler = () => {
|
|
9
|
+
const {
|
|
10
|
+
isLivePreviewing,
|
|
11
|
+
setIsLivePreviewing
|
|
12
|
+
} = useLivePreviewContext();
|
|
13
|
+
const {
|
|
14
|
+
t
|
|
15
|
+
} = useTranslation();
|
|
16
|
+
return /*#__PURE__*/_jsx("button", {
|
|
17
|
+
"aria-label": isLivePreviewing ? t('general:exitLivePreview') : t('general:livePreview'),
|
|
18
|
+
className: [baseClass, isLivePreviewing && `${baseClass}--active`].filter(Boolean).join(' '),
|
|
19
|
+
id: "live-preview-toggler",
|
|
20
|
+
onClick: () => {
|
|
21
|
+
setIsLivePreviewing(!isLivePreviewing);
|
|
22
|
+
},
|
|
23
|
+
title: isLivePreviewing ? t('general:exitLivePreview') : t('general:livePreview'),
|
|
24
|
+
type: "button",
|
|
25
|
+
children: /*#__PURE__*/_jsx(EyeIcon, {
|
|
26
|
+
active: isLivePreviewing
|
|
27
|
+
})
|
|
28
|
+
});
|
|
29
|
+
};
|
|
30
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","EyeIcon","useLivePreviewContext","useTranslation","baseClass","LivePreviewToggler","isLivePreviewing","setIsLivePreviewing","t","_jsx","className","filter","Boolean","join","id","onClick","title","type","active"],"sources":["../../../../src/elements/LivePreview/Toggler/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport { EyeIcon } from '../../../icons/Eye/index.js'\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-toggler'\n\nexport const LivePreviewToggler: React.FC = () => {\n const { isLivePreviewing, setIsLivePreviewing } = useLivePreviewContext()\n const { t } = useTranslation()\n\n return (\n <button\n aria-label={isLivePreviewing ? t('general:exitLivePreview') : t('general:livePreview')}\n className={[baseClass, isLivePreviewing && `${baseClass}--active`].filter(Boolean).join(' ')}\n id=\"live-preview-toggler\"\n onClick={() => {\n setIsLivePreviewing(!isLivePreviewing)\n }}\n title={isLivePreviewing ? t('general:exitLivePreview') : t('general:livePreview')}\n type=\"button\"\n >\n <EyeIcon active={isLivePreviewing} />\n </button>\n )\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,SAASC,OAAO,QAAQ;AACxB,SAASC,qBAAqB,QAAQ;AACtC,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,kBAAA,GAA+BA,CAAA;EAC1C,MAAM;IAAEC,gBAAgB;IAAEC;EAAmB,CAAE,GAAGL,qBAAA;EAClD,MAAM;IAAEM;EAAC,CAAE,GAAGL,cAAA;EAEd,oBACEM,IAAA,CAAC;IACC,cAAYH,gBAAA,GAAmBE,CAAA,CAAE,6BAA6BA,CAAA,CAAE;IAChEE,SAAA,EAAW,CAACN,SAAA,EAAWE,gBAAA,IAAoB,GAAGF,SAAA,UAAmB,CAAC,CAACO,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;IACxFC,EAAA,EAAG;IACHC,OAAA,EAASA,CAAA;MACPR,mBAAA,CAAoB,CAACD,gBAAA;IACvB;IACAU,KAAA,EAAOV,gBAAA,GAAmBE,CAAA,CAAE,6BAA6BA,CAAA,CAAE;IAC3DS,IAAA,EAAK;cAEL,aAAAR,IAAA,CAACR,OAAA;MAAQiB,MAAA,EAAQZ;;;AAGvB","ignoreList":[]}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
@import '../../../scss/styles.scss';
|
|
2
|
+
|
|
3
|
+
@layer payload-default {
|
|
4
|
+
.live-preview-toggler {
|
|
5
|
+
background: none;
|
|
6
|
+
border: none;
|
|
7
|
+
border: 1px solid;
|
|
8
|
+
border-color: var(--theme-elevation-100);
|
|
9
|
+
border-radius: var(--style-radius-s);
|
|
10
|
+
line-height: var(--btn-line-height);
|
|
11
|
+
font-size: var(--base-body-size);
|
|
12
|
+
padding: calc(var(--base) * 0.2) calc(var(--base) * 0.4);
|
|
13
|
+
cursor: pointer;
|
|
14
|
+
transition-property: border, color, background;
|
|
15
|
+
transition-duration: 100ms;
|
|
16
|
+
transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
|
|
17
|
+
height: calc(var(--base) * 1.6);
|
|
18
|
+
width: calc(var(--base) * 1.6);
|
|
19
|
+
position: relative;
|
|
20
|
+
|
|
21
|
+
.icon {
|
|
22
|
+
position: absolute;
|
|
23
|
+
top: 50%;
|
|
24
|
+
left: 50%;
|
|
25
|
+
transform: translate(-50%, -50%);
|
|
26
|
+
|
|
27
|
+
.stroke {
|
|
28
|
+
transition-property: stroke;
|
|
29
|
+
transition-duration: 100ms;
|
|
30
|
+
transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&:hover {
|
|
35
|
+
border-color: var(--theme-elevation-300);
|
|
36
|
+
background-color: var(--theme-elevation-100);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&--active {
|
|
40
|
+
background-color: var(--theme-elevation-100);
|
|
41
|
+
border-color: var(--theme-elevation-200);
|
|
42
|
+
|
|
43
|
+
&:hover {
|
|
44
|
+
background-color: var(--theme-elevation-200);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/LivePreview/Toolbar/Controls/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE5C,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,OAAO,cAAc,CAAA;AAKrB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+GnD,CAAA"}
|