payload 0.20.0 → 0.20.3-beta.0

package/dist/admin/components/views/collections/Edit/Auth/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Props } from './types';
+import './index.scss';
+declare const Auth: React.FC<Props>;
+export default Auth;

package/dist/admin/components/views/collections/Edit/Auth/index.js

@@ -0,0 +1,59 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { toast } from 'react-toastify';
+import { useConfig } from '../../../../utilities/Config';
+import Email from '../../../../forms/field-types/Email';
+import Password from '../../../../forms/field-types/Password';
+import Checkbox from '../../../../forms/field-types/Checkbox';
+import Button from '../../../../elements/Button';
+import ConfirmPassword from '../../../../forms/field-types/ConfirmPassword';
+import { useWatchForm, useFormModified } from '../../../../forms/Form/context';
+import APIKey from './APIKey';
+import './index.scss';
+const baseClass = 'auth-fields';
+const Auth = (props) => {
+    const { useAPIKey, requirePassword, verify, collection: { slug }, collection, email, operation } = props;
+    const [changingPassword, setChangingPassword] = useState(requirePassword);
+    const { getField } = useWatchForm();
+    const modified = useFormModified();
+    const enableAPIKey = getField('enableAPIKey');
+    useEffect(() => {
+        if (!modified) {
+            setChangingPassword(false);
+        }
+    }, [modified]);
+    const { serverURL, routes: { api, }, } = useConfig();
+    const unlock = useCallback(async () => {
+        const url = `${serverURL}${api}/${slug}/unlock`;
+        const response = await fetch(url, {
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                email,
+            }),
+            method: 'post',
+        });
+        if (response.status === 200) {
+            toast.success('Successfully unlocked', { autoClose: 3000 });
+        }
+        else {
+            toast.error('Successfully unlocked');
+        }
+    }, [serverURL, api, slug, email]);
+    if (collection.auth.disableLocalStrategy) {
+        return null;
+    }
+    return (React.createElement("div", { className: baseClass },
+        React.createElement(Email, { required: true, name: "email", label: "Email", admin: { autoComplete: 'email' } }),
+        (changingPassword || requirePassword) && (React.createElement("div", { className: `${baseClass}__changing-password` },
+            React.createElement(Password, { autoComplete: "off", required: true, name: "password", label: "New Password" }),
+            React.createElement(ConfirmPassword, null),
+            !requirePassword && (React.createElement(Button, { size: "small", buttonStyle: "secondary", onClick: () => setChangingPassword(false) }, "Cancel")))),
+        (!changingPassword && !requirePassword) && (React.createElement(Button, { size: "small", buttonStyle: "secondary", onClick: () => setChangingPassword(true) }, "Change Password")),
+        operation === 'update' && (React.createElement(Button, { size: "small", buttonStyle: "secondary", onClick: () => unlock() }, "Force Unlock")),
+        useAPIKey && (React.createElement("div", { className: `${baseClass}__api-key` },
+            React.createElement(Checkbox, { label: "Enable API Key", name: "enableAPIKey" }),
+            (enableAPIKey === null || enableAPIKey === void 0 ? void 0 : enableAPIKey.value) && (React.createElement(APIKey, null)))),
+        verify && (React.createElement(Checkbox, { label: "Verified", name: "_verified" }))));
+};
+export default Auth;

package/dist/admin/components/views/collections/Edit/Auth/index.scss

@@ -0,0 +1,38 @@
+@import '../../../../../scss/styles.scss';
+
+.auth-fields {
+  margin: base(1.5) 0 base(2);
+  padding: base(2) base(2) base(1.5);
+  background: var(--theme-elevation-50);
+
+  .btn {
+    margin-top: 0;
+    margin-right: base(.5);
+  }
+
+  &__api-key-label {
+    position: relative;
+  }
+}
+
+.field-type.api-key {
+  margin-bottom: $baseline;
+
+  input {
+    @include formInput;
+  }
+}
+
+@keyframes highlight {
+  0% {
+    background: var(--theme-success-500);
+  }
+
+  100% {
+    background: none;
+  }
+}
+
+.highlight {
+  animation: highlight 10s;
+}

