fix: infer component props in makeDecoratable

webiny · Apr 5, 2024 · eff32b4 · eff32b4
1 parent dfaed51
commit eff32b4
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 42 deletions.
diff --git a/packages/app-admin/src/base/ui/FileManager.tsx b/packages/app-admin/src/base/ui/FileManager.tsx
@@ -123,10 +123,7 @@ export const FileManager = ({ children, render, onChange, ...rest }: FileManager
                     // @ts-expect-error
                     <FileManagerRenderer
                         onClose={() => setShow(false)}
-                        onChange={
-                            /* TODO: figure out how to create a conditional type based on the value of `rest.multiple` */
-                            onChangeRef.current
-                        }
+                        onChange={onChangeRef.current}
                         {...rest}
                     />,
                     containerRef.current

diff --git a/...ges/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/dynamicZoneRenderer.tsx b/...ges/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/dynamicZoneRenderer.tsx
@@ -31,37 +31,40 @@ export type DynamicZoneContainerProps = {
     className?: string;
 };
 
-export const DynamicZoneContainer = makeDecoratable<
-    React.FunctionComponent<DynamicZoneContainerProps>
->("DynamicZoneContainer", props => {
-    const {
-        field,
-        bind: {
-            validation: { isValid, message }
-        },
-        title = field.label,
-        description = field.helpText,
-        className,
-        children
-    } = props;
+export const DynamicZoneContainer = makeDecoratable(
+    "DynamicZoneContainer",
+    (props: DynamicZoneContainerProps) => {
+        const {
+            field,
+            bind: {
+                validation: { isValid, message }
+            },
+            title = field.label,
+            description = field.helpText,
+            className,
+            children
+        } = props;
 
-    const defaultClassName = field.multipleValues ? noBottomPadding : undefined;
+        const defaultClassName = field.multipleValues ? noBottomPadding : undefined;
 
-    return (
-        <>
-            <Accordion>
-                <AccordionItem
-                    title={title}
-                    description={description}
-                    className={className || defaultClassName}
-                >
-                    {children}
-                </AccordionItem>
-            </Accordion>
-            {isValid === false && <FormElementMessage error={true}>{message}</FormElementMessage>}
-        </>
-    );
-});
+        return (
+            <>
+                <Accordion>
+                    <AccordionItem
+                        title={title}
+                        description={description}
+                        className={className || defaultClassName}
+                    >
+                        {children}
+                    </AccordionItem>
+                </Accordion>
+                {isValid === false && (
+                    <FormElementMessage error={true}>{message}</FormElementMessage>
+                )}
+            </>
+        );
+    }
+);
 
 const DynamicZoneContent = ({ field, getBind, contentModel }: CmsModelFieldRendererProps) => {
     const templates = field.settings?.templates || [];

diff --git a/packages/react-composition/src/makeDecoratable.tsx b/packages/react-composition/src/makeDecoratable.tsx
@@ -1,12 +1,6 @@
 import React, { createContext, useContext, useMemo } from "react";
 import { useComponent } from "./Context";
-import {
-    CanReturnNull,
-    DecoratableComponent,
-    DecoratableHook,
-    GenericComponent,
-    GenericHook
-} from "~/types";
+import { DecoratableComponent, DecoratableHook, GenericComponent, GenericHook } from "~/types";
 import { withDecoratorFactory, withHookDecoratorFactory } from "~/decorators";
 
 const ComposableContext = createContext<string[]>([]);
@@ -75,11 +69,13 @@ export function createVoidComponent<T>() {
     };
 }
 
-export function makeDecoratable<T extends GenericHook>(hook: T): DecoratableHook<T>;
+export function makeDecoratable<T extends GenericHook>(
+    hook: T
+): ReturnType<typeof makeDecoratableHook<T>>;
 export function makeDecoratable<T extends GenericComponent>(
     name: string,
     Component: T
-): DecoratableComponent<CanReturnNull<T>>;
+): ReturnType<typeof makeDecoratableComponent<T>>;
 export function makeDecoratable(hookOrName: any, Component?: any) {
     if (Component) {
         return makeDecoratableComponent(hookOrName, Component);