@payloadcms/next 3.0.0-beta.53 → 3.0.0-beta.55
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/config.d.ts.map +1 -1
- package/dist/config.js.map +1 -1
- package/dist/elements/DocumentHeader/Tabs/ShouldRenderTabs.js.map +1 -1
- package/dist/elements/DocumentHeader/Tabs/Tab/TabLink.js.map +1 -1
- package/dist/elements/DocumentHeader/Tabs/Tab/index.js.map +1 -1
- package/dist/elements/DocumentHeader/Tabs/getCustomViews.js.map +1 -1
- package/dist/elements/DocumentHeader/Tabs/getViewConfig.js.map +1 -1
- package/dist/elements/DocumentHeader/Tabs/index.js.map +1 -1
- package/dist/elements/DocumentHeader/Tabs/tabs/VersionsPill/index.js.map +1 -1
- package/dist/elements/DocumentHeader/Tabs/tabs/index.js.map +1 -1
- package/dist/elements/DocumentHeader/index.js.map +1 -1
- package/dist/elements/LeaveWithoutSaving/index.js.map +1 -1
- package/dist/elements/LeaveWithoutSaving/usePreventLeave.js.map +1 -1
- package/dist/elements/Logo/index.js.map +1 -1
- package/dist/elements/Nav/NavHamburger/index.js.map +1 -1
- package/dist/elements/Nav/NavWrapper/index.js.map +1 -1
- package/dist/elements/Nav/index.client.js.map +1 -1
- package/dist/elements/Nav/index.js.map +1 -1
- package/dist/exports/layouts.js.map +1 -1
- package/dist/exports/routes.js.map +1 -1
- package/dist/exports/templates.js.map +1 -1
- package/dist/exports/utilities.js.map +1 -1
- package/dist/exports/views.js.map +1 -1
- package/dist/fetchAPI-multipart/fileFactory.d.ts +0 -1
- package/dist/fetchAPI-multipart/fileFactory.d.ts.map +1 -1
- package/dist/fetchAPI-multipart/fileFactory.js.map +1 -1
- package/dist/fetchAPI-multipart/handlers.d.ts +0 -1
- package/dist/fetchAPI-multipart/handlers.d.ts.map +1 -1
- package/dist/fetchAPI-multipart/handlers.js.map +1 -1
- package/dist/fetchAPI-multipart/index.d.ts +0 -1
- package/dist/fetchAPI-multipart/index.d.ts.map +1 -1
- package/dist/fetchAPI-multipart/index.js.map +1 -1
- package/dist/fetchAPI-multipart/isEligibleRequest.js.map +1 -1
- package/dist/fetchAPI-multipart/processMultipart.js.map +1 -1
- package/dist/fetchAPI-multipart/processNested.js.map +1 -1
- package/dist/fetchAPI-multipart/uploadTimer.js.map +1 -1
- package/dist/fetchAPI-multipart/utilities.d.ts.map +1 -1
- package/dist/fetchAPI-multipart/utilities.js.map +1 -1
- package/dist/fetchAPI-stream-file/index.d.ts +0 -1
- package/dist/fetchAPI-stream-file/index.d.ts.map +1 -1
- package/dist/fetchAPI-stream-file/index.js.map +1 -1
- package/dist/index.js.map +1 -1
- package/dist/layouts/Root/index.d.ts.map +1 -1
- package/dist/layouts/Root/index.js.map +1 -1
- package/dist/prod/index.js +10 -10
- package/dist/prod/styles.css +1 -1
- package/dist/routes/graphql/handler.d.ts.map +1 -1
- package/dist/routes/graphql/handler.js.map +1 -1
- package/dist/routes/graphql/index.js.map +1 -1
- package/dist/routes/graphql/playground.d.ts.map +1 -1
- package/dist/routes/graphql/playground.js.map +1 -1
- package/dist/routes/index.js.map +1 -1
- package/dist/routes/rest/auth/access.js.map +1 -1
- package/dist/routes/rest/auth/forgotPassword.js.map +1 -1
- package/dist/routes/rest/auth/init.js.map +1 -1
- package/dist/routes/rest/auth/login.js.map +1 -1
- package/dist/routes/rest/auth/logout.js.map +1 -1
- package/dist/routes/rest/auth/me.js.map +1 -1
- package/dist/routes/rest/auth/refresh.js.map +1 -1
- package/dist/routes/rest/auth/registerFirstUser.js.map +1 -1
- package/dist/routes/rest/auth/resetPassword.js.map +1 -1
- package/dist/routes/rest/auth/unlock.js.map +1 -1
- package/dist/routes/rest/auth/verifyEmail.js.map +1 -1
- package/dist/routes/rest/buildFormState.js.map +1 -1
- package/dist/routes/rest/checkEndpoints.d.ts.map +1 -1
- package/dist/routes/rest/checkEndpoints.js.map +1 -1
- package/dist/routes/rest/collections/count.js.map +1 -1
- package/dist/routes/rest/collections/create.js.map +1 -1
- package/dist/routes/rest/collections/delete.js.map +1 -1
- package/dist/routes/rest/collections/deleteByID.js.map +1 -1
- package/dist/routes/rest/collections/docAccess.js.map +1 -1
- package/dist/routes/rest/collections/duplicate.js.map +1 -1
- package/dist/routes/rest/collections/find.js.map +1 -1
- package/dist/routes/rest/collections/findByID.js.map +1 -1
- package/dist/routes/rest/collections/findVersionByID.js.map +1 -1
- package/dist/routes/rest/collections/findVersions.js.map +1 -1
- package/dist/routes/rest/collections/preview.js.map +1 -1
- package/dist/routes/rest/collections/restoreVersion.js.map +1 -1
- package/dist/routes/rest/collections/update.js.map +1 -1
- package/dist/routes/rest/collections/updateByID.js.map +1 -1
- package/dist/routes/rest/files/checkFileAccess.js.map +1 -1
- package/dist/routes/rest/files/getFile.d.ts.map +1 -1
- package/dist/routes/rest/files/getFile.js +8 -6
- package/dist/routes/rest/files/getFile.js.map +1 -1
- package/dist/routes/rest/files/getFileTypeFallback.js.map +1 -1
- package/dist/routes/rest/globals/docAccess.js.map +1 -1
- package/dist/routes/rest/globals/findOne.js.map +1 -1
- package/dist/routes/rest/globals/findVersionByID.js.map +1 -1
- package/dist/routes/rest/globals/findVersions.js.map +1 -1
- package/dist/routes/rest/globals/preview.js.map +1 -1
- package/dist/routes/rest/globals/restoreVersion.js.map +1 -1
- package/dist/routes/rest/globals/update.js.map +1 -1
- package/dist/routes/rest/index.d.ts.map +1 -1
- package/dist/routes/rest/index.js.map +1 -1
- package/dist/routes/rest/og/image.js.map +1 -1
- package/dist/routes/rest/og/index.js.map +1 -1
- package/dist/routes/rest/routeError.d.ts.map +1 -1
- package/dist/routes/rest/routeError.js.map +1 -1
- package/dist/routes/rest/types.js.map +1 -1
- package/dist/routes/rest/utilities/sanitizeCollectionID.js.map +1 -1
- package/dist/templates/Default/NavHamburger/index.js.map +1 -1
- package/dist/templates/Default/Wrapper/index.js.map +1 -1
- package/dist/templates/Default/index.js.map +1 -1
- package/dist/templates/Minimal/index.js.map +1 -1
- package/dist/utilities/addDataAndFileToRequest.js.map +1 -1
- package/dist/utilities/addLocalesToRequest.js.map +1 -1
- package/dist/utilities/createPayloadRequest.d.ts.map +1 -1
- package/dist/utilities/createPayloadRequest.js +0 -1
- package/dist/utilities/createPayloadRequest.js.map +1 -1
- package/dist/utilities/getNextRequestI18n.d.ts.map +1 -1
- package/dist/utilities/getNextRequestI18n.js.map +1 -1
- package/dist/utilities/getPayloadHMR.d.ts.map +1 -1
- package/dist/utilities/getPayloadHMR.js.map +1 -1
- package/dist/utilities/getRequestLanguage.js.map +1 -1
- package/dist/utilities/getRequestLocales.js.map +1 -1
- package/dist/utilities/getRequestTheme.js.map +1 -1
- package/dist/utilities/headersWithCors.js.map +1 -1
- package/dist/utilities/initPage/handleAdminPage.js.map +1 -1
- package/dist/utilities/initPage/handleAuthRedirect.d.ts +1 -1
- package/dist/utilities/initPage/handleAuthRedirect.d.ts.map +1 -1
- package/dist/utilities/initPage/handleAuthRedirect.js +4 -4
- package/dist/utilities/initPage/handleAuthRedirect.js.map +1 -1
- package/dist/utilities/initPage/index.d.ts.map +1 -1
- package/dist/utilities/initPage/index.js.map +1 -1
- package/dist/utilities/initPage/shared.js.map +1 -1
- package/dist/utilities/initPage/types.js.map +1 -1
- package/dist/utilities/meta.d.ts.map +1 -1
- package/dist/utilities/meta.js +2 -2
- package/dist/utilities/meta.js.map +1 -1
- package/dist/utilities/timestamp.js.map +1 -1
- package/dist/views/API/LocaleSelector/index.js.map +1 -1
- package/dist/views/API/RenderJSON/index.js.map +1 -1
- package/dist/views/API/index.client.d.ts.map +1 -1
- package/dist/views/API/index.client.js +4 -6
- package/dist/views/API/index.client.js.map +1 -1
- package/dist/views/API/index.js.map +1 -1
- package/dist/views/API/meta.js.map +1 -1
- package/dist/views/Account/Settings/LanguageSelector.js.map +1 -1
- package/dist/views/Account/Settings/index.js.map +1 -1
- package/dist/views/Account/ToggleTheme/index.js.map +1 -1
- package/dist/views/Account/index.js.map +1 -1
- package/dist/views/Account/meta.js.map +1 -1
- package/dist/views/CreateFirstUser/index.client.js.map +1 -1
- package/dist/views/CreateFirstUser/index.js.map +1 -1
- package/dist/views/CreateFirstUser/meta.js.map +1 -1
- package/dist/views/Dashboard/Default/index.js.map +1 -1
- package/dist/views/Dashboard/index.js.map +1 -1
- package/dist/views/Dashboard/meta.js.map +1 -1
- package/dist/views/Document/getCustomViewByKey.d.ts +1 -1
- package/dist/views/Document/getCustomViewByKey.js.map +1 -1
- package/dist/views/Document/getCustomViewByRoute.d.ts +1 -1
- package/dist/views/Document/getCustomViewByRoute.js.map +1 -1
- package/dist/views/Document/getDocumentData.d.ts.map +1 -1
- package/dist/views/Document/getDocumentData.js.map +1 -1
- package/dist/views/Document/getDocumentPermissions.d.ts.map +1 -1
- package/dist/views/Document/getDocumentPermissions.js.map +1 -1
- package/dist/views/Document/getMetaBySegment.js.map +1 -1
- package/dist/views/Document/getViewsFromConfig.js.map +1 -1
- package/dist/views/Document/index.d.ts.map +1 -1
- package/dist/views/Document/index.js +16 -11
- package/dist/views/Document/index.js.map +1 -1
- package/dist/views/Document/meta.js.map +1 -1
- package/dist/views/Edit/Default/Auth/APIKey.js.map +1 -1
- package/dist/views/Edit/Default/Auth/index.js.map +1 -1
- package/dist/views/Edit/Default/Auth/types.js.map +1 -1
- package/dist/views/Edit/Default/SetDocumentStepNav/index.d.ts +0 -1
- package/dist/views/Edit/Default/SetDocumentStepNav/index.d.ts.map +1 -1
- package/dist/views/Edit/Default/SetDocumentStepNav/index.js.map +1 -1
- package/dist/views/Edit/Default/SetDocumentTitle/index.d.ts +0 -1
- package/dist/views/Edit/Default/SetDocumentTitle/index.d.ts.map +1 -1
- package/dist/views/Edit/Default/SetDocumentTitle/index.js.map +1 -1
- package/dist/views/Edit/Default/index.d.ts.map +1 -1
- package/dist/views/Edit/Default/index.js +6 -2
- package/dist/views/Edit/Default/index.js.map +1 -1
- package/dist/views/Edit/Default/types.js.map +1 -1
- package/dist/views/Edit/index.client.js.map +1 -1
- package/dist/views/Edit/index.js.map +1 -1
- package/dist/views/Edit/meta.js.map +1 -1
- package/dist/views/Edit/sanitizeEditViewProps.js.map +1 -1
- package/dist/views/ForgotPassword/ForgotPasswordForm/index.js.map +1 -1
- package/dist/views/ForgotPassword/index.js.map +1 -1
- package/dist/views/ForgotPassword/meta.js.map +1 -1
- package/dist/views/List/Default/index.js.map +1 -1
- package/dist/views/List/Default/types.js.map +1 -1
- package/dist/views/List/index.js.map +1 -1
- package/dist/views/List/meta.d.ts.map +1 -1
- package/dist/views/List/meta.js.map +1 -1
- package/dist/views/LivePreview/Context/collisionDetection.js.map +1 -1
- package/dist/views/LivePreview/Context/context.js.map +1 -1
- package/dist/views/LivePreview/Context/index.js.map +1 -1
- package/dist/views/LivePreview/Context/sizeReducer.js.map +1 -1
- package/dist/views/LivePreview/Device/index.js.map +1 -1
- package/dist/views/LivePreview/DeviceContainer/index.js.map +1 -1
- package/dist/views/LivePreview/IFrame/index.js.map +1 -1
- package/dist/views/LivePreview/Preview/index.js.map +1 -1
- package/dist/views/LivePreview/Toolbar/Controls/index.js.map +1 -1
- package/dist/views/LivePreview/Toolbar/SizeInput/index.js.map +1 -1
- package/dist/views/LivePreview/Toolbar/index.js.map +1 -1
- package/dist/views/LivePreview/ToolbarArea/index.js.map +1 -1
- package/dist/views/LivePreview/index.client.js.map +1 -1
- package/dist/views/LivePreview/index.js.map +1 -1
- package/dist/views/LivePreview/meta.js.map +1 -1
- package/dist/views/LivePreview/usePopupWindow.d.ts +1 -1
- package/dist/views/LivePreview/usePopupWindow.d.ts.map +1 -1
- package/dist/views/LivePreview/usePopupWindow.js.map +1 -1
- package/dist/views/Login/LoginForm/index.js.map +1 -1
- package/dist/views/Login/index.js.map +1 -1
- package/dist/views/Login/meta.js.map +1 -1
- package/dist/views/Logout/LogoutClient.js.map +1 -1
- package/dist/views/Logout/index.js.map +1 -1
- package/dist/views/Logout/meta.js.map +1 -1
- package/dist/views/NotFound/index.client.js.map +1 -1
- package/dist/views/NotFound/index.d.ts.map +1 -1
- package/dist/views/NotFound/index.js.map +1 -1
- package/dist/views/NotFound/meta.d.ts.map +1 -1
- package/dist/views/NotFound/meta.js.map +1 -1
- package/dist/views/ResetPassword/index.client.js.map +1 -1
- package/dist/views/ResetPassword/index.js.map +1 -1
- package/dist/views/ResetPassword/meta.js.map +1 -1
- package/dist/views/Root/getCustomViewByRoute.js.map +1 -1
- package/dist/views/Root/getViewFromConfig.d.ts +2 -2
- package/dist/views/Root/getViewFromConfig.d.ts.map +1 -1
- package/dist/views/Root/getViewFromConfig.js.map +1 -1
- package/dist/views/Root/index.d.ts.map +1 -1
- package/dist/views/Root/index.js +6 -1
- package/dist/views/Root/index.js.map +1 -1
- package/dist/views/Root/isPathMatchingRoute.js.map +1 -1
- package/dist/views/Root/meta.js.map +1 -1
- package/dist/views/Unauthorized/index.js.map +1 -1
- package/dist/views/Unauthorized/meta.js.map +1 -1
- package/dist/views/Verify/index.js.map +1 -1
- package/dist/views/Verify/meta.js.map +1 -1
- package/dist/views/Version/Default/SetStepNav.js.map +1 -1
- package/dist/views/Version/Default/index.js.map +1 -1
- package/dist/views/Version/Default/types.js.map +1 -1
- package/dist/views/Version/RenderFieldsToDiff/Label/index.js.map +1 -1
- package/dist/views/Version/RenderFieldsToDiff/fields/Iterable/index.js.map +1 -1
- package/dist/views/Version/RenderFieldsToDiff/fields/Nested/index.js.map +1 -1
- package/dist/views/Version/RenderFieldsToDiff/fields/Relationship/index.js.map +1 -1
- package/dist/views/Version/RenderFieldsToDiff/fields/Select/DiffViewer/index.js.map +1 -1
- package/dist/views/Version/RenderFieldsToDiff/fields/Select/index.js.map +1 -1
- package/dist/views/Version/RenderFieldsToDiff/fields/Tabs/index.js.map +1 -1
- package/dist/views/Version/RenderFieldsToDiff/fields/Text/DiffViewer/index.js.map +1 -1
- package/dist/views/Version/RenderFieldsToDiff/fields/Text/index.js.map +1 -1
- package/dist/views/Version/RenderFieldsToDiff/fields/diffMethods.js.map +1 -1
- package/dist/views/Version/RenderFieldsToDiff/fields/index.d.ts +3 -30
- package/dist/views/Version/RenderFieldsToDiff/fields/index.d.ts.map +1 -1
- package/dist/views/Version/RenderFieldsToDiff/fields/index.js.map +1 -1
- package/dist/views/Version/RenderFieldsToDiff/fields/styles.js.map +1 -1
- package/dist/views/Version/RenderFieldsToDiff/fields/types.js.map +1 -1
- package/dist/views/Version/RenderFieldsToDiff/index.js.map +1 -1
- package/dist/views/Version/RenderFieldsToDiff/types.js.map +1 -1
- package/dist/views/Version/Restore/index.js.map +1 -1
- package/dist/views/Version/Restore/types.js.map +1 -1
- package/dist/views/Version/SelectComparison/index.js.map +1 -1
- package/dist/views/Version/SelectComparison/types.js.map +1 -1
- package/dist/views/Version/SelectLocales/index.js.map +1 -1
- package/dist/views/Version/SelectLocales/types.js.map +1 -1
- package/dist/views/Version/index.js.map +1 -1
- package/dist/views/Version/meta.js.map +1 -1
- package/dist/views/Version/shared.js.map +1 -1
- package/dist/views/Versions/buildColumns.js.map +1 -1
- package/dist/views/Versions/cells/AutosaveCell/index.js.map +1 -1
- package/dist/views/Versions/cells/CreatedAt/index.js.map +1 -1
- package/dist/views/Versions/cells/ID/index.js.map +1 -1
- package/dist/views/Versions/index.client.js.map +1 -1
- package/dist/views/Versions/index.js.map +1 -1
- package/dist/views/Versions/meta.js.map +1 -1
- package/dist/views/Versions/types.js.map +1 -1
- package/dist/webpackEntry.js.map +1 -1
- package/dist/withPayload.d.ts +1 -1
- package/dist/withPayload.js.map +1 -1
- package/package.json +8 -8
- package/dist/elements/DocumentHeader/Tabs/Tab/index.scss +0 -91
- package/dist/elements/DocumentHeader/Tabs/index.scss +0 -53
- package/dist/elements/DocumentHeader/index.scss +0 -51
- package/dist/elements/LeaveWithoutSaving/index.scss +0 -36
- package/dist/elements/Nav/NavWrapper/index.scss +0 -17
- package/dist/elements/Nav/index.scss +0 -150
- package/dist/routes/rest/og/roboto-regular.woff +0 -0
- package/dist/scss/app.scss +0 -208
- package/dist/scss/colors.scss +0 -269
- package/dist/scss/custom.css +0 -1
- package/dist/scss/queries.scss +0 -27
- package/dist/scss/resets.scss +0 -17
- package/dist/scss/styles.scss +0 -11
- package/dist/scss/svg.scss +0 -10
- package/dist/scss/toasts.scss +0 -111
- package/dist/scss/type.scss +0 -117
- package/dist/scss/vars.scss +0 -213
- package/dist/scss/z-index.scss +0 -9
- package/dist/templates/Default/Wrapper/index.scss +0 -25
- package/dist/templates/Default/index.scss +0 -67
- package/dist/templates/Minimal/index.scss +0 -28
- package/dist/views/API/RenderJSON/index.scss +0 -90
- package/dist/views/API/index.scss +0 -124
- package/dist/views/Account/Settings/index.scss +0 -46
- package/dist/views/CreateFirstUser/index.scss +0 -5
- package/dist/views/Dashboard/Default/index.scss +0 -58
- package/dist/views/Edit/Default/Auth/index.scss +0 -61
- package/dist/views/Edit/Default/index.scss +0 -21
- package/dist/views/List/Default/index.scss +0 -195
- package/dist/views/LivePreview/IFrame/index.scss +0 -7
- package/dist/views/LivePreview/Preview/index.scss +0 -41
- package/dist/views/LivePreview/Toolbar/Controls/index.scss +0 -59
- package/dist/views/LivePreview/Toolbar/SizeInput/index.scss +0 -10
- package/dist/views/LivePreview/Toolbar/index.scss +0 -41
- package/dist/views/LivePreview/ToolbarArea/index.scss +0 -4
- package/dist/views/LivePreview/index.scss +0 -66
- package/dist/views/Login/LoginForm/index.scss +0 -8
- package/dist/views/Login/index.scss +0 -8
- package/dist/views/Logout/index.scss +0 -20
- package/dist/views/NotFound/index.scss +0 -37
- package/dist/views/ResetPassword/index.scss +0 -5
- package/dist/views/Unauthorized/index.scss +0 -36
- package/dist/views/Verify/index.scss +0 -14
- package/dist/views/Version/Default/index.scss +0 -70
- package/dist/views/Version/RenderFieldsToDiff/Label/index.scss +0 -4
- package/dist/views/Version/RenderFieldsToDiff/fields/Iterable/index.scss +0 -34
- package/dist/views/Version/RenderFieldsToDiff/fields/Nested/index.scss +0 -12
- package/dist/views/Version/RenderFieldsToDiff/fields/Relationship/index.scss +0 -13
- package/dist/views/Version/RenderFieldsToDiff/fields/Select/index.scss +0 -13
- package/dist/views/Version/RenderFieldsToDiff/fields/Text/index.scss +0 -13
- package/dist/views/Version/RenderFieldsToDiff/index.scss +0 -18
- package/dist/views/Version/Restore/index.scss +0 -30
- package/dist/views/Version/SelectComparison/index.scss +0 -13
- package/dist/views/Version/SelectLocales/index.scss +0 -7
- package/dist/views/Versions/index.scss +0 -108
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/views/LivePreview/Context/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientFieldConfig, LivePreviewConfig } from 'payload'\n\nimport { DndContext } from '@dnd-kit/core'\nimport { fieldSchemaToJSON } from 'payload/shared'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { usePopupWindow } from '../usePopupWindow.js'\n\nimport { customCollisionDetection } from './collisionDetection.js'\nimport { LivePreviewContext } from './context.js'\nimport { sizeReducer } from './sizeReducer.js'\n\nexport type LivePreviewProviderProps = {\n appIsReady?: boolean\n breakpoints?: LivePreviewConfig['breakpoints']\n children: React.ReactNode\n deviceSize?: {\n height: number\n width: number\n }\n fieldSchema: ClientFieldConfig[]\n isPopupOpen?: boolean\n openPopupWindow?: ReturnType<typeof usePopupWindow>['openPopupWindow']\n popupRef?: React.MutableRefObject<Window>\n url?: string\n}\n\nexport const LivePreviewProvider: React.FC<LivePreviewProviderProps> = ({\n breakpoints,\n children,\n fieldSchema,\n isPopupOpen,\n openPopupWindow,\n popupRef,\n url,\n}) => {\n const [previewWindowType, setPreviewWindowType] = useState<'iframe' | 'popup'>('iframe')\n\n const [appIsReady, setAppIsReady] = useState(false)\n const [listeningForMessages, setListeningForMessages] = useState(false)\n\n const iframeRef = React.useRef<HTMLIFrameElement>(null)\n\n const [iframeHasLoaded, setIframeHasLoaded] = useState(false)\n\n const [zoom, setZoom] = useState(1)\n\n const [position, setPosition] = useState({ x: 0, y: 0 })\n\n const [size, setSize] = React.useReducer(sizeReducer, { height: 0, width: 0 })\n\n const [measuredDeviceSize, setMeasuredDeviceSize] = useState({\n height: 0,\n width: 0,\n })\n\n const [breakpoint, setBreakpoint] =\n React.useState<LivePreviewConfig['breakpoints'][0]['name']>('responsive')\n\n const [fieldSchemaJSON] = useState(() => {\n return fieldSchemaToJSON(fieldSchema)\n })\n\n // The toolbar needs to freely drag and drop around the page\n const handleDragEnd = (ev) => {\n // only update position if the toolbar is completely within the preview area\n // otherwise reset it back to the previous position\n // TODO: reset to the nearest edge of the preview area\n if (ev.over && ev.over.id === 'live-preview-area') {\n const newPos = {\n x: position.x + ev.delta.x,\n y: position.y + ev.delta.y,\n }\n\n setPosition(newPos)\n } else {\n // reset\n }\n }\n\n const setWidth = useCallback(\n (width) => {\n setSize({ type: 'width', value: width })\n },\n [setSize],\n )\n\n const setHeight = useCallback(\n (height) => {\n setSize({ type: 'height', value: height })\n },\n [setSize],\n )\n\n // explicitly set new width and height when as new breakpoints are selected\n // exclude `custom` breakpoint as it is handled by the `setWidth` and `setHeight` directly\n useEffect(() => {\n const foundBreakpoint = breakpoints?.find((bp) => bp.name === breakpoint)\n\n if (\n foundBreakpoint &&\n breakpoint !== 'responsive' &&\n breakpoint !== 'custom' &&\n typeof foundBreakpoint?.width === 'number' &&\n typeof foundBreakpoint?.height === 'number'\n ) {\n setSize({\n type: 'reset',\n value: {\n height: foundBreakpoint.height,\n width: foundBreakpoint.width,\n },\n })\n }\n }, [breakpoint, breakpoints])\n\n // Receive the `ready` message from the popup window\n // This indicates that the app is ready to receive `window.postMessage` events\n // This is also the only cross-origin way of detecting when a popup window has loaded\n // Unlike iframe elements which have an `onLoad` handler, there is no way to access `window.open` on popups\n useEffect(() => {\n const handleMessage = (event: MessageEvent) => {\n if (\n url?.startsWith(event.origin) &&\n event.data &&\n typeof event.data === 'object' &&\n event.data.type === 'payload-live-preview'\n ) {\n if (event.data.ready) {\n setAppIsReady(true)\n }\n }\n }\n\n window.addEventListener('message', handleMessage)\n\n setListeningForMessages(true)\n\n return () => {\n window.removeEventListener('message', handleMessage)\n }\n }, [url, listeningForMessages])\n\n const handleWindowChange = useCallback(\n (type: 'iframe' | 'popup') => {\n setAppIsReady(false)\n setPreviewWindowType(type)\n if (type === 'popup') openPopupWindow()\n },\n [openPopupWindow],\n )\n\n // when the user closes the popup window, switch back to the iframe\n // the `usePopupWindow` reports the `isPopupOpen` state for us to use here\n useEffect(() => {\n const newPreviewWindowType = isPopupOpen ? 'popup' : 'iframe'\n\n if (newPreviewWindowType !== previewWindowType) {\n handleWindowChange('iframe')\n }\n }, [previewWindowType, isPopupOpen, handleWindowChange])\n\n return (\n <LivePreviewContext.Provider\n value={{\n appIsReady,\n breakpoint,\n breakpoints,\n fieldSchemaJSON,\n iframeHasLoaded,\n iframeRef,\n isPopupOpen,\n measuredDeviceSize,\n openPopupWindow,\n popupRef,\n previewWindowType,\n setAppIsReady,\n setBreakpoint,\n setHeight,\n setIframeHasLoaded,\n setMeasuredDeviceSize,\n setPreviewWindowType: handleWindowChange,\n setSize,\n setToolbarPosition: setPosition,\n setWidth,\n setZoom,\n size,\n toolbarPosition: position,\n url,\n zoom,\n }}\n >\n <DndContext collisionDetection={customCollisionDetection} onDragEnd={handleDragEnd}>\n {listeningForMessages && children}\n </DndContext>\n </LivePreviewContext.Provider>\n )\n}\n"],"names":["DndContext","fieldSchemaToJSON","React","useCallback","useEffect","useState","customCollisionDetection","LivePreviewContext","sizeReducer","LivePreviewProvider","breakpoints","children","fieldSchema","isPopupOpen","openPopupWindow","popupRef","url","previewWindowType","setPreviewWindowType","appIsReady","setAppIsReady","listeningForMessages","setListeningForMessages","iframeRef","useRef","iframeHasLoaded","setIframeHasLoaded","zoom","setZoom","position","setPosition","x","y","size","setSize","useReducer","height","width","measuredDeviceSize","setMeasuredDeviceSize","breakpoint","setBreakpoint","fieldSchemaJSON","handleDragEnd","ev","over","id","newPos","delta","setWidth","type","value","setHeight","foundBreakpoint","find","bp","name","handleMessage","event","startsWith","origin","data","ready","window","addEventListener","removeEventListener","handleWindowChange","newPreviewWindowType","Provider","setToolbarPosition","toolbarPosition","collisionDetection","onDragEnd"],"
|
|
1
|
+
{"version":3,"sources":["../../../../src/views/LivePreview/Context/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientFieldConfig, LivePreviewConfig } from 'payload'\n\nimport { DndContext } from '@dnd-kit/core'\nimport { fieldSchemaToJSON } from 'payload/shared'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { usePopupWindow } from '../usePopupWindow.js'\n\nimport { customCollisionDetection } from './collisionDetection.js'\nimport { LivePreviewContext } from './context.js'\nimport { sizeReducer } from './sizeReducer.js'\n\nexport type LivePreviewProviderProps = {\n appIsReady?: boolean\n breakpoints?: LivePreviewConfig['breakpoints']\n children: React.ReactNode\n deviceSize?: {\n height: number\n width: number\n }\n fieldSchema: ClientFieldConfig[]\n isPopupOpen?: boolean\n openPopupWindow?: ReturnType<typeof usePopupWindow>['openPopupWindow']\n popupRef?: React.MutableRefObject<Window>\n url?: string\n}\n\nexport const LivePreviewProvider: React.FC<LivePreviewProviderProps> = ({\n breakpoints,\n children,\n fieldSchema,\n isPopupOpen,\n openPopupWindow,\n popupRef,\n url,\n}) => {\n const [previewWindowType, setPreviewWindowType] = useState<'iframe' | 'popup'>('iframe')\n\n const [appIsReady, setAppIsReady] = useState(false)\n const [listeningForMessages, setListeningForMessages] = useState(false)\n\n const iframeRef = React.useRef<HTMLIFrameElement>(null)\n\n const [iframeHasLoaded, setIframeHasLoaded] = useState(false)\n\n const [zoom, setZoom] = useState(1)\n\n const [position, setPosition] = useState({ x: 0, y: 0 })\n\n const [size, setSize] = React.useReducer(sizeReducer, { height: 0, width: 0 })\n\n const [measuredDeviceSize, setMeasuredDeviceSize] = useState({\n height: 0,\n width: 0,\n })\n\n const [breakpoint, setBreakpoint] =\n React.useState<LivePreviewConfig['breakpoints'][0]['name']>('responsive')\n\n const [fieldSchemaJSON] = useState(() => {\n return fieldSchemaToJSON(fieldSchema)\n })\n\n // The toolbar needs to freely drag and drop around the page\n const handleDragEnd = (ev) => {\n // only update position if the toolbar is completely within the preview area\n // otherwise reset it back to the previous position\n // TODO: reset to the nearest edge of the preview area\n if (ev.over && ev.over.id === 'live-preview-area') {\n const newPos = {\n x: position.x + ev.delta.x,\n y: position.y + ev.delta.y,\n }\n\n setPosition(newPos)\n } else {\n // reset\n }\n }\n\n const setWidth = useCallback(\n (width) => {\n setSize({ type: 'width', value: width })\n },\n [setSize],\n )\n\n const setHeight = useCallback(\n (height) => {\n setSize({ type: 'height', value: height })\n },\n [setSize],\n )\n\n // explicitly set new width and height when as new breakpoints are selected\n // exclude `custom` breakpoint as it is handled by the `setWidth` and `setHeight` directly\n useEffect(() => {\n const foundBreakpoint = breakpoints?.find((bp) => bp.name === breakpoint)\n\n if (\n foundBreakpoint &&\n breakpoint !== 'responsive' &&\n breakpoint !== 'custom' &&\n typeof foundBreakpoint?.width === 'number' &&\n typeof foundBreakpoint?.height === 'number'\n ) {\n setSize({\n type: 'reset',\n value: {\n height: foundBreakpoint.height,\n width: foundBreakpoint.width,\n },\n })\n }\n }, [breakpoint, breakpoints])\n\n // Receive the `ready` message from the popup window\n // This indicates that the app is ready to receive `window.postMessage` events\n // This is also the only cross-origin way of detecting when a popup window has loaded\n // Unlike iframe elements which have an `onLoad` handler, there is no way to access `window.open` on popups\n useEffect(() => {\n const handleMessage = (event: MessageEvent) => {\n if (\n url?.startsWith(event.origin) &&\n event.data &&\n typeof event.data === 'object' &&\n event.data.type === 'payload-live-preview'\n ) {\n if (event.data.ready) {\n setAppIsReady(true)\n }\n }\n }\n\n window.addEventListener('message', handleMessage)\n\n setListeningForMessages(true)\n\n return () => {\n window.removeEventListener('message', handleMessage)\n }\n }, [url, listeningForMessages])\n\n const handleWindowChange = useCallback(\n (type: 'iframe' | 'popup') => {\n setAppIsReady(false)\n setPreviewWindowType(type)\n if (type === 'popup') openPopupWindow()\n },\n [openPopupWindow],\n )\n\n // when the user closes the popup window, switch back to the iframe\n // the `usePopupWindow` reports the `isPopupOpen` state for us to use here\n useEffect(() => {\n const newPreviewWindowType = isPopupOpen ? 'popup' : 'iframe'\n\n if (newPreviewWindowType !== previewWindowType) {\n handleWindowChange('iframe')\n }\n }, [previewWindowType, isPopupOpen, handleWindowChange])\n\n return (\n <LivePreviewContext.Provider\n value={{\n appIsReady,\n breakpoint,\n breakpoints,\n fieldSchemaJSON,\n iframeHasLoaded,\n iframeRef,\n isPopupOpen,\n measuredDeviceSize,\n openPopupWindow,\n popupRef,\n previewWindowType,\n setAppIsReady,\n setBreakpoint,\n setHeight,\n setIframeHasLoaded,\n setMeasuredDeviceSize,\n setPreviewWindowType: handleWindowChange,\n setSize,\n setToolbarPosition: setPosition,\n setWidth,\n setZoom,\n size,\n toolbarPosition: position,\n url,\n zoom,\n }}\n >\n <DndContext collisionDetection={customCollisionDetection} onDragEnd={handleDragEnd}>\n {listeningForMessages && children}\n </DndContext>\n </LivePreviewContext.Provider>\n )\n}\n"],"names":["DndContext","fieldSchemaToJSON","React","useCallback","useEffect","useState","customCollisionDetection","LivePreviewContext","sizeReducer","LivePreviewProvider","breakpoints","children","fieldSchema","isPopupOpen","openPopupWindow","popupRef","url","previewWindowType","setPreviewWindowType","appIsReady","setAppIsReady","listeningForMessages","setListeningForMessages","iframeRef","useRef","iframeHasLoaded","setIframeHasLoaded","zoom","setZoom","position","setPosition","x","y","size","setSize","useReducer","height","width","measuredDeviceSize","setMeasuredDeviceSize","breakpoint","setBreakpoint","fieldSchemaJSON","handleDragEnd","ev","over","id","newPos","delta","setWidth","type","value","setHeight","foundBreakpoint","find","bp","name","handleMessage","event","startsWith","origin","data","ready","window","addEventListener","removeEventListener","handleWindowChange","newPreviewWindowType","Provider","setToolbarPosition","toolbarPosition","collisionDetection","onDragEnd"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/views/LivePreview/Context/sizeReducer.ts"],"sourcesContent":["// export const sizeReducer: (state, action) => {\n// switch (action.type) {\n// case 'width':\n// return { ...state, width: action.value }\n// case 'height':\n// return { ...state, height: action.value }\n// default:\n// return { ...state, ...(action?.value || {}) }\n// }\n// },\n\ntype SizeReducerState = {\n height: number\n width: number\n}\n\nexport type SizeReducerAction =\n | {\n type: 'height' | 'width'\n value: number\n }\n | {\n type: 'reset'\n value: {\n height: number\n width: number\n }\n }\n\nexport const sizeReducer = (state: SizeReducerState, action: SizeReducerAction) => {\n switch (action.type) {\n case 'width':\n return { ...state, width: action.value }\n case 'height':\n return { ...state, height: action.value }\n default:\n return { ...state, ...(action?.value || {}) }\n }\n}\n"],"names":["sizeReducer","state","action","type","width","value","height"],"
|
|
1
|
+
{"version":3,"sources":["../../../../src/views/LivePreview/Context/sizeReducer.ts"],"sourcesContent":["// export const sizeReducer: (state, action) => {\n// switch (action.type) {\n// case 'width':\n// return { ...state, width: action.value }\n// case 'height':\n// return { ...state, height: action.value }\n// default:\n// return { ...state, ...(action?.value || {}) }\n// }\n// },\n\ntype SizeReducerState = {\n height: number\n width: number\n}\n\nexport type SizeReducerAction =\n | {\n type: 'height' | 'width'\n value: number\n }\n | {\n type: 'reset'\n value: {\n height: number\n width: number\n }\n }\n\nexport const sizeReducer = (state: SizeReducerState, action: SizeReducerAction) => {\n switch (action.type) {\n case 'width':\n return { ...state, width: action.value }\n case 'height':\n return { ...state, height: action.value }\n default:\n return { ...state, ...(action?.value || {}) }\n }\n}\n"],"names":["sizeReducer","state","action","type","width","value","height"],"mappings":"AAAA,iDAAiD;AACjD,2BAA2B;AAC3B,oBAAoB;AACpB,iDAAiD;AACjD,qBAAqB;AACrB,kDAAkD;AAClD,eAAe;AACf,sDAAsD;AACtD,MAAM;AACN,KAAK;AAoBL,OAAO,MAAMA,cAAc,CAACC,OAAyBC;IACnD,OAAQA,OAAOC,IAAI;QACjB,KAAK;YACH,OAAO;gBAAE,GAAGF,KAAK;gBAAEG,OAAOF,OAAOG,KAAK;YAAC;QACzC,KAAK;YACH,OAAO;gBAAE,GAAGJ,KAAK;gBAAEK,QAAQJ,OAAOG,KAAK;YAAC;QAC1C;YACE,OAAO;gBAAE,GAAGJ,KAAK;gBAAE,GAAIC,QAAQG,SAAS,CAAC,CAAC;YAAE;IAChD;AACF,EAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/views/LivePreview/Device/index.tsx"],"sourcesContent":["'use client'\nimport { useResize } from '@payloadcms/ui'\nimport React, { useEffect } from 'react'\n\nimport { useLivePreviewContext } from '../Context/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 const { size: measuredDeviceSize } = useResize(deviceFrameRef.current)\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 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) x = `${differenceFromDeviceToFrame / 2}px`\n else x = '0'\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"],"names":["useResize","React","useEffect","useLivePreviewContext","DeviceContainer","props","children","deviceFrameRef","useRef","outerFrameRef","breakpoint","setMeasuredDeviceSize","size","desiredSize","zoom","measuredDeviceSize","current","outerFrameSize","deviceIsLargerThanFrame","x","margin","width","height","scaledDesiredWidth","scaledDeviceWidth","scaledDeviceDifferencePixels","differenceFromDeviceToFrame","div","ref","style","transform"],"
|
|
1
|
+
{"version":3,"sources":["../../../../src/views/LivePreview/Device/index.tsx"],"sourcesContent":["'use client'\nimport { useResize } from '@payloadcms/ui'\nimport React, { useEffect } from 'react'\n\nimport { useLivePreviewContext } from '../Context/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 const { size: measuredDeviceSize } = useResize(deviceFrameRef.current)\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 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) x = `${differenceFromDeviceToFrame / 2}px`\n else x = '0'\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"],"names":["useResize","React","useEffect","useLivePreviewContext","DeviceContainer","props","children","deviceFrameRef","useRef","outerFrameRef","breakpoint","setMeasuredDeviceSize","size","desiredSize","zoom","measuredDeviceSize","current","outerFrameSize","deviceIsLargerThanFrame","x","margin","width","height","scaledDesiredWidth","scaledDeviceWidth","scaledDeviceDifferencePixels","differenceFromDeviceToFrame","div","ref","style","transform"],"mappings":"AAAA;;AACA,SAASA,SAAS,QAAQ,iBAAgB;AAC1C,OAAOC,SAASC,SAAS,QAAQ,QAAO;AAExC,SAASC,qBAAqB,QAAQ,wBAAuB;AAE7D,OAAO,MAAMC,kBAER,CAACC;IACJ,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAME,iBAAiBN,MAAMO,MAAM,CAAiB;IACpD,MAAMC,gBAAgBR,MAAMO,MAAM,CAAiB;IAEnD,MAAM,EAAEE,UAAU,EAAEC,qBAAqB,EAAEC,MAAMC,WAAW,EAAEC,IAAI,EAAE,GAAGX;IAEvE,iFAAiF;IACjF,2EAA2E;IAC3E,MAAM,EAAES,MAAMG,kBAAkB,EAAE,GAAGf,UAAUO,eAAeS,OAAO;IACrE,MAAM,EAAEJ,MAAMK,cAAc,EAAE,GAAGjB,UAAUS,cAAcO,OAAO;IAEhE,IAAIE,0BAAmC;IAEvC,qFAAqF;IACrF,iFAAiF;IACjF,8FAA8F;IAC9FhB,UAAU;QACR,IAAIa,oBAAoB;YACtBJ,sBAAsBI;QACxB;IACF,GAAG;QAACA;QAAoBJ;KAAsB;IAE9C,IAAIQ,IAAI;IACR,IAAIC,SAAS;IAEb,IAAIV,cAAcA,eAAe,cAAc;QAC7CS,IAAI;QAEJ,IACE,OAAOL,SAAS,YAChB,OAAOD,YAAYQ,KAAK,KAAK,YAC7B,OAAOR,YAAYS,MAAM,KAAK,YAC9B,OAAOP,mBAAmBM,KAAK,KAAK,YACpC,OAAON,mBAAmBO,MAAM,KAAK,UACrC;YACAF,SAAS;YACT,MAAMG,qBAAqBV,YAAYQ,KAAK,GAAGP;YAC/C,MAAMU,oBAAoBT,mBAAmBM,KAAK,GAAGP;YACrD,MAAMW,+BAA+BF,qBAAqBV,YAAYQ,KAAK;YAC3EH,0BAA0BM,oBAAoBP,eAAeI,KAAK;YAElE,IAAIH,yBAAyB;gBAC3B,IAAIJ,OAAO,GAAG;oBACZ,MAAMY,8BAA8BX,mBAAmBM,KAAK,GAAGJ,eAAeI,KAAK;oBACnF,IAAIK,8BAA8B,GAAGP,IAAI,CAAC,EAAEO,8BAA8B,EAAE,EAAE,CAAC;yBAC1EP,IAAI;gBACX,OAAO;oBACLA,IAAI;gBACN;YACF,OAAO;gBACL,IAAIL,QAAQ,GAAG;oBACbK,IAAI,CAAC,EAAEM,+BAA+B,EAAE,EAAE,CAAC;gBAC7C,OAAO;oBACL,MAAMC,8BAA8BT,eAAeI,KAAK,GAAGG;oBAC3DL,IAAI,CAAC,EAAEO,8BAA8B,EAAE,EAAE,CAAC;oBAC1CN,SAAS;gBACX;YACF;QACF;IACF;IAEA,IAAIC,QAAQP,OAAO,CAAC,EAAE,MAAMA,KAAK,CAAC,CAAC,GAAG;IACtC,IAAIQ,SAASR,OAAO,CAAC,EAAE,MAAMA,KAAK,CAAC,CAAC,GAAG;IAEvC,IAAIJ,eAAe,cAAc;QAC/BW,QAAQ,CAAC,EAAER,aAAaQ,QAAS,CAAA,OAAOP,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC;QACzEQ,SAAS,CAAC,EAAET,aAAaS,SAAU,CAAA,OAAOR,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC;IAC7E;IAEA,qBACE,KAACa;QACCC,KAAKnB;QACLoB,OAAO;YACLP,QAAQ;YACRD,OAAO;QACT;kBAEA,cAAA,KAACM;YACCC,KAAKrB;YACLsB,OAAO;gBACLP;gBACAF;gBACAU,WAAW,CAAC,YAAY,EAAEX,EAAE,OAAO,CAAC;gBACpCE;YACF;sBAECf;;;AAIT,EAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/views/LivePreview/DeviceContainer/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../Context/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"],"names":["React","useLivePreviewContext","DeviceContainer","props","children","breakpoint","breakpoints","size","zoom","foundBreakpoint","find","bp","name","x","margin","width","height","scaledWidth","difference","div","style","transform"],"
|
|
1
|
+
{"version":3,"sources":["../../../../src/views/LivePreview/DeviceContainer/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../Context/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"],"names":["React","useLivePreviewContext","DeviceContainer","props","children","breakpoint","breakpoints","size","zoom","foundBreakpoint","find","bp","name","x","margin","width","height","scaledWidth","difference","div","style","transform"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,qBAAqB,QAAQ,wBAAuB;AAE7D,OAAO,MAAMC,kBAER,CAACC;IACJ,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAM,EAAEE,UAAU,EAAEC,WAAW,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGP;IAEhD,MAAMQ,kBAAkBJ,cAAcC,aAAaI,KAAK,CAACC,KAAOA,GAAGC,IAAI,KAAKP;IAE5E,IAAIQ,IAAI;IACR,IAAIC,SAAS;IAEb,IAAIL,mBAAmBJ,eAAe,cAAc;QAClDQ,IAAI;QAEJ,IACE,OAAOL,SAAS,YAChB,OAAOD,KAAKQ,KAAK,KAAK,YACtB,OAAOR,KAAKS,MAAM,KAAK,UACvB;YACA,MAAMC,cAAcV,KAAKQ,KAAK,GAAGP;YACjC,MAAMU,aAAaD,cAAcV,KAAKQ,KAAK;YAC3CF,IAAI,CAAC,EAAEK,aAAa,EAAE,EAAE,CAAC;YACzBJ,SAAS;QACX;IACF;IAEA,qBACE,KAACK;QACCC,OAAO;YACLJ,QACEP,mBAAmBA,iBAAiBG,SAAS,eACzC,CAAC,EAAEL,MAAMS,SAAU,CAAA,OAAOR,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC,GAC3D,OAAOA,SAAS,WACd,CAAC,EAAE,MAAMA,KAAK,CAAC,CAAC,GAChB;YACRM;YACAO,WAAW,CAAC,YAAY,EAAER,EAAE,OAAO,CAAC;YACpCE,OACEN,mBAAmBA,iBAAiBG,SAAS,eACzC,CAAC,EAAEL,MAAMQ,QAAS,CAAA,OAAOP,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC,GAC1D,OAAOA,SAAS,WACd,CAAC,EAAE,MAAMA,KAAK,CAAC,CAAC,GAChB;QACV;kBAECJ;;AAGP,EAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/views/LivePreview/IFrame/index.tsx"],"sourcesContent":["'use client'\nimport React, { forwardRef } from 'react'\n\nimport { useLivePreviewContext } from '../Context/context.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-iframe'\n\ntype Props = {\n setIframeHasLoaded: (value: boolean) => void\n url: string\n}\n\nexport const IFrame = forwardRef<HTMLIFrameElement, Props>((props, ref) => {\n const { 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"],"names":["React","forwardRef","useLivePreviewContext","baseClass","IFrame","props","ref","setIframeHasLoaded","url","zoom","iframe","className","onLoad","src","style","transform","undefined","title"],"
|
|
1
|
+
{"version":3,"sources":["../../../../src/views/LivePreview/IFrame/index.tsx"],"sourcesContent":["'use client'\nimport React, { forwardRef } from 'react'\n\nimport { useLivePreviewContext } from '../Context/context.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-iframe'\n\ntype Props = {\n setIframeHasLoaded: (value: boolean) => void\n url: string\n}\n\nexport const IFrame = forwardRef<HTMLIFrameElement, Props>((props, ref) => {\n const { 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"],"names":["React","forwardRef","useLivePreviewContext","baseClass","IFrame","props","ref","setIframeHasLoaded","url","zoom","iframe","className","onLoad","src","style","transform","undefined","title"],"mappings":"AAAA;;AACA,OAAOA,SAASC,UAAU,QAAQ,QAAO;AAEzC,SAASC,qBAAqB,QAAQ,wBAAuB;AAG7D,MAAMC,YAAY;AAOlB,OAAO,MAAMC,uBAASH,WAAqC,CAACI,OAAOC;IACjE,MAAM,EAAEC,kBAAkB,EAAEC,GAAG,EAAE,GAAGH;IAEpC,MAAM,EAAEI,IAAI,EAAE,GAAGP;IAEjB,qBACE,KAACQ;QACCC,WAAWR;QACXS,QAAQ;YACNL,mBAAmB;QACrB;QACAD,KAAKA;QACLO,KAAKL;QACLM,OAAO;YACLC,WAAW,OAAON,SAAS,WAAW,CAAC,MAAM,EAAEA,KAAK,EAAE,CAAC,GAAGO;QAC5D;QACAC,OAAOT;;AAGb,GAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/views/LivePreview/Preview/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload'\n\nimport { ShimmerEffect, useAllFormFields, useDocumentEvents } from '@payloadcms/ui'\nimport { reduceFieldsToValues } from '@payloadcms/ui/shared'\nimport React, { useEffect } from 'react'\n\nimport { useLivePreviewContext } from '../Context/context.js'\nimport { DeviceContainer } from '../Device/index.js'\nimport { IFrame } from '../IFrame/index.js'\nimport { LivePreviewToolbar } from '../Toolbar/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-window'\n\nexport const LivePreview: React.FC<EditViewProps> = (props) => {\n const {\n appIsReady,\n iframeHasLoaded,\n iframeRef,\n popupRef,\n previewWindowType,\n setIframeHasLoaded,\n url,\n } = useLivePreviewContext()\n\n const { mostRecentUpdate } = useDocumentEvents()\n\n const { breakpoint, fieldSchemaJSON } = useLivePreviewContext()\n\n const prevWindowType =\n React.useRef<ReturnType<typeof useLivePreviewContext>['previewWindowType']>(undefined)\n\n const [fields] = useAllFormFields()\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 useEffect(() => {\n // For performance, do no reduce fields to values until after the iframe or popup has loaded\n if (fields && window && 'postMessage' in window && appIsReady) {\n const values = reduceFieldsToValues(fields, true)\n\n // To reduce on large `postMessage` payloads, only send `fieldSchemaToJSON` one time\n // To do this, the underlying JS function maintains a cache of this value\n // So we need to send it through each time the window type changes\n // But only once per window type change, not on every render, because this is a potentially large obj\n const shouldSendSchema =\n !prevWindowType.current || prevWindowType.current !== previewWindowType\n\n prevWindowType.current = previewWindowType\n\n const message = {\n type: 'payload-live-preview',\n data: values,\n externallyUpdatedRelationship: mostRecentUpdate,\n fieldSchemaJSON: shouldSendSchema ? fieldSchemaJSON : undefined,\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 fields,\n url,\n iframeHasLoaded,\n previewWindowType,\n popupRef,\n appIsReady,\n iframeRef,\n setIframeHasLoaded,\n fieldSchemaJSON,\n mostRecentUpdate,\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 useEffect(() => {\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])\n\n if (previewWindowType === 'iframe') {\n return (\n <div\n className={[\n baseClass,\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 {url ? (\n <IFrame ref={iframeRef} setIframeHasLoaded={setIframeHasLoaded} url={url} />\n ) : (\n <ShimmerEffect height=\"100%\" />\n )}\n </DeviceContainer>\n </div>\n </div>\n </div>\n )\n }\n}\n"],"names":["ShimmerEffect","useAllFormFields","useDocumentEvents","reduceFieldsToValues","React","useEffect","useLivePreviewContext","DeviceContainer","IFrame","LivePreviewToolbar","baseClass","LivePreview","props","appIsReady","iframeHasLoaded","iframeRef","popupRef","previewWindowType","setIframeHasLoaded","url","mostRecentUpdate","breakpoint","fieldSchemaJSON","prevWindowType","useRef","undefined","fields","window","values","shouldSendSchema","current","message","type","data","externallyUpdatedRelationship","postMessage","contentWindow","div","className","filter","Boolean","join","ref","height"],"
|
|
1
|
+
{"version":3,"sources":["../../../../src/views/LivePreview/Preview/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload'\n\nimport { ShimmerEffect, useAllFormFields, useDocumentEvents } from '@payloadcms/ui'\nimport { reduceFieldsToValues } from '@payloadcms/ui/shared'\nimport React, { useEffect } from 'react'\n\nimport { useLivePreviewContext } from '../Context/context.js'\nimport { DeviceContainer } from '../Device/index.js'\nimport { IFrame } from '../IFrame/index.js'\nimport { LivePreviewToolbar } from '../Toolbar/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-window'\n\nexport const LivePreview: React.FC<EditViewProps> = (props) => {\n const {\n appIsReady,\n iframeHasLoaded,\n iframeRef,\n popupRef,\n previewWindowType,\n setIframeHasLoaded,\n url,\n } = useLivePreviewContext()\n\n const { mostRecentUpdate } = useDocumentEvents()\n\n const { breakpoint, fieldSchemaJSON } = useLivePreviewContext()\n\n const prevWindowType =\n React.useRef<ReturnType<typeof useLivePreviewContext>['previewWindowType']>(undefined)\n\n const [fields] = useAllFormFields()\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 useEffect(() => {\n // For performance, do no reduce fields to values until after the iframe or popup has loaded\n if (fields && window && 'postMessage' in window && appIsReady) {\n const values = reduceFieldsToValues(fields, true)\n\n // To reduce on large `postMessage` payloads, only send `fieldSchemaToJSON` one time\n // To do this, the underlying JS function maintains a cache of this value\n // So we need to send it through each time the window type changes\n // But only once per window type change, not on every render, because this is a potentially large obj\n const shouldSendSchema =\n !prevWindowType.current || prevWindowType.current !== previewWindowType\n\n prevWindowType.current = previewWindowType\n\n const message = {\n type: 'payload-live-preview',\n data: values,\n externallyUpdatedRelationship: mostRecentUpdate,\n fieldSchemaJSON: shouldSendSchema ? fieldSchemaJSON : undefined,\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 fields,\n url,\n iframeHasLoaded,\n previewWindowType,\n popupRef,\n appIsReady,\n iframeRef,\n setIframeHasLoaded,\n fieldSchemaJSON,\n mostRecentUpdate,\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 useEffect(() => {\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])\n\n if (previewWindowType === 'iframe') {\n return (\n <div\n className={[\n baseClass,\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 {url ? (\n <IFrame ref={iframeRef} setIframeHasLoaded={setIframeHasLoaded} url={url} />\n ) : (\n <ShimmerEffect height=\"100%\" />\n )}\n </DeviceContainer>\n </div>\n </div>\n </div>\n )\n }\n}\n"],"names":["ShimmerEffect","useAllFormFields","useDocumentEvents","reduceFieldsToValues","React","useEffect","useLivePreviewContext","DeviceContainer","IFrame","LivePreviewToolbar","baseClass","LivePreview","props","appIsReady","iframeHasLoaded","iframeRef","popupRef","previewWindowType","setIframeHasLoaded","url","mostRecentUpdate","breakpoint","fieldSchemaJSON","prevWindowType","useRef","undefined","fields","window","values","shouldSendSchema","current","message","type","data","externallyUpdatedRelationship","postMessage","contentWindow","div","className","filter","Boolean","join","ref","height"],"mappings":"AAAA;;AAIA,SAASA,aAAa,EAAEC,gBAAgB,EAAEC,iBAAiB,QAAQ,iBAAgB;AACnF,SAASC,oBAAoB,QAAQ,wBAAuB;AAC5D,OAAOC,SAASC,SAAS,QAAQ,QAAO;AAExC,SAASC,qBAAqB,QAAQ,wBAAuB;AAC7D,SAASC,eAAe,QAAQ,qBAAoB;AACpD,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,SAASC,kBAAkB,QAAQ,sBAAqB;AAGxD,MAAMC,YAAY;AAElB,OAAO,MAAMC,cAAuC,CAACC;IACnD,MAAM,EACJC,UAAU,EACVC,eAAe,EACfC,SAAS,EACTC,QAAQ,EACRC,iBAAiB,EACjBC,kBAAkB,EAClBC,GAAG,EACJ,GAAGb;IAEJ,MAAM,EAAEc,gBAAgB,EAAE,GAAGlB;IAE7B,MAAM,EAAEmB,UAAU,EAAEC,eAAe,EAAE,GAAGhB;IAExC,MAAMiB,iBACJnB,MAAMoB,MAAM,CAAgEC;IAE9E,MAAM,CAACC,OAAO,GAAGzB;IAEjB,+DAA+D;IAC/D,6DAA6D;IAC7D,yCAAyC;IACzC,+CAA+C;IAC/CI,UAAU;QACR,4FAA4F;QAC5F,IAAIqB,UAAUC,UAAU,iBAAiBA,UAAUd,YAAY;YAC7D,MAAMe,SAASzB,qBAAqBuB,QAAQ;YAE5C,oFAAoF;YACpF,yEAAyE;YACzE,kEAAkE;YAClE,qGAAqG;YACrG,MAAMG,mBACJ,CAACN,eAAeO,OAAO,IAAIP,eAAeO,OAAO,KAAKb;YAExDM,eAAeO,OAAO,GAAGb;YAEzB,MAAMc,UAAU;gBACdC,MAAM;gBACNC,MAAML;gBACNM,+BAA+Bd;gBAC/BE,iBAAiBO,mBAAmBP,kBAAkBG;YACxD;YAEA,wCAAwC;YACxC,IAAIR,sBAAsB,WAAWD,SAASc,OAAO,EAAE;gBACrDd,SAASc,OAAO,CAACK,WAAW,CAACJ,SAASZ;YACxC;YAEA,kCAAkC;YAClC,IAAIF,sBAAsB,YAAYF,UAAUe,OAAO,EAAE;gBACvDf,UAAUe,OAAO,CAACM,aAAa,EAAED,YAAYJ,SAASZ;YACxD;QACF;IACF,GAAG;QACDO;QACAP;QACAL;QACAG;QACAD;QACAH;QACAE;QACAG;QACAI;QACAF;KACD;IAED,6EAA6E;IAC7E,4EAA4E;IAC5E,sEAAsE;IACtEf,UAAU;QACR,MAAM0B,UAAU;YACdC,MAAM;QACR;QAEA,wCAAwC;QACxC,IAAIf,sBAAsB,WAAWD,SAASc,OAAO,EAAE;YACrDd,SAASc,OAAO,CAACK,WAAW,CAACJ,SAASZ;QACxC;QAEA,kCAAkC;QAClC,IAAIF,sBAAsB,YAAYF,UAAUe,OAAO,EAAE;YACvDf,UAAUe,OAAO,CAACM,aAAa,EAAED,YAAYJ,SAASZ;QACxD;IACF,GAAG;QAACC;QAAkBL;QAAWC;QAAUC;QAAmBE;KAAI;IAElE,IAAIF,sBAAsB,UAAU;QAClC,qBACE,KAACoB;YACCC,WAAW;gBACT5B;gBACAW,cAAcA,eAAe,gBAAgB,CAAC,EAAEX,UAAU,gBAAgB,CAAC;aAC5E,CACE6B,MAAM,CAACC,SACPC,IAAI,CAAC;sBAER,cAAA,MAACJ;gBAAIC,WAAW,CAAC,EAAE5B,UAAU,SAAS,CAAC;;kCACrC,KAACD;wBAAoB,GAAGG,KAAK;;kCAC7B,KAACyB;wBAAIC,WAAW,CAAC,EAAE5B,UAAU,MAAM,CAAC;kCAClC,cAAA,KAACH;sCACEY,oBACC,KAACX;gCAAOkC,KAAK3B;gCAAWG,oBAAoBA;gCAAoBC,KAAKA;+CAErE,KAACnB;gCAAc2C,QAAO;;;;;;;IAOpC;AACF,EAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/views/LivePreview/Toolbar/Controls/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload'\n\nimport { ChevronIcon, LinkIcon, Popup, PopupList, XIcon, useTranslation } from '@payloadcms/ui'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../../Context/context.js'\nimport { PreviewFrameSizeInput } from '../SizeInput/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-toolbar-controls'\nconst zoomOptions = [50, 75, 100, 125, 150, 200]\n\nexport const ToolbarControls: React.FC<EditViewProps> = () => {\n const { breakpoint, breakpoints, setBreakpoint, setPreviewWindowType, setZoom, url, zoom } =\n useLivePreviewContext()\n const { t } = useTranslation()\n\n const customOption = {\n label: t('general:custom'),\n value: 'custom',\n }\n\n return (\n <div className={baseClass}>\n {breakpoints?.length > 0 && (\n <Popup\n button={\n <React.Fragment>\n <span>\n {breakpoints.find((bp) => bp.name == breakpoint)?.label ?? customOption.label}\n </span>\n \n <ChevronIcon className={`${baseClass}__chevron`} />\n </React.Fragment>\n }\n className={`${baseClass}__breakpoint`}\n horizontalAlign=\"right\"\n render={({ close }) => (\n <PopupList.ButtonGroup>\n <React.Fragment>\n {breakpoints.map((bp) => (\n <PopupList.Button\n active={bp.name == breakpoint}\n key={bp.name}\n onClick={() => {\n setBreakpoint(bp.name)\n close()\n }}\n >\n {bp.label}\n </PopupList.Button>\n ))}\n {/* Dynamically add this option so that it only appears when the width and height inputs are explicitly changed */}\n {breakpoint === 'custom' && (\n <PopupList.Button\n active={breakpoint == customOption.value}\n onClick={() => {\n setBreakpoint(customOption.value)\n close()\n }}\n >\n {customOption.label}\n </PopupList.Button>\n )}\n </React.Fragment>\n </PopupList.ButtonGroup>\n )}\n showScrollbar\n verticalAlign=\"bottom\"\n />\n )}\n <div className={`${baseClass}__device-size`}>\n <PreviewFrameSizeInput axis=\"x\" />\n <span className={`${baseClass}__size-divider`}>\n <XIcon />\n </span>\n <PreviewFrameSizeInput axis=\"y\" />\n </div>\n <Popup\n button={\n <React.Fragment>\n <span>{zoom * 100}%</span>\n \n <ChevronIcon className={`${baseClass}__chevron`} />\n </React.Fragment>\n }\n className={`${baseClass}__zoom`}\n horizontalAlign=\"right\"\n render={({ close }) => (\n <PopupList.ButtonGroup>\n <React.Fragment>\n {zoomOptions.map((zoomValue) => (\n <PopupList.Button\n active={zoom * 100 == zoomValue}\n key={zoomValue}\n onClick={() => {\n setZoom(zoomValue / 100)\n close()\n }}\n >\n {zoomValue}%\n </PopupList.Button>\n ))}\n </React.Fragment>\n </PopupList.ButtonGroup>\n )}\n showScrollbar\n verticalAlign=\"bottom\"\n />\n <a\n className={`${baseClass}__external`}\n href={url}\n onClick={(e) => {\n e.preventDefault()\n setPreviewWindowType('popup')\n }}\n type=\"button\"\n >\n <LinkIcon />\n </a>\n </div>\n )\n}\n"],"names":["ChevronIcon","LinkIcon","Popup","PopupList","XIcon","useTranslation","React","useLivePreviewContext","PreviewFrameSizeInput","baseClass","zoomOptions","ToolbarControls","breakpoint","breakpoints","setBreakpoint","setPreviewWindowType","setZoom","url","zoom","t","customOption","label","value","div","className","length","button","Fragment","span","find","bp","name","horizontalAlign","render","close","ButtonGroup","map","Button","active","onClick","showScrollbar","verticalAlign","axis","zoomValue","a","href","e","preventDefault","type"],"
|
|
1
|
+
{"version":3,"sources":["../../../../../src/views/LivePreview/Toolbar/Controls/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload'\n\nimport { ChevronIcon, LinkIcon, Popup, PopupList, XIcon, useTranslation } from '@payloadcms/ui'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../../Context/context.js'\nimport { PreviewFrameSizeInput } from '../SizeInput/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-toolbar-controls'\nconst zoomOptions = [50, 75, 100, 125, 150, 200]\n\nexport const ToolbarControls: React.FC<EditViewProps> = () => {\n const { breakpoint, breakpoints, setBreakpoint, setPreviewWindowType, setZoom, url, zoom } =\n useLivePreviewContext()\n const { t } = useTranslation()\n\n const customOption = {\n label: t('general:custom'),\n value: 'custom',\n }\n\n return (\n <div className={baseClass}>\n {breakpoints?.length > 0 && (\n <Popup\n button={\n <React.Fragment>\n <span>\n {breakpoints.find((bp) => bp.name == breakpoint)?.label ?? customOption.label}\n </span>\n \n <ChevronIcon className={`${baseClass}__chevron`} />\n </React.Fragment>\n }\n className={`${baseClass}__breakpoint`}\n horizontalAlign=\"right\"\n render={({ close }) => (\n <PopupList.ButtonGroup>\n <React.Fragment>\n {breakpoints.map((bp) => (\n <PopupList.Button\n active={bp.name == breakpoint}\n key={bp.name}\n onClick={() => {\n setBreakpoint(bp.name)\n close()\n }}\n >\n {bp.label}\n </PopupList.Button>\n ))}\n {/* Dynamically add this option so that it only appears when the width and height inputs are explicitly changed */}\n {breakpoint === 'custom' && (\n <PopupList.Button\n active={breakpoint == customOption.value}\n onClick={() => {\n setBreakpoint(customOption.value)\n close()\n }}\n >\n {customOption.label}\n </PopupList.Button>\n )}\n </React.Fragment>\n </PopupList.ButtonGroup>\n )}\n showScrollbar\n verticalAlign=\"bottom\"\n />\n )}\n <div className={`${baseClass}__device-size`}>\n <PreviewFrameSizeInput axis=\"x\" />\n <span className={`${baseClass}__size-divider`}>\n <XIcon />\n </span>\n <PreviewFrameSizeInput axis=\"y\" />\n </div>\n <Popup\n button={\n <React.Fragment>\n <span>{zoom * 100}%</span>\n \n <ChevronIcon className={`${baseClass}__chevron`} />\n </React.Fragment>\n }\n className={`${baseClass}__zoom`}\n horizontalAlign=\"right\"\n render={({ close }) => (\n <PopupList.ButtonGroup>\n <React.Fragment>\n {zoomOptions.map((zoomValue) => (\n <PopupList.Button\n active={zoom * 100 == zoomValue}\n key={zoomValue}\n onClick={() => {\n setZoom(zoomValue / 100)\n close()\n }}\n >\n {zoomValue}%\n </PopupList.Button>\n ))}\n </React.Fragment>\n </PopupList.ButtonGroup>\n )}\n showScrollbar\n verticalAlign=\"bottom\"\n />\n <a\n className={`${baseClass}__external`}\n href={url}\n onClick={(e) => {\n e.preventDefault()\n setPreviewWindowType('popup')\n }}\n type=\"button\"\n >\n <LinkIcon />\n </a>\n </div>\n )\n}\n"],"names":["ChevronIcon","LinkIcon","Popup","PopupList","XIcon","useTranslation","React","useLivePreviewContext","PreviewFrameSizeInput","baseClass","zoomOptions","ToolbarControls","breakpoint","breakpoints","setBreakpoint","setPreviewWindowType","setZoom","url","zoom","t","customOption","label","value","div","className","length","button","Fragment","span","find","bp","name","horizontalAlign","render","close","ButtonGroup","map","Button","active","onClick","showScrollbar","verticalAlign","axis","zoomValue","a","href","e","preventDefault","type"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/views/LivePreview/Toolbar/SizeInput/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect } from 'react'\n\nimport { useLivePreviewContext } from '../../Context/context.js'\nimport './index.scss'\n\nconst baseClass = 'toolbar-input'\n\nexport const PreviewFrameSizeInput: React.FC<{\n axis?: 'x' | 'y'\n}> = (props) => {\n const { axis } = props\n\n const { breakpoint, measuredDeviceSize, setBreakpoint, setSize, size, zoom } =\n useLivePreviewContext()\n\n const [internalState, setInternalState] = React.useState<number>(\n (axis === 'x' ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0,\n )\n\n // when the input is changed manually, we need to set the breakpoint as `custom`\n // this will then allow us to set an explicit width and height\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n let newValue = Number(e.target.value)\n\n if (newValue < 0) newValue = 0\n\n setInternalState(newValue)\n setBreakpoint('custom')\n\n // be sure to set _both_ axis values to so that the other axis doesn't fallback to 0 on initial change\n // this is because the `responsive` size is '100%' in CSS, and `0` in initial state\n setSize({\n type: 'reset',\n value: {\n height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,\n width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom,\n },\n })\n },\n [axis, setBreakpoint, measuredDeviceSize, setSize, zoom],\n )\n\n // if the breakpoint is `responsive` then the device's div will have `100%` width and height\n // so we need to take the measurements provided by `actualDeviceSize` and sync internal state\n useEffect(() => {\n if (breakpoint === 'responsive' && measuredDeviceSize) {\n if (axis === 'x') setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom)\n else setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom)\n }\n\n if (breakpoint !== 'responsive' && size) {\n setInternalState(axis === 'x' ? size.width : size.height)\n }\n }, [breakpoint, axis, measuredDeviceSize, size, zoom])\n\n return (\n <input\n className={baseClass}\n min={0}\n name={axis === 'x' ? 'live-preview-width' : 'live-preview-height'}\n onChange={handleChange}\n step={1}\n type=\"number\"\n value={internalState || 0}\n />\n )\n}\n"],"names":["React","useCallback","useEffect","useLivePreviewContext","baseClass","PreviewFrameSizeInput","props","axis","breakpoint","measuredDeviceSize","setBreakpoint","setSize","size","zoom","internalState","setInternalState","useState","width","height","handleChange","e","newValue","Number","target","value","type","toFixed","input","className","min","name","onChange","step"],"
|
|
1
|
+
{"version":3,"sources":["../../../../../src/views/LivePreview/Toolbar/SizeInput/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect } from 'react'\n\nimport { useLivePreviewContext } from '../../Context/context.js'\nimport './index.scss'\n\nconst baseClass = 'toolbar-input'\n\nexport const PreviewFrameSizeInput: React.FC<{\n axis?: 'x' | 'y'\n}> = (props) => {\n const { axis } = props\n\n const { breakpoint, measuredDeviceSize, setBreakpoint, setSize, size, zoom } =\n useLivePreviewContext()\n\n const [internalState, setInternalState] = React.useState<number>(\n (axis === 'x' ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0,\n )\n\n // when the input is changed manually, we need to set the breakpoint as `custom`\n // this will then allow us to set an explicit width and height\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n let newValue = Number(e.target.value)\n\n if (newValue < 0) newValue = 0\n\n setInternalState(newValue)\n setBreakpoint('custom')\n\n // be sure to set _both_ axis values to so that the other axis doesn't fallback to 0 on initial change\n // this is because the `responsive` size is '100%' in CSS, and `0` in initial state\n setSize({\n type: 'reset',\n value: {\n height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,\n width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom,\n },\n })\n },\n [axis, setBreakpoint, measuredDeviceSize, setSize, zoom],\n )\n\n // if the breakpoint is `responsive` then the device's div will have `100%` width and height\n // so we need to take the measurements provided by `actualDeviceSize` and sync internal state\n useEffect(() => {\n if (breakpoint === 'responsive' && measuredDeviceSize) {\n if (axis === 'x') setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom)\n else setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom)\n }\n\n if (breakpoint !== 'responsive' && size) {\n setInternalState(axis === 'x' ? size.width : size.height)\n }\n }, [breakpoint, axis, measuredDeviceSize, size, zoom])\n\n return (\n <input\n className={baseClass}\n min={0}\n name={axis === 'x' ? 'live-preview-width' : 'live-preview-height'}\n onChange={handleChange}\n step={1}\n type=\"number\"\n value={internalState || 0}\n />\n )\n}\n"],"names":["React","useCallback","useEffect","useLivePreviewContext","baseClass","PreviewFrameSizeInput","props","axis","breakpoint","measuredDeviceSize","setBreakpoint","setSize","size","zoom","internalState","setInternalState","useState","width","height","handleChange","e","newValue","Number","target","value","type","toFixed","input","className","min","name","onChange","step"],"mappings":"AAAA;;AACA,OAAOA,SAASC,WAAW,EAAEC,SAAS,QAAQ,QAAO;AAErD,SAASC,qBAAqB,QAAQ,2BAA0B;AAGhE,MAAMC,YAAY;AAElB,OAAO,MAAMC,wBAER,CAACC;IACJ,MAAM,EAAEC,IAAI,EAAE,GAAGD;IAEjB,MAAM,EAAEE,UAAU,EAAEC,kBAAkB,EAAEC,aAAa,EAAEC,OAAO,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAC1EV;IAEF,MAAM,CAACW,eAAeC,iBAAiB,GAAGf,MAAMgB,QAAQ,CACtD,AAACT,CAAAA,SAAS,MAAME,oBAAoBQ,QAAQR,oBAAoBS,MAAK,KAAM;IAG7E,gFAAgF;IAChF,8DAA8D;IAC9D,MAAMC,eAAelB,YACnB,CAACmB;QACC,IAAIC,WAAWC,OAAOF,EAAEG,MAAM,CAACC,KAAK;QAEpC,IAAIH,WAAW,GAAGA,WAAW;QAE7BN,iBAAiBM;QACjBX,cAAc;QAEd,sGAAsG;QACtG,mFAAmF;QACnFC,QAAQ;YACNc,MAAM;YACND,OAAO;gBACLN,QAAQX,SAAS,MAAMc,WAAWC,OAAOb,oBAAoBS,OAAOQ,QAAQ,MAAMb;gBAClFI,OAAOV,SAAS,MAAMc,WAAWC,OAAOb,oBAAoBQ,MAAMS,QAAQ,MAAMb;YAClF;QACF;IACF,GACA;QAACN;QAAMG;QAAeD;QAAoBE;QAASE;KAAK;IAG1D,4FAA4F;IAC5F,6FAA6F;IAC7FX,UAAU;QACR,IAAIM,eAAe,gBAAgBC,oBAAoB;YACrD,IAAIF,SAAS,KAAKQ,iBAAiBO,OAAOb,mBAAmBQ,KAAK,CAACS,OAAO,CAAC,MAAMb;iBAC5EE,iBAAiBO,OAAOb,mBAAmBS,MAAM,CAACQ,OAAO,CAAC,MAAMb;QACvE;QAEA,IAAIL,eAAe,gBAAgBI,MAAM;YACvCG,iBAAiBR,SAAS,MAAMK,KAAKK,KAAK,GAAGL,KAAKM,MAAM;QAC1D;IACF,GAAG;QAACV;QAAYD;QAAME;QAAoBG;QAAMC;KAAK;IAErD,qBACE,KAACc;QACCC,WAAWxB;QACXyB,KAAK;QACLC,MAAMvB,SAAS,MAAM,uBAAuB;QAC5CwB,UAAUZ;QACVa,MAAM;QACNP,MAAK;QACLD,OAAOV,iBAAiB;;AAG9B,EAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/views/LivePreview/Toolbar/index.tsx"],"sourcesContent":["'use client'\nimport type { EditViewProps } from 'payload'\n\nimport { useDraggable } from '@dnd-kit/core'\nimport { DragHandleIcon } from '@payloadcms/ui'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../Context/context.js'\nimport { ToolbarControls } from './Controls/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-toolbar'\n\nconst DraggableToolbar: React.FC<EditViewProps> = (props) => {\n const { toolbarPosition } = useLivePreviewContext()\n\n const { attributes, listeners, setNodeRef, transform } = useDraggable({\n id: 'live-preview-toolbar',\n })\n\n return (\n <div\n className={[baseClass, `${baseClass}--draggable`].join(' ')}\n style={{\n left: `${toolbarPosition.x}px`,\n top: `${toolbarPosition.y}px`,\n ...(transform\n ? {\n transform: transform\n ? `translate3d(${transform?.x || 0}px, ${transform?.y || 0}px, 0)`\n : undefined,\n }\n : {}),\n }}\n >\n <button\n {...listeners}\n {...attributes}\n className={`${baseClass}__drag-handle`}\n ref={setNodeRef}\n type=\"button\"\n >\n <DragHandleIcon />\n </button>\n <ToolbarControls {...props} />\n </div>\n )\n}\n\nconst StaticToolbar: React.FC<EditViewProps> = (props) => {\n return (\n <div className={[baseClass, `${baseClass}--static`].join(' ')}>\n <ToolbarControls {...props} />\n </div>\n )\n}\n\nexport const LivePreviewToolbar: React.FC<\n EditViewProps & {\n draggable?: boolean\n }\n> = (props) => {\n const { draggable } = props\n\n if (draggable) {\n return <DraggableToolbar {...props} />\n }\n\n return <StaticToolbar {...props} />\n}\n"],"names":["useDraggable","DragHandleIcon","React","useLivePreviewContext","ToolbarControls","baseClass","DraggableToolbar","props","toolbarPosition","attributes","listeners","setNodeRef","transform","id","div","className","join","style","left","x","top","y","undefined","button","ref","type","StaticToolbar","LivePreviewToolbar","draggable"],"
|
|
1
|
+
{"version":3,"sources":["../../../../src/views/LivePreview/Toolbar/index.tsx"],"sourcesContent":["'use client'\nimport type { EditViewProps } from 'payload'\n\nimport { useDraggable } from '@dnd-kit/core'\nimport { DragHandleIcon } from '@payloadcms/ui'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../Context/context.js'\nimport { ToolbarControls } from './Controls/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-toolbar'\n\nconst DraggableToolbar: React.FC<EditViewProps> = (props) => {\n const { toolbarPosition } = useLivePreviewContext()\n\n const { attributes, listeners, setNodeRef, transform } = useDraggable({\n id: 'live-preview-toolbar',\n })\n\n return (\n <div\n className={[baseClass, `${baseClass}--draggable`].join(' ')}\n style={{\n left: `${toolbarPosition.x}px`,\n top: `${toolbarPosition.y}px`,\n ...(transform\n ? {\n transform: transform\n ? `translate3d(${transform?.x || 0}px, ${transform?.y || 0}px, 0)`\n : undefined,\n }\n : {}),\n }}\n >\n <button\n {...listeners}\n {...attributes}\n className={`${baseClass}__drag-handle`}\n ref={setNodeRef}\n type=\"button\"\n >\n <DragHandleIcon />\n </button>\n <ToolbarControls {...props} />\n </div>\n )\n}\n\nconst StaticToolbar: React.FC<EditViewProps> = (props) => {\n return (\n <div className={[baseClass, `${baseClass}--static`].join(' ')}>\n <ToolbarControls {...props} />\n </div>\n )\n}\n\nexport const LivePreviewToolbar: React.FC<\n EditViewProps & {\n draggable?: boolean\n }\n> = (props) => {\n const { draggable } = props\n\n if (draggable) {\n return <DraggableToolbar {...props} />\n }\n\n return <StaticToolbar {...props} />\n}\n"],"names":["useDraggable","DragHandleIcon","React","useLivePreviewContext","ToolbarControls","baseClass","DraggableToolbar","props","toolbarPosition","attributes","listeners","setNodeRef","transform","id","div","className","join","style","left","x","top","y","undefined","button","ref","type","StaticToolbar","LivePreviewToolbar","draggable"],"mappings":"AAAA;;AAGA,SAASA,YAAY,QAAQ,gBAAe;AAC5C,SAASC,cAAc,QAAQ,iBAAgB;AAC/C,OAAOC,WAAW,QAAO;AAEzB,SAASC,qBAAqB,QAAQ,wBAAuB;AAC7D,SAASC,eAAe,QAAQ,sBAAqB;AAGrD,MAAMC,YAAY;AAElB,MAAMC,mBAA4C,CAACC;IACjD,MAAM,EAAEC,eAAe,EAAE,GAAGL;IAE5B,MAAM,EAAEM,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,SAAS,EAAE,GAAGZ,aAAa;QACpEa,IAAI;IACN;IAEA,qBACE,MAACC;QACCC,WAAW;YAACV;YAAW,CAAC,EAAEA,UAAU,WAAW,CAAC;SAAC,CAACW,IAAI,CAAC;QACvDC,OAAO;YACLC,MAAM,CAAC,EAAEV,gBAAgBW,CAAC,CAAC,EAAE,CAAC;YAC9BC,KAAK,CAAC,EAAEZ,gBAAgBa,CAAC,CAAC,EAAE,CAAC;YAC7B,GAAIT,YACA;gBACEA,WAAWA,YACP,CAAC,YAAY,EAAEA,WAAWO,KAAK,EAAE,IAAI,EAAEP,WAAWS,KAAK,EAAE,MAAM,CAAC,GAChEC;YACN,IACA,CAAC,CAAC;QACR;;0BAEA,KAACC;gBACE,GAAGb,SAAS;gBACZ,GAAGD,UAAU;gBACdM,WAAW,CAAC,EAAEV,UAAU,aAAa,CAAC;gBACtCmB,KAAKb;gBACLc,MAAK;0BAEL,cAAA,KAACxB;;0BAEH,KAACG;gBAAiB,GAAGG,KAAK;;;;AAGhC;AAEA,MAAMmB,gBAAyC,CAACnB;IAC9C,qBACE,KAACO;QAAIC,WAAW;YAACV;YAAW,CAAC,EAAEA,UAAU,QAAQ,CAAC;SAAC,CAACW,IAAI,CAAC;kBACvD,cAAA,KAACZ;YAAiB,GAAGG,KAAK;;;AAGhC;AAEA,OAAO,MAAMoB,qBAIT,CAACpB;IACH,MAAM,EAAEqB,SAAS,EAAE,GAAGrB;IAEtB,IAAIqB,WAAW;QACb,qBAAO,KAACtB;YAAkB,GAAGC,KAAK;;IACpC;IAEA,qBAAO,KAACmB;QAAe,GAAGnB,KAAK;;AACjC,EAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/views/LivePreview/ToolbarArea/index.tsx"],"sourcesContent":["'use client'\nimport { useDroppable } from '@dnd-kit/core'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'toolbar-area'\n\nexport const ToolbarArea: React.FC<{\n children: React.ReactNode\n}> = (props) => {\n const { children } = props\n\n const { setNodeRef } = useDroppable({\n id: 'live-preview-area',\n })\n\n return (\n <div className={baseClass} ref={setNodeRef}>\n {children}\n </div>\n )\n}\n"],"names":["useDroppable","React","baseClass","ToolbarArea","props","children","setNodeRef","id","div","className","ref"],"
|
|
1
|
+
{"version":3,"sources":["../../../../src/views/LivePreview/ToolbarArea/index.tsx"],"sourcesContent":["'use client'\nimport { useDroppable } from '@dnd-kit/core'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'toolbar-area'\n\nexport const ToolbarArea: React.FC<{\n children: React.ReactNode\n}> = (props) => {\n const { children } = props\n\n const { setNodeRef } = useDroppable({\n id: 'live-preview-area',\n })\n\n return (\n <div className={baseClass} ref={setNodeRef}>\n {children}\n </div>\n )\n}\n"],"names":["useDroppable","React","baseClass","ToolbarArea","props","children","setNodeRef","id","div","className","ref"],"mappings":"AAAA;;AACA,SAASA,YAAY,QAAQ,gBAAe;AAC5C,OAAOC,WAAW,QAAO;AAIzB,MAAMC,YAAY;AAElB,OAAO,MAAMC,cAER,CAACC;IACJ,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAM,EAAEE,UAAU,EAAE,GAAGN,aAAa;QAClCO,IAAI;IACN;IAEA,qBACE,KAACC;QAAIC,WAAWP;QAAWQ,KAAKJ;kBAC7BD;;AAGP,EAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/views/LivePreview/index.client.tsx"],"sourcesContent":["'use client'\nimport type { FormProps } from '@payloadcms/ui'\nimport type { FieldMap } from '@payloadcms/ui/utilities/buildComponentMap'\nimport type {\n ClientCollectionConfig,\n ClientConfig,\n ClientGlobalConfig,\n Data,\n LivePreviewConfig,\n} from 'payload'\n\nimport {\n DocumentControls,\n DocumentFields,\n Form,\n OperationProvider,\n SetViewActions,\n useAuth,\n useComponentMap,\n useConfig,\n useDocumentEvents,\n useDocumentInfo,\n useTranslation,\n} from '@payloadcms/ui'\nimport { getFormState } from '@payloadcms/ui/shared'\nimport React, { Fragment, useCallback } from 'react'\n\nimport { LeaveWithoutSaving } from '../../elements/LeaveWithoutSaving/index.js'\nimport { SetDocumentStepNav } from '../Edit/Default/SetDocumentStepNav/index.js'\nimport { SetDocumentTitle } from '../Edit/Default/SetDocumentTitle/index.js'\nimport { useLivePreviewContext } from './Context/context.js'\nimport { LivePreviewProvider } from './Context/index.js'\nimport { LivePreview } from './Preview/index.js'\nimport './index.scss'\nimport { usePopupWindow } from './usePopupWindow.js'\n\nconst baseClass = 'live-preview'\n\ntype Props = {\n apiRoute: string\n collectionConfig?: ClientCollectionConfig\n config: ClientConfig\n fieldMap: FieldMap\n globalConfig?: ClientGlobalConfig\n schemaPath: string\n serverURL: string\n}\n\nconst PreviewView: React.FC<Props> = ({\n apiRoute,\n collectionConfig,\n config,\n fieldMap,\n globalConfig,\n schemaPath,\n serverURL,\n}) => {\n const {\n id,\n AfterDocument,\n AfterFields,\n BeforeDocument,\n BeforeFields,\n action,\n apiURL,\n collectionSlug,\n disableActions,\n disableLeaveWithoutSaving,\n docPermissions,\n getDocPreferences,\n globalSlug,\n hasPublishPermission,\n hasSavePermission,\n initialData,\n initialState,\n isEditing,\n isInitializing,\n onSave: onSaveFromProps,\n } = useDocumentInfo()\n\n const operation = id ? 'update' : 'create'\n\n const {\n admin: { user: userSlug },\n } = useConfig()\n const { t } = useTranslation()\n const { previewWindowType } = useLivePreviewContext()\n const { refreshCookieAsync, user } = useAuth()\n const { reportUpdate } = useDocumentEvents()\n\n const onSave = useCallback(\n (json) => {\n reportUpdate({\n id,\n entitySlug: collectionSlug,\n updatedAt: json?.result?.updatedAt || new Date().toISOString(),\n })\n\n // If we're editing the doc of the logged-in user,\n // Refresh the cookie to get new permissions\n if (user && collectionSlug === userSlug && id === user.id) {\n void refreshCookieAsync()\n }\n\n if (typeof onSaveFromProps === 'function') {\n void onSaveFromProps({\n ...json,\n operation: id ? 'update' : 'create',\n })\n }\n },\n [collectionSlug, id, onSaveFromProps, refreshCookieAsync, reportUpdate, user, userSlug],\n )\n\n const onChange: FormProps['onChange'][0] = useCallback(\n async ({ formState: prevFormState }) => {\n const docPreferences = await getDocPreferences()\n\n return getFormState({\n apiRoute,\n body: {\n id,\n docPreferences,\n formState: prevFormState,\n operation,\n schemaPath,\n },\n serverURL,\n })\n },\n [serverURL, apiRoute, id, operation, schemaPath, getDocPreferences],\n )\n\n return (\n <Fragment>\n <OperationProvider operation={operation}>\n <Form\n action={action}\n className={`${baseClass}__form`}\n disabled={!hasSavePermission}\n initialState={initialState}\n isInitializing={isInitializing}\n method={id ? 'PATCH' : 'POST'}\n onChange={[onChange]}\n onSuccess={onSave}\n >\n {((collectionConfig &&\n !(collectionConfig.versions?.drafts && collectionConfig.versions?.drafts?.autosave)) ||\n (globalConfig &&\n !(globalConfig.versions?.drafts && globalConfig.versions?.drafts?.autosave))) &&\n !disableLeaveWithoutSaving && <LeaveWithoutSaving />}\n <SetDocumentStepNav\n collectionSlug={collectionSlug}\n globalLabel={globalConfig?.label}\n globalSlug={globalSlug}\n id={id}\n pluralLabel={collectionConfig ? collectionConfig?.labels?.plural : undefined}\n useAsTitle={collectionConfig ? collectionConfig?.admin?.useAsTitle : undefined}\n view={t('general:livePreview')}\n />\n <SetDocumentTitle\n collectionConfig={collectionConfig}\n config={config}\n fallback={id?.toString() || ''}\n globalConfig={globalConfig}\n />\n <DocumentControls\n apiURL={apiURL}\n data={initialData}\n disableActions={disableActions}\n hasPublishPermission={hasPublishPermission}\n hasSavePermission={hasSavePermission}\n id={id}\n isEditing={isEditing}\n permissions={docPermissions}\n slug={collectionConfig?.slug || globalConfig?.slug}\n />\n <div\n className={[baseClass, previewWindowType === 'popup' && `${baseClass}--detached`]\n .filter(Boolean)\n .join(' ')}\n >\n <div\n className={[\n `${baseClass}__main`,\n previewWindowType === 'popup' && `${baseClass}__main--popup-open`,\n ]\n .filter(Boolean)\n .join(' ')}\n >\n {BeforeDocument}\n <DocumentFields\n AfterFields={AfterFields}\n BeforeFields={BeforeFields}\n docPermissions={docPermissions}\n fieldMap={fieldMap}\n forceSidebarWrap\n readOnly={!hasSavePermission}\n schemaPath={collectionSlug || globalSlug}\n />\n {AfterDocument}\n </div>\n <LivePreview collectionSlug={collectionSlug} globalSlug={globalSlug} />\n </div>\n </Form>\n </OperationProvider>\n </Fragment>\n )\n}\n\nexport const LivePreviewClient: React.FC<{\n breakpoints: LivePreviewConfig['breakpoints']\n initialData: Data\n url: string\n}> = (props) => {\n const { breakpoints, url } = props\n const { collectionSlug, globalSlug } = useDocumentInfo()\n\n const config = useConfig()\n\n const { isPopupOpen, openPopupWindow, popupRef } = usePopupWindow({\n eventType: 'payload-live-preview',\n url,\n })\n\n const {\n collections,\n globals,\n routes: { api: apiRoute },\n serverURL,\n } = config\n\n const collectionConfig =\n collectionSlug && collections.find((collection) => collection.slug === collectionSlug)\n\n const globalConfig = globalSlug && globals.find((global) => global.slug === globalSlug)\n\n const schemaPath = collectionSlug || globalSlug\n\n const { getComponentMap } = useComponentMap()\n\n const componentMap = getComponentMap({ collectionSlug, globalSlug })\n\n const { getFieldMap } = useComponentMap()\n\n const fieldMap = getFieldMap({\n collectionSlug: collectionConfig?.slug,\n globalSlug: globalConfig?.slug,\n })\n\n return (\n <Fragment>\n <SetViewActions actions={componentMap?.actionsMap?.Edit?.LivePreview} />\n <LivePreviewProvider\n breakpoints={breakpoints}\n fieldSchema={collectionConfig?.fields || globalConfig?.fields}\n isPopupOpen={isPopupOpen}\n openPopupWindow={openPopupWindow}\n popupRef={popupRef}\n url={url}\n >\n <PreviewView\n apiRoute={apiRoute}\n collectionConfig={collectionConfig}\n config={config}\n fieldMap={fieldMap}\n globalConfig={globalConfig}\n schemaPath={schemaPath}\n serverURL={serverURL}\n />\n </LivePreviewProvider>\n </Fragment>\n )\n}\n"],"names":["DocumentControls","DocumentFields","Form","OperationProvider","SetViewActions","useAuth","useComponentMap","useConfig","useDocumentEvents","useDocumentInfo","useTranslation","getFormState","React","Fragment","useCallback","LeaveWithoutSaving","SetDocumentStepNav","SetDocumentTitle","useLivePreviewContext","LivePreviewProvider","LivePreview","usePopupWindow","baseClass","PreviewView","apiRoute","collectionConfig","config","fieldMap","globalConfig","schemaPath","serverURL","id","AfterDocument","AfterFields","BeforeDocument","BeforeFields","action","apiURL","collectionSlug","disableActions","disableLeaveWithoutSaving","docPermissions","getDocPreferences","globalSlug","hasPublishPermission","hasSavePermission","initialData","initialState","isEditing","isInitializing","onSave","onSaveFromProps","operation","admin","user","userSlug","t","previewWindowType","refreshCookieAsync","reportUpdate","json","entitySlug","updatedAt","result","Date","toISOString","onChange","formState","prevFormState","docPreferences","body","className","disabled","method","onSuccess","versions","drafts","autosave","globalLabel","label","pluralLabel","labels","plural","undefined","useAsTitle","view","fallback","toString","data","permissions","slug","div","filter","Boolean","join","forceSidebarWrap","readOnly","LivePreviewClient","props","breakpoints","url","isPopupOpen","openPopupWindow","popupRef","eventType","collections","globals","routes","api","find","collection","global","getComponentMap","componentMap","getFieldMap","actions","actionsMap","Edit","fieldSchema","fields"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/views/LivePreview/index.client.tsx"],"sourcesContent":["'use client'\nimport type { FormProps } from '@payloadcms/ui'\nimport type { FieldMap } from '@payloadcms/ui/utilities/buildComponentMap'\nimport type {\n ClientCollectionConfig,\n ClientConfig,\n ClientGlobalConfig,\n Data,\n LivePreviewConfig,\n} from 'payload'\n\nimport {\n DocumentControls,\n DocumentFields,\n Form,\n OperationProvider,\n SetViewActions,\n useAuth,\n useComponentMap,\n useConfig,\n useDocumentEvents,\n useDocumentInfo,\n useTranslation,\n} from '@payloadcms/ui'\nimport { getFormState } from '@payloadcms/ui/shared'\nimport React, { Fragment, useCallback } from 'react'\n\nimport { LeaveWithoutSaving } from '../../elements/LeaveWithoutSaving/index.js'\nimport { SetDocumentStepNav } from '../Edit/Default/SetDocumentStepNav/index.js'\nimport { SetDocumentTitle } from '../Edit/Default/SetDocumentTitle/index.js'\nimport { useLivePreviewContext } from './Context/context.js'\nimport { LivePreviewProvider } from './Context/index.js'\nimport { LivePreview } from './Preview/index.js'\nimport './index.scss'\nimport { usePopupWindow } from './usePopupWindow.js'\n\nconst baseClass = 'live-preview'\n\ntype Props = {\n apiRoute: string\n collectionConfig?: ClientCollectionConfig\n config: ClientConfig\n fieldMap: FieldMap\n globalConfig?: ClientGlobalConfig\n schemaPath: string\n serverURL: string\n}\n\nconst PreviewView: React.FC<Props> = ({\n apiRoute,\n collectionConfig,\n config,\n fieldMap,\n globalConfig,\n schemaPath,\n serverURL,\n}) => {\n const {\n id,\n AfterDocument,\n AfterFields,\n BeforeDocument,\n BeforeFields,\n action,\n apiURL,\n collectionSlug,\n disableActions,\n disableLeaveWithoutSaving,\n docPermissions,\n getDocPreferences,\n globalSlug,\n hasPublishPermission,\n hasSavePermission,\n initialData,\n initialState,\n isEditing,\n isInitializing,\n onSave: onSaveFromProps,\n } = useDocumentInfo()\n\n const operation = id ? 'update' : 'create'\n\n const {\n admin: { user: userSlug },\n } = useConfig()\n const { t } = useTranslation()\n const { previewWindowType } = useLivePreviewContext()\n const { refreshCookieAsync, user } = useAuth()\n const { reportUpdate } = useDocumentEvents()\n\n const onSave = useCallback(\n (json) => {\n reportUpdate({\n id,\n entitySlug: collectionSlug,\n updatedAt: json?.result?.updatedAt || new Date().toISOString(),\n })\n\n // If we're editing the doc of the logged-in user,\n // Refresh the cookie to get new permissions\n if (user && collectionSlug === userSlug && id === user.id) {\n void refreshCookieAsync()\n }\n\n if (typeof onSaveFromProps === 'function') {\n void onSaveFromProps({\n ...json,\n operation: id ? 'update' : 'create',\n })\n }\n },\n [collectionSlug, id, onSaveFromProps, refreshCookieAsync, reportUpdate, user, userSlug],\n )\n\n const onChange: FormProps['onChange'][0] = useCallback(\n async ({ formState: prevFormState }) => {\n const docPreferences = await getDocPreferences()\n\n return getFormState({\n apiRoute,\n body: {\n id,\n docPreferences,\n formState: prevFormState,\n operation,\n schemaPath,\n },\n serverURL,\n })\n },\n [serverURL, apiRoute, id, operation, schemaPath, getDocPreferences],\n )\n\n return (\n <Fragment>\n <OperationProvider operation={operation}>\n <Form\n action={action}\n className={`${baseClass}__form`}\n disabled={!hasSavePermission}\n initialState={initialState}\n isInitializing={isInitializing}\n method={id ? 'PATCH' : 'POST'}\n onChange={[onChange]}\n onSuccess={onSave}\n >\n {((collectionConfig &&\n !(collectionConfig.versions?.drafts && collectionConfig.versions?.drafts?.autosave)) ||\n (globalConfig &&\n !(globalConfig.versions?.drafts && globalConfig.versions?.drafts?.autosave))) &&\n !disableLeaveWithoutSaving && <LeaveWithoutSaving />}\n <SetDocumentStepNav\n collectionSlug={collectionSlug}\n globalLabel={globalConfig?.label}\n globalSlug={globalSlug}\n id={id}\n pluralLabel={collectionConfig ? collectionConfig?.labels?.plural : undefined}\n useAsTitle={collectionConfig ? collectionConfig?.admin?.useAsTitle : undefined}\n view={t('general:livePreview')}\n />\n <SetDocumentTitle\n collectionConfig={collectionConfig}\n config={config}\n fallback={id?.toString() || ''}\n globalConfig={globalConfig}\n />\n <DocumentControls\n apiURL={apiURL}\n data={initialData}\n disableActions={disableActions}\n hasPublishPermission={hasPublishPermission}\n hasSavePermission={hasSavePermission}\n id={id}\n isEditing={isEditing}\n permissions={docPermissions}\n slug={collectionConfig?.slug || globalConfig?.slug}\n />\n <div\n className={[baseClass, previewWindowType === 'popup' && `${baseClass}--detached`]\n .filter(Boolean)\n .join(' ')}\n >\n <div\n className={[\n `${baseClass}__main`,\n previewWindowType === 'popup' && `${baseClass}__main--popup-open`,\n ]\n .filter(Boolean)\n .join(' ')}\n >\n {BeforeDocument}\n <DocumentFields\n AfterFields={AfterFields}\n BeforeFields={BeforeFields}\n docPermissions={docPermissions}\n fieldMap={fieldMap}\n forceSidebarWrap\n readOnly={!hasSavePermission}\n schemaPath={collectionSlug || globalSlug}\n />\n {AfterDocument}\n </div>\n <LivePreview collectionSlug={collectionSlug} globalSlug={globalSlug} />\n </div>\n </Form>\n </OperationProvider>\n </Fragment>\n )\n}\n\nexport const LivePreviewClient: React.FC<{\n breakpoints: LivePreviewConfig['breakpoints']\n initialData: Data\n url: string\n}> = (props) => {\n const { breakpoints, url } = props\n const { collectionSlug, globalSlug } = useDocumentInfo()\n\n const config = useConfig()\n\n const { isPopupOpen, openPopupWindow, popupRef } = usePopupWindow({\n eventType: 'payload-live-preview',\n url,\n })\n\n const {\n collections,\n globals,\n routes: { api: apiRoute },\n serverURL,\n } = config\n\n const collectionConfig =\n collectionSlug && collections.find((collection) => collection.slug === collectionSlug)\n\n const globalConfig = globalSlug && globals.find((global) => global.slug === globalSlug)\n\n const schemaPath = collectionSlug || globalSlug\n\n const { getComponentMap } = useComponentMap()\n\n const componentMap = getComponentMap({ collectionSlug, globalSlug })\n\n const { getFieldMap } = useComponentMap()\n\n const fieldMap = getFieldMap({\n collectionSlug: collectionConfig?.slug,\n globalSlug: globalConfig?.slug,\n })\n\n return (\n <Fragment>\n <SetViewActions actions={componentMap?.actionsMap?.Edit?.LivePreview} />\n <LivePreviewProvider\n breakpoints={breakpoints}\n fieldSchema={collectionConfig?.fields || globalConfig?.fields}\n isPopupOpen={isPopupOpen}\n openPopupWindow={openPopupWindow}\n popupRef={popupRef}\n url={url}\n >\n <PreviewView\n apiRoute={apiRoute}\n collectionConfig={collectionConfig}\n config={config}\n fieldMap={fieldMap}\n globalConfig={globalConfig}\n schemaPath={schemaPath}\n serverURL={serverURL}\n />\n </LivePreviewProvider>\n </Fragment>\n )\n}\n"],"names":["DocumentControls","DocumentFields","Form","OperationProvider","SetViewActions","useAuth","useComponentMap","useConfig","useDocumentEvents","useDocumentInfo","useTranslation","getFormState","React","Fragment","useCallback","LeaveWithoutSaving","SetDocumentStepNav","SetDocumentTitle","useLivePreviewContext","LivePreviewProvider","LivePreview","usePopupWindow","baseClass","PreviewView","apiRoute","collectionConfig","config","fieldMap","globalConfig","schemaPath","serverURL","id","AfterDocument","AfterFields","BeforeDocument","BeforeFields","action","apiURL","collectionSlug","disableActions","disableLeaveWithoutSaving","docPermissions","getDocPreferences","globalSlug","hasPublishPermission","hasSavePermission","initialData","initialState","isEditing","isInitializing","onSave","onSaveFromProps","operation","admin","user","userSlug","t","previewWindowType","refreshCookieAsync","reportUpdate","json","entitySlug","updatedAt","result","Date","toISOString","onChange","formState","prevFormState","docPreferences","body","className","disabled","method","onSuccess","versions","drafts","autosave","globalLabel","label","pluralLabel","labels","plural","undefined","useAsTitle","view","fallback","toString","data","permissions","slug","div","filter","Boolean","join","forceSidebarWrap","readOnly","LivePreviewClient","props","breakpoints","url","isPopupOpen","openPopupWindow","popupRef","eventType","collections","globals","routes","api","find","collection","global","getComponentMap","componentMap","getFieldMap","actions","actionsMap","Edit","fieldSchema","fields"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/views/LivePreview/index.tsx"],"sourcesContent":["import type { EditViewComponent, LivePreviewConfig, TypeWithID } from 'payload'\n\nimport { notFound } from 'next/navigation.js'\nimport React from 'react'\n\nimport { LivePreviewClient } from './index.client.js'\nimport './index.scss'\n\nexport const LivePreviewView: EditViewComponent = async (props) => {\n const { initPageResult } = props\n\n const {\n collectionConfig,\n docID,\n globalConfig,\n locale,\n req: {\n payload: {\n config: {\n admin: { livePreview: topLevelLivePreviewConfig },\n },\n } = {},\n } = {},\n } = initPageResult\n\n let data: TypeWithID\n\n try {\n if (collectionConfig) {\n data = await initPageResult.req.payload.findByID({\n id: docID,\n collection: collectionConfig.slug,\n depth: 0,\n draft: true,\n fallbackLocale: null,\n })\n }\n\n if (globalConfig) {\n data = await initPageResult.req.payload.findGlobal({\n slug: globalConfig.slug,\n depth: 0,\n draft: true,\n fallbackLocale: null,\n })\n }\n } catch (error) {\n notFound()\n }\n\n let livePreviewConfig: LivePreviewConfig = topLevelLivePreviewConfig\n\n if (collectionConfig) {\n livePreviewConfig = {\n ...(livePreviewConfig || {}),\n ...(collectionConfig.admin.livePreview || {}),\n }\n }\n\n if (globalConfig) {\n livePreviewConfig = {\n ...(livePreviewConfig || {}),\n ...(globalConfig.admin.livePreview || {}),\n }\n }\n\n const breakpoints: LivePreviewConfig['breakpoints'] = [\n ...(livePreviewConfig?.breakpoints || []),\n {\n name: 'responsive',\n height: '100%',\n label: 'Responsive',\n width: '100%',\n },\n ]\n\n const url =\n typeof livePreviewConfig?.url === 'function'\n ? await livePreviewConfig.url({\n collectionConfig,\n data,\n globalConfig,\n locale,\n payload: initPageResult.req.payload,\n })\n : livePreviewConfig?.url\n\n return <LivePreviewClient breakpoints={breakpoints} initialData={data} url={url} />\n}\n"],"names":["notFound","React","LivePreviewClient","LivePreviewView","props","initPageResult","collectionConfig","docID","globalConfig","locale","req","payload","config","admin","livePreview","topLevelLivePreviewConfig","data","findByID","id","collection","slug","depth","draft","fallbackLocale","findGlobal","error","livePreviewConfig","breakpoints","name","height","label","width","url","initialData"],"
|
|
1
|
+
{"version":3,"sources":["../../../src/views/LivePreview/index.tsx"],"sourcesContent":["import type { EditViewComponent, LivePreviewConfig, TypeWithID } from 'payload'\n\nimport { notFound } from 'next/navigation.js'\nimport React from 'react'\n\nimport { LivePreviewClient } from './index.client.js'\nimport './index.scss'\n\nexport const LivePreviewView: EditViewComponent = async (props) => {\n const { initPageResult } = props\n\n const {\n collectionConfig,\n docID,\n globalConfig,\n locale,\n req: {\n payload: {\n config: {\n admin: { livePreview: topLevelLivePreviewConfig },\n },\n } = {},\n } = {},\n } = initPageResult\n\n let data: Record<string, unknown> | TypeWithID\n\n try {\n if (collectionConfig) {\n data = await initPageResult.req.payload.findByID({\n id: docID,\n collection: collectionConfig.slug,\n depth: 0,\n draft: true,\n fallbackLocale: null,\n })\n }\n\n if (globalConfig) {\n data = await initPageResult.req.payload.findGlobal({\n slug: globalConfig.slug,\n depth: 0,\n draft: true,\n fallbackLocale: null,\n })\n }\n } catch (error) {\n notFound()\n }\n\n let livePreviewConfig: LivePreviewConfig = topLevelLivePreviewConfig\n\n if (collectionConfig) {\n livePreviewConfig = {\n ...(livePreviewConfig || {}),\n ...(collectionConfig.admin.livePreview || {}),\n }\n }\n\n if (globalConfig) {\n livePreviewConfig = {\n ...(livePreviewConfig || {}),\n ...(globalConfig.admin.livePreview || {}),\n }\n }\n\n const breakpoints: LivePreviewConfig['breakpoints'] = [\n ...(livePreviewConfig?.breakpoints || []),\n {\n name: 'responsive',\n height: '100%',\n label: 'Responsive',\n width: '100%',\n },\n ]\n\n const url =\n typeof livePreviewConfig?.url === 'function'\n ? await livePreviewConfig.url({\n collectionConfig,\n data,\n globalConfig,\n locale,\n payload: initPageResult.req.payload,\n })\n : livePreviewConfig?.url\n\n return <LivePreviewClient breakpoints={breakpoints} initialData={data} url={url} />\n}\n"],"names":["notFound","React","LivePreviewClient","LivePreviewView","props","initPageResult","collectionConfig","docID","globalConfig","locale","req","payload","config","admin","livePreview","topLevelLivePreviewConfig","data","findByID","id","collection","slug","depth","draft","fallbackLocale","findGlobal","error","livePreviewConfig","breakpoints","name","height","label","width","url","initialData"],"mappings":";AAEA,SAASA,QAAQ,QAAQ,qBAAoB;AAC7C,OAAOC,WAAW,QAAO;AAEzB,SAASC,iBAAiB,QAAQ,oBAAmB;AAGrD,OAAO,MAAMC,kBAAqC,OAAOC;IACvD,MAAM,EAAEC,cAAc,EAAE,GAAGD;IAE3B,MAAM,EACJE,gBAAgB,EAChBC,KAAK,EACLC,YAAY,EACZC,MAAM,EACNC,KAAK,EACHC,SAAS,EACPC,QAAQ,EACNC,OAAO,EAAEC,aAAaC,yBAAyB,EAAE,EAClD,EACF,GAAG,CAAC,CAAC,EACP,GAAG,CAAC,CAAC,EACP,GAAGV;IAEJ,IAAIW;IAEJ,IAAI;QACF,IAAIV,kBAAkB;YACpBU,OAAO,MAAMX,eAAeK,GAAG,CAACC,OAAO,CAACM,QAAQ,CAAC;gBAC/CC,IAAIX;gBACJY,YAAYb,iBAAiBc,IAAI;gBACjCC,OAAO;gBACPC,OAAO;gBACPC,gBAAgB;YAClB;QACF;QAEA,IAAIf,cAAc;YAChBQ,OAAO,MAAMX,eAAeK,GAAG,CAACC,OAAO,CAACa,UAAU,CAAC;gBACjDJ,MAAMZ,aAAaY,IAAI;gBACvBC,OAAO;gBACPC,OAAO;gBACPC,gBAAgB;YAClB;QACF;IACF,EAAE,OAAOE,OAAO;QACdzB;IACF;IAEA,IAAI0B,oBAAuCX;IAE3C,IAAIT,kBAAkB;QACpBoB,oBAAoB;YAClB,GAAIA,qBAAqB,CAAC,CAAC;YAC3B,GAAIpB,iBAAiBO,KAAK,CAACC,WAAW,IAAI,CAAC,CAAC;QAC9C;IACF;IAEA,IAAIN,cAAc;QAChBkB,oBAAoB;YAClB,GAAIA,qBAAqB,CAAC,CAAC;YAC3B,GAAIlB,aAAaK,KAAK,CAACC,WAAW,IAAI,CAAC,CAAC;QAC1C;IACF;IAEA,MAAMa,cAAgD;WAChDD,mBAAmBC,eAAe,EAAE;QACxC;YACEC,MAAM;YACNC,QAAQ;YACRC,OAAO;YACPC,OAAO;QACT;KACD;IAED,MAAMC,MACJ,OAAON,mBAAmBM,QAAQ,aAC9B,MAAMN,kBAAkBM,GAAG,CAAC;QAC1B1B;QACAU;QACAR;QACAC;QACAE,SAASN,eAAeK,GAAG,CAACC,OAAO;IACrC,KACAe,mBAAmBM;IAEzB,qBAAO,KAAC9B;QAAkByB,aAAaA;QAAaM,aAAajB;QAAMgB,KAAKA;;AAC9E,EAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/views/LivePreview/meta.ts"],"sourcesContent":["import type { Metadata } from 'next'\n\nimport type { GenerateEditViewMetadata } from '../Document/getMetaBySegment.js'\n\nimport { generateMetadata as generateDocumentMetadata } from '../Edit/meta.js'\n\nexport const generateMetadata: GenerateEditViewMetadata = async ({\n collectionConfig,\n config,\n globalConfig,\n i18n,\n isEditing,\n}): Promise<Metadata> =>\n generateDocumentMetadata({\n collectionConfig,\n config,\n globalConfig,\n i18n,\n isEditing,\n })\n"],"names":["generateMetadata","generateDocumentMetadata","collectionConfig","config","globalConfig","i18n","isEditing"],"
|
|
1
|
+
{"version":3,"sources":["../../../src/views/LivePreview/meta.ts"],"sourcesContent":["import type { Metadata } from 'next'\n\nimport type { GenerateEditViewMetadata } from '../Document/getMetaBySegment.js'\n\nimport { generateMetadata as generateDocumentMetadata } from '../Edit/meta.js'\n\nexport const generateMetadata: GenerateEditViewMetadata = async ({\n collectionConfig,\n config,\n globalConfig,\n i18n,\n isEditing,\n}): Promise<Metadata> =>\n generateDocumentMetadata({\n collectionConfig,\n config,\n globalConfig,\n i18n,\n isEditing,\n })\n"],"names":["generateMetadata","generateDocumentMetadata","collectionConfig","config","globalConfig","i18n","isEditing"],"mappings":"AAIA,SAASA,oBAAoBC,wBAAwB,QAAQ,kBAAiB;AAE9E,OAAO,MAAMD,mBAA6C,OAAO,EAC/DE,gBAAgB,EAChBC,MAAM,EACNC,YAAY,EACZC,IAAI,EACJC,SAAS,EACV,GACCL,yBAAyB;QACvBC;QACAC;QACAC;QACAC;QACAC;IACF,GAAE"}
|
|
@@ -9,7 +9,7 @@ export interface PopupMessage {
|
|
|
9
9
|
}
|
|
10
10
|
export declare const usePopupWindow: (props: {
|
|
11
11
|
eventType?: string;
|
|
12
|
-
onMessage?: (searchParams: PopupMessage[
|
|
12
|
+
onMessage?: (searchParams: PopupMessage["searchParams"]) => Promise<void>;
|
|
13
13
|
url: string;
|
|
14
14
|
}) => {
|
|
15
15
|
isPopupOpen: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePopupWindow.d.ts","sourceRoot":"","sources":["../../../src/views/LivePreview/usePopupWindow.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,YAAY;IAC3B,YAAY,EAAE;QACZ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;QACjC,IAAI,EAAE,MAAM,CAAA;QACZ,eAAe,EAAE,MAAM,CAAA;QACvB,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;IACD,IAAI,EAAE,MAAM,CAAA;CACb;AAED,eAAO,MAAM,cAAc,UAAW;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,SAAS,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,cAAc,CAAC,KAAK,
|
|
1
|
+
{"version":3,"file":"usePopupWindow.d.ts","sourceRoot":"","sources":["../../../src/views/LivePreview/usePopupWindow.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,YAAY;IAC3B,YAAY,EAAE;QACZ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;QACjC,IAAI,EAAE,MAAM,CAAA;QACZ,eAAe,EAAE,MAAM,CAAA;QACvB,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;IACD,IAAI,EAAE,MAAM,CAAA;CACb;AAED,eAAO,MAAM,cAAc,UAAW;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,SAAS,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,cAAc,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACzE,GAAG,EAAE,MAAM,CAAA;CACZ,KAAG;IACF,WAAW,EAAE,OAAO,CAAA;IACpB,eAAe,EAAE,MAAM,IAAI,CAAA;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAA;CAiHjD,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/views/LivePreview/usePopupWindow.ts"],"sourcesContent":["'use client'\nimport { useConfig } from '@payloadcms/ui'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\nexport interface PopupMessage {\n searchParams: {\n [key: string]: string | undefined\n code: string\n installation_id: string\n state: string\n }\n type: string\n}\n\nexport const usePopupWindow = (props: {\n eventType?: string\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onMessage?: (searchParams: PopupMessage['searchParams']) => Promise<void>\n url: string\n}): {\n isPopupOpen: boolean\n openPopupWindow: () => void\n popupRef?: React.MutableRefObject<Window | null>\n} => {\n const { eventType, onMessage, url } = props\n const isReceivingMessage = useRef(false)\n const [isOpen, setIsOpen] = useState(false)\n const { serverURL } = useConfig()\n const popupRef = useRef<Window | null>(null)\n\n // Optionally broadcast messages back out to the parent component\n useEffect(() => {\n const receiveMessage = async (event: MessageEvent): Promise<void> => {\n if (\n event.origin !== window.location.origin ||\n event.origin !== url ||\n event.origin !== serverURL\n ) {\n // console.warn(`Message received by ${event.origin}; IGNORED.`) // eslint-disable-line no-console\n return\n }\n\n if (\n typeof onMessage === 'function' &&\n event.data?.type === eventType &&\n !isReceivingMessage.current\n ) {\n isReceivingMessage.current = true\n await onMessage(event.data?.searchParams)\n isReceivingMessage.current = false\n }\n }\n\n if (isOpen && popupRef.current) {\n window.addEventListener('message', receiveMessage, false)\n }\n\n return () => {\n window.removeEventListener('message', receiveMessage)\n }\n }, [onMessage, eventType, url, serverURL, isOpen])\n\n // Customize the size, position, and style of the popup window\n const openPopupWindow = useCallback(\n (e?: MouseEvent) => {\n if (e) {\n e.preventDefault()\n }\n\n const features = {\n height: 700,\n left: 'auto',\n menubar: 'no',\n popup: 'yes',\n toolbar: 'no',\n top: 'auto',\n width: 800,\n }\n\n const popupOptions = Object.entries(features)\n .reduce((str, [key, value]) => {\n let strCopy = str\n if (value === 'auto') {\n if (key === 'top') {\n const v = Math.round(window.innerHeight / 2 - features.height / 2)\n strCopy += `top=${v},`\n } else if (key === 'left') {\n const v = Math.round(window.innerWidth / 2 - features.width / 2)\n strCopy += `left=${v},`\n }\n return strCopy\n }\n\n strCopy += `${key}=${value},`\n return strCopy\n }, '')\n .slice(0, -1) // remove last ',' (comma)\n\n const newWindow = window.open(url, '_blank', popupOptions)\n\n popupRef.current = newWindow\n\n setIsOpen(true)\n },\n [url],\n )\n\n // this is the most stable and widely supported way to check if a popup window is no longer open\n // we poll its ref every x ms and use the popup window's `closed` property\n useEffect(() => {\n let timer: NodeJS.Timeout\n\n if (isOpen) {\n timer = setInterval(function () {\n if (popupRef.current.closed) {\n clearInterval(timer)\n setIsOpen(false)\n }\n }, 1000)\n } else {\n clearInterval(timer)\n }\n\n return () => {\n if (timer) {\n clearInterval(timer)\n }\n }\n }, [isOpen, popupRef])\n\n return {\n isPopupOpen: isOpen,\n openPopupWindow,\n popupRef,\n }\n}\n"],"names":["useConfig","useCallback","useEffect","useRef","useState","usePopupWindow","props","eventType","onMessage","url","isReceivingMessage","isOpen","setIsOpen","serverURL","popupRef","receiveMessage","event","origin","window","location","data","type","current","searchParams","addEventListener","removeEventListener","openPopupWindow","e","preventDefault","features","height","left","menubar","popup","toolbar","top","width","popupOptions","Object","entries","reduce","str","key","value","strCopy","v","Math","round","innerHeight","innerWidth","slice","newWindow","open","timer","setInterval","closed","clearInterval","isPopupOpen"],"
|
|
1
|
+
{"version":3,"sources":["../../../src/views/LivePreview/usePopupWindow.ts"],"sourcesContent":["'use client'\nimport { useConfig } from '@payloadcms/ui'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\nexport interface PopupMessage {\n searchParams: {\n [key: string]: string | undefined\n code: string\n installation_id: string\n state: string\n }\n type: string\n}\n\nexport const usePopupWindow = (props: {\n eventType?: string\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onMessage?: (searchParams: PopupMessage['searchParams']) => Promise<void>\n url: string\n}): {\n isPopupOpen: boolean\n openPopupWindow: () => void\n popupRef?: React.MutableRefObject<Window | null>\n} => {\n const { eventType, onMessage, url } = props\n const isReceivingMessage = useRef(false)\n const [isOpen, setIsOpen] = useState(false)\n const { serverURL } = useConfig()\n const popupRef = useRef<Window | null>(null)\n\n // Optionally broadcast messages back out to the parent component\n useEffect(() => {\n const receiveMessage = async (event: MessageEvent): Promise<void> => {\n if (\n event.origin !== window.location.origin ||\n event.origin !== url ||\n event.origin !== serverURL\n ) {\n // console.warn(`Message received by ${event.origin}; IGNORED.`) // eslint-disable-line no-console\n return\n }\n\n if (\n typeof onMessage === 'function' &&\n event.data?.type === eventType &&\n !isReceivingMessage.current\n ) {\n isReceivingMessage.current = true\n await onMessage(event.data?.searchParams)\n isReceivingMessage.current = false\n }\n }\n\n if (isOpen && popupRef.current) {\n window.addEventListener('message', receiveMessage, false)\n }\n\n return () => {\n window.removeEventListener('message', receiveMessage)\n }\n }, [onMessage, eventType, url, serverURL, isOpen])\n\n // Customize the size, position, and style of the popup window\n const openPopupWindow = useCallback(\n (e?: MouseEvent) => {\n if (e) {\n e.preventDefault()\n }\n\n const features = {\n height: 700,\n left: 'auto',\n menubar: 'no',\n popup: 'yes',\n toolbar: 'no',\n top: 'auto',\n width: 800,\n }\n\n const popupOptions = Object.entries(features)\n .reduce((str, [key, value]) => {\n let strCopy = str\n if (value === 'auto') {\n if (key === 'top') {\n const v = Math.round(window.innerHeight / 2 - features.height / 2)\n strCopy += `top=${v},`\n } else if (key === 'left') {\n const v = Math.round(window.innerWidth / 2 - features.width / 2)\n strCopy += `left=${v},`\n }\n return strCopy\n }\n\n strCopy += `${key}=${value},`\n return strCopy\n }, '')\n .slice(0, -1) // remove last ',' (comma)\n\n const newWindow = window.open(url, '_blank', popupOptions)\n\n popupRef.current = newWindow\n\n setIsOpen(true)\n },\n [url],\n )\n\n // this is the most stable and widely supported way to check if a popup window is no longer open\n // we poll its ref every x ms and use the popup window's `closed` property\n useEffect(() => {\n let timer: NodeJS.Timeout\n\n if (isOpen) {\n timer = setInterval(function () {\n if (popupRef.current.closed) {\n clearInterval(timer)\n setIsOpen(false)\n }\n }, 1000)\n } else {\n clearInterval(timer)\n }\n\n return () => {\n if (timer) {\n clearInterval(timer)\n }\n }\n }, [isOpen, popupRef])\n\n return {\n isPopupOpen: isOpen,\n openPopupWindow,\n popupRef,\n }\n}\n"],"names":["useConfig","useCallback","useEffect","useRef","useState","usePopupWindow","props","eventType","onMessage","url","isReceivingMessage","isOpen","setIsOpen","serverURL","popupRef","receiveMessage","event","origin","window","location","data","type","current","searchParams","addEventListener","removeEventListener","openPopupWindow","e","preventDefault","features","height","left","menubar","popup","toolbar","top","width","popupOptions","Object","entries","reduce","str","key","value","strCopy","v","Math","round","innerHeight","innerWidth","slice","newWindow","open","timer","setInterval","closed","clearInterval","isPopupOpen"],"mappings":"AAAA;AACA,SAASA,SAAS,QAAQ,iBAAgB;AAC1C,SAASC,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAYhE,OAAO,MAAMC,iBAAiB,CAACC;IAU7B,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAEC,GAAG,EAAE,GAAGH;IACtC,MAAMI,qBAAqBP,OAAO;IAClC,MAAM,CAACQ,QAAQC,UAAU,GAAGR,SAAS;IACrC,MAAM,EAAES,SAAS,EAAE,GAAGb;IACtB,MAAMc,WAAWX,OAAsB;IAEvC,iEAAiE;IACjED,UAAU;QACR,MAAMa,iBAAiB,OAAOC;YAC5B,IACEA,MAAMC,MAAM,KAAKC,OAAOC,QAAQ,CAACF,MAAM,IACvCD,MAAMC,MAAM,KAAKR,OACjBO,MAAMC,MAAM,KAAKJ,WACjB;gBACA,kGAAkG;gBAClG;YACF;YAEA,IACE,OAAOL,cAAc,cACrBQ,MAAMI,IAAI,EAAEC,SAASd,aACrB,CAACG,mBAAmBY,OAAO,EAC3B;gBACAZ,mBAAmBY,OAAO,GAAG;gBAC7B,MAAMd,UAAUQ,MAAMI,IAAI,EAAEG;gBAC5Bb,mBAAmBY,OAAO,GAAG;YAC/B;QACF;QAEA,IAAIX,UAAUG,SAASQ,OAAO,EAAE;YAC9BJ,OAAOM,gBAAgB,CAAC,WAAWT,gBAAgB;QACrD;QAEA,OAAO;YACLG,OAAOO,mBAAmB,CAAC,WAAWV;QACxC;IACF,GAAG;QAACP;QAAWD;QAAWE;QAAKI;QAAWF;KAAO;IAEjD,8DAA8D;IAC9D,MAAMe,kBAAkBzB,YACtB,CAAC0B;QACC,IAAIA,GAAG;YACLA,EAAEC,cAAc;QAClB;QAEA,MAAMC,WAAW;YACfC,QAAQ;YACRC,MAAM;YACNC,SAAS;YACTC,OAAO;YACPC,SAAS;YACTC,KAAK;YACLC,OAAO;QACT;QAEA,MAAMC,eAAeC,OAAOC,OAAO,CAACV,UACjCW,MAAM,CAAC,CAACC,KAAK,CAACC,KAAKC,MAAM;YACxB,IAAIC,UAAUH;YACd,IAAIE,UAAU,QAAQ;gBACpB,IAAID,QAAQ,OAAO;oBACjB,MAAMG,IAAIC,KAAKC,KAAK,CAAC7B,OAAO8B,WAAW,GAAG,IAAInB,SAASC,MAAM,GAAG;oBAChEc,WAAW,CAAC,IAAI,EAAEC,EAAE,CAAC,CAAC;gBACxB,OAAO,IAAIH,QAAQ,QAAQ;oBACzB,MAAMG,IAAIC,KAAKC,KAAK,CAAC7B,OAAO+B,UAAU,GAAG,IAAIpB,SAASO,KAAK,GAAG;oBAC9DQ,WAAW,CAAC,KAAK,EAAEC,EAAE,CAAC,CAAC;gBACzB;gBACA,OAAOD;YACT;YAEAA,WAAW,CAAC,EAAEF,IAAI,CAAC,EAAEC,MAAM,CAAC,CAAC;YAC7B,OAAOC;QACT,GAAG,IACFM,KAAK,CAAC,GAAG,CAAC,GAAG,0BAA0B;;QAE1C,MAAMC,YAAYjC,OAAOkC,IAAI,CAAC3C,KAAK,UAAU4B;QAE7CvB,SAASQ,OAAO,GAAG6B;QAEnBvC,UAAU;IACZ,GACA;QAACH;KAAI;IAGP,gGAAgG;IAChG,0EAA0E;IAC1EP,UAAU;QACR,IAAImD;QAEJ,IAAI1C,QAAQ;YACV0C,QAAQC,YAAY;gBAClB,IAAIxC,SAASQ,OAAO,CAACiC,MAAM,EAAE;oBAC3BC,cAAcH;oBACdzC,UAAU;gBACZ;YACF,GAAG;QACL,OAAO;YACL4C,cAAcH;QAChB;QAEA,OAAO;YACL,IAAIA,OAAO;gBACTG,cAAcH;YAChB;QACF;IACF,GAAG;QAAC1C;QAAQG;KAAS;IAErB,OAAO;QACL2C,aAAa9C;QACbe;QACAZ;IACF;AACF,EAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/views/Login/LoginForm/index.tsx"],"sourcesContent":["'use client'\n\nimport LinkImport from 'next/link.js'\nimport React from 'react'\n\nconst baseClass = 'login__form'\nconst Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default\n\nimport type { FormState, PayloadRequestWithData } from 'payload'\n\nimport {\n EmailField,\n Form,\n FormSubmit,\n PasswordField,\n useConfig,\n useTranslation,\n} from '@payloadcms/ui'\nimport { email, password } from 'payload/shared'\n\nimport './index.scss'\n\nexport const LoginForm: React.FC<{\n searchParams: { [key: string]: string | string[] | undefined }\n}> = ({ searchParams }) => {\n const config = useConfig()\n\n const {\n admin: {\n autoLogin,\n routes: { forgot: forgotRoute },\n user: userSlug,\n },\n routes: { admin, api },\n } = config\n\n const { t } = useTranslation()\n\n const prefillForm = autoLogin && autoLogin.prefillOnly\n\n const initialState: FormState = {\n email: {\n initialValue: prefillForm ? autoLogin.email : undefined,\n valid: true,\n value: prefillForm ? autoLogin.email : undefined,\n },\n password: {\n initialValue: prefillForm ? autoLogin.password : undefined,\n valid: true,\n value: prefillForm ? autoLogin.password : undefined,\n },\n }\n\n return (\n <Form\n action={`${api}/${userSlug}/login`}\n className={baseClass}\n disableSuccessStatus\n initialState={initialState}\n method=\"POST\"\n redirect={typeof searchParams?.redirect === 'string' ? searchParams.redirect : admin}\n waitForAutocomplete\n >\n <div className={`${baseClass}__inputWrap`}>\n <EmailField\n autoComplete=\"email\"\n label={t('general:email')}\n name=\"email\"\n required\n validate={(value) =>\n email(value, {\n name: 'email',\n type: 'email',\n data: {},\n preferences: { fields: {} },\n req: { t } as PayloadRequestWithData,\n required: true,\n siblingData: {},\n })\n }\n />\n <PasswordField\n autoComplete=\"off\"\n label={t('general:password')}\n name=\"password\"\n required\n validate={(value) =>\n password(value, {\n name: 'password',\n type: 'text',\n data: {},\n preferences: { fields: {} },\n req: {\n payload: {\n config,\n },\n t,\n } as PayloadRequestWithData,\n required: true,\n siblingData: {},\n })\n }\n />\n </div>\n <Link href={`${admin}${forgotRoute}`}>{t('authentication:forgotPasswordQuestion')}</Link>\n <FormSubmit>{t('authentication:login')}</FormSubmit>\n </Form>\n )\n}\n"],"names":["LinkImport","React","baseClass","Link","default","EmailField","Form","FormSubmit","PasswordField","useConfig","useTranslation","email","password","LoginForm","searchParams","config","admin","autoLogin","routes","forgot","forgotRoute","user","userSlug","api","t","prefillForm","prefillOnly","initialState","initialValue","undefined","valid","value","action","className","disableSuccessStatus","method","redirect","waitForAutocomplete","div","autoComplete","label","name","required","validate","type","data","preferences","fields","req","siblingData","payload","href"],"
|
|
1
|
+
{"version":3,"sources":["../../../../src/views/Login/LoginForm/index.tsx"],"sourcesContent":["'use client'\n\nimport LinkImport from 'next/link.js'\nimport React from 'react'\n\nconst baseClass = 'login__form'\nconst Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default\n\nimport type { FormState, PayloadRequestWithData } from 'payload'\n\nimport {\n EmailField,\n Form,\n FormSubmit,\n PasswordField,\n useConfig,\n useTranslation,\n} from '@payloadcms/ui'\nimport { email, password } from 'payload/shared'\n\nimport './index.scss'\n\nexport const LoginForm: React.FC<{\n searchParams: { [key: string]: string | string[] | undefined }\n}> = ({ searchParams }) => {\n const config = useConfig()\n\n const {\n admin: {\n autoLogin,\n routes: { forgot: forgotRoute },\n user: userSlug,\n },\n routes: { admin, api },\n } = config\n\n const { t } = useTranslation()\n\n const prefillForm = autoLogin && autoLogin.prefillOnly\n\n const initialState: FormState = {\n email: {\n initialValue: prefillForm ? autoLogin.email : undefined,\n valid: true,\n value: prefillForm ? autoLogin.email : undefined,\n },\n password: {\n initialValue: prefillForm ? autoLogin.password : undefined,\n valid: true,\n value: prefillForm ? autoLogin.password : undefined,\n },\n }\n\n return (\n <Form\n action={`${api}/${userSlug}/login`}\n className={baseClass}\n disableSuccessStatus\n initialState={initialState}\n method=\"POST\"\n redirect={typeof searchParams?.redirect === 'string' ? searchParams.redirect : admin}\n waitForAutocomplete\n >\n <div className={`${baseClass}__inputWrap`}>\n <EmailField\n autoComplete=\"email\"\n label={t('general:email')}\n name=\"email\"\n required\n validate={(value) =>\n email(value, {\n name: 'email',\n type: 'email',\n data: {},\n preferences: { fields: {} },\n req: { t } as PayloadRequestWithData,\n required: true,\n siblingData: {},\n })\n }\n />\n <PasswordField\n autoComplete=\"off\"\n label={t('general:password')}\n name=\"password\"\n required\n validate={(value) =>\n password(value, {\n name: 'password',\n type: 'text',\n data: {},\n preferences: { fields: {} },\n req: {\n payload: {\n config,\n },\n t,\n } as PayloadRequestWithData,\n required: true,\n siblingData: {},\n })\n }\n />\n </div>\n <Link href={`${admin}${forgotRoute}`}>{t('authentication:forgotPasswordQuestion')}</Link>\n <FormSubmit>{t('authentication:login')}</FormSubmit>\n </Form>\n )\n}\n"],"names":["LinkImport","React","baseClass","Link","default","EmailField","Form","FormSubmit","PasswordField","useConfig","useTranslation","email","password","LoginForm","searchParams","config","admin","autoLogin","routes","forgot","forgotRoute","user","userSlug","api","t","prefillForm","prefillOnly","initialState","initialValue","undefined","valid","value","action","className","disableSuccessStatus","method","redirect","waitForAutocomplete","div","autoComplete","label","name","required","validate","type","data","preferences","fields","req","siblingData","payload","href"],"mappings":"AAAA;;AAEA,OAAOA,gBAAgB,eAAc;AACrC,OAAOC,WAAW,QAAO;AAEzB,MAAMC,YAAY;AAClB,MAAMC,OAAQH,WAAWI,OAAO,IAAIJ;AAIpC,SACEK,UAAU,EACVC,IAAI,EACJC,UAAU,EACVC,aAAa,EACbC,SAAS,EACTC,cAAc,QACT,iBAAgB;AACvB,SAASC,KAAK,EAAEC,QAAQ,QAAQ,iBAAgB;AAIhD,OAAO,MAAMC,YAER,CAAC,EAAEC,YAAY,EAAE;IACpB,MAAMC,SAASN;IAEf,MAAM,EACJO,OAAO,EACLC,SAAS,EACTC,QAAQ,EAAEC,QAAQC,WAAW,EAAE,EAC/BC,MAAMC,QAAQ,EACf,EACDJ,QAAQ,EAAEF,KAAK,EAAEO,GAAG,EAAE,EACvB,GAAGR;IAEJ,MAAM,EAAES,CAAC,EAAE,GAAGd;IAEd,MAAMe,cAAcR,aAAaA,UAAUS,WAAW;IAEtD,MAAMC,eAA0B;QAC9BhB,OAAO;YACLiB,cAAcH,cAAcR,UAAUN,KAAK,GAAGkB;YAC9CC,OAAO;YACPC,OAAON,cAAcR,UAAUN,KAAK,GAAGkB;QACzC;QACAjB,UAAU;YACRgB,cAAcH,cAAcR,UAAUL,QAAQ,GAAGiB;YACjDC,OAAO;YACPC,OAAON,cAAcR,UAAUL,QAAQ,GAAGiB;QAC5C;IACF;IAEA,qBACE,MAACvB;QACC0B,QAAQ,CAAC,EAAET,IAAI,CAAC,EAAED,SAAS,MAAM,CAAC;QAClCW,WAAW/B;QACXgC,oBAAoB;QACpBP,cAAcA;QACdQ,QAAO;QACPC,UAAU,OAAOtB,cAAcsB,aAAa,WAAWtB,aAAasB,QAAQ,GAAGpB;QAC/EqB,mBAAmB;;0BAEnB,MAACC;gBAAIL,WAAW,CAAC,EAAE/B,UAAU,WAAW,CAAC;;kCACvC,KAACG;wBACCkC,cAAa;wBACbC,OAAOhB,EAAE;wBACTiB,MAAK;wBACLC,QAAQ;wBACRC,UAAU,CAACZ,QACTpB,MAAMoB,OAAO;gCACXU,MAAM;gCACNG,MAAM;gCACNC,MAAM,CAAC;gCACPC,aAAa;oCAAEC,QAAQ,CAAC;gCAAE;gCAC1BC,KAAK;oCAAExB;gCAAE;gCACTkB,UAAU;gCACVO,aAAa,CAAC;4BAChB;;kCAGJ,KAACzC;wBACC+B,cAAa;wBACbC,OAAOhB,EAAE;wBACTiB,MAAK;wBACLC,QAAQ;wBACRC,UAAU,CAACZ,QACTnB,SAASmB,OAAO;gCACdU,MAAM;gCACNG,MAAM;gCACNC,MAAM,CAAC;gCACPC,aAAa;oCAAEC,QAAQ,CAAC;gCAAE;gCAC1BC,KAAK;oCACHE,SAAS;wCACPnC;oCACF;oCACAS;gCACF;gCACAkB,UAAU;gCACVO,aAAa,CAAC;4BAChB;;;;0BAIN,KAAC9C;gBAAKgD,MAAM,CAAC,EAAEnC,MAAM,EAAEI,YAAY,CAAC;0BAAGI,EAAE;;0BACzC,KAACjB;0BAAYiB,EAAE;;;;AAGrB,EAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/views/Login/index.tsx"],"sourcesContent":["import type { AdminViewProps } from 'payload'\n\nimport { WithServerSideProps } from '@payloadcms/ui/shared'\nimport { redirect } from 'next/navigation.js'\nimport React, { Fragment } from 'react'\n\nimport { Logo } from '../../elements/Logo/index.js'\nimport { LoginForm } from './LoginForm/index.js'\nimport './index.scss'\n\nexport { generateLoginMetadata } from './meta.js'\n\nexport const loginBaseClass = 'login'\n\nexport const LoginView: React.FC<AdminViewProps> = ({ initPageResult, params, searchParams }) => {\n const { locale, permissions, req } = initPageResult\n\n const {\n i18n,\n payload: { config },\n payload,\n user,\n } = req\n\n const {\n admin: { components: { afterLogin, beforeLogin } = {}, user: userSlug },\n collections,\n routes: { admin },\n } = config\n\n const BeforeLogins = Array.isArray(beforeLogin)\n ? beforeLogin.map((Component, i) => (\n <WithServerSideProps\n Component={Component}\n key={i}\n serverOnlyProps={{\n i18n,\n locale,\n params,\n payload,\n permissions,\n searchParams,\n user,\n }}\n />\n ))\n : null\n\n const AfterLogins = Array.isArray(afterLogin)\n ? afterLogin.map((Component, i) => (\n <WithServerSideProps\n Component={Component}\n key={i}\n serverOnlyProps={{\n i18n,\n locale,\n params,\n payload,\n permissions,\n searchParams,\n user,\n }}\n />\n ))\n : null\n\n if (user) {\n redirect(admin)\n }\n\n const collectionConfig = collections.find(({ slug }) => slug === userSlug)\n\n return (\n <Fragment>\n <div className={`${loginBaseClass}__brand`}>\n <Logo\n i18n={i18n}\n locale={locale}\n params={params}\n payload={payload}\n permissions={permissions}\n searchParams={searchParams}\n user={user}\n />\n </div>\n {Array.isArray(BeforeLogins) && BeforeLogins.map((Component) => Component)}\n {!collectionConfig?.auth?.disableLocalStrategy && <LoginForm searchParams={searchParams} />}\n {Array.isArray(AfterLogins) && AfterLogins.map((Component) => Component)}\n </Fragment>\n )\n}\n"],"names":["WithServerSideProps","redirect","React","Fragment","Logo","LoginForm","generateLoginMetadata","loginBaseClass","LoginView","initPageResult","params","searchParams","locale","permissions","req","i18n","payload","config","user","admin","components","afterLogin","beforeLogin","userSlug","collections","routes","BeforeLogins","Array","isArray","map","Component","i","serverOnlyProps","AfterLogins","collectionConfig","find","slug","div","className","auth","disableLocalStrategy"],"
|
|
1
|
+
{"version":3,"sources":["../../../src/views/Login/index.tsx"],"sourcesContent":["import type { AdminViewProps } from 'payload'\n\nimport { WithServerSideProps } from '@payloadcms/ui/shared'\nimport { redirect } from 'next/navigation.js'\nimport React, { Fragment } from 'react'\n\nimport { Logo } from '../../elements/Logo/index.js'\nimport { LoginForm } from './LoginForm/index.js'\nimport './index.scss'\n\nexport { generateLoginMetadata } from './meta.js'\n\nexport const loginBaseClass = 'login'\n\nexport const LoginView: React.FC<AdminViewProps> = ({ initPageResult, params, searchParams }) => {\n const { locale, permissions, req } = initPageResult\n\n const {\n i18n,\n payload: { config },\n payload,\n user,\n } = req\n\n const {\n admin: { components: { afterLogin, beforeLogin } = {}, user: userSlug },\n collections,\n routes: { admin },\n } = config\n\n const BeforeLogins = Array.isArray(beforeLogin)\n ? beforeLogin.map((Component, i) => (\n <WithServerSideProps\n Component={Component}\n key={i}\n serverOnlyProps={{\n i18n,\n locale,\n params,\n payload,\n permissions,\n searchParams,\n user,\n }}\n />\n ))\n : null\n\n const AfterLogins = Array.isArray(afterLogin)\n ? afterLogin.map((Component, i) => (\n <WithServerSideProps\n Component={Component}\n key={i}\n serverOnlyProps={{\n i18n,\n locale,\n params,\n payload,\n permissions,\n searchParams,\n user,\n }}\n />\n ))\n : null\n\n if (user) {\n redirect(admin)\n }\n\n const collectionConfig = collections.find(({ slug }) => slug === userSlug)\n\n return (\n <Fragment>\n <div className={`${loginBaseClass}__brand`}>\n <Logo\n i18n={i18n}\n locale={locale}\n params={params}\n payload={payload}\n permissions={permissions}\n searchParams={searchParams}\n user={user}\n />\n </div>\n {Array.isArray(BeforeLogins) && BeforeLogins.map((Component) => Component)}\n {!collectionConfig?.auth?.disableLocalStrategy && <LoginForm searchParams={searchParams} />}\n {Array.isArray(AfterLogins) && AfterLogins.map((Component) => Component)}\n </Fragment>\n )\n}\n"],"names":["WithServerSideProps","redirect","React","Fragment","Logo","LoginForm","generateLoginMetadata","loginBaseClass","LoginView","initPageResult","params","searchParams","locale","permissions","req","i18n","payload","config","user","admin","components","afterLogin","beforeLogin","userSlug","collections","routes","BeforeLogins","Array","isArray","map","Component","i","serverOnlyProps","AfterLogins","collectionConfig","find","slug","div","className","auth","disableLocalStrategy"],"mappings":";AAEA,SAASA,mBAAmB,QAAQ,wBAAuB;AAC3D,SAASC,QAAQ,QAAQ,qBAAoB;AAC7C,OAAOC,SAASC,QAAQ,QAAQ,QAAO;AAEvC,SAASC,IAAI,QAAQ,+BAA8B;AACnD,SAASC,SAAS,QAAQ,uBAAsB;AAGhD,SAASC,qBAAqB,QAAQ,YAAW;AAEjD,OAAO,MAAMC,iBAAiB,QAAO;AAErC,OAAO,MAAMC,YAAsC,CAAC,EAAEC,cAAc,EAAEC,MAAM,EAAEC,YAAY,EAAE;IAC1F,MAAM,EAAEC,MAAM,EAAEC,WAAW,EAAEC,GAAG,EAAE,GAAGL;IAErC,MAAM,EACJM,IAAI,EACJC,SAAS,EAAEC,MAAM,EAAE,EACnBD,OAAO,EACPE,IAAI,EACL,GAAGJ;IAEJ,MAAM,EACJK,OAAO,EAAEC,YAAY,EAAEC,UAAU,EAAEC,WAAW,EAAE,GAAG,CAAC,CAAC,EAAEJ,MAAMK,QAAQ,EAAE,EACvEC,WAAW,EACXC,QAAQ,EAAEN,KAAK,EAAE,EAClB,GAAGF;IAEJ,MAAMS,eAAeC,MAAMC,OAAO,CAACN,eAC/BA,YAAYO,GAAG,CAAC,CAACC,WAAWC,kBAC1B,KAAC/B;YACC8B,WAAWA;YAEXE,iBAAiB;gBACfjB;gBACAH;gBACAF;gBACAM;gBACAH;gBACAF;gBACAO;YACF;WATKa,MAYT;IAEJ,MAAME,cAAcN,MAAMC,OAAO,CAACP,cAC9BA,WAAWQ,GAAG,CAAC,CAACC,WAAWC,kBACzB,KAAC/B;YACC8B,WAAWA;YAEXE,iBAAiB;gBACfjB;gBACAH;gBACAF;gBACAM;gBACAH;gBACAF;gBACAO;YACF;WATKa,MAYT;IAEJ,IAAIb,MAAM;QACRjB,SAASkB;IACX;IAEA,MAAMe,mBAAmBV,YAAYW,IAAI,CAAC,CAAC,EAAEC,IAAI,EAAE,GAAKA,SAASb;IAEjE,qBACE,MAACpB;;0BACC,KAACkC;gBAAIC,WAAW,CAAC,EAAE/B,eAAe,OAAO,CAAC;0BACxC,cAAA,KAACH;oBACCW,MAAMA;oBACNH,QAAQA;oBACRF,QAAQA;oBACRM,SAASA;oBACTH,aAAaA;oBACbF,cAAcA;oBACdO,MAAMA;;;YAGTS,MAAMC,OAAO,CAACF,iBAAiBA,aAAaG,GAAG,CAAC,CAACC,YAAcA;YAC/D,CAACI,kBAAkBK,MAAMC,sCAAwB,KAACnC;gBAAUM,cAAcA;;YAC1EgB,MAAMC,OAAO,CAACK,gBAAgBA,YAAYJ,GAAG,CAAC,CAACC,YAAcA;;;AAGpE,EAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/views/Login/meta.ts"],"sourcesContent":["import type { GenerateViewMetadata } from '../Root/index.js'\n\nimport { meta } from '../../utilities/meta.js'\n\nexport const generateLoginMetadata: GenerateViewMetadata = async ({ config, i18n: { t } }) =>\n meta({\n description: `${t('authentication:login')}`,\n keywords: `${t('authentication:login')}`,\n serverURL: config.serverURL,\n title: t('authentication:login'),\n ...(config.admin.meta || {}),\n })\n"],"names":["meta","generateLoginMetadata","config","i18n","t","description","keywords","serverURL","title","admin"],"
|
|
1
|
+
{"version":3,"sources":["../../../src/views/Login/meta.ts"],"sourcesContent":["import type { GenerateViewMetadata } from '../Root/index.js'\n\nimport { meta } from '../../utilities/meta.js'\n\nexport const generateLoginMetadata: GenerateViewMetadata = async ({ config, i18n: { t } }) =>\n meta({\n description: `${t('authentication:login')}`,\n keywords: `${t('authentication:login')}`,\n serverURL: config.serverURL,\n title: t('authentication:login'),\n ...(config.admin.meta || {}),\n })\n"],"names":["meta","generateLoginMetadata","config","i18n","t","description","keywords","serverURL","title","admin"],"mappings":"AAEA,SAASA,IAAI,QAAQ,0BAAyB;AAE9C,OAAO,MAAMC,wBAA8C,OAAO,EAAEC,MAAM,EAAEC,MAAM,EAAEC,CAAC,EAAE,EAAE,GACvFJ,KAAK;QACHK,aAAa,CAAC,EAAED,EAAE,wBAAwB,CAAC;QAC3CE,UAAU,CAAC,EAAEF,EAAE,wBAAwB,CAAC;QACxCG,WAAWL,OAAOK,SAAS;QAC3BC,OAAOJ,EAAE;QACT,GAAIF,OAAOO,KAAK,CAACT,IAAI,IAAI,CAAC,CAAC;IAC7B,GAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/views/Logout/LogoutClient.tsx"],"sourcesContent":["'use client'\nimport { Button, useAuth, useTranslation } from '@payloadcms/ui'\nimport LinkImport from 'next/link.js'\nimport React, { Fragment, useEffect } from 'react'\n\nconst Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default\n\nexport const LogoutClient: React.FC<{\n adminRoute: string\n inactivity?: boolean\n redirect: string\n}> = (props) => {\n const { adminRoute, inactivity, redirect } = props\n\n const [isLoggingOut, setIsLoggingOut] = React.useState<boolean | undefined>(undefined)\n const { logOut } = useAuth()\n const { t } = useTranslation()\n\n useEffect(() => {\n if (!isLoggingOut) {\n setIsLoggingOut(true)\n logOut()\n }\n }, [isLoggingOut, logOut])\n\n if (isLoggingOut) {\n return (\n <Fragment>\n {inactivity && <h2>{t('authentication:loggedOutInactivity')}</h2>}\n {!inactivity && <h2>{t('authentication:loggedOutSuccessfully')}</h2>}\n <Button\n Link={Link}\n buttonStyle=\"secondary\"\n el=\"link\"\n url={`${adminRoute}/login${\n redirect && redirect.length > 0 ? `?redirect=${encodeURIComponent(redirect)}` : ''\n }`}\n >\n {t('authentication:logBackIn')}\n </Button>\n </Fragment>\n )\n }\n\n return <Fragment>{t('authentication:loggingOut')}</Fragment>\n}\n"],"names":["Button","useAuth","useTranslation","LinkImport","React","Fragment","useEffect","Link","default","LogoutClient","props","adminRoute","inactivity","redirect","isLoggingOut","setIsLoggingOut","useState","undefined","logOut","t","h2","buttonStyle","el","url","length","encodeURIComponent"],"
|
|
1
|
+
{"version":3,"sources":["../../../src/views/Logout/LogoutClient.tsx"],"sourcesContent":["'use client'\nimport { Button, useAuth, useTranslation } from '@payloadcms/ui'\nimport LinkImport from 'next/link.js'\nimport React, { Fragment, useEffect } from 'react'\n\nconst Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default\n\nexport const LogoutClient: React.FC<{\n adminRoute: string\n inactivity?: boolean\n redirect: string\n}> = (props) => {\n const { adminRoute, inactivity, redirect } = props\n\n const [isLoggingOut, setIsLoggingOut] = React.useState<boolean | undefined>(undefined)\n const { logOut } = useAuth()\n const { t } = useTranslation()\n\n useEffect(() => {\n if (!isLoggingOut) {\n setIsLoggingOut(true)\n logOut()\n }\n }, [isLoggingOut, logOut])\n\n if (isLoggingOut) {\n return (\n <Fragment>\n {inactivity && <h2>{t('authentication:loggedOutInactivity')}</h2>}\n {!inactivity && <h2>{t('authentication:loggedOutSuccessfully')}</h2>}\n <Button\n Link={Link}\n buttonStyle=\"secondary\"\n el=\"link\"\n url={`${adminRoute}/login${\n redirect && redirect.length > 0 ? `?redirect=${encodeURIComponent(redirect)}` : ''\n }`}\n >\n {t('authentication:logBackIn')}\n </Button>\n </Fragment>\n )\n }\n\n return <Fragment>{t('authentication:loggingOut')}</Fragment>\n}\n"],"names":["Button","useAuth","useTranslation","LinkImport","React","Fragment","useEffect","Link","default","LogoutClient","props","adminRoute","inactivity","redirect","isLoggingOut","setIsLoggingOut","useState","undefined","logOut","t","h2","buttonStyle","el","url","length","encodeURIComponent"],"mappings":"AAAA;;AACA,SAASA,MAAM,EAAEC,OAAO,EAAEC,cAAc,QAAQ,iBAAgB;AAChE,OAAOC,gBAAgB,eAAc;AACrC,OAAOC,SAASC,QAAQ,EAAEC,SAAS,QAAQ,QAAO;AAElD,MAAMC,OAAQJ,WAAWK,OAAO,IAAIL;AAEpC,OAAO,MAAMM,eAIR,CAACC;IACJ,MAAM,EAAEC,UAAU,EAAEC,UAAU,EAAEC,QAAQ,EAAE,GAAGH;IAE7C,MAAM,CAACI,cAAcC,gBAAgB,GAAGX,MAAMY,QAAQ,CAAsBC;IAC5E,MAAM,EAAEC,MAAM,EAAE,GAAGjB;IACnB,MAAM,EAAEkB,CAAC,EAAE,GAAGjB;IAEdI,UAAU;QACR,IAAI,CAACQ,cAAc;YACjBC,gBAAgB;YAChBG;QACF;IACF,GAAG;QAACJ;QAAcI;KAAO;IAEzB,IAAIJ,cAAc;QAChB,qBACE,MAACT;;gBACEO,4BAAc,KAACQ;8BAAID,EAAE;;gBACrB,CAACP,4BAAc,KAACQ;8BAAID,EAAE;;8BACvB,KAACnB;oBACCO,MAAMA;oBACNc,aAAY;oBACZC,IAAG;oBACHC,KAAK,CAAC,EAAEZ,WAAW,MAAM,EACvBE,YAAYA,SAASW,MAAM,GAAG,IAAI,CAAC,UAAU,EAAEC,mBAAmBZ,UAAU,CAAC,GAAG,GACjF,CAAC;8BAEDM,EAAE;;;;IAIX;IAEA,qBAAO,KAACd;kBAAUc,EAAE;;AACtB,EAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/views/Logout/index.tsx"],"sourcesContent":["import type { AdminViewProps } from 'payload'\n\nimport React from 'react'\n\nimport { LogoutClient } from './LogoutClient.js'\nimport './index.scss'\n\nconst baseClass = 'logout'\n\nexport { generateLogoutMetadata } from './meta.js'\n\nexport const LogoutView: React.FC<\n AdminViewProps & {\n inactivity?: boolean\n }\n> = ({ inactivity, initPageResult, searchParams }) => {\n const {\n req: {\n payload: {\n config: {\n routes: { admin },\n },\n },\n },\n } = initPageResult\n\n return (\n <div className={`${baseClass}__wrap`}>\n <LogoutClient\n adminRoute={admin}\n inactivity={inactivity}\n redirect={searchParams.redirect as string}\n />\n </div>\n )\n}\n\nexport const LogoutInactivity: React.FC<AdminViewProps> = (props) => {\n return <LogoutView inactivity {...props} />\n}\n"],"names":["React","LogoutClient","baseClass","generateLogoutMetadata","LogoutView","inactivity","initPageResult","searchParams","req","payload","config","routes","admin","div","className","adminRoute","redirect","LogoutInactivity","props"],"
|
|
1
|
+
{"version":3,"sources":["../../../src/views/Logout/index.tsx"],"sourcesContent":["import type { AdminViewProps } from 'payload'\n\nimport React from 'react'\n\nimport { LogoutClient } from './LogoutClient.js'\nimport './index.scss'\n\nconst baseClass = 'logout'\n\nexport { generateLogoutMetadata } from './meta.js'\n\nexport const LogoutView: React.FC<\n AdminViewProps & {\n inactivity?: boolean\n }\n> = ({ inactivity, initPageResult, searchParams }) => {\n const {\n req: {\n payload: {\n config: {\n routes: { admin },\n },\n },\n },\n } = initPageResult\n\n return (\n <div className={`${baseClass}__wrap`}>\n <LogoutClient\n adminRoute={admin}\n inactivity={inactivity}\n redirect={searchParams.redirect as string}\n />\n </div>\n )\n}\n\nexport const LogoutInactivity: React.FC<AdminViewProps> = (props) => {\n return <LogoutView inactivity {...props} />\n}\n"],"names":["React","LogoutClient","baseClass","generateLogoutMetadata","LogoutView","inactivity","initPageResult","searchParams","req","payload","config","routes","admin","div","className","adminRoute","redirect","LogoutInactivity","props"],"mappings":";AAEA,OAAOA,WAAW,QAAO;AAEzB,SAASC,YAAY,QAAQ,oBAAmB;AAGhD,MAAMC,YAAY;AAElB,SAASC,sBAAsB,QAAQ,YAAW;AAElD,OAAO,MAAMC,aAIT,CAAC,EAAEC,UAAU,EAAEC,cAAc,EAAEC,YAAY,EAAE;IAC/C,MAAM,EACJC,KAAK,EACHC,SAAS,EACPC,QAAQ,EACNC,QAAQ,EAAEC,KAAK,EAAE,EAClB,EACF,EACF,EACF,GAAGN;IAEJ,qBACE,KAACO;QAAIC,WAAW,CAAC,EAAEZ,UAAU,MAAM,CAAC;kBAClC,cAAA,KAACD;YACCc,YAAYH;YACZP,YAAYA;YACZW,UAAUT,aAAaS,QAAQ;;;AAIvC,EAAC;AAED,OAAO,MAAMC,mBAA6C,CAACC;IACzD,qBAAO,KAACd;QAAWC,UAAU;QAAE,GAAGa,KAAK;;AACzC,EAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/views/Logout/meta.ts"],"sourcesContent":["import type { GenerateViewMetadata } from '../Root/index.js'\n\nimport { meta } from '../../utilities/meta.js'\n\nexport const generateLogoutMetadata: GenerateViewMetadata = async ({ config, i18n: { t } }) =>\n meta({\n description: `${t('authentication:logoutUser')}`,\n keywords: `${t('authentication:logout')}`,\n serverURL: config.serverURL,\n title: t('authentication:logout'),\n })\n"],"names":["meta","generateLogoutMetadata","config","i18n","t","description","keywords","serverURL","title"],"
|
|
1
|
+
{"version":3,"sources":["../../../src/views/Logout/meta.ts"],"sourcesContent":["import type { GenerateViewMetadata } from '../Root/index.js'\n\nimport { meta } from '../../utilities/meta.js'\n\nexport const generateLogoutMetadata: GenerateViewMetadata = async ({ config, i18n: { t } }) =>\n meta({\n description: `${t('authentication:logoutUser')}`,\n keywords: `${t('authentication:logout')}`,\n serverURL: config.serverURL,\n title: t('authentication:logout'),\n })\n"],"names":["meta","generateLogoutMetadata","config","i18n","t","description","keywords","serverURL","title"],"mappings":"AAEA,SAASA,IAAI,QAAQ,0BAAyB;AAE9C,OAAO,MAAMC,yBAA+C,OAAO,EAAEC,MAAM,EAAEC,MAAM,EAAEC,CAAC,EAAE,EAAE,GACxFJ,KAAK;QACHK,aAAa,CAAC,EAAED,EAAE,6BAA6B,CAAC;QAChDE,UAAU,CAAC,EAAEF,EAAE,yBAAyB,CAAC;QACzCG,WAAWL,OAAOK,SAAS;QAC3BC,OAAOJ,EAAE;IACX,GAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/views/NotFound/index.client.tsx"],"sourcesContent":["'use client'\nimport { Button, Gutter, useConfig, useStepNav, useTranslation } from '@payloadcms/ui'\nimport LinkImport from 'next/link.js'\nimport React, { useEffect } from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'not-found'\n\nconst Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default\n\nexport const NotFoundClient: React.FC<{\n marginTop?: 'large'\n}> = (props) => {\n const { marginTop = 'large' } = props\n\n const { setStepNav } = useStepNav()\n const { t } = useTranslation()\n\n const {\n routes: { admin },\n } = useConfig()\n\n useEffect(() => {\n setStepNav([\n {\n label: t('general:notFound'),\n },\n ])\n }, [setStepNav, t])\n\n return (\n <div\n className={[baseClass, marginTop && `${baseClass}--margin-top-${marginTop}`]\n .filter(Boolean)\n .join(' ')}\n >\n <Gutter className={`${baseClass}__wrap`}>\n <h1>{t('general:nothingFound')}</h1>\n <p>{t('general:sorryNotFound')}</p>\n <Button Link={Link} className={`${baseClass}__button`} el=\"link\" to={`${admin}`}>\n {t('general:backToDashboard')}\n </Button>\n </Gutter>\n </div>\n )\n}\n"],"names":["Button","Gutter","useConfig","useStepNav","useTranslation","LinkImport","React","useEffect","baseClass","Link","default","NotFoundClient","props","marginTop","setStepNav","t","routes","admin","label","div","className","filter","Boolean","join","h1","p","el","to"],"
|
|
1
|
+
{"version":3,"sources":["../../../src/views/NotFound/index.client.tsx"],"sourcesContent":["'use client'\nimport { Button, Gutter, useConfig, useStepNav, useTranslation } from '@payloadcms/ui'\nimport LinkImport from 'next/link.js'\nimport React, { useEffect } from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'not-found'\n\nconst Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default\n\nexport const NotFoundClient: React.FC<{\n marginTop?: 'large'\n}> = (props) => {\n const { marginTop = 'large' } = props\n\n const { setStepNav } = useStepNav()\n const { t } = useTranslation()\n\n const {\n routes: { admin },\n } = useConfig()\n\n useEffect(() => {\n setStepNav([\n {\n label: t('general:notFound'),\n },\n ])\n }, [setStepNav, t])\n\n return (\n <div\n className={[baseClass, marginTop && `${baseClass}--margin-top-${marginTop}`]\n .filter(Boolean)\n .join(' ')}\n >\n <Gutter className={`${baseClass}__wrap`}>\n <h1>{t('general:nothingFound')}</h1>\n <p>{t('general:sorryNotFound')}</p>\n <Button Link={Link} className={`${baseClass}__button`} el=\"link\" to={`${admin}`}>\n {t('general:backToDashboard')}\n </Button>\n </Gutter>\n </div>\n )\n}\n"],"names":["Button","Gutter","useConfig","useStepNav","useTranslation","LinkImport","React","useEffect","baseClass","Link","default","NotFoundClient","props","marginTop","setStepNav","t","routes","admin","label","div","className","filter","Boolean","join","h1","p","el","to"],"mappings":"AAAA;;AACA,SAASA,MAAM,EAAEC,MAAM,EAAEC,SAAS,EAAEC,UAAU,EAAEC,cAAc,QAAQ,iBAAgB;AACtF,OAAOC,gBAAgB,eAAc;AACrC,OAAOC,SAASC,SAAS,QAAQ,QAAO;AAIxC,MAAMC,YAAY;AAElB,MAAMC,OAAQJ,WAAWK,OAAO,IAAIL;AAEpC,OAAO,MAAMM,iBAER,CAACC;IACJ,MAAM,EAAEC,YAAY,OAAO,EAAE,GAAGD;IAEhC,MAAM,EAAEE,UAAU,EAAE,GAAGX;IACvB,MAAM,EAAEY,CAAC,EAAE,GAAGX;IAEd,MAAM,EACJY,QAAQ,EAAEC,KAAK,EAAE,EAClB,GAAGf;IAEJK,UAAU;QACRO,WAAW;YACT;gBACEI,OAAOH,EAAE;YACX;SACD;IACH,GAAG;QAACD;QAAYC;KAAE;IAElB,qBACE,KAACI;QACCC,WAAW;YAACZ;YAAWK,aAAa,CAAC,EAAEL,UAAU,aAAa,EAAEK,UAAU,CAAC;SAAC,CACzEQ,MAAM,CAACC,SACPC,IAAI,CAAC;kBAER,cAAA,MAACtB;YAAOmB,WAAW,CAAC,EAAEZ,UAAU,MAAM,CAAC;;8BACrC,KAACgB;8BAAIT,EAAE;;8BACP,KAACU;8BAAGV,EAAE;;8BACN,KAACf;oBAAOS,MAAMA;oBAAMW,WAAW,CAAC,EAAEZ,UAAU,QAAQ,CAAC;oBAAEkB,IAAG;oBAAOC,IAAI,CAAC,EAAEV,MAAM,CAAC;8BAC5EF,EAAE;;;;;AAKb,EAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/NotFound/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AACpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAA;AACpC,OAAO,KAAK,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAGlE,OAAO,KAAmB,MAAM,OAAO,CAAA;AAOvC,eAAO,MAAM,oBAAoB,+BAE9B;IACD,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/NotFound/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AACpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAA;AACpC,OAAO,KAAK,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAGlE,OAAO,KAAmB,MAAM,OAAO,CAAA;AAOvC,eAAO,MAAM,oBAAoB,+BAE9B;IACD,MAAM,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,eAAe,CAAA;IAClD,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,CAAA;KAAE,CAAA;CAE9C,KAAG,OAAO,CAAC,QAAQ,CAUnB,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG,CAAC,IAAI,EAAE;IACxC,MAAM,EAAE,eAAe,CAAA;IACvB,IAAI,EAAE,IAAI,CAAA;IACV,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,CAAA;KAAE,CAAA;CAC9C,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAA;AAEvB,eAAO,MAAM,YAAY,qDAItB;IACD,MAAM,EAAE,OAAO,CAAC,eAAe,CAAC,CAAA;IAChC,MAAM,EAAE;QACN,QAAQ,EAAE,MAAM,EAAE,CAAA;KACnB,CAAA;IACD,YAAY,EAAE;QACZ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,CAAA;KACjC,CAAA;CACF,+BA4BA,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,kBAE1B,CAAA"}
|