package/dist/admin/components/views/collections/Edit/Auth/types.d.ts

@@ -0,0 +1,10 @@
+import { SanitizedCollectionConfig } from '../../../../../../collections/config/types';
+import { VerifyConfig } from '../../../../../../auth/types';
+export declare type Props = {
+    useAPIKey?: boolean;
+    requirePassword?: boolean;
+    verify?: VerifyConfig | boolean;
+    collection: SanitizedCollectionConfig;
+    email: string;
+    operation: 'update' | 'create';
+};

package/dist/admin/components/views/collections/Edit/Auth/types.js

@@ -0,0 +1 @@
+export {};

package/dist/admin/components/views/collections/Edit/Default.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Props } from './types';
+import './index.scss';
+declare const DefaultEditView: React.FC<Props>;
+export default DefaultEditView;

package/dist/admin/components/views/collections/Edit/Default.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import { Link, useRouteMatch } from 'react-router-dom';
+import format from 'date-fns/format';
+import { useConfig } from '../../../utilities/Config';
+import Eyebrow from '../../../elements/Eyebrow';
+import Form from '../../../forms/Form';
+import Loading from '../../../elements/Loading';
+import PreviewButton from '../../../elements/PreviewButton';
+import FormSubmit from '../../../forms/Submit';
+import RenderFields from '../../../forms/RenderFields';
+import CopyToClipboard from '../../../elements/CopyToClipboard';
+import DuplicateDocument from '../../../elements/DuplicateDocument';
+import DeleteDocument from '../../../elements/DeleteDocument';
+import Meta from '../../../utilities/Meta';
+import fieldTypes from '../../../forms/field-types';
+import RenderTitle from '../../../elements/RenderTitle';
+import LeaveWithoutSaving from '../../../modals/LeaveWithoutSaving';
+import Auth from './Auth';
+import VersionsCount from '../../../elements/VersionsCount';
+import Upload from './Upload';
+import Autosave from '../../../elements/Autosave';
+import Status from '../../../elements/Status';
+import Publish from '../../../elements/Publish';
+import SaveDraft from '../../../elements/SaveDraft';
+import { useDocumentInfo } from '../../../utilities/DocumentInfo';
+import { OperationContext } from '../../../utilities/OperationProvider';
+import { Gutter } from '../../../elements/Gutter';
+import './index.scss';
+const baseClass = 'collection-edit';
+const DefaultEditView = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    const { params: { id } = {} } = useRouteMatch();
+    const { admin: { dateFormat }, routes: { admin } } = useConfig();
+    const { publishedDoc } = useDocumentInfo();
+    const { collection, isEditing, data, onSave, permissions, isLoading, initialState, apiURL, action, hasSavePermission, } = props;
+    const { slug, fields, admin: { useAsTitle, disableDuplicate, preview, hideAPIURL, }, versions, timestamps, auth, upload, } = collection;
+    const classes = [
+        baseClass,
+        isEditing && `${baseClass}--is-editing`,
+    ].filter(Boolean).join(' ');
+    const operation = isEditing ? 'update' : 'create';
+    return (React.createElement("div", { className: classes },
+        isLoading && (React.createElement(Loading, null)),
+        !isLoading && (React.createElement(OperationContext.Provider, { value: operation },
+            React.createElement(Form, { className: `${baseClass}__form`, method: id ? 'put' : 'post', action: action, onSuccess: onSave, disabled: !hasSavePermission, initialState: initialState },
+                React.createElement("div", { className: `${baseClass}__main` },
+                    React.createElement(Meta, { title: `${isEditing ? 'Editing' : 'Creating'} - ${collection.labels.singular}`, description: `${isEditing ? 'Editing' : 'Creating'} - ${collection.labels.singular}`, keywords: `${collection.labels.singular}, Payload, CMS` }),
+                    React.createElement(Eyebrow, null),
+                    !(((_a = collection.versions) === null || _a === void 0 ? void 0 : _a.drafts) && ((_c = (_b = collection.versions) === null || _b === void 0 ? void 0 : _b.drafts) === null || _c === void 0 ? void 0 : _c.autosave)) && (React.createElement(LeaveWithoutSaving, null)),
+                    React.createElement(Gutter, { className: `${baseClass}__edit` },
+                        React.createElement("header", { className: `${baseClass}__header` },
+                            React.createElement("h1", null,
+                                React.createElement(RenderTitle, { ...{ data, useAsTitle, fallback: '[Untitled]' } }))),
+                        auth && (React.createElement(Auth, { useAPIKey: auth.useAPIKey, requirePassword: !isEditing, verify: auth.verify, collection: collection, email: data === null || data === void 0 ? void 0 : data.email, operation: operation })),
+                        upload && (React.createElement(Upload, { data: data, collection: collection })),
+                        React.createElement(RenderFields, { readOnly: !hasSavePermission, permissions: permissions.fields, filter: (field) => { var _a, _b; return (!((_a = field === null || field === void 0 ? void 0 : field.admin) === null || _a === void 0 ? void 0 : _a.position) || (((_b = field === null || field === void 0 ? void 0 : field.admin) === null || _b === void 0 ? void 0 : _b.position) !== 'sidebar')); }, fieldTypes: fieldTypes, fieldSchema: fields }))),
+                React.createElement("div", { className: `${baseClass}__sidebar-wrap` },
+                    React.createElement("div", { className: `${baseClass}__sidebar` },
+                        React.createElement("div", { className: `${baseClass}__sidebar-sticky-wrap` },
+                            React.createElement("ul", { className: `${baseClass}__collection-actions` },
+                                ((_d = permissions === null || permissions === void 0 ? void 0 : permissions.create) === null || _d === void 0 ? void 0 : _d.permission) && (React.createElement(React.Fragment, null,
+                                    React.createElement("li", null,
+                                        React.createElement(Link, { id: "action-create", to: `${admin}/collections/${slug}/create` }, "Create New")),
+                                    !disableDuplicate && (React.createElement("li", null,
+                                        React.createElement(DuplicateDocument, { slug: slug }))))),
+                                ((_e = permissions === null || permissions === void 0 ? void 0 : permissions.delete) === null || _e === void 0 ? void 0 : _e.permission) && (React.createElement("li", null,
+                                    React.createElement(DeleteDocument, { collection: collection, id: id, buttonId: "action-delete" })))),
+                            React.createElement("div", { className: `${baseClass}__document-actions${((((_f = collection.versions) === null || _f === void 0 ? void 0 : _f.drafts) && !((_h = (_g = collection.versions) === null || _g === void 0 ? void 0 : _g.drafts) === null || _h === void 0 ? void 0 : _h.autosave)) || (isEditing && preview)) ? ` ${baseClass}__document-actions--has-2` : ''}` },
+                                (preview && (!((_j = collection.versions) === null || _j === void 0 ? void 0 : _j.drafts) || ((_l = (_k = collection.versions) === null || _k === void 0 ? void 0 : _k.drafts) === null || _l === void 0 ? void 0 : _l.autosave))) && (React.createElement(PreviewButton, { generatePreviewURL: preview, data: data })),
+                                hasSavePermission && (React.createElement(React.Fragment, null,
+                                    ((_m = collection.versions) === null || _m === void 0 ? void 0 : _m.drafts) && (React.createElement(React.Fragment, null,
+                                        !collection.versions.drafts.autosave && (React.createElement(SaveDraft, null)),
+                                        React.createElement(Publish, null))),
+                                    !((_o = collection.versions) === null || _o === void 0 ? void 0 : _o.drafts) && (React.createElement(FormSubmit, { buttonId: "action-save" }, "Save"))))),
+                            React.createElement("div", { className: `${baseClass}__sidebar-fields` },
+                                (isEditing && preview && (((_p = collection.versions) === null || _p === void 0 ? void 0 : _p.drafts) && !((_r = (_q = collection.versions) === null || _q === void 0 ? void 0 : _q.drafts) === null || _r === void 0 ? void 0 : _r.autosave))) && (React.createElement(PreviewButton, { generatePreviewURL: preview, data: data })),
+                                ((_s = collection.versions) === null || _s === void 0 ? void 0 : _s.drafts) && (React.createElement(React.Fragment, null,
+                                    React.createElement(Status, null),
+                                    (((_t = collection.versions) === null || _t === void 0 ? void 0 : _t.drafts.autosave) && hasSavePermission) && (React.createElement(Autosave, { publishedDocUpdatedAt: (publishedDoc === null || publishedDoc === void 0 ? void 0 : publishedDoc.updatedAt) || (data === null || data === void 0 ? void 0 : data.createdAt), collection: collection, id: id })))),
+                                React.createElement(RenderFields, { readOnly: !hasSavePermission, permissions: permissions.fields, filter: (field) => { var _a; return ((_a = field === null || field === void 0 ? void 0 : field.admin) === null || _a === void 0 ? void 0 : _a.position) === 'sidebar'; }, fieldTypes: fieldTypes, fieldSchema: fields })),
+                            isEditing && (React.createElement("ul", { className: `${baseClass}__meta` },
+                                !hideAPIURL && (React.createElement("li", { className: `${baseClass}__api-url` },
+                                    React.createElement("span", { className: `${baseClass}__label` },
+                                        "API URL",
+                                        ' ',
+                                        React.createElement(CopyToClipboard, { value: apiURL })),
+                                    React.createElement("a", { href: apiURL, target: "_blank", rel: "noopener noreferrer" }, apiURL))),
+                                versions && (React.createElement("li", null,
+                                    React.createElement("div", { className: `${baseClass}__label` }, "Versions"),
+                                    React.createElement(VersionsCount, { collection: collection, id: id }))),
+                                timestamps && (React.createElement(React.Fragment, null,
+                                    data.updatedAt && (React.createElement("li", null,
+                                        React.createElement("div", { className: `${baseClass}__label` }, "Last Modified"),
+                                        React.createElement("div", null, format(new Date(data.updatedAt), dateFormat)))),
+                                    ((publishedDoc === null || publishedDoc === void 0 ? void 0 : publishedDoc.createdAt) || (data === null || data === void 0 ? void 0 : data.createdAt)) && (React.createElement("li", null,
+                                        React.createElement("div", { className: `${baseClass}__label` }, "Created"),
+                                        React.createElement("div", null, format(new Date((publishedDoc === null || publishedDoc === void 0 ? void 0 : publishedDoc.createdAt) || (data === null || data === void 0 ? void 0 : data.createdAt)), dateFormat))))))))))))))));
+};
+export default DefaultEditView;

