feat: add component support to field description

src/admin/components/forms/FieldDescription/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Props } from './types';
+import { Props, isComponent } from './types';
 import './index.scss';
 
 const FieldDescription: React.FC<Props> = (props) => {
@@ -8,6 +8,12 @@ const FieldDescription: React.FC<Props> = (props) => {
     value,
   } = props;
 
+
+  if (isComponent(description)) {
+    const Description = description;
+    return <Description value={value} />;
+  }
+
   if (description) {
     return (
       <div

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

@@ -1,4 +1,16 @@
+import React from 'react';
+
+export type DescriptionFunction = (value: unknown) => string
+
+export type DescriptionComponent = React.ComponentType<{value: unknown}>
+
+type Description = string | DescriptionFunction | DescriptionComponent
+
 export type Props = {
-  description?: string | ((value) => string);
+  description?: Description
   value: unknown;
 }
+
+export function isComponent(description: Description): description is DescriptionComponent {
+  return React.isValidElement(description);
+}

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

@@ -178,7 +178,7 @@ const RenderArray = React.memo((props: RenderArrayProps) => {
         <header className={`${baseClass}__header`}>
           <h3>{label}</h3>
           <FieldDescription
-            value={value || []}
+            value={value}
             description={description}
           />
         </header>

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

@@ -228,7 +228,7 @@ const RenderBlocks = React.memo((props: RenderBlockProps) => {
         <header className={`${baseClass}__header`}>
           <h3>{label}</h3>
           <FieldDescription
-            value={value || []}
+            value={value}
             description={description}
           />
         </header>

src/admin/components/forms/field-types/Code/Code.tsx

@@ -97,7 +97,7 @@ const Code: React.FC<Props> = (props) => {
         }}
       />
       <FieldDescription
-        value={value || ''}
+        value={value}
         description={description}
       />
     </div>

src/admin/components/forms/field-types/DateTime/index.tsx

@@ -83,7 +83,7 @@ const DateTime: React.FC<Props> = (props) => {
         />
       </div>
       <FieldDescription
-        value={value || new Date()}
+        value={value}
         description={description}
       />
     </div>

src/admin/components/forms/field-types/Email/index.tsx

@@ -83,7 +83,7 @@ const Email: React.FC<Props> = (props) => {
         autoComplete={autoComplete}
       />
       <FieldDescription
-        value={value || ''}
+        value={value}
         description={description}
       />
     </div>

src/admin/components/forms/field-types/Number/index.tsx

@@ -93,7 +93,7 @@ const NumberField: React.FC<Props> = (props) => {
         step={step}
       />
       <FieldDescription
-        value={value || 0}
+        value={value}
         description={description}
       />
     </div>

src/admin/components/forms/field-types/RichText/RichText.tsx

@@ -302,7 +302,7 @@ const RichText: React.FC<Props> = (props) => {
           </div>
         </Slate>
         <FieldDescription
-          value={value || ''}
+          value={value}
           description={description}
         />
       </div>

src/admin/components/forms/field-types/Select/index.tsx

@@ -113,7 +113,7 @@ const Select: React.FC<Props> = (props) => {
         isMulti={hasMany}
       />
       <FieldDescription
-        value={value || ''}
+        value={value}
         description={description}
       />
     </div>

src/admin/components/forms/field-types/Text/index.tsx

@@ -67,7 +67,7 @@ const Text: React.FC<Props> = (props) => {
         required={required}
       />
       <input
-        value={value || ''}
+        value={value}
         onChange={setValue}
         disabled={readOnly}
         placeholder={placeholder}
@@ -76,7 +76,7 @@ const Text: React.FC<Props> = (props) => {
         name={path}
       />
       <FieldDescription
-        value={value || ''}
+        value={value}
         description={description}
       />
     </div>

src/admin/components/forms/field-types/Textarea/index.tsx

@@ -82,7 +82,7 @@ const Textarea: React.FC<Props> = (props) => {
         rows={rows}
       />
       <FieldDescription
-        value={value || ''}
+        value={value}
         description={description}
       />
     </div>

src/admin/components/forms/field-types/Upload/index.tsx

@@ -164,7 +164,7 @@ const Upload: React.FC<Props> = (props) => {
           }}
           />
           <FieldDescription
-            value={value || ''}
+            value={value}
             description={description}
           />
         </React.Fragment>