payload 0.20.0 → 0.20.1

package/dist/admin/components/views/collections/List/buildColumns.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import Cell from './Cell';
+import SortColumn from '../../../elements/SortColumn';
+import { fieldHasSubFields, fieldAffectsData, fieldIsPresentationalOnly } from '../../../../../fields/config/types';
+const buildColumns = (collection, columns) => (columns || []).reduce((cols, col, colIndex) => {
+    let field = null;
+    const fields = [
+        ...collection.fields,
+        {
+            name: 'id',
+            type: 'text',
+            label: 'ID',
+        },
+        {
+            name: 'updatedAt',
+            type: 'date',
+            label: 'Updated At',
+        },
+        {
+            name: 'createdAt',
+            type: 'date',
+            label: 'Created At',
+        },
+    ];
+    fields.forEach((fieldToCheck) => {
+        if ((fieldAffectsData(fieldToCheck) || fieldIsPresentationalOnly(fieldToCheck)) && fieldToCheck.name === col) {
+            field = fieldToCheck;
+        }
+        if (!fieldAffectsData(fieldToCheck) && fieldHasSubFields(fieldToCheck)) {
+            fieldToCheck.fields.forEach((subField) => {
+                if (fieldAffectsData(subField) && subField.name === col) {
+                    field = subField;
+                }
+            });
+        }
+        return false;
+    });
+    if (field) {
+        return [
+            ...cols,
+            {
+                accessor: field.name,
+                components: {
+                    Heading: (React.createElement(SortColumn, { label: field.label || field.name, name: field.name, disable: (field.disableSort || fieldIsPresentationalOnly(field)) || undefined })),
+                    renderCell: (rowData, cellData) => (React.createElement(Cell, { field: field, colIndex: colIndex, collection: collection, rowData: rowData, cellData: cellData })),
+                },
+            },
+        ];
+    }
+    return cols;
+}, []);
+export default buildColumns;

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

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

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

@@ -0,0 +1,38 @@
+import { fieldAffectsData, fieldIsPresentationalOnly } from '../../../../../fields/config/types';
+const formatFields = (config) => {
+    const hasID = config.fields.findIndex((field) => fieldAffectsData(field) && field.name === 'id') > -1;
+    let fields = config.fields.reduce((formatted, field) => {
+        var _a;
+        if (!fieldIsPresentationalOnly(field) && (field.hidden === true || ((_a = field === null || field === void 0 ? void 0 : field.admin) === null || _a === void 0 ? void 0 : _a.disabled) === true)) {
+            return formatted;
+        }
+        return [
+            ...formatted,
+            field,
+        ];
+    }, hasID ? [] : [{ name: 'id', label: 'ID', type: 'text' }]);
+    if (config.timestamps) {
+        fields = fields.concat([
+            {
+                name: 'createdAt',
+                label: 'Created At',
+                type: 'date',
+            }, {
+                name: 'updatedAt',
+                label: 'Updated At',
+                type: 'date',
+            },
+        ]);
+    }
+    if (config.upload) {
+        fields = fields.concat([
+            {
+                name: 'filename',
+                label: 'Filename',
+                type: 'text',
+            },
+        ]);
+    }
+    return fields;
+};
+export default formatFields;

package/dist/admin/components/views/collections/List/getInitialColumns.d.ts

@@ -0,0 +1,3 @@
+import { Field } from '../../../../../fields/config/types';
+declare const getInitialColumnState: (fields: Field[], useAsTitle: string, defaultColumns: string[]) => string[];
+export default getInitialColumnState;

package/dist/admin/components/views/collections/List/getInitialColumns.js

@@ -0,0 +1,37 @@
+import { fieldHasSubFields, fieldAffectsData } from '../../../../../fields/config/types';
+const getInitialColumnState = (fields, useAsTitle, defaultColumns) => {
+    let initialColumns = [];
+    if (Array.isArray(defaultColumns) && defaultColumns.length >= 1) {
+        return defaultColumns;
+    }
+    if (useAsTitle) {
+        initialColumns.push(useAsTitle);
+    }
+    const remainingColumns = fields.reduce((remaining, field) => {
+        if (fieldAffectsData(field) && field.name === useAsTitle) {
+            return remaining;
+        }
+        if (!fieldAffectsData(field) && fieldHasSubFields(field)) {
+            return [
+                ...remaining,
+                ...field.fields.reduce((subFields, subField) => {
+                    if (fieldAffectsData(subField)) {
+                        return [
+                            ...subFields,
+                            subField.name,
+                        ];
+                    }
+                    return subFields;
+                }, []),
+            ];
+        }
+        return [
+            ...remaining,
+            field.name,
+        ];
+    }, []);
+    initialColumns = initialColumns.concat(remainingColumns);
+    initialColumns = initialColumns.slice(0, 4);
+    return initialColumns;
+};
+export default getInitialColumnState;

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

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

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

