payload 0.20.0 → 0.20.1

package/dist/admin/components/forms/field-types/Point/index.d.ts

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

package/dist/admin/components/forms/field-types/Point/index.js

@@ -0,0 +1,52 @@
+import React, { useCallback } from 'react';
+import useField from '../../useField';
+import Label from '../../Label';
+import Error from '../../Error';
+import FieldDescription from '../../FieldDescription';
+import withCondition from '../../withCondition';
+import { point } from '../../../../../fields/validations';
+import './index.scss';
+const baseClass = 'point';
+const PointField = (props) => {
+    const { name, path: pathFromProps, required, validate = point, label, admin: { readOnly, style, className, width, step, placeholder, description, condition, } = {}, } = props;
+    const path = pathFromProps || name;
+    const memoizedValidate = useCallback((value, options) => {
+        return validate(value, { ...options, required });
+    }, [validate, required]);
+    const { value = [null, null], showError, setValue, errorMessage, } = useField({
+        path,
+        validate: memoizedValidate,
+        enableDebouncedValue: true,
+        condition,
+    });
+    const handleChange = useCallback((e, index) => {
+        let val = parseFloat(e.target.value);
+        if (Number.isNaN(val)) {
+            val = e.target.value;
+        }
+        const coordinates = [...value];
+        coordinates[index] = val;
+        setValue(coordinates);
+    }, [setValue, value]);
+    const classes = [
+        'field-type',
+        baseClass,
+        className,
+        showError && 'error',
+        readOnly && 'read-only',
+    ].filter(Boolean).join(' ');
+    return (React.createElement("div", { className: classes, style: {
+            ...style,
+            width,
+        } },
+        React.createElement(Error, { showError: showError, message: errorMessage }),
+        React.createElement("ul", { className: `${baseClass}__wrap` },
+            React.createElement("li", null,
+                React.createElement(Label, { htmlFor: `${path}.longitude`, label: `${label} - Longitude`, required: required }),
+                React.createElement("input", { value: (value && typeof value[0] === 'number') ? value[0] : '', onChange: (e) => handleChange(e, 0), disabled: readOnly, placeholder: placeholder, type: "number", id: `${path}.longitude`, name: `${path}.longitude`, step: step })),
+            React.createElement("li", null,
+                React.createElement(Label, { htmlFor: `${path}.latitude`, label: `${label} - Latitude`, required: required }),
+                React.createElement("input", { value: (value && typeof value[1] === 'number') ? value[1] : '', onChange: (e) => handleChange(e, 1), disabled: readOnly, placeholder: placeholder, type: "number", id: `${path}.latitude`, name: `${path}.latitude`, step: step }))),
+        React.createElement(FieldDescription, { value: value, description: description })));
+};
+export default withCondition(PointField);

package/dist/admin/components/forms/field-types/Point/index.scss

