feat(base): add support for lazy children to FormFieldSet

sanity-io · Jun 18, 2021 · 2e93f36 · 2e93f36
1 parent f52b6c8
commit 2e93f36
Showing 1 changed file with 12 additions and 5 deletions.
diff --git a/packages/@sanity/base/src/components/formField/FormFieldSet.tsx b/packages/@sanity/base/src/components/formField/FormFieldSet.tsx
@@ -25,7 +25,7 @@ export interface FormFieldSetProps {
    * @beta
    */
   __unstable_presence?: FormFieldPresence[]
-  children: React.ReactNode
+  children: React.ReactNode | (() => React.ReactNode)
   collapsed?: boolean
   collapsible?: boolean
   columns?: number
@@ -39,6 +39,10 @@ export interface FormFieldSetProps {
   title?: React.ReactNode
 }
 
+function getChildren(children: React.ReactNode | (() => React.ReactNode)): React.ReactNode {
+  return typeof children === 'function' ? children() : children
+}
+
 const FOCUS_PATH = [FOCUS_TERMINATOR]
 
 const Root = styled(Box).attrs({forwardedAs: 'fieldset'})`
@@ -123,16 +127,19 @@ export const FormFieldSet = forwardRef(
       if (onToggle) onToggle(!collapsed)
     }, [collapsed, onToggle])
 
-    let content = (
+    let getContent = () => (
       <Grid columns={columns} gapX={4} gapY={5}>
-        {children}
+        {getChildren(children)}
       </Grid>
     )
 
     if (changeIndicator) {
       const changeIndicatorProps = typeof changeIndicator === 'object' ? changeIndicator : {}
 
-      content = <ChangeIndicator {...changeIndicatorProps}>{children}</ChangeIndicator>
+      // eslint-disable-next-line react/display-name
+      getContent = () => (
+        <ChangeIndicator {...changeIndicatorProps}>{getChildren(children)}</ChangeIndicator>
+      )
     }
 
     useEffect(() => {
@@ -185,7 +192,7 @@ export const FormFieldSet = forwardRef(
           ref={forwardedRef}
           tabIndex={tabIndex}
         >
-          {!collapsed && content}
+          {!collapsed && getContent()}
         </Content>
       </Root>
     )