package/dist/admin/components/views/collections/Edit/Upload/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Props } from './types';
+import './index.scss';
+declare const Upload: React.FC<Props>;
+export default Upload;

package/dist/admin/components/views/collections/Edit/Upload/index.js

@@ -0,0 +1,118 @@
+import React, { useState, useRef, useEffect, useCallback, } from 'react';
+import useField from '../../../../forms/useField';
+import Button from '../../../../elements/Button';
+import FileDetails from '../../../../elements/FileDetails';
+import Error from '../../../../forms/Error';
+import './index.scss';
+const baseClass = 'file-field';
+const handleDrag = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+};
+const validate = (value) => {
+    if (!value && value !== undefined) {
+        return 'A file is required.';
+    }
+    return true;
+};
+const Upload = (props) => {
+    var _a, _b;
+    const inputRef = useRef(null);
+    const dropRef = useRef(null);
+    const [selectingFile, setSelectingFile] = useState(false);
+    const [dragging, setDragging] = useState(false);
+    const [dragCounter, setDragCounter] = useState(0);
+    const [replacingFile, setReplacingFile] = useState(false);
+    const { data = {}, collection, } = props;
+    const { filename } = data;
+    const { value, setValue, showError, errorMessage, } = useField({
+        path: 'file',
+        validate,
+    });
+    const handleDragIn = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragCounter((count) => count + 1);
+        if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
+            setDragging(true);
+        }
+    }, []);
+    const handleDragOut = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragCounter((count) => count - 1);
+        if (dragCounter > 1)
+            return;
+        setDragging(false);
+    }, [dragCounter]);
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragging(false);
+        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+            setValue(e.dataTransfer.files[0]);
+            setDragging(false);
+            e.dataTransfer.clearData();
+            setDragCounter(0);
+        }
+        else {
+            setDragging(false);
+        }
+    }, [setValue]);
+    // Only called when input is interacted with directly
+    // Not called when drag + drop is used
+    // Or when input is cleared
+    const handleInputChange = useCallback(() => {
+        var _a, _b;
+        setSelectingFile(false);
+        setValue(((_b = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0]) || null);
+    }, [inputRef, setValue]);
+    useEffect(() => {
+        if (selectingFile) {
+            inputRef.current.click();
+            setSelectingFile(false);
+        }
+    }, [selectingFile, inputRef, setSelectingFile]);
+    useEffect(() => {
+        const div = dropRef.current;
+        if (div) {
+            div.addEventListener('dragenter', handleDragIn);
+            div.addEventListener('dragleave', handleDragOut);
+            div.addEventListener('dragover', handleDrag);
+            div.addEventListener('drop', handleDrop);
+            return () => {
+                div.removeEventListener('dragenter', handleDragIn);
+                div.removeEventListener('dragleave', handleDragOut);
+                div.removeEventListener('dragover', handleDrag);
+                div.removeEventListener('drop', handleDrop);
+            };
+        }
+        return () => null;
+    }, [handleDragIn, handleDragOut, handleDrop, value]);
+    useEffect(() => {
+        setReplacingFile(false);
+    }, [data]);
+    const classes = [
+        baseClass,
+        dragging && `${baseClass}--dragging`,
+        'field-type',
+    ].filter(Boolean).join(' ');
+    return (React.createElement("div", { className: classes },
+        React.createElement(Error, { showError: showError, message: errorMessage }),
+        (filename && !replacingFile) && (React.createElement(FileDetails, { doc: data, collection: collection, handleRemove: () => {
+                setReplacingFile(true);
+                setValue(null);
+            } })),
+        (!filename || replacingFile) && (React.createElement("div", { className: `${baseClass}__upload` },
+            value && (React.createElement("div", { className: `${baseClass}__file-selected` },
+                React.createElement("span", { className: `${baseClass}__filename` }, value.name),
+                React.createElement(Button, { icon: "x", round: true, buttonStyle: "icon-label", iconStyle: "with-border", onClick: () => {
+                        setValue(null);
+                    } }))),
+            !value && (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: `${baseClass}__drop-zone`, ref: dropRef },
+                    React.createElement(Button, { size: "small", buttonStyle: "secondary", onClick: () => setSelectingFile(true) }, "Select a file"),
+                    React.createElement("span", { className: `${baseClass}__drag-label` }, "or drag and drop a file here")))),
+            React.createElement("input", { ref: inputRef, type: "file", accept: (_b = (_a = collection === null || collection === void 0 ? void 0 : collection.upload) === null || _a === void 0 ? void 0 : _a.mimeTypes) === null || _b === void 0 ? void 0 : _b.join(','), onChange: handleInputChange })))));
+};
+export default Upload;