@@ -0,0 +1,30 @@
+@import '../../../../scss/styles.scss';
+
+.point {
+	position: relative;
+  margin-bottom: $baseline;
+
+  &__wrap {
+    display: flex;
+    width: calc(100% + #{base(1)});
+    margin-left: base(-.5);
+    margin-right: base(-.5);
+    list-style: none;
+    padding: 0;
+
+    li {
+      padding: 0 base(.5);
+      width: 50%;
+    }
+  }
+
+	input {
+		@include formInput;
+	}
+
+	&.error {
+		input {
+      background-color: lighten($color-red, 20%);
+		}
+	}
+}

package/dist/admin/components/forms/field-types/Point/types.d.ts

@@ -0,0 +1,4 @@
+import { NumberField } from '../../../../../fields/config/types';
+export declare type Props = Omit<NumberField, 'type'> & {
+    path?: string;
+};

package/dist/admin/components/forms/field-types/Point/types.js

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

package/dist/admin/components/forms/field-types/RadioGroup/RadioInput/index.d.ts

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

package/dist/admin/components/forms/field-types/RadioGroup/RadioInput/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import './index.scss';
+const baseClass = 'radio-input';
+const RadioInput = (props) => {
+    const { isSelected, option, onChange, path } = props;
+    const classes = [
+        baseClass,
+        isSelected && `${baseClass}--is-selected`,
+    ].filter(Boolean).join(' ');
+    const id = `${path}-${option.value}`;
+    return (React.createElement("label", { htmlFor: id },
+        React.createElement("div", { className: classes },
+            React.createElement("input", { id: id, type: "radio", checked: isSelected, onChange: () => (typeof onChange === 'function' ? onChange(option.value) : null) }),
+            React.createElement("span", { className: `${baseClass}__styled-radio` }),
+            React.createElement("span", { className: `${baseClass}__label` }, option.label))));
+};
+export default RadioInput;

package/dist/admin/components/forms/field-types/RadioGroup/RadioInput/index.scss

@@ -0,0 +1,89 @@
+@import '../../../../../scss/styles';
+
+.radio-input {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  margin: base(.10) 0;
+
+  input[type=radio] {
+    display: none;
+  }
+
+  &__styled-radio {
+    @include formInput;
+    width: $baseline;
+    height: $baseline;
+    position: relative;
+    padding: 0;
+    display: inline-block;
+    border-radius: 50%;
+
+    &:before {
+      content: ' ';
+      display: block;
+      border-radius: 100%;
+      background-color: $color-dark-gray;
+      width: 100%;
+      height: 100%;
+      box-shadow: inset 0 0 0 base(.1875) white;
+      opacity: 0;
+    }
+  }
+
+  &__label {
+    margin-left: base(.5);
+  }
+
+  &--is-selected {
+    .radio-input {
+      &__styled-radio {
+        &:before {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  &:not(&--is-selected) {
+    &:hover {
+      .radio-input {
+        &__styled-radio {
+
+          &:before {
+            opacity: .2;
+          }
+        }
+      }
+    }
+  }
+}
+
+.radio-group--read-only {
+  .radio-input {
+    cursor: default;
+
+    &__label {
+      color: $color-dark-gray;
+    }
+
+    &--is-selected {
+      .radio-input__styled-radio {
+        &:before {
+          background-color: $color-dark-gray;
+        }
+      }
+    }
+
+
+    &:not(.radio-input--is-selected) {
+      &:hover {
+        .radio-input__styled-radio {
+          &:before {
+            opacity: 0;
+          }
+        }
+      }
+    }
+  }
+}

package/dist/admin/components/forms/field-types/RadioGroup/RadioInput/types.d.ts

@@ -0,0 +1,9 @@
+export declare type Props = {
+    isSelected: boolean;
+    option: {
+        label: string;
+        value: string;
+    };
+    onChange: (val: string) => void;
+    path: string;
+};

package/dist/admin/components/forms/field-types/RadioGroup/RadioInput/types.js

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

package/dist/admin/components/forms/field-types/RadioGroup/index.d.ts

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

package/dist/admin/components/forms/field-types/RadioGroup/index.js

@@ -0,0 +1,52 @@
+import React, { useCallback } from 'react';
+import useField from '../../useField';
+import withCondition from '../../withCondition';
+import Error from '../../Error';
+import Label from '../../Label';
+import FieldDescription from '../../FieldDescription';
+import RadioInput from './RadioInput';
+import { radio } from '../../../../../fields/validations';
+import { optionIsObject } from '../../../../../fields/config/types';
+import './index.scss';
+const baseClass = 'radio-group';
+const RadioGroup = (props) => {
+    const { name, path: pathFromProps, required, validate = radio, label, admin: { readOnly, layout = 'horizontal', style, className, width, description, condition, } = {}, options, } = props;
+    const path = pathFromProps || name;
+    const memoizedValidate = useCallback((value, validationOptions) => {
+        return validate(value, { ...validationOptions, options, required });
+    }, [validate, options, required]);
+    const { value, showError, errorMessage, setValue, } = useField({
+        path,
+        validate: memoizedValidate,
+        condition,
+    });
+    const classes = [
+        'field-type',
+        baseClass,
+        className,
+        `${baseClass}--layout-${layout}`,
+        showError && 'error',
+        readOnly && `${baseClass}--read-only`,
+    ].filter(Boolean).join(' ');
+    return (React.createElement("div", { className: classes, style: {
+            ...style,
+            width,
+        } },
+        React.createElement("div", { className: `${baseClass}__error-wrap` },
+            React.createElement(Error, { showError: showError, message: errorMessage })),
+        React.createElement(Label, { htmlFor: path, label: label, required: required }),
+        React.createElement("ul", { className: `${baseClass}--group` }, options.map((option) => {
+            let optionValue = '';
+            if (optionIsObject(option)) {
+                optionValue = option.value;
+            }
+            else {
+                optionValue = option;
+            }
+            const isSelected = String(optionValue) === String(value);
+            return (React.createElement("li", { key: `${path} - ${optionValue}` },
+                React.createElement(RadioInput, { path: path, isSelected: isSelected, option: optionIsObject(option) ? option : { label: option, value: option }, onChange: readOnly ? undefined : setValue })));
+        })),
+        React.createElement(FieldDescription, { value: value, description: description })));
+};
+export default withCondition(RadioGroup);

package/dist/admin/components/forms/field-types/RadioGroup/index.scss

@@ -0,0 +1,27 @@
+@import '../../../../scss/styles.scss';
+
+.radio-group {
+  margin-bottom: $baseline;
+
+  &__error-wrap {
+    position: relative;
+  }
+
+  &--layout-horizontal {
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    li {
+      padding-right: $baseline;
+      flex-shrink: 0;
+    }
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+}

package/dist/admin/components/forms/field-types/RadioGroup/types.d.ts

@@ -0,0 +1,4 @@
+import { RadioField } from '../../../../../fields/config/types';
+export declare type Props = Omit<RadioField, 'type'> & {
+    path?: string;
+};

package/dist/admin/components/forms/field-types/RadioGroup/types.js

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

package/dist/admin/components/forms/field-types/Relationship/createRelationMap.d.ts

@@ -0,0 +1,10 @@
+declare type RelationMap = {
+    [relation: string]: unknown[];
+};
+declare type CreateRelationMap = (args: {
+    hasMany: boolean;
+    relationTo: string | string[];
+    value: unknown;
+}) => RelationMap;
+export declare const createRelationMap: CreateRelationMap;
+export {};

package/dist/admin/components/forms/field-types/Relationship/createRelationMap.js

@@ -0,0 +1,35 @@
+export const createRelationMap = ({ hasMany, relationTo, value, }) => {
+    const hasMultipleRelations = Array.isArray(relationTo);
+    let relationMap;
+    if (Array.isArray(relationTo)) {
+        relationMap = relationTo.reduce((map, current) => {
+            return { ...map, [current]: [] };
+        }, {});
+    }
+    else {
+        relationMap = { [relationTo]: [] };
+    }
+    const add = (relation, id) => {
+        if (((typeof id === 'string') || typeof id === 'number') && typeof relation === 'string') {
+            relationMap[relation].push(id);
+        }
+    };
+    if (hasMany && Array.isArray(value)) {
+        value.forEach((val) => {
+            if (hasMultipleRelations) {
+                add(val.relationTo, val.value);
+            }
+            else {
+                add(relationTo, val);
+            }
+        });
+    }
+    else if (hasMultipleRelations) {
+        const valueWithRelation = value;
+        add(valueWithRelation === null || valueWithRelation === void 0 ? void 0 : valueWithRelation.relationTo, valueWithRelation === null || valueWithRelation === void 0 ? void 0 : valueWithRelation.value);
+    }
+    else {
+        add(relationTo, value);
+    }
+    return relationMap;
+};

package/dist/admin/components/forms/field-types/Relationship/index.d.ts

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

package/dist/admin/components/forms/field-types/Relationship/index.js

@@ -0,0 +1,291 @@
+import React, { useCallback, useEffect, useState, useReducer, } from 'react';
+import equal from 'deep-equal';
+import qs from 'qs';
+import { useConfig } from '../../../utilities/Config';
+import { useAuth } from '../../../utilities/Auth';
+import withCondition from '../../withCondition';
+import ReactSelect from '../../../elements/ReactSelect';
+import useField from '../../useField';
+import Label from '../../Label';
+import Error from '../../Error';
+import FieldDescription from '../../FieldDescription';
+import { relationship } from '../../../../../fields/validations';
+import { useFormProcessing, useWatchForm } from '../../Form/context';
+import optionsReducer from './optionsReducer';
+import { createRelationMap } from './createRelationMap';
+import { useDebouncedCallback } from '../../../../hooks/useDebouncedCallback';
+import { useDocumentInfo } from '../../../utilities/DocumentInfo';
+import { getFilterOptionsQuery } from '../getFilterOptionsQuery';
+import './index.scss';
+const maxResultsPerRequest = 10;
+const baseClass = 'relationship';
+const Relationship = (props) => {
+    const { relationTo, validate = relationship, path, name, required, label, hasMany, filterOptions, admin: { readOnly, style, className, width, description, condition, } = {}, } = props;
+    const { serverURL, routes: { api, }, collections, } = useConfig();
+    const { id } = useDocumentInfo();
+    const { user, permissions } = useAuth();
+    const { getData, getSiblingData } = useWatchForm();
+    const formProcessing = useFormProcessing();
+    const hasMultipleRelations = Array.isArray(relationTo);
+    const [options, dispatchOptions] = useReducer(optionsReducer, required || hasMany ? [] : [{ value: null, label: 'None' }]);
+    const [lastFullyLoadedRelation, setLastFullyLoadedRelation] = useState(-1);
+    const [lastLoadedPage, setLastLoadedPage] = useState(1);
+    const [errorLoading, setErrorLoading] = useState('');
+    const [optionFilters, setOptionFilters] = useState();
+    const [hasLoadedValueOptions, setHasLoadedValueOptions] = useState(false);
+    const [search, setSearch] = useState('');
+    const memoizedValidate = useCallback((value, validationOptions) => {
+        return validate(value, { ...validationOptions, required });
+    }, [validate, required]);
+    const { value, showError, errorMessage, setValue, initialValue, } = useField({
+        path: path || name,
+        validate: memoizedValidate,
+        condition,
+    });
+    const getResults = useCallback(async ({ lastFullyLoadedRelation: lastFullyLoadedRelationArg, lastLoadedPage: lastLoadedPageArg, search: searchArg, value: valueArg, sort, }) => {
+        if (!permissions) {
+            return;
+        }
+        let lastLoadedPageToUse = typeof lastLoadedPageArg !== 'undefined' ? lastLoadedPageArg : 1;
+        const lastFullyLoadedRelationToUse = typeof lastFullyLoadedRelationArg !== 'undefined' ? lastFullyLoadedRelationArg : -1;
+        const relations = Array.isArray(relationTo) ? relationTo : [relationTo];
+        const relationsToFetch = lastFullyLoadedRelationToUse === -1 ? relations : relations.slice(lastFullyLoadedRelationToUse + 1);
+        let resultsFetched = 0;
+        const relationMap = createRelationMap({ hasMany, relationTo, value: valueArg });
+        if (!errorLoading) {
+            relationsToFetch.reduce(async (priorRelation, relation) => {
+                var _a;
+                await priorRelation;
+                if (resultsFetched < 10) {
+                    const collection = collections.find((coll) => coll.slug === relation);
+                    const fieldToSearch = ((_a = collection === null || collection === void 0 ? void 0 : collection.admin) === null || _a === void 0 ? void 0 : _a.useAsTitle) || 'id';
+                    const query = {
+                        where: {
+                            and: [
+                                {
+                                    id: {
+                                        not_in: relationMap[relation],
+                                    },
+                                },
+                            ],
+                        },
+                        limit: maxResultsPerRequest,
+                        page: lastLoadedPageToUse,
+                        sort: fieldToSearch,
+                        depth: 0,
+                    };
+                    if (searchArg) {
+                        query.where.and.push({
+                            [fieldToSearch]: {
+                                like: searchArg,
+                            },
+                        });
+                    }
+                    if (optionFilters === null || optionFilters === void 0 ? void 0 : optionFilters[relation]) {
+                        query.where.and.push(optionFilters[relation]);
+                    }
+                    const response = await fetch(`${serverURL}${api}/${relation}?${qs.stringify(query)}`);
+                    if (response.ok) {
+                        const data = await response.json();
+                        if (data.docs.length > 0) {
+                            resultsFetched += data.docs.length;
+                            dispatchOptions({ type: 'ADD', data, relation, hasMultipleRelations, collection, sort });
+                            setLastLoadedPage(data.page);
+                            if (!data.nextPage) {
+                                setLastFullyLoadedRelation(relations.indexOf(relation));
+                                // If there are more relations to search, need to reset lastLoadedPage to 1
+                                // both locally within function and state
+                                if (relations.indexOf(relation) + 1 < relations.length) {
+                                    lastLoadedPageToUse = 1;
+                                }
+                            }
+                        }
+                    }
+                    else if (response.status === 403) {
+                        setLastFullyLoadedRelation(relations.indexOf(relation));
+                        lastLoadedPageToUse = 1;
+                        dispatchOptions({ type: 'ADD', data: { docs: [] }, relation, hasMultipleRelations, collection, sort, ids: relationMap[relation] });
+                    }
+                    else {
+                        setErrorLoading('An error has occurred.');
+                    }
+                }
+            }, Promise.resolve());
+        }
+    }, [
+        permissions,
+        relationTo,
+        hasMany,
+        errorLoading,
+        collections,
+        optionFilters,
+        serverURL,
+        api,
+        hasMultipleRelations,
+    ]);
+    const findOptionsByValue = useCallback(() => {
+        if (value) {
+            if (hasMany) {
+                if (Array.isArray(value)) {
+                    return value.map((val) => {
+                        if (hasMultipleRelations) {
+                            let matchedOption;
+                            options.forEach((opt) => {
+                                if (opt.options) {
+                                    opt.options.some((subOpt) => {
+                                        if ((subOpt === null || subOpt === void 0 ? void 0 : subOpt.value) === val.value) {
+                                            matchedOption = subOpt;
+                                            return true;
+                                        }
+                                        return false;
+                                    });
+                                }
+                            });
+                            return matchedOption;
+                        }
+                        return options.find((opt) => opt.value === val);
+                    });
+                }
+                return undefined;
+            }
+            if (hasMultipleRelations) {
+                let matchedOption;
+                const valueWithRelation = value;
+                options.forEach((opt) => {
+                    if (opt === null || opt === void 0 ? void 0 : opt.options) {
+                        opt.options.some((subOpt) => {
+                            if ((subOpt === null || subOpt === void 0 ? void 0 : subOpt.value) === valueWithRelation.value) {
+                                matchedOption = subOpt;
+                                return true;
+                            }
+                            return false;
+                        });
+                    }
+                });
+                return matchedOption;
+            }
+            return options.find((opt) => opt.value === value);
+        }
+        return undefined;
+    }, [hasMany, hasMultipleRelations, value, options]);
+    const updateSearch = useDebouncedCallback((searchArg, valueArg) => {
+        getResults({ search: searchArg, value: valueArg, sort: true });
+        setSearch(searchArg);
+    }, [getResults]);
+    const handleInputChange = (searchArg, valueArg) => {
+        if (search !== searchArg) {
+            updateSearch(searchArg, valueArg);
+        }
+    };
+    // ///////////////////////////
+    // Fetch value options when initialValue changes
+    // ///////////////////////////
+    useEffect(() => {
+        if (initialValue && !hasLoadedValueOptions) {
+            const relationMap = createRelationMap({
+                hasMany,
+                relationTo,
+                value: initialValue,
+            });
+            Object.entries(relationMap).reduce(async (priorRelation, [relation, ids]) => {
+                await priorRelation;
+                if (ids.length > 0) {
+                    const query = {
+                        where: {
+                            id: {
+                                in: ids,
+                            },
+                        },
+                        depth: 0,
+                        limit: ids.length,
+                    };
+                    if (!errorLoading) {
+                        const response = await fetch(`${serverURL}${api}/${relation}?${qs.stringify(query)}`);
+                        const collection = collections.find((coll) => coll.slug === relation);
+                        if (response.ok) {
+                            const data = await response.json();
+                            dispatchOptions({ type: 'ADD', data, relation, hasMultipleRelations, collection, sort: true, ids });
+                        }
+                        else if (response.status === 403) {
+                            dispatchOptions({ type: 'ADD', data: { docs: [] }, relation, hasMultipleRelations, collection, sort: true, ids });
+                        }
+                    }
+                }
+            }, Promise.resolve());
+            setHasLoadedValueOptions(true);
+        }
+    }, [hasMany, hasMultipleRelations, relationTo, initialValue, hasLoadedValueOptions, errorLoading, collections, api, serverURL]);
+    useEffect(() => {
+        if (!filterOptions) {
+            return;
+        }
+        const newOptionFilters = getFilterOptionsQuery(filterOptions, {
+            id,
+            data: getData(),
+            relationTo,
+            siblingData: getSiblingData(path),
+            user,
+        });
+        if (!equal(newOptionFilters, optionFilters)) {
+            setOptionFilters(newOptionFilters);
+        }
+    }, [relationTo, filterOptions, optionFilters, id, getData, getSiblingData, path, user]);
+    useEffect(() => {
+        if (optionFilters || !filterOptions) {
+            setHasLoadedValueOptions(false);
+            getResults({
+                value: initialValue,
+            });
+        }
+    }, [initialValue, getResults, optionFilters, filterOptions]);
+    const classes = [
+        'field-type',
+        baseClass,
+        className,
+        showError && 'error',
+        errorLoading && 'error-loading',
+        readOnly && `${baseClass}--read-only`,
+    ].filter(Boolean).join(' ');
+    const valueToRender = (findOptionsByValue() || value);
+    if ((valueToRender === null || valueToRender === void 0 ? void 0 : valueToRender.value) === 'null')
+        valueToRender.value = null;
+    return (React.createElement("div", { className: classes, style: {
+            ...style,
+            width,
+        } },
+        React.createElement(Error, { showError: showError, message: errorMessage }),
+        React.createElement(Label, { htmlFor: path, label: label, required: required }),
+        !errorLoading && (React.createElement(ReactSelect, { isDisabled: readOnly, onInputChange: (newSearch) => handleInputChange(newSearch, value), onChange: !readOnly ? (selected) => {
+                if (hasMany) {
+                    setValue(selected ? selected.map((option) => {
+                        if (hasMultipleRelations) {
+                            return {
+                                relationTo: option.relationTo,
+                                value: option.value,
+                            };
+                        }
+                        return option.value;
+                    }) : null);
+                }
+                else if (hasMultipleRelations) {
+                    setValue({
+                        relationTo: selected.relationTo,
+                        value: selected.value,
+                    });
+                }
+                else {
+                    setValue(selected.value);
+                }
+            } : undefined, onMenuScrollToBottom: () => {
+                getResults({
+                    lastFullyLoadedRelation,
+                    lastLoadedPage: lastLoadedPage + 1,
+                    search,
+                    value: initialValue,
+                    sort: false,
+                });
+            }, value: valueToRender, showError: showError, disabled: formProcessing, options: options, isMulti: hasMany })),
+        errorLoading && (React.createElement("div", { className: `${baseClass}__error-loading` }, errorLoading)),
+        React.createElement(FieldDescription, { value: value, description: description })));
+};
+export default withCondition(Relationship);