Merge pull request #2438 from gluestack/feat/radio-forceMount

feat: added new prop forceMount
gluestack · Sep 3, 2024 · 5bd6cc7 · 5bd6cc7
2 parents 2f5cdba + 009fdb4
commit 5bd6cc7
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 22 deletions.
diff --git a/packages/unstyled/checkbox/src/CheckboxIcon.tsx b/packages/unstyled/checkbox/src/CheckboxIcon.tsx
@@ -2,18 +2,18 @@ import React, { forwardRef } from 'react';
 import { useCheckbox } from './CheckboxProvider';
 
 const CheckboxIcon = (StyledCheckboxIcon: any) =>
-  forwardRef(({ children, ...props }: any, ref?: any) => {
+  forwardRef(({ children, forceMount = false, ...props }: any, ref?: any) => {
     const { isChecked } = useCheckbox('CheckboxContext');
 
-    return (
-      <>
-        {isChecked && (
-          <StyledCheckboxIcon {...props} ref={ref}>
-            {children}
-          </StyledCheckboxIcon>
-        )}
-      </>
-    );
+    if (forceMount || isChecked) {
+      return (
+        <StyledCheckboxIcon {...props} ref={ref}>
+          {children}
+        </StyledCheckboxIcon>
+      );
+    }
+
+    return null;
   });
 
 export default CheckboxIcon;
diff --git a/packages/unstyled/checkbox/src/types.ts b/packages/unstyled/checkbox/src/types.ts
@@ -31,7 +31,8 @@ export type ICheckboxComponentType<Root, Indicator, Icon, Label, Group> =
       React.RefAttributes<Indicator> & React.PropsWithoutRef<Indicator>
     >;
     Icon: React.ForwardRefExoticComponent<
-      React.RefAttributes<Icon> & React.PropsWithoutRef<Icon>
+      React.RefAttributes<Icon> &
+        React.PropsWithoutRef<Icon> & { forceMount?: boolean }
     >;
     Label: React.ForwardRefExoticComponent<
       React.RefAttributes<Label> & React.PropsWithoutRef<Label>

diff --git a/packages/unstyled/radio/src/RadioIcon.tsx b/packages/unstyled/radio/src/RadioIcon.tsx
@@ -2,16 +2,16 @@ import React, { forwardRef } from 'react';
 import { useRadio } from './RadioProvider';
 
 export const RadioIcon = (StyledRadioIcon: any) =>
-  forwardRef(({ children, ...props }: any, ref?: any) => {
+  forwardRef(({ children, forceMount = false, ...props }: any, ref?: any) => {
     const { isChecked } = useRadio('RadioContext');
 
-    return (
-      <>
-        {isChecked && (
-          <StyledRadioIcon {...props} ref={ref}>
-            {children}
-          </StyledRadioIcon>
-        )}
-      </>
-    );
+    if (forceMount || isChecked) {
+      return (
+        <StyledRadioIcon {...props} ref={ref}>
+          {children}
+        </StyledRadioIcon>
+      );
+    }
+
+    return null;
   });
diff --git a/packages/unstyled/radio/src/types.ts b/packages/unstyled/radio/src/types.ts
@@ -34,7 +34,8 @@ export type IRadioComponentType<
       IRadioGroupProps
   >;
   Icon: React.ForwardRefExoticComponent<
-    React.RefAttributes<IconProps> & React.PropsWithoutRef<IconProps>
+    React.RefAttributes<IconProps> &
+      React.PropsWithoutRef<IconProps> & { forceMount?: boolean }
   >;
   Indicator: React.ForwardRefExoticComponent<
     React.RefAttributes<IndicatorProps> & React.PropsWithoutRef<IndicatorProps>