payload 0.19.0 → 0.20.0

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

@@ -1,118 +0,0 @@
-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

@@ -1,74 +0,0 @@
-@import '../../../../../scss/styles.scss';
-
-.file-field {
-  position: relative;
-  margin: base(1.5) 0 base(2);
-  background: $color-background-gray;
-
-  .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: $color-background-gray;
-    position: relative;
-    z-index: 2;
-    padding: base(2);
-    display: flex;
-    align-items: center;
-  }
-
-  &__drop-zone {
-    border: 1px dotted $color-gray;
-
-    .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: $color-green;
-      background: rgba($color-green, .15);
-    }
-  }
-
-  @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

@@ -1,12 +0,0 @@
-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

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

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

@@ -1,4 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,104 +0,0 @@
-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 { NegativeFieldGutterProvider } from '../../../forms/FieldTypeGutter/context';
-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 } = 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, 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 (isLoading) {
-            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, isLoading]);
-    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(NegativeFieldGutterProvider, { allow: true },
-        React.createElement(RenderCustomComponent, { DefaultComponent: DefaultEdit, CustomComponent: CustomEdit, componentProps: {
-                isLoading,
-                data: dataToRender,
-                collection,
-                permissions: collectionPermissions,
-                isEditing,
-                onSave,
-                initialState,
-                hasSavePermission,
-                apiURL,
-                action,
-            } })));
-};
-export default EditView;

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

@@ -1,222 +0,0 @@
-@import '../../../../scss/styles.scss';
-
-.collection-edit {
-  width: 100%;
-
-  &__form {
-    height: 100%;
-  }
-
-  &__main {
-    width: calc(100% - #{base(15)});
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
-  }
-
-  &__header {
-    h1 {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      line-height: 1.25;
-    }
-  }
-
-  &__collection-actions {
-    list-style: none;
-    margin: 0;
-    padding: base(1.5) 0 base(.5);
-    display: flex;
-
-    li {
-      margin-right: base(.75);
-    }
-  }
-
-  &__edit {
-    background: white;
-    padding: base(5) base(6) base(6);
-    margin-bottom: base(1.5);
-    overflow-x: auto;
-    flex-grow: 1;
-  }
-
-  &__sidebar-wrap {
-    position: fixed;
-    width: base(15);
-    height: 100%;
-    top: 0;
-    right: 0;
-    overflow: visible;
-  }
-
-  &__sidebar {
-    width: 100%;
-    height: 100%;
-    overflow-y: auto;
-  }
-
-  &__sidebar-sticky-wrap {
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
-  }
-
-  &__collection-actions,
-  &__document-actions,
-  &__meta,
-  &__sidebar-fields {
-    padding-left: base(1.5);
-  }
-
-  &__document-actions {
-    @include blur-bg;
-    padding-right: $baseline;
-    position: sticky;
-    top: 0;
-    z-index: $z-nav;
-  }
-
-  &__document-actions--has-2 {
-    display: flex;
-
-    > * {
-      width: calc(50% - #{base(.5)});
-    }
-
-    > *:first-child {
-      margin-right: base(.5);
-    }
-
-    > *:last-child {
-      margin-left: base(.5);
-    }
-
-    .form-submit {
-      .btn {
-        width: 100%;
-        padding-left: base(.5);
-        padding-right: base(.5);
-      }
-    }
-  }
-
-  &__api-url {
-    margin-bottom: base(1.5);
-    padding-right: base(1.5);
-
-    a {
-      display: block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  &__sidebar-fields {
-    padding-right: $baseline;
-
-    .preview-btn {
-      display: inline-block;
-      margin-top: 0;
-      width: calc(50% - #{base(.5)});
-    }
-  }
-
-  &__meta {
-    margin: auto 0 $baseline 0;
-    padding-top: $baseline;
-    list-style: none;
-
-    li {
-      margin-bottom: base(.5);
-    }
-  }
-
-  &__label {
-    color: $color-gray;
-  }
-
-  &__collection-actions,
-  &__api-url {
-    a, button {
-      cursor: pointer;
-      font-weight: 600;
-      text-decoration: none;
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
-
-  &--is-editing {
-    .collection-edit__sidebar {
-      padding-top: 0;
-    }
-  }
-
-  @include large-break {
-    &__edit {
-      padding: base(3.5);
-    }
-  }
-
-  @include mid-break {
-    &__main {
-      width: 100%;
-      min-height: initial;
-    }
-
-    &__sidebar-wrap {
-      position: static;
-      width: 100%;
-      height: initial;
-    }
-
-    &__form {
-      display: block;
-    }
-
-    &__edit {
-      padding: $baseline;
-      margin-bottom: $baseline;
-    }
-
-    &__document-actions {
-      position: fixed;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      top: auto;
-      z-index: $z-nav;
-    }
-
-    &__document-actions,
-    &__meta,
-    &__sidebar-fields {
-      padding-left: $baseline;
-    }
-
-    &__sidebar-fields {
-      .preview-btn {
-        width: 100%;
-      }
-    }
-
-    &__collection-actions {
-      margin-top: base(.5);
-      padding-left: $baseline;
-      padding-bottom: 0;
-      order: 1;
-
-      li {
-        margin: 0 base(.5) 0 0;
-      }
-    }
-
-    &__sidebar {
-      padding-bottom: base(4);
-    }
-  }
-}

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

@@ -1,19 +0,0 @@
-import { SanitizedCollectionConfig } from '../../../../../collections/config/types';
-import { CollectionPermission } from '../../../../../auth/types';
-import { Document } from '../../../../../types';
-import { Fields } from '../../../forms/Form/types';
-export declare type IndexProps = {
-    collection: SanitizedCollectionConfig;
-    isEditing?: boolean;
-};
-export declare type Props = IndexProps & {
-    data: Document;
-    onSave?: () => void;
-    permissions: CollectionPermission;
-    isLoading: boolean;
-    initialState?: Fields;
-    apiURL: string;
-    action: string;
-    hasSavePermission: boolean;
-    autosaveEnabled: boolean;
-};

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

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

package/dist/admin/components/views/collections/List/Cell/cellTypes.spec.d.ts

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