package/dist/admin/components/views/collections/Edit/Upload/index.scss

@@ -0,0 +1,74 @@
+@import '../../../../../scss/styles.scss';
+
+.file-field {
+  position: relative;
+  margin: base(1.5) 0 base(2);
+  background: var(--theme-elevation-50);
+
+  .tooltip.error-message {
+    z-index: 3;
+    bottom: calc(100% - #{base(.5)});
+  }
+
+  &__upload {
+    position: relative;
+
+    input[type=file] {
+      position: absolute;
+      top: 0;
+      z-index: -1;
+    }
+  }
+
+  &__file-selected,
+  &__drop-zone {
+    background: var(--theme-elevation-100);
+    position: relative;
+    z-index: 2;
+    padding: base(2);
+    display: flex;
+    align-items: center;
+  }
+
+  &__drop-zone {
+    border: 1px dotted var(--theme-elevation-400);
+
+    .btn {
+      margin: 0 $baseline 0 0;
+    }
+  }
+
+  &__file-selected {
+    .btn {
+      margin: 0 0 0 $baseline;
+    }
+  }
+
+  &__filename {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &--dragging {
+    .file-field__drop-zone {
+      border-color: var(--theme-success-500);
+      background: var(--theme-success-150);
+    }
+  }
+
+  @include mid-break {
+    &__drop-zone {
+      display: block;
+      text-align: center;
+
+      .btn {
+        margin: 0 auto;
+      }
+
+      .file-field__drag-label {
+        display: none;
+      }
+    }
+  }
+}

package/dist/admin/components/views/collections/Edit/Upload/types.d.ts

@@ -0,0 +1,12 @@
+import { SanitizedCollectionConfig } from '../../../../../../collections/config/types';
+export declare type Data = {
+    filename: string;
+    mimeType: string;
+    filesize: number;
+};
+export declare type Props = {
+    data?: Data;
+    collection: SanitizedCollectionConfig;
+    adminThumbnail?: string;
+    mimeTypes?: string[];
+};

package/dist/admin/components/views/collections/Edit/Upload/types.js

@@ -0,0 +1 @@
+export {};

package/dist/admin/components/views/collections/Edit/formatFields.d.ts

@@ -0,0 +1,4 @@
+import { SanitizedCollectionConfig } from '../../../../../collections/config/types';
+import { Field } from '../../../../../fields/config/types';
+declare const formatFields: (collection: SanitizedCollectionConfig, isEditing: boolean) => Field[];
+export default formatFields;

package/dist/admin/components/views/collections/Edit/formatFields.js

@@ -0,0 +1,5 @@
+import { fieldAffectsData } from '../../../../../fields/config/types';
+const formatFields = (collection, isEditing) => (isEditing
+    ? collection.fields.filter((field) => (fieldAffectsData(field) && field.name !== 'id') || true)
+    : collection.fields);
+export default formatFields;

package/dist/admin/components/views/collections/Edit/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IndexProps } from './types';
+declare const EditView: React.FC<IndexProps>;
+export default EditView;

package/dist/admin/components/views/collections/Edit/index.js

@@ -0,0 +1,102 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Redirect, useRouteMatch, useHistory, useLocation } from 'react-router-dom';
+import { useConfig } from '../../../utilities/Config';
+import { useAuth } from '../../../utilities/Auth';
+import { useStepNav } from '../../../elements/StepNav';
+import usePayloadAPI from '../../../../hooks/usePayloadAPI';
+import RenderCustomComponent from '../../../utilities/RenderCustomComponent';
+import DefaultEdit from './Default';
+import formatFields from './formatFields';
+import buildStateFromSchema from '../../../forms/Form/buildStateFromSchema';
+import { useLocale } from '../../../utilities/Locale';
+import { useDocumentInfo } from '../../../utilities/DocumentInfo';
+const EditView = (props) => {
+    var _a, _b, _c;
+    const { collection: incomingCollection, isEditing } = props;
+    const { slug, labels: { plural: pluralLabel, }, admin: { useAsTitle, components: { views: { Edit: CustomEdit, } = {}, } = {}, } = {}, } = incomingCollection;
+    const [fields] = useState(() => formatFields(incomingCollection, isEditing));
+    const [collection] = useState(() => ({ ...incomingCollection, fields }));
+    const locale = useLocale();
+    const { serverURL, routes: { admin, api } } = useConfig();
+    const { params: { id } = {} } = useRouteMatch();
+    const { state: locationState } = useLocation();
+    const history = useHistory();
+    const { setStepNav } = useStepNav();
+    const [initialState, setInitialState] = useState({});
+    const { permissions, user } = useAuth();
+    const { getVersions, preferences } = useDocumentInfo();
+    const onSave = useCallback(async (json) => {
+        var _a;
+        getVersions();
+        if (!isEditing) {
+            history.push(`${admin}/collections/${collection.slug}/${(_a = json === null || json === void 0 ? void 0 : json.doc) === null || _a === void 0 ? void 0 : _a.id}`);
+        }
+        else {
+            const state = await buildStateFromSchema({ fieldSchema: collection.fields, data: json.doc, user, id, operation: 'update', locale });
+            setInitialState(state);
+        }
+    }, [admin, collection, history, isEditing, getVersions, user, id, locale]);
+    const [{ data, isLoading: isLoadingDocument, isError }] = usePayloadAPI((isEditing ? `${serverURL}${api}/${slug}/${id}` : null), { initialParams: { 'fallback-locale': 'null', depth: 0, draft: 'true' } });
+    const dataToRender = (locationState === null || locationState === void 0 ? void 0 : locationState.data) || data;
+    useEffect(() => {
+        const nav = [{
+                url: `${admin}/collections/${slug}`,
+                label: pluralLabel,
+            }];
+        if (isEditing) {
+            let label = '';
+            if (dataToRender) {
+                if (useAsTitle) {
+                    if (dataToRender[useAsTitle]) {
+                        label = dataToRender[useAsTitle];
+                    }
+                    else {
+                        label = '[Untitled]';
+                    }
+                }
+                else {
+                    label = dataToRender.id;
+                }
+            }
+            nav.push({
+                label,
+            });
+        }
+        else {
+            nav.push({
+                label: 'Create New',
+            });
+        }
+        setStepNav(nav);
+    }, [setStepNav, isEditing, pluralLabel, dataToRender, slug, useAsTitle, admin]);
+    useEffect(() => {
+        if (isLoadingDocument) {
+            return;
+        }
+        const awaitInitialState = async () => {
+            const state = await buildStateFromSchema({ fieldSchema: fields, data: dataToRender, user, operation: isEditing ? 'update' : 'create', id, locale });
+            setInitialState(state);
+        };
+        awaitInitialState();
+    }, [dataToRender, fields, isEditing, id, user, locale, isLoadingDocument]);
+    if (isError) {
+        return (React.createElement(Redirect, { to: `${admin}/not-found` }));
+    }
+    const collectionPermissions = (_a = permissions === null || permissions === void 0 ? void 0 : permissions.collections) === null || _a === void 0 ? void 0 : _a[slug];
+    const apiURL = `${serverURL}${api}/${slug}/${id}${collection.versions.drafts ? '?draft=true' : ''}`;
+    const action = `${serverURL}${api}/${slug}${isEditing ? `/${id}` : ''}?locale=${locale}&depth=0&fallback-locale=null`;
+    const hasSavePermission = (isEditing && ((_b = collectionPermissions === null || collectionPermissions === void 0 ? void 0 : collectionPermissions.update) === null || _b === void 0 ? void 0 : _b.permission)) || (!isEditing && ((_c = collectionPermissions === null || collectionPermissions === void 0 ? void 0 : collectionPermissions.create) === null || _c === void 0 ? void 0 : _c.permission));
+    return (React.createElement(RenderCustomComponent, { DefaultComponent: DefaultEdit, CustomComponent: CustomEdit, componentProps: {
+            isLoading: isLoadingDocument || !preferences,
+            data: dataToRender,
+            collection,
+            permissions: collectionPermissions,
+            isEditing,
+            onSave,
+            initialState,
+            hasSavePermission,
+            apiURL,
+            action,
+        } }));
+};
+export default EditView;