Merge pull request #75 from trixtateam/fix/update_children_types

fix: children type props
trixtateam · Oct 10, 2022 · b328afa · b328afa
2 parents 622f515 + 477a5ee
commit b328afa
Show file tree

Hide file tree

Showing 11 changed files with 26 additions and 27 deletions.
diff --git a/src/React/components/TrixtaAuthComponent/TrixtaAuthComponent.tsx b/src/React/components/TrixtaAuthComponent/TrixtaAuthComponent.tsx
@@ -11,22 +11,13 @@ import { TrixtaAuthProps } from './types';
 const TrixtaAuthComponent = ({
   children,
   roleName,
-  ...rest
-}: TrixtaAuthProps & { children: React.ReactNode }): JSX.Element | null => {
+}: TrixtaAuthProps): React.ReactElement | null => {
   const roleAccessSelector = useMemo(makeSelectHasTrixtaRoleAccessForRole, []);
   const hasRoleAccess = useSelector((state: { trixta: TrixtaState }) =>
     roleAccessSelector(state, { roleName }),
   );
 
   if (!hasRoleAccess) return null;
-
-  if (typeof children === 'function') {
-    return children(rest);
-  }
-
-  if (React.isValidElement(children)) {
-    return React.cloneElement(children, rest);
-  }
-  return null;
+  return typeof children === 'function' ? children() : <>{children}</>;
 };
 export default TrixtaAuthComponent;
diff --git a/src/React/components/TrixtaAuthComponent/types.ts b/src/React/components/TrixtaAuthComponent/types.ts
@@ -6,5 +6,5 @@ export interface TrixtaAuthProps {
   /**
    * Children can be a render props function or a react component
    */
-  children?: React.ReactNode;
+  children?: React.ReactNode | (() => React.ReactNode);
 }
diff --git a/src/React/components/TrixtaFormComponent/index.tsx b/src/React/components/TrixtaFormComponent/index.tsx
@@ -35,7 +35,7 @@ function TrixtaFormComponent<TFormData = never>({
   formData,
   uiSchema,
   formContext,
-}: TrixtaReactJsonSchemaFormProps<TFormData>): JSX.Element {
+}: TrixtaReactJsonSchemaFormProps<TFormData>): React.ReactElement {
   if (ThemedForm) {
     const { formContext: formContextThemeProp, ...formProps } = config.props;
     return (

diff --git a/src/React/components/actions/TrixtaActionComponent/TrixtaActionComponent.tsx b/src/React/components/actions/TrixtaActionComponent/TrixtaActionComponent.tsx
@@ -60,12 +60,12 @@ function TrixtaActionComponent({
   };
 
   if (!renderResponse) {
-    if (React.isValidElement(children)) {
-      return React.cloneElement(children, { ...actionProps, ...rest });
-    }
     if (typeof children === 'function') {
       return children({ ...actionProps, ...rest });
     }
+    if (React.isValidElement(children)) {
+      return React.cloneElement(children, { ...actionProps, ...rest });
+    }
 
     if (!children && common) {
       const formData =

diff --git a/src/React/components/actions/TrixtaActionComponent/types.ts b/src/React/components/actions/TrixtaActionComponent/types.ts
@@ -2,6 +2,7 @@ import {
   TrixtaActionBaseProps,
   TrixtaActionDebugOptions,
 } from '../../../types';
+import { TrixtaActionComponentArgs } from '../types';
 
 export interface TrixtaActionComponentProps extends TrixtaActionBaseProps {
   /**
@@ -60,5 +61,7 @@ export interface TrixtaActionComponentProps extends TrixtaActionBaseProps {
   /**
    * Children can be a render props function or a react component
    */
-  children?: React.ReactNode;
+  children?:
+    | React.ReactNode
+    | ((props: TrixtaActionComponentArgs) => React.ReactNode);
 }
diff --git a/src/React/components/actions/TrixtaActionResponseComponent/types.ts b/src/React/components/actions/TrixtaActionResponseComponent/types.ts
@@ -9,5 +9,7 @@ export interface TrixtaActionResponseComponentProps
   /**
    * Children can be a render props function or a react component
    */
-  children?: React.ReactNode;
+  children?:
+    | React.ReactNode
+    | ((props: TrixtaActionResponseComponentArgs) => React.ReactNode);
 }
diff --git a/src/React/components/reactions/RespondToReactionsComponent/RespondToReactionsComponent.tsx b/src/React/components/reactions/RespondToReactionsComponent/RespondToReactionsComponent.tsx
@@ -16,7 +16,7 @@ import { RespondToReactionsComponentProps } from './types';
 export const RespondToReactionsComponent = ({
   roleName,
   reactions,
-}: RespondToReactionsComponentProps): JSX.Element => (
+}: RespondToReactionsComponentProps): React.ReactElement => (
   <>
     {reactions.map((reaction) => (
       <RespondToReactionComponent

diff --git a/src/React/components/reactions/TrixtaReactionComponent/types.ts b/src/React/components/reactions/TrixtaReactionComponent/types.ts
@@ -38,12 +38,12 @@ export interface TrixtaReactionComponentProps extends TrixtaReactionBaseProps {
    * Enables Trixta console debugging
    */
   debugMode?: boolean;
-  /**
-   * Children can be a render props function or a react component
-   */
-  children?: React.ReactNode;
   /**
    * Default component to render if there are no Trixta reaction response instances
    */
   defaultComponent?: React.ReactNode;
+  /**
+   * Children can be a render props function or a react component
+   */
+  children?: React.ReactNode;
 }
diff --git a/src/React/components/reactions/TrixtaReactionInstanceComponent/types.ts b/src/React/components/reactions/TrixtaReactionInstanceComponent/types.ts
@@ -1,4 +1,5 @@
 import { TrixtaCommon, TrixtaReactionBaseProps } from '../../../types';
+import { TrixtaReactionComponentArgs } from '../types';
 
 export interface TrixtaReactionInstanceComponentProps
   extends TrixtaReactionBaseProps {
@@ -38,9 +39,11 @@ export interface TrixtaReactionInstanceComponentProps
    * Enables Trixta console debbugging. If 'true', open the console and see verbose logging
    */
   debugMode: boolean;
+  instanceRef: string;
   /**
    * Children can be a render props function or a react component
    */
-  children?: React.ReactNode;
-  instanceRef: string;
+  children?:
+    | React.ReactNode
+    | ((props: TrixtaReactionComponentArgs) => React.ReactNode);
 }
diff --git a/src/React/widgets/TrixtaLoginWidget/TrixtaLoginWidget.tsx b/src/React/widgets/TrixtaLoginWidget/TrixtaLoginWidget.tsx
@@ -9,7 +9,7 @@ import { TrixtaLoginWidgetProps } from './types';
  */
 const TrixtaLoginWidget = (
   props: TrixtaLoginWidgetProps,
-): JSX.Element | null => {
+): React.ReactElement | null => {
   return (
     <TrixtaActionComponent
       roleName={ReservedTrixtaRoles.EVERYONE_ANON}

diff --git a/src/stories/utils/FormComponent.tsx b/src/stories/utils/FormComponent.tsx
@@ -16,7 +16,7 @@ function TrixtaFormComponent<TFormData = never>({
   formData,
   uiSchema,
   formContext,
-}: TrixtaReactJsonSchemaFormProps<TFormData>): JSX.Element {
+}: TrixtaReactJsonSchemaFormProps<TFormData>): React.ReactElement {
   if (ThemedForm) {
     return (
       <ThemedForm