@@ -0,0 +1,117 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+import queryString from 'qs';
+import { useConfig } from '../../../utilities/Config';
+import { useAuth } from '../../../utilities/Auth';
+import usePayloadAPI from '../../../../hooks/usePayloadAPI';
+import DefaultList from './Default';
+import RenderCustomComponent from '../../../utilities/RenderCustomComponent';
+import { useStepNav } from '../../../elements/StepNav';
+import formatFields from './formatFields';
+import buildColumns from './buildColumns';
+import { usePreferences } from '../../../utilities/Preferences';
+import { useSearchParams } from '../../../utilities/SearchParams';
+import getInitialColumns from './getInitialColumns';
+const ListView = (props) => {
+    var _a, _b;
+    const { collection, collection: { slug, labels: { plural, }, admin: { useAsTitle, defaultColumns, pagination: { defaultLimit, }, components: { views: { List: CustomList, } = {}, } = {}, }, }, } = props;
+    const { serverURL, routes: { api, admin } } = useConfig();
+    const preferenceKey = `${collection.slug}-list`;
+    const { permissions } = useAuth();
+    const { setStepNav } = useStepNav();
+    const { getPreference, setPreference } = usePreferences();
+    const { page, sort, limit, where } = useSearchParams();
+    const history = useHistory();
+    const [fetchURL, setFetchURL] = useState('');
+    const [fields] = useState(() => formatFields(collection));
+    const [tableColumns, setTableColumns] = useState(() => {
+        const initialColumns = getInitialColumns(fields, useAsTitle, defaultColumns);
+        return buildColumns(collection, initialColumns);
+    });
+    const collectionPermissions = (_a = permissions === null || permissions === void 0 ? void 0 : permissions.collections) === null || _a === void 0 ? void 0 : _a[slug];
+    const hasCreatePermission = (_b = collectionPermissions === null || collectionPermissions === void 0 ? void 0 : collectionPermissions.create) === null || _b === void 0 ? void 0 : _b.permission;
+    const newDocumentURL = `${admin}/collections/${slug}/create`;
+    const [{ data }, { setParams: setFetchParams }] = usePayloadAPI(fetchURL);
+    const activeColumnNames = tableColumns.map(({ accessor }) => accessor);
+    const stringifiedActiveColumns = JSON.stringify(activeColumnNames);
+    useEffect(() => {
+        setStepNav([
+            {
+                label: plural,
+            },
+        ]);
+    }, [setStepNav, plural]);
+    // /////////////////////////////////////
+    // Set up Payload REST API query params
+    // /////////////////////////////////////
+    useEffect(() => {
+        const params = {
+            depth: 1,
+            draft: 'true',
+            page: undefined,
+            sort: undefined,
+            where: undefined,
+            limit,
+        };
+        if (page)
+            params.page = page;
+        if (sort)
+            params.sort = sort;
+        if (where)
+            params.where = where;
+        // Performance enhancement
+        // Setting the Fetch URL this way
+        // prevents a double-fetch
+        setFetchURL(`${serverURL}${api}/${slug}`);
+        setFetchParams(params);
+    }, [setFetchParams, page, sort, where, collection, getPreference, limit, serverURL, api, slug]);
+    // /////////////////////////////////////
+    // Fetch preferences on first load
+    // /////////////////////////////////////
+    useEffect(() => {
+        (async () => {
+            const currentPreferences = await getPreference(preferenceKey);
+            if (currentPreferences === null || currentPreferences === void 0 ? void 0 : currentPreferences.columns) {
+                setTableColumns(buildColumns(collection, currentPreferences === null || currentPreferences === void 0 ? void 0 : currentPreferences.columns));
+            }
+            const params = queryString.parse(history.location.search, { ignoreQueryPrefix: true, depth: 10 });
+            const search = {
+                ...params,
+                sort: (params === null || params === void 0 ? void 0 : params.sort) || (currentPreferences === null || currentPreferences === void 0 ? void 0 : currentPreferences.sort),
+                limit: (params === null || params === void 0 ? void 0 : params.limit) || (currentPreferences === null || currentPreferences === void 0 ? void 0 : currentPreferences.limit),
+            };
+            const newSearchQuery = queryString.stringify(search, { addQueryPrefix: true });
+            if (newSearchQuery.length > 1) {
+                history.replace({
+                    search: newSearchQuery,
+                });
+            }
+        })();
+    }, [collection, getPreference, preferenceKey, history]);
+    // /////////////////////////////////////
+    // When any preference-enabled values are updated,
+    // Set preferences
+    // /////////////////////////////////////
+    useEffect(() => {
+        const newPreferences = {
+            limit,
+            sort,
+            columns: JSON.parse(stringifiedActiveColumns),
+        };
+        setPreference(preferenceKey, newPreferences);
+    }, [sort, limit, stringifiedActiveColumns, preferenceKey, setPreference]);
+    const setActiveColumns = useCallback((columns) => {
+        setTableColumns(buildColumns(collection, columns));
+    }, [collection]);
+    return (React.createElement(RenderCustomComponent, { DefaultComponent: DefaultList, CustomComponent: CustomList, componentProps: {
+            collection: { ...collection, fields },
+            newDocumentURL,
+            hasCreatePermission,
+            data,
+            tableColumns,
+            columnNames: activeColumnNames,
+            setColumns: setActiveColumns,
+            limit: limit || defaultLimit,
+        } }));
+};
+export default ListView;

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

