Merge branch 'master' of github.com:payloadcms/payload into feat/form-onchange

src/admin/components/elements/PreviewButton/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useAuth } from '@payloadcms/config-provider';
 import Button from '../Button';
 import { Props } from './types';
@@ -6,13 +6,34 @@ import { useLocale } from '../../utilities/Locale';
 
 const baseClass = 'preview-btn';
 
-const PreviewButton: React.FC<Props> = ({ generatePreviewURL, data }) => {
+const PreviewButton: React.FC<Props> = (props) => {
+  const {
+    generatePreviewURL,
+    data
+  } = props;
+
+  const [url, setUrl] = useState<string | undefined>(undefined);
+
   const locale = useLocale();
   const { token } = useAuth();
 
-  if (generatePreviewURL && typeof generatePreviewURL === 'function') {
-    const url = generatePreviewURL(data, { locale, token });
+  useEffect(() => {
+    if (generatePreviewURL && typeof generatePreviewURL === 'function') {
+      const makeRequest = async () => {
+        const previewURL = await generatePreviewURL(data, { locale, token });
+        setUrl(previewURL);
+      }
 
+      makeRequest();
+    }
+  }, [
+    generatePreviewURL,
+    locale,
+    token,
+    data
+  ]);
+
+  if (url) {
     return (
       <Button
         el="anchor"

src/admin/components/forms/FieldDescription/types.ts

@@ -2,9 +2,9 @@ import React from 'react';
 
 export type DescriptionFunction = (value: unknown) => string
 
-export type DescriptionComponent = React.ComponentType<{value: unknown}>
+export type DescriptionComponent = React.ComponentType<{ value: unknown }>
 
-type Description = string | DescriptionFunction | DescriptionComponent
+export type Description = string | DescriptionFunction | DescriptionComponent
 
 export type Props = {
   description?: Description

src/admin/components/forms/field-types/Array/types.ts

@@ -1,7 +1,8 @@
 import { Data } from '../../Form/types';
-import { ArrayField, Labels, Field, Description } from '../../../../../fields/config/types';
+import { ArrayField, Labels, Field } from '../../../../../fields/config/types';
 import { FieldTypes } from '..';
 import { FieldPermissions } from '../../../../../auth/types';
+import { Description } from '../../FieldDescription/types';
 
 export type Props = Omit<ArrayField, 'type'> & {
   path?: string

src/admin/components/forms/field-types/Blocks/types.ts

@@ -1,7 +1,8 @@
 import { Data } from '../../Form/types';
-import { BlockField, Labels, Block, Description } from '../../../../../fields/config/types';
+import { BlockField, Labels, Block } from '../../../../../fields/config/types';
 import { FieldTypes } from '..';
 import { FieldPermissions } from '../../../../../auth/types';
+import { Description } from '../../FieldDescription/types';
 
 export type Props = Omit<BlockField, 'type'> & {
   path?: string

src/admin/components/forms/field-types/Password/types.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Description, Validate } from '../../../../../fields/config/types';
+import { Validate } from '../../../../../fields/config/types';
+import { Description } from '../../FieldDescription/types';
 
 export type Props = {
   autoComplete?: string