@payloadcms/ui 3.0.0-alpha.9 → 3.0.0-beta.0

package/dist/providers/ComponentMap/buildComponentMap/fields.js

@@ -0,0 +1,604 @@
+import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription';
+import { fieldAffectsData, fieldIsPresentationalOnly } from 'payload/types';
+import { isPlainFunction, isReactComponent } from 'payload/utilities';
+import React, { Fragment } from 'react';
+import { HiddenInput } from '../../../fields/HiddenInput/index.js';
+export const mapFields = (args)=>{
+    const { config, disableAddingID, fieldSchema, filter, i18n, i18n: { t }, parentPath, readOnly: readOnlyOverride } = args;
+    const result = fieldSchema.reduce((acc, field)=>{
+        const fieldIsPresentational = fieldIsPresentationalOnly(field);
+        let CustomFieldComponent = field.admin?.components?.Field;
+        const CustomCellComponent = field.admin?.components?.Cell;
+        const isHidden = field?.admin && 'hidden' in field.admin && field.admin.hidden;
+        if (fieldIsPresentational || !field?.hidden && field?.admin?.disabled !== true) {
+            if (filter && typeof filter === 'function' && filter(field) || !filter) {
+                if (isHidden) {
+                    if (CustomFieldComponent) {
+                        CustomFieldComponent = HiddenInput;
+                    }
+                }
+                const isFieldAffectingData = fieldAffectsData(field);
+                const path = `${parentPath ? `${parentPath}.` : ''}${field.path || (isFieldAffectingData && 'name' in field ? field.name : '')}`;
+                const AfterInput = 'admin' in field && 'components' in field.admin && 'afterInput' in field.admin.components && Array.isArray(field.admin?.components?.afterInput) && /*#__PURE__*/ React.createElement(Fragment, null, field.admin.components.afterInput.map((Component, i)=>/*#__PURE__*/ React.createElement(Component, {
+                        key: i
+                    }))) || null;
+                const BeforeInput = 'admin' in field && field.admin?.components && 'beforeInput' in field.admin.components && Array.isArray(field.admin.components.beforeInput) && /*#__PURE__*/ React.createElement(Fragment, null, field.admin.components.beforeInput.map((Component, i)=>/*#__PURE__*/ React.createElement(Component, {
+                        key: i
+                    }))) || null;
+                const labelProps = {
+                    label: 'label' in field && !isPlainFunction(field.label) && !isReactComponent(field.label) ? field.label : undefined,
+                    required: 'required' in field ? field.required : undefined
+                };
+                const CustomLabelComponent = 'admin' in field && field.admin?.components && 'Label' in field.admin.components && field.admin?.components?.Label || undefined;
+                const CustomLabel = CustomLabelComponent !== undefined ? /*#__PURE__*/ React.createElement(CustomLabelComponent, labelProps || {}) : undefined;
+                const descriptionProps = {
+                    description: field.admin && 'description' in field.admin && ((typeof field.admin?.description === 'string' || typeof field.admin?.description === 'object') && field.admin.description || typeof field.admin?.description === 'function' && isPlainFunction(field.admin?.description) && field.admin?.description({
+                        t
+                    })) || undefined
+                };
+                const CustomDescriptionComponent = field.admin && 'description' in field.admin && (isReactComponent(field.admin.description) && field.admin.description || field.admin.description && FieldDescription) || undefined;
+                const CustomDescription = CustomDescriptionComponent !== undefined ? /*#__PURE__*/ React.createElement(CustomDescriptionComponent, descriptionProps || {}) : undefined;
+                const errorProps = {
+                    path
+                };
+                const CustomErrorComponent = 'admin' in field && field.admin?.components && 'Error' in field.admin.components && field.admin?.components?.Error || undefined;
+                const CustomError = CustomErrorComponent !== undefined ? /*#__PURE__*/ React.createElement(CustomErrorComponent, errorProps || {}) : undefined;
+                const baseFieldProps = {
+                    AfterInput,
+                    BeforeInput,
+                    CustomDescription,
+                    CustomError,
+                    CustomLabel,
+                    descriptionProps,
+                    disabled: 'admin' in field && 'disabled' in field.admin ? field.admin?.disabled : false,
+                    errorProps,
+                    labelProps,
+                    path,
+                    required: 'required' in field ? field.required : undefined
+                };
+                let fieldComponentProps;
+                let fieldOptions;
+                if ('options' in field) {
+                    fieldOptions = field.options.map((option)=>{
+                        if (typeof option === 'object' && typeof option.label === 'function') {
+                            return {
+                                label: option.label({
+                                    t: i18n.t
+                                }),
+                                value: option.value
+                            };
+                        }
+                        return option;
+                    });
+                }
+                const cellComponentProps = {
+                    name: 'name' in field ? field.name : undefined,
+                    fieldType: field.type,
+                    isFieldAffectingData,
+                    label: 'label' in field && field.label && typeof field.label !== 'function' ? field.label : undefined,
+                    labels: 'labels' in field ? field.labels : undefined,
+                    options: 'options' in field ? fieldOptions : undefined,
+                    relationTo: 'relationTo' in field ? field.relationTo : undefined
+                };
+                switch(field.type){
+                    case 'array':
+                        {
+                            let CustomRowLabel;
+                            if ('admin' in field && field.admin.components && 'RowLabel' in field.admin.components && field.admin.components.RowLabel && isReactComponent(field.admin.components.RowLabel)) {
+                                const CustomRowLabelComponent = field.admin.components.RowLabel;
+                                CustomRowLabel = /*#__PURE__*/ React.createElement(CustomRowLabelComponent, null);
+                            }
+                            const arrayFieldProps = {
+                                ...baseFieldProps,
+                                name: field.name,
+                                CustomRowLabel,
+                                className: field.admin?.className,
+                                disabled: field.admin?.disabled,
+                                fieldMap: mapFields({
+                                    config,
+                                    fieldSchema: field.fields,
+                                    filter,
+                                    i18n,
+                                    parentPath: path,
+                                    readOnly: readOnlyOverride
+                                }),
+                                label: field?.label,
+                                labels: field.labels,
+                                maxRows: field.maxRows,
+                                minRows: field.minRows,
+                                readOnly: field.admin?.readOnly,
+                                required: field.required,
+                                style: field.admin?.style,
+                                width: field.admin?.width
+                            };
+                            fieldComponentProps = arrayFieldProps;
+                            break;
+                        }
+                    case 'blocks':
+                        {
+                            const blocks = field.blocks.map((block)=>{
+                                const blockFieldMap = mapFields({
+                                    config,
+                                    fieldSchema: block.fields,
+                                    filter,
+                                    i18n,
+                                    parentPath: `${path}.${block.slug}`,
+                                    readOnly: readOnlyOverride
+                                });
+                                const reducedBlock = {
+                                    slug: block.slug,
+                                    fieldMap: blockFieldMap,
+                                    imageAltText: block.imageAltText,
+                                    imageURL: block.imageURL,
+                                    labels: block.labels
+                                };
+                                return reducedBlock;
+                            });
+                            const blocksField = {
+                                ...baseFieldProps,
+                                name: field.name,
+                                blocks,
+                                className: field.admin?.className,
+                                disabled: field.admin?.disabled,
+                                label: field?.label,
+                                labels: field.labels,
+                                maxRows: field.maxRows,
+                                minRows: field.minRows,
+                                readOnly: field.admin?.readOnly,
+                                required: field.required,
+                                style: field.admin?.style,
+                                width: field.admin?.width
+                            };
+                            fieldComponentProps = blocksField;
+                            cellComponentProps.blocks = field.blocks.map((b)=>({
+                                    slug: b.slug,
+                                    labels: b.labels
+                                }));
+                            break;
+                        }
+                    case 'checkbox':
+                        {
+                            const checkboxField = {
+                                ...baseFieldProps,
+                                name: field.name,
+                                className: field.admin?.className,
+                                disabled: field.admin?.disabled,
+                                label: field.label,
+                                readOnly: field.admin?.readOnly,
+                                required: field.required,
+                                style: field.admin?.style,
+                                width: field.admin?.width
+                            };
+                            fieldComponentProps = checkboxField;
+                            break;
+                        }
+                    case 'code':
+                        {
+                            const codeField = {
+                                ...baseFieldProps,
+                                name: field.name,
+                                className: field.admin?.className,
+                                disabled: field.admin?.disabled,
+                                editorOptions: field.admin?.editorOptions,
+                                label: field.label,
+                                language: field.admin?.language,
+                                readOnly: field.admin?.readOnly,
+                                required: field.required,
+                                style: field.admin?.style,
+                                width: field.admin?.width
+                            };
+                            fieldComponentProps = codeField;
+                            break;
+                        }
+                    case 'collapsible':
+                        {
+                            let CustomCollapsibleLabel;
+                            if (isReactComponent(field.label) || isPlainFunction(field.label)) {
+                                const CustomCollapsibleLabelComponent = field.label;
+                                CustomCollapsibleLabel = /*#__PURE__*/ React.createElement(CustomCollapsibleLabelComponent, null);
+                            }
+                            const collapsibleField = {
+                                ...baseFieldProps,
+                                CustomLabel: CustomCollapsibleLabel,
+                                className: field.admin?.className,
+                                disabled: field.admin?.disabled,
+                                fieldMap: mapFields({
+                                    config,
+                                    disableAddingID: true,
+                                    fieldSchema: field.fields,
+                                    filter,
+                                    i18n,
+                                    parentPath: path,
+                                    readOnly: readOnlyOverride
+                                }),
+                                initCollapsed: field.admin?.initCollapsed,
+                                label: !CustomCollapsibleLabel ? field.label : undefined,
+                                readOnly: field.admin?.readOnly,
+                                required: field.required,
+                                style: field.admin?.style,
+                                width: field.admin?.width
+                            };
+                            fieldComponentProps = collapsibleField // TODO: dunno why this is needed
+                            ;
+                            break;
+                        }
+                    case 'date':
+                        {
+                            const dateField = {
+                                ...baseFieldProps,
+                                name: field.name,
+                                className: field.admin?.className,
+                                date: field.admin?.date,
+                                disabled: field.admin?.disabled,
+                                label: field.label,
+                                placeholder: field.admin?.placeholder,
+                                readOnly: field.admin?.readOnly,
+                                required: field.required,
+                                style: field.admin?.style,
+                                width: field.admin?.width
+                            };
+                            fieldComponentProps = dateField;
+                            cellComponentProps.dateDisplayFormat = field.admin?.date?.displayFormat;
+                            break;
+                        }
+                    case 'email':
+                        {
+                            const emailField = {
+                                ...baseFieldProps,
+                                name: field.name,
+                                className: field.admin?.className,
+                                disabled: field.admin?.disabled,
+                                label: field.label,
+                                placeholder: field.admin?.placeholder,
+                                readOnly: field.admin?.readOnly,
+                                required: field.required,
+                                style: field.admin?.style,
+                                width: field.admin?.width
+                            };
+                            fieldComponentProps = emailField;
+                            break;
+                        }
+                    case 'group':
+                        {
+                            const groupField = {
+                                ...baseFieldProps,
+                                name: field.name,
+                                className: field.admin?.className,
+                                disabled: field.admin?.disabled,
+                                fieldMap: mapFields({
+                                    config,
+                                    disableAddingID: true,
+                                    fieldSchema: field.fields,
+                                    filter,
+                                    i18n,
+                                    parentPath: path,
+                                    readOnly: readOnlyOverride
+                                }),
+                                label: field.label,
+                                readOnly: field.admin?.readOnly,
+                                style: field.admin?.style,
+                                width: field.admin?.width
+                            };
+                            fieldComponentProps = groupField;
+                            break;
+                        }
+                    case 'json':
+                        {
+                            const jsonField = {
+                                ...baseFieldProps,
+                                name: field.name,
+                                className: field.admin?.className,
+                                disabled: field.admin?.disabled,
+                                editorOptions: field.admin?.editorOptions,
+                                label: field.label,
+                                readOnly: field.admin?.readOnly,
+                                required: field.required,
+                                style: field.admin?.style,
+                                width: field.admin?.width
+                            };
+                            fieldComponentProps = jsonField;
+                            break;
+                        }
+                    case 'number':
+                        {
+                            const numberField = {
+                                ...baseFieldProps,
+                                name: field.name,
+                                className: field.admin?.className,
+                                disabled: field.admin?.disabled,
+                                hasMany: field.hasMany,
+                                label: field.label,
+                                max: field.max,
+                                maxRows: field.maxRows,
+                                min: field.min,
+                                readOnly: field.admin?.readOnly,
+                                required: field.required,
+                                step: field.admin?.step,
+                                style: field.admin?.style,
+                                width: field.admin?.width
+                            };
+                            fieldComponentProps = numberField;
+                            break;
+                        }
+                    case 'point':
+                        {
+                            const pointField = {
+                                ...baseFieldProps,
+                                name: field.name,
+                                className: field.admin?.className,
+                                disabled: field.admin?.disabled,
+                                label: field.label,
+                                readOnly: field.admin?.readOnly,
+                                required: field.required,
+                                style: field.admin?.style,
+                                width: field.admin?.width
+                            };
+                            fieldComponentProps = pointField;
+                            break;
+                        }
+                    case 'relationship':
+                        {
+                            const relationshipField = {
+                                ...baseFieldProps,
+                                name: field.name,
+                                allowCreate: field.admin.allowCreate,
+                                className: field.admin?.className,
+                                disabled: field.admin?.disabled,
+                                hasMany: field.hasMany,
+                                label: field.label,
+                                readOnly: field.admin?.readOnly,
+                                relationTo: field.relationTo,
+                                required: field.required,
+                                sortOptions: field.admin.sortOptions,
+                                style: field.admin?.style,
+                                width: field.admin?.width
+                            };
+                            cellComponentProps.relationTo = field.relationTo;
+                            fieldComponentProps = relationshipField;
+                            break;
+                        }
+                    case 'radio':
+                        {
+                            const radioField = {
+                                ...baseFieldProps,
+                                name: field.name,
+                                className: field.admin?.className,
+                                disabled: field.admin?.disabled,
+                                label: field.label,
+                                options: fieldOptions,
+                                readOnly: field.admin?.readOnly,
+                                required: field.required,
+                                style: field.admin?.style,
+                                width: field.admin?.width
+                            };
+                            cellComponentProps.options = fieldOptions;
+                            fieldComponentProps = radioField;
+                            break;
+                        }
+                    case 'richText':
+                        {
+                            const richTextField = {
+                                ...baseFieldProps,
+                                name: field.name,
+                                className: field.admin?.className,
+                                disabled: field.admin?.disabled,
+                                label: field.label,
+                                readOnly: field.admin?.readOnly,
+                                required: field.required,
+                                style: field.admin?.style,
+                                width: field.admin?.width
+                            };
+                            const RichTextFieldComponent = field.editor.FieldComponent;
+                            const RichTextCellComponent = field.editor.CellComponent;
+                            if (typeof field.editor.generateComponentMap === 'function') {
+                                const result = field.editor.generateComponentMap({
+                                    config,
+                                    i18n,
+                                    schemaPath: path
+                                });
+                                richTextField.richTextComponentMap = result;
+                                cellComponentProps.richTextComponentMap = result;
+                            }
+                            if (RichTextFieldComponent) {
+                                CustomFieldComponent = RichTextFieldComponent;
+                            }
+                            if (RichTextCellComponent) {
+                                cellComponentProps.CellComponentOverride = /*#__PURE__*/ React.createElement(RichTextCellComponent, null);
+                            }
+                            fieldComponentProps = richTextField;
+                            break;
+                        }
+                    case 'row':
+                        {
+                            const rowField = {
+                                ...baseFieldProps,
+                                className: field.admin?.className,
+                                disabled: field.admin?.disabled,
+                                fieldMap: mapFields({
+                                    config,
+                                    disableAddingID: true,
+                                    fieldSchema: field.fields,
+                                    filter,
+                                    i18n,
+                                    parentPath: path,
+                                    readOnly: readOnlyOverride
+                                }),
+                                readOnly: field.admin?.readOnly,
+                                required: field.required,
+                                style: field.admin?.style,
+                                width: field.admin?.width
+                            };
+                            fieldComponentProps = rowField;
+                            break;
+                        }
+                    case 'tabs':
+                        {
+                            // `tabs` fields require a field map of each of its tab's nested fields
+                            const tabs = field.tabs.map((tab)=>{
+                                const tabFieldMap = mapFields({
+                                    config,
+                                    disableAddingID: true,
+                                    fieldSchema: tab.fields,
+                                    filter,
+                                    i18n,
+                                    parentPath: path,
+                                    readOnly: readOnlyOverride
+                                });
+                                const reducedTab = {
+                                    name: 'name' in tab ? tab.name : undefined,
+                                    fieldMap: tabFieldMap,
+                                    label: tab.label
+                                };
+                                return reducedTab;
+                            });
+                            const tabsField = {
+                                ...baseFieldProps,
+                                name: 'name' in field ? field.name : undefined,
+                                className: field.admin?.className,
+                                disabled: field.admin?.disabled,
+                                readOnly: field.admin?.readOnly,
+                                required: field.required,
+                                style: field.admin?.style,
+                                tabs,
+                                width: field.admin?.width
+                            };
+                            fieldComponentProps = tabsField;
+                            break;
+                        }
+                    case 'text':
+                        {
+                            const textField = {
+                                ...baseFieldProps,
+                                name: field.name,
+                                className: field.admin?.className,
+                                disabled: field.admin?.disabled,
+                                hasMany: field.hasMany,
+                                label: field.label,
+                                maxLength: field.maxLength,
+                                minLength: field.minLength,
+                                placeholder: field.admin?.placeholder,
+                                readOnly: field.admin?.readOnly,
+                                required: field.required,
+                                style: field.admin?.style,
+                                width: field.admin?.width
+                            };
+                            fieldComponentProps = textField;
+                            break;
+                        }
+                    case 'textarea':
+                        {
+                            const textareaField = {
+                                ...baseFieldProps,
+                                name: field.name,
+                                className: field.admin?.className,
+                                disabled: field.admin?.disabled,
+                                label: field.label,
+                                maxLength: field.maxLength,
+                                minLength: field.minLength,
+                                placeholder: field.admin?.placeholder,
+                                readOnly: field.admin?.readOnly,
+                                required: field.required,
+                                rows: field.admin?.rows,
+                                style: field.admin?.style,
+                                width: field.admin?.width
+                            };
+                            fieldComponentProps = textareaField;
+                            break;
+                        }
+                    case 'ui':
+                        {
+                            fieldComponentProps = baseFieldProps;
+                            break;
+                        }
+                    case 'upload':
+                        {
+                            const uploadField = {
+                                ...baseFieldProps,
+                                name: field.name,
+                                className: field.admin?.className,
+                                disabled: field.admin?.disabled,
+                                filterOptions: field.filterOptions,
+                                label: field.label,
+                                readOnly: field.admin?.readOnly,
+                                relationTo: field.relationTo,
+                                required: field.required,
+                                style: field.admin?.style,
+                                width: field.admin?.width
+                            };
+                            cellComponentProps.relationTo = field.relationTo;
+                            fieldComponentProps = uploadField;
+                            break;
+                        }
+                    case 'select':
+                        {
+                            const selectField = {
+                                ...baseFieldProps,
+                                name: field.name,
+                                className: field.admin?.className,
+                                disabled: field.admin?.disabled,
+                                hasMany: field.hasMany,
+                                isClearable: field.admin?.isClearable,
+                                label: field.label,
+                                options: fieldOptions,
+                                readOnly: field.admin?.readOnly,
+                                required: field.required,
+                                style: field.admin?.style,
+                                width: field.admin?.width
+                            };
+                            cellComponentProps.options = fieldOptions;
+                            fieldComponentProps = selectField;
+                            break;
+                        }
+                    default:
+                        {
+                            break;
+                        }
+                }
+                const reducedField = {
+                    name: 'name' in field ? field.name : undefined,
+                    type: field.type,
+                    CustomCell: CustomCellComponent ? /*#__PURE__*/ React.createElement(CustomCellComponent, cellComponentProps) : undefined,
+                    CustomField: CustomFieldComponent ? /*#__PURE__*/ React.createElement(CustomFieldComponent, fieldComponentProps) : undefined,
+                    cellComponentProps,
+                    disableBulkEdit: 'admin' in field && 'disableBulkEdit' in field.admin && field.admin.disableBulkEdit,
+                    fieldComponentProps,
+                    fieldIsPresentational,
+                    isFieldAffectingData,
+                    isHidden,
+                    isSidebar: 'admin' in field && 'position' in field.admin && field.admin.position === 'sidebar',
+                    localized: 'localized' in field ? field.localized : false,
+                    unique: 'unique' in field ? field.unique : false
+                };
+                acc.push(reducedField);
+            }
+        }
+        return acc;
+    }, []);
+    const hasID = result.findIndex((f)=>'name' in f && f.isFieldAffectingData && f.name === 'id') > -1;
+    if (!disableAddingID && !hasID) {
+        // TODO: For all fields (not just this one) we need to add the name to both .fieldComponentProps.name AND .name. This can probably be improved
+        result.push({
+            name: 'id',
+            type: 'text',
+            CustomField: null,
+            cellComponentProps: {
+                name: 'id'
+            },
+            disableBulkEdit: true,
+            fieldComponentProps: {
+                name: 'id',
+                label: 'ID',
+                labelProps: {
+                    label: 'ID'
+                }
+            },
+            fieldIsPresentational: false,
+            isFieldAffectingData: true,
+            isHidden: true,
+            localized: undefined
+        });
+    }
+    return result;
+};
+
+//# sourceMappingURL=fields.js.map