@@ -0,0 +1,98 @@
+@import '../../../../scss/styles';
+
+.collection-list {
+  width: 100%;
+  margin-bottom: base(2);
+
+  &__wrap {
+    padding: base(3);
+    margin-right: base(2);
+    background: white;
+  }
+
+  &__header {
+    margin-bottom: $baseline;
+    display: flex;
+    align-items: flex-end;
+    flex-wrap: wrap;
+
+    h1 {
+      margin: 0 base(.75) 0 0;
+    }
+
+    a {
+      text-decoration: none;
+    }
+
+    .pill {
+      margin: base(.5) 0 base(.25);
+    }
+  }
+
+  &__sub-header {
+    flex-basis: 100%;
+    margin-top: base(.25);
+  }
+
+  .table {
+    table {
+      width: 100%;
+      overflow: auto;
+    }
+  }
+
+  &__page-controls {
+    width: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  .paginator {
+    margin-bottom: 0;
+  }
+
+  &__page-info {
+    margin-right: base(1);
+    margin-left: auto;
+  }
+
+  @include mid-break {
+    &__wrap {
+      padding: $baseline 0;
+      margin-right: 0;
+    }
+
+    &__header,
+    .list-controls,
+    .table,
+    .upload-gallery,
+    &__no-results,
+    &__page-controls {
+      padding-left: $baseline;
+      padding-right: $baseline;
+    }
+
+    &__header {
+      .pill {
+        margin-bottom: base(.0625);
+      }
+    }
+
+    &__search-input {
+      margin: 0;
+    }
+
+    &__page-controls {
+      flex-wrap: wrap;
+    }
+
+    &__page-info {
+      margin-left: 0;
+    }
+
+    .paginator {
+      width: 100%;
+      margin-bottom: $baseline;
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+import { SanitizedCollectionConfig } from '../../../../../collections/config/types';
+import { PaginatedDocs } from '../../../../../mongoose/types';
+import { Column } from '../../../elements/Table/types';
+export declare type Props = {
+    collection: SanitizedCollectionConfig;
+    data: PaginatedDocs<any>;
+    newDocumentURL: string;
+    setListControls: (controls: unknown) => void;
+    setSort: (sort: string) => void;
+    tableColumns: Column[];
+    columnNames: string[];
+    setColumns: (columns: string[]) => void;
+    hasCreatePermission: boolean;
+    setLimit: (limit: number) => void;
+    limit: number;
+};
+export declare type ListIndexProps = {
+    collection: SanitizedCollectionConfig;
+};
+export declare type ListPreferences = {
+    columns: string[];
+    limit: number;
+    sort: number;
+};

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

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

package/dist/admin/hooks/useDebounce.d.ts

@@ -0,0 +1 @@
+export default function useDebounce<T = unknown>(value: T, delay: number): T;

package/dist/admin/hooks/useDebounce.js

@@ -0,0 +1,15 @@
+import { useState, useEffect } from 'react';
+// Our hook
+export default function useDebounce(value, delay) {
+    // State and setters for debounced value
+    const [debouncedValue, setDebouncedValue] = useState(value);
+    useEffect(() => {
+        const handler = setTimeout(() => {
+            setDebouncedValue(value);
+        }, delay);
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [value, delay]);
+    return debouncedValue;
+}

package/dist/admin/hooks/useDebouncedCallback.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Returns a memoized function that will only call the passed function when it hasn't been called for the wait period
+ * @param func The function to be called
+ * @param wait Wait period after function hasn't been called for
+ * @returns A memoized function that is debounced
+ */
+export declare const useDebouncedCallback: (func: any, wait: any) => (...args: any[]) => void;

package/dist/admin/hooks/useDebouncedCallback.js

@@ -0,0 +1,20 @@
+import { useRef, useCallback } from 'react';
+/**
+ * Returns a memoized function that will only call the passed function when it hasn't been called for the wait period
+ * @param func The function to be called
+ * @param wait Wait period after function hasn't been called for
+ * @returns A memoized function that is debounced
+ */
+export const useDebouncedCallback = (func, wait) => {
+    // Use a ref to store the timeout between renders
+    // and prevent changes to it from causing re-renders
+    const timeout = useRef();
+    return useCallback((...args) => {
+        const later = () => {
+            clearTimeout(timeout.current);
+            func(...args);
+        };
+        clearTimeout(timeout.current);
+        timeout.current = setTimeout(later, wait);
+    }, [func, wait]);
+};

package/dist/admin/hooks/useIntersect.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+declare type Intersect = [
+    setNode: React.Dispatch<Element>,
+    entry: IntersectionObserverEntry
+];
+declare const useIntersect: ({ root, rootMargin, threshold, }?: {
+    root?: any;
+    rootMargin?: string;
+    threshold?: number;
+}) => Intersect;
+export default useIntersect;

package/dist/admin/hooks/useIntersect.js

@@ -0,0 +1,20 @@
+/* eslint-disable no-shadow */
+import { useEffect, useRef, useState } from 'react';
+const useIntersect = ({ root = null, rootMargin = '0px', threshold = 0, } = {}) => {
+    const [entry, updateEntry] = useState();
+    const [node, setNode] = useState(null);
+    const observer = useRef(new window.IntersectionObserver(([ent]) => updateEntry(ent), {
+        root,
+        rootMargin,
+        threshold,
+    }));
+    useEffect(() => {
+        const { current: currentObserver } = observer;
+        currentObserver.disconnect();
+        if (node)
+            currentObserver.observe(node);
+        return () => currentObserver.disconnect();
+    }, [node]);
+    return [setNode, entry];
+};
+export default useIntersect;

package/dist/admin/hooks/useMountEffect.d.ts

@@ -0,0 +1,2 @@
+declare const useMountEffect: (func: () => void) => void;
+export default useMountEffect;

package/dist/admin/hooks/useMountEffect.js

@@ -0,0 +1,3 @@
+import { useEffect } from 'react';
+const useMountEffect = (func) => useEffect(func, []);
+export default useMountEffect;

package/dist/admin/hooks/usePayloadAPI.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+declare type Result = [
+    {
+        isLoading: boolean;
+        isError: boolean;
+        data: any;
+    },
+    {
+        setParams: React.Dispatch<unknown>;
+    }
+];
+declare type Options = {
+    initialParams?: unknown;
+    initialData?: any;
+};
+declare type UsePayloadAPI = (url: string, options?: Options) => Result;
+declare const usePayloadAPI: UsePayloadAPI;
+export default usePayloadAPI;

package/dist/admin/hooks/usePayloadAPI.js

@@ -0,0 +1,44 @@
+import { useState, useEffect } from 'react';
+import queryString from 'qs';
+import { useLocale } from '../components/utilities/Locale';
+import { requests } from '../api';
+const usePayloadAPI = (url, options = {}) => {
+    const { initialParams = {}, initialData = {}, } = options;
+    const [data, setData] = useState(initialData);
+    const [params, setParams] = useState(initialParams);
+    const [isLoading, setIsLoading] = useState(true);
+    const [isError, setIsError] = useState(false);
+    const locale = useLocale();
+    const search = queryString.stringify({
+        locale,
+        ...(typeof params === 'object' ? params : {}),
+    });
+    useEffect(() => {
+        const fetchData = async () => {
+            setIsError(false);
+            setIsLoading(true);
+            try {
+                const response = await requests.get(`${url}?${search}`);
+                if (response.status > 201) {
+                    setIsError(true);
+                }
+                const json = await response.json();
+                setData(json);
+                setIsLoading(false);
+            }
+            catch (error) {
+                setIsError(true);
+                setIsLoading(false);
+            }
+        };
+        if (url) {
+            fetchData();
+        }
+        else {
+            setIsError(false);
+            setIsLoading(false);
+        }
+    }, [url, locale, search]);
+    return [{ data, isLoading, isError }, { setParams }];
+};
+export default usePayloadAPI;

package/dist/admin/hooks/useThrottledEffect.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare type useThrottledEffect = (callback: React.EffectCallback, delay: number, deps: React.DependencyList) => void;
+declare const useThrottledEffect: useThrottledEffect;
+export default useThrottledEffect;

package/dist/admin/hooks/useThrottledEffect.js

@@ -0,0 +1,17 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect, useRef } from 'react';
+const useThrottledEffect = (callback, delay, deps = []) => {
+    const lastRan = useRef(Date.now());
+    useEffect(() => {
+        const handler = setTimeout(() => {
+            if (Date.now() - lastRan.current >= delay) {
+                callback();
+                lastRan.current = Date.now();
+            }
+        }, delay - (Date.now() - lastRan.current));
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [delay, ...deps]);
+};
+export default useThrottledEffect;

package/dist/admin/hooks/useThumbnail.d.ts

@@ -0,0 +1,3 @@
+import { SanitizedCollectionConfig } from '../../collections/config/types';
+declare const useThumbnail: (collection: SanitizedCollectionConfig, doc: Record<string, unknown>) => string | false;
+export default useThumbnail;

package/dist/admin/hooks/useThumbnail.js

@@ -0,0 +1,27 @@
+import { useConfig } from '../components/utilities/Config';
+import isImage from '../../uploads/isImage';
+const absoluteURLPattern = new RegExp('^(?:[a-z]+:)?//', 'i');
+const useThumbnail = (collection, doc) => {
+    var _a, _b;
+    const { upload: { staticURL, adminThumbnail, }, } = collection;
+    const { mimeType, sizes, filename, } = doc;
+    const { serverURL } = useConfig();
+    if (isImage(mimeType)) {
+        if (typeof adminThumbnail === 'function') {
+            const thumbnailURL = adminThumbnail({ doc });
+            if (absoluteURLPattern.test(thumbnailURL)) {
+                return thumbnailURL;
+            }
+            return `${serverURL}${thumbnailURL}`;
+        }
+        if ((_a = sizes === null || sizes === void 0 ? void 0 : sizes[adminThumbnail]) === null || _a === void 0 ? void 0 : _a.url) {
+            return sizes[adminThumbnail].url;
+        }
+        if ((_b = sizes === null || sizes === void 0 ? void 0 : sizes[adminThumbnail]) === null || _b === void 0 ? void 0 : _b.filename) {
+            return `${serverURL}${staticURL}/${sizes[adminThumbnail].filename}`;
+        }
+        return `${serverURL}${staticURL}/${filename}`;
+    }
+    return false;
+};
+export default useThumbnail;

package/dist/admin/hooks/useTitle.d.ts

@@ -0,0 +1,2 @@
+declare const useTitle: (useAsTitle: string) => string;
+export default useTitle;

package/dist/admin/hooks/useTitle.js

@@ -0,0 +1,7 @@
+import { useWatchForm } from '../components/forms/Form/context';
+const useTitle = (useAsTitle) => {
+    const { getField } = useWatchForm();
+    const titleField = getField(useAsTitle);
+    return titleField === null || titleField === void 0 ? void 0 : titleField.value;
+};
+export default useTitle;

package/dist/admin/index.d.ts

@@ -0,0 +1 @@
+import './scss/app.scss';

package/dist/admin/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+</head>
+
+<body>
+  <div id="app"></div>
+  <div id="portal"></div>
+</body>
+
+</html>