@payloadcms/ui 3.0.0-canary.a192632 → 3.0.0-canary.a5aaf21

package/dist/providers/Config/createClientConfig/fields.js

@@ -2,298 +2,332 @@ import { MissingEditorProp } from 'payload';
 import { fieldAffectsData, fieldIsPresentationalOnly } from 'payload/shared';
 import { getComponent } from './getComponent.js';
 function generateFieldPath(parentPath, name) {
-    let tabPath = parentPath || '';
-    if (parentPath && name) {
-        tabPath = `${parentPath}.${name}`;
-    } else if (!parentPath && name) {
-        tabPath = name;
-    }
-    return tabPath;
+  let tabPath = parentPath || '';
+  if (parentPath && name) {
+    tabPath = `${parentPath}.${name}`;
+  } else if (!parentPath && name) {
+    tabPath = name;
+  }
+  return tabPath;
 }
-export const createClientField = ({ clientField, createMappedComponent, field: incomingField, i18n, importMap, parentPath, payload })=>{
-    const serverOnlyFieldProperties = [
-        'hooks',
-        'access',
-        'validate',
-        'defaultValue',
-        'filterOptions',
-        'editor',
-        'custom',
-        'typescriptSchema',
-        'dbName',
-        'enumName'
-    ];
-    serverOnlyFieldProperties.forEach((key)=>{
-        if (key in clientField) {
-            delete clientField[key];
-        }
+export const createClientField = ({
+  clientField,
+  createMappedComponent,
+  field: incomingField,
+  i18n,
+  importMap,
+  parentPath,
+  payload
+}) => {
+  const serverOnlyFieldProperties = ['hooks', 'access', 'validate', 'defaultValue', 'filterOptions', 'editor', 'custom', 'typescriptSchema', 'dbName', 'enumName'];
+  serverOnlyFieldProperties.forEach(key => {
+    if (key in clientField) {
+      delete clientField[key];
+    }
+  });
+  if (fieldIsPresentationalOnly(incomingField)) {
+    clientField._isPresentational = true;
+  }
+  const isHidden = 'hidden' in incomingField && incomingField?.hidden;
+  const disabledFromAdmin = incomingField?.admin && 'disabled' in incomingField.admin && incomingField.admin.disabled;
+  if (fieldAffectsData(clientField) && (isHidden || disabledFromAdmin)) {
+    return null;
+  }
+  clientField._schemaPath = generateFieldPath(parentPath, fieldAffectsData(clientField) ? clientField.name : '');
+  if ('label' in clientField && 'label' in incomingField && typeof incomingField.label === 'function') {
+    clientField.label = incomingField.label({
+      t: i18n.t
     });
-    if (fieldIsPresentationalOnly(incomingField)) {
-        clientField._isPresentational = true;
+  }
+  const CustomLabel = 'admin' in incomingField && 'components' in incomingField.admin && 'Label' in incomingField.admin.components && incomingField.admin.components.Label;
+  const serverProps = {
+    serverProps: {
+      clientField: undefined,
+      field: incomingField
     }
-    const isHidden = 'hidden' in incomingField && incomingField?.hidden;
-    const disabledFromAdmin = incomingField?.admin && 'disabled' in incomingField.admin && incomingField.admin.disabled;
-    if (fieldAffectsData(clientField) && (isHidden || disabledFromAdmin)) {
-        return null;
+  };
+  if ('admin' in incomingField && 'width' in incomingField.admin) {
+    clientField.admin.style = {
+      ...clientField.admin.style,
+      '--field-width': clientField.admin.width,
+      width: undefined
+    };
+  } else {
+    if (!(clientField.admin instanceof Object)) {
+      clientField.admin = {};
     }
-    clientField._schemaPath = generateFieldPath(parentPath, fieldAffectsData(clientField) ? clientField.name : '');
-    if ('label' in clientField && 'label' in incomingField && typeof incomingField.label === 'function') {
-        clientField.label = incomingField.label({
-            t: i18n.t
-        });
+    if (!(clientField.admin.style instanceof Object)) {
+      clientField.admin.style = {};
     }
-    const CustomLabel = 'admin' in incomingField && 'components' in incomingField.admin && 'Label' in incomingField.admin.components && incomingField.admin.components.Label;
-    switch(incomingField.type){
-        case 'array':
-        case 'group':
-        case 'collapsible':
-        case 'row':
-            {
-                const field = clientField;
-                field.fields = createClientFields({
-                    clientFields: field.fields,
-                    createMappedComponent,
-                    disableAddingID: incomingField.type !== 'array',
-                    fields: incomingField.fields,
-                    i18n,
-                    importMap,
-                    parentPath: field._schemaPath,
-                    payload
-                });
-                if (incomingField?.admin?.components && 'RowLabel' in incomingField.admin.components) {
-                    field.admin.components.RowLabel = createMappedComponent(incomingField.admin.components.RowLabel, undefined, undefined, 'incomingField.admin.components.RowLabel');
-                }
-                break;
-            }
-        case 'blocks':
-            {
-                const field = clientField;
-                if (incomingField.blocks?.length) {
-                    for(let i = 0; i < incomingField.blocks.length; i++){
-                        const block = incomingField.blocks[i];
-                        const clientBlock = {
-                            slug: block.slug,
-                            admin: {
-                                components: {},
-                                custom: block.admin?.custom
-                            },
-                            fields: field.blocks[i].fields,
-                            imageAltText: block.imageAltText,
-                            imageURL: block.imageURL
-                        };
-                        if (block.labels) {
-                            clientBlock.labels = {};
-                            if (block.labels.singular) {
-                                if (typeof block.labels.singular === 'function') {
-                                    clientBlock.labels.singular = block.labels.singular({
-                                        t: i18n.t
-                                    });
-                                } else {
-                                    clientBlock.labels.singular = block.labels.singular;
-                                }
-                                if (typeof block.labels.plural === 'function') {
-                                    clientBlock.labels.plural = block.labels.plural({
-                                        t: i18n.t
-                                    });
-                                } else {
-                                    clientBlock.labels.plural = block.labels.plural;
-                                }
-                            }
-                        }
-                        if (block.admin?.components?.Label) {
-                            clientBlock.admin.components.Label = createMappedComponent(block.admin.components.Label, undefined, undefined, 'block.admin.components.Label');
-                        }
-                        clientBlock.fields = createClientFields({
-                            clientFields: clientBlock.fields,
-                            createMappedComponent,
-                            fields: block.fields,
-                            i18n,
-                            importMap,
-                            parentPath: `${field._schemaPath}.${block.slug}`,
-                            payload
-                        });
-                        field.blocks[i] = clientBlock;
-                    }
-                }
-                break;
-            }
-        case 'richText':
-            {
-                const field = clientField;
-                if (!incomingField?.editor) {
-                    throw new MissingEditorProp(incomingField) // while we allow disabling editor functionality, you should not have any richText fields defined if you do not have an editor
-                    ;
-                }
-                if (typeof incomingField?.editor === 'function') {
-                    throw new Error('Attempted to access unsanitized rich text editor.');
-                }
-                if (!field.admin) {
-                    field.admin = {};
-                }
-                if (!field.admin.components) {
-                    field.admin.components = {};
-                }
-                field.admin.components.Field = createMappedComponent(incomingField.editor.FieldComponent, undefined, undefined, 'incomingField.editor.FieldComponent');
-                field.admin.components.Cell = createMappedComponent(incomingField.editor.CellComponent, undefined, undefined, 'incomingField.editor.CellComponent');
-                if (incomingField.editor.generateComponentMap) {
-                    const { Component: generateComponentMap, serverProps } = getComponent({
-                        identifier: 'richText-generateComponentMap',
-                        importMap,
-                        payloadComponent: incomingField.editor.generateComponentMap,
-                        silent: true
-                    });
-                    if (generateComponentMap) {
-                        const actualGenerateComponentMap = generateComponentMap(serverProps);
-                        const result = actualGenerateComponentMap({
-                            clientField: field,
-                            createMappedComponent,
-                            field: incomingField,
-                            i18n,
-                            importMap,
-                            payload,
-                            schemaPath: field._schemaPath
-                        });
-                        field.richTextComponentMap = result;
-                    }
+    clientField.admin.style.flex = '1 1 auto';
+  }
+  switch (incomingField.type) {
+    case 'array':
+    case 'group':
+    case 'collapsible':
+    case 'row':
+      {
+        const field = clientField;
+        field.fields = createClientFields({
+          clientFields: field.fields,
+          createMappedComponent,
+          disableAddingID: incomingField.type !== 'array',
+          fields: incomingField.fields,
+          i18n,
+          importMap,
+          parentPath: field._schemaPath,
+          payload
+        });
+        if (incomingField?.admin?.components && 'RowLabel' in incomingField.admin.components) {
+          field.admin.components.RowLabel = createMappedComponent(incomingField.admin.components.RowLabel, serverProps, undefined, 'incomingField.admin.components.RowLabel');
+        }
+        break;
+      }
+    case 'blocks':
+      {
+        const field = clientField;
+        if (incomingField.blocks?.length) {
+          for (let i = 0; i < incomingField.blocks.length; i++) {
+            const block = incomingField.blocks[i];
+            const clientBlock = {
+              slug: block.slug,
+              admin: {
+                components: {},
+                custom: block.admin?.custom
+              },
+              fields: field.blocks[i].fields,
+              imageAltText: block.imageAltText,
+              imageURL: block.imageURL
+            };
+            if (block.labels) {
+              clientBlock.labels = {};
+              if (block.labels.singular) {
+                if (typeof block.labels.singular === 'function') {
+                  clientBlock.labels.singular = block.labels.singular({
+                    t: i18n.t
+                  });
+                } else {
+                  clientBlock.labels.singular = block.labels.singular;
                 }
-                break;
-            }
-        case 'tabs':
-            {
-                const field = clientField;
-                if (incomingField.tabs?.length) {
-                    for(let i = 0; i < incomingField.tabs.length; i++){
-                        const tab = incomingField.tabs[i];
-                        const clientTab = field.tabs[i];
-                        serverOnlyFieldProperties.forEach((key)=>{
-                            if (key in clientTab) {
-                                delete clientTab[key];
-                            }
-                        });
-                        clientTab.fields = createClientFields({
-                            clientFields: clientTab.fields,
-                            createMappedComponent,
-                            disableAddingID: true,
-                            fields: tab.fields,
-                            i18n,
-                            importMap,
-                            parentPath: field._schemaPath,
-                            payload
-                        });
-                    }
+                if (typeof block.labels.plural === 'function') {
+                  clientBlock.labels.plural = block.labels.plural({
+                    t: i18n.t
+                  });
+                } else {
+                  clientBlock.labels.plural = block.labels.plural;
                 }
-                break;
+              }
             }
-        case 'select':
-        case 'radio':
-            {
-                const field = clientField;
-                if (incomingField.options?.length) {
-                    for(let i = 0; i < incomingField.options.length; i++){
-                        const option = incomingField.options[i];
-                        if (typeof option === 'object' && typeof option.label === 'function') {
-                            field.options[i] = {
-                                label: option.label({
-                                    t: i18n.t
-                                }),
-                                value: option.value
-                            };
-                        }
-                    }
-                }
-                break;
+            if (block.admin?.components?.Label) {
+              clientBlock.admin.components.Label = createMappedComponent(block.admin.components.Label, serverProps, undefined, 'block.admin.components.Label');
             }
-        default:
-            break;
-    }
-    const serverOnlyFieldAdminProperties = [
-        'condition'
-    ];
-    if (!clientField.admin) {
-        clientField.admin = {};
-    }
-    if (!clientField.admin.components) {
-        clientField.admin.components = {};
-    }
-    serverOnlyFieldAdminProperties.forEach((key)=>{
-        if (key in clientField.admin) {
-            delete clientField.admin[key];
+            clientBlock.fields = createClientFields({
+              clientFields: clientBlock.fields,
+              createMappedComponent,
+              fields: block.fields,
+              i18n,
+              importMap,
+              parentPath: `${field._schemaPath}.${block.slug}`,
+              payload
+            });
+            field.blocks[i] = clientBlock;
+          }
         }
-    });
-    if (incomingField.admin && 'description' in incomingField.admin) {
-        if (typeof incomingField.admin?.description === 'string' || typeof incomingField.admin?.description === 'object') {
-            clientField.admin.description = incomingField.admin.description;
-        } else if (typeof incomingField.admin?.description === 'function') {
-            clientField.admin.description = incomingField.admin?.description({
-                t: i18n.t
+        break;
+      }
+    case 'richText':
+      {
+        const field = clientField;
+        if (!incomingField?.editor) {
+          throw new MissingEditorProp(incomingField) // while we allow disabling editor functionality, you should not have any richText fields defined if you do not have an editor
+          ;
+        }
+        if (typeof incomingField?.editor === 'function') {
+          throw new Error('Attempted to access unsanitized rich text editor.');
+        }
+        if (!field.admin) {
+          field.admin = {};
+        }
+        if (!field.admin.components) {
+          field.admin.components = {};
+        }
+        field.admin.components.Field = createMappedComponent(incomingField.editor.FieldComponent, serverProps, undefined, 'incomingField.editor.FieldComponent');
+        field.admin.components.Cell = createMappedComponent(incomingField.editor.CellComponent, serverProps, undefined, 'incomingField.editor.CellComponent');
+        if (incomingField.editor.generateComponentMap) {
+          const {
+            Component: generateComponentMap,
+            serverProps: richTextServerProps
+          } = getComponent({
+            identifier: 'richText-generateComponentMap',
+            importMap,
+            payloadComponent: incomingField.editor.generateComponentMap,
+            silent: true
+          });
+          if (generateComponentMap) {
+            const actualGenerateComponentMap = generateComponentMap(richTextServerProps);
+            const result = actualGenerateComponentMap({
+              clientField: field,
+              createMappedComponent,
+              field: incomingField,
+              i18n,
+              importMap,
+              payload,
+              schemaPath: field._schemaPath
             });
+            field.richTextComponentMap = result;
+          }
         }
+        break;
+      }
+    case 'tabs':
+      {
+        const field = clientField;
+        if (incomingField.tabs?.length) {
+          for (let i = 0; i < incomingField.tabs.length; i++) {
+            const tab = incomingField.tabs[i];
+            const clientTab = field.tabs[i];
+            serverOnlyFieldProperties.forEach(key => {
+              if (key in clientTab) {
+                delete clientTab[key];
+              }
+            });
+            clientTab.fields = createClientFields({
+              clientFields: clientTab.fields,
+              createMappedComponent,
+              disableAddingID: true,
+              fields: tab.fields,
+              i18n,
+              importMap,
+              parentPath: field._schemaPath,
+              payload
+            });
+          }
+        }
+        break;
+      }
+    // case 'joins': {
+    //
+    // }
+    case 'select':
+    case 'radio':
+      {
+        const field = clientField;
+        if (incomingField.options?.length) {
+          for (let i = 0; i < incomingField.options.length; i++) {
+            const option = incomingField.options[i];
+            if (typeof option === 'object' && typeof option.label === 'function') {
+              field.options[i] = {
+                label: option.label({
+                  t: i18n.t
+                }),
+                value: option.value
+              };
+            }
+          }
+        }
+        break;
+      }
+    default:
+      break;
+  }
+  const serverOnlyFieldAdminProperties = ['condition'];
+  if (!clientField.admin) {
+    clientField.admin = {};
+  }
+  if (!clientField.admin.components) {
+    clientField.admin.components = {};
+  }
+  serverOnlyFieldAdminProperties.forEach(key => {
+    if (key in clientField.admin) {
+      delete clientField.admin[key];
     }
-    if (incomingField?.admin?.components?.Cell !== undefined) {
-        clientField.admin.components.Cell = createMappedComponent(incomingField.admin.components.Cell, undefined, undefined, 'incomingField.admin.components.Cell');
-    }
-    if (incomingField?.admin?.components && 'Description' in incomingField.admin.components && incomingField?.admin?.components?.Description !== undefined) {
-        clientField.admin.components.Description = createMappedComponent(incomingField.admin.components.Description, undefined, undefined, 'incomingField.admin.components.Description');
-    }
-    if (incomingField?.admin?.components && 'Error' in incomingField.admin.components && incomingField.admin.components.Error !== undefined) {
-        clientField.admin.components.Error = createMappedComponent(incomingField.admin.components.Error, undefined, undefined, 'incomingField.admin.components.Error');
-    }
-    if (incomingField?.admin?.components?.Field !== undefined) {
-        clientField.admin.components.Field = createMappedComponent(incomingField.admin.components.Field, undefined, undefined, 'incomingField.admin.components.Field');
-    }
-    if (incomingField?.admin?.components && 'Filter' in incomingField.admin.components && incomingField.admin.components.Filter !== undefined) {
-        clientField.admin.components.Filter = createMappedComponent(incomingField.admin.components.Filter, undefined, undefined, 'incomingField.admin.components.Filter');
-    }
-    if (incomingField?.admin?.components && 'Label' in incomingField.admin.components && incomingField.admin.components.Label !== undefined) {
-        clientField.admin.components.Label = createMappedComponent(CustomLabel, undefined, undefined, 'incomingField.admin.components.Label');
-    }
-    if (incomingField?.admin?.components && 'beforeInput' in incomingField.admin.components && incomingField.admin.components.beforeInput !== undefined) {
-        clientField.admin.components.beforeInput = createMappedComponent(incomingField.admin?.components?.beforeInput, undefined, undefined, 'incomingField.admin.components.beforeInput');
+  });
+  const fieldServerProps = {
+    serverProps: {
+      clientField,
+      field: incomingField
     }
-    if (incomingField?.admin?.components && 'afterInput' in incomingField.admin.components && incomingField.admin.components.afterInput !== undefined) {
-        clientField.admin.components.afterInput = createMappedComponent(incomingField.admin?.components?.afterInput, undefined, undefined, 'incomingField.admin.components.afterInput');
+  };
+  if (incomingField.admin && 'description' in incomingField.admin) {
+    if (typeof incomingField.admin?.description === 'string' || typeof incomingField.admin?.description === 'object') {
+      clientField.admin.description = incomingField.admin.description;
+    } else if (typeof incomingField.admin?.description === 'function') {
+      clientField.admin.description = incomingField.admin?.description({
+        t: i18n.t
+      });
     }
-    return clientField;
+  }
+  if (incomingField?.admin?.components?.Cell !== undefined) {
+    clientField.admin.components.Cell = createMappedComponent(incomingField.admin.components.Cell, fieldServerProps, undefined, 'incomingField.admin.components.Cell');
+  }
+  if (incomingField?.admin?.components && 'Description' in incomingField.admin.components && incomingField?.admin?.components?.Description !== undefined) {
+    clientField.admin.components.Description = createMappedComponent(incomingField.admin.components.Description, fieldServerProps, undefined, 'incomingField.admin.components.Description');
+  }
+  if (incomingField?.admin?.components && 'Error' in incomingField.admin.components && incomingField.admin.components.Error !== undefined) {
+    clientField.admin.components.Error = createMappedComponent(incomingField.admin.components.Error, fieldServerProps, undefined, 'incomingField.admin.components.Error');
+  }
+  if (incomingField?.admin?.components?.Field !== undefined) {
+    clientField.admin.components.Field = createMappedComponent(incomingField.admin.components.Field, fieldServerProps, undefined, 'incomingField.admin.components.Field');
+  }
+  if (incomingField?.admin?.components && 'Filter' in incomingField.admin.components && incomingField.admin.components.Filter !== undefined) {
+    clientField.admin.components.Filter = createMappedComponent(incomingField.admin.components.Filter, fieldServerProps, undefined, 'incomingField.admin.components.Filter');
+  }
+  if (incomingField?.admin?.components && 'Label' in incomingField.admin.components && incomingField.admin.components.Label !== undefined) {
+    clientField.admin.components.Label = createMappedComponent(CustomLabel, fieldServerProps, undefined, 'incomingField.admin.components.Label');
+  }
+  if (incomingField?.admin?.components && 'beforeInput' in incomingField.admin.components && incomingField.admin.components.beforeInput !== undefined) {
+    clientField.admin.components.beforeInput = createMappedComponent(incomingField.admin?.components?.beforeInput, fieldServerProps, undefined, 'incomingField.admin.components.beforeInput');
+  }
+  if (incomingField?.admin?.components && 'afterInput' in incomingField.admin.components && incomingField.admin.components.afterInput !== undefined) {
+    clientField.admin.components.afterInput = createMappedComponent(incomingField.admin?.components?.afterInput, fieldServerProps, undefined, 'incomingField.admin.components.afterInput');
+  }
+  return clientField;
 };
-export const createClientFields = ({ clientFields, createMappedComponent, disableAddingID, fields, i18n, importMap, parentPath, payload })=>{
-    const newClientFields = [];
-    for(let i = 0; i < fields.length; i++){
-        const field = fields[i];
-        const newField = createClientField({
-            clientField: clientFields[i],
-            createMappedComponent,
-            field,
-            i18n,
-            importMap,
-            parentPath,
-            payload
-        });
-        if (newField) {
-            newClientFields.push({
-                ...newField
-            });
-        }
-    }
-    const hasID = newClientFields.findIndex((f)=>fieldAffectsData(f) && f.name === 'id') > -1;
-    if (!disableAddingID && !hasID) {
-        newClientFields.push({
-            name: 'id',
-            type: payload.db.defaultIDType === 'number' ? 'number' : 'text',
-            _schemaPath: generateFieldPath(parentPath, 'id'),
-            admin: {
-                components: {
-                    Field: null
-                },
-                description: 'The unique identifier for this document',
-                disableBulkEdit: true,
-                hidden: true
-            },
-            hidden: true,
-            label: 'ID',
-            localized: undefined
-        });
+export const createClientFields = ({
+  clientFields,
+  createMappedComponent,
+  disableAddingID,
+  fields,
+  i18n,
+  importMap,
+  parentPath,
+  payload
+}) => {
+  const newClientFields = [];
+  for (let i = 0; i < fields.length; i++) {
+    const field = fields[i];
+    const newField = createClientField({
+      clientField: clientFields[i],
+      createMappedComponent,
+      field,
+      i18n,
+      importMap,
+      parentPath,
+      payload
+    });
+    if (newField) {
+      newClientFields.push(newField);
     }
-    return newClientFields;
+  }
+  const hasID = newClientFields.findIndex(f => fieldAffectsData(f) && f.name === 'id') > -1;
+  if (!disableAddingID && !hasID) {
+    newClientFields.push({
+      name: 'id',
+      type: payload.db.defaultIDType === 'number' ? 'number' : 'text',
+      _schemaPath: generateFieldPath(parentPath, 'id'),
+      admin: {
+        components: {
+          Field: null
+        },
+        description: 'The unique identifier for this document',
+        disableBulkEdit: true,
+        hidden: true
+      },
+      hidden: true,
+      label: 'ID',
+      localized: undefined
+    });
+  }
+  return newClientFields;
 };
-
 //# sourceMappingURL=fields.js.map