feat(box): add forwardRef

Trendyol · Aug 15, 2024 · 2272fad · 2272fad
1 parent c3aeed4
commit 2272fad
Showing 1 changed file with 23 additions and 18 deletions.
diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx
@@ -34,28 +34,33 @@ const restyleFunctions = composeRestyleFunctions<Theme, RestyleProps>([
 
 export type BoxProps = RNViewProps & RestyleProps;
 
-const Box = ({ testID, accessibilityLabel, accessible, ...rest }: BoxProps) => {
-  const props = useRestyle(restyleFunctions, rest);
+const Box = React.forwardRef(
+  (
+    { testID, accessibilityLabel, accessible, ...rest }: BoxProps,
+    ref: React.ForwardedRef<RNView>,
+  ) => {
+    const props = useRestyle(restyleFunctions, rest);
 
-  const testProps = React.useMemo(() => {
-    const result: RNViewProps = {
-      accessible: false,
-      accessibilityLabel: undefined,
-      testID: undefined,
-    };
+    const testProps = React.useMemo(() => {
+      const result: RNViewProps = {
+        accessible: false,
+        accessibilityLabel: undefined,
+        testID: undefined,
+      };
 
-    if (!(testID || accessibilityLabel)) {
-      return result;
-    }
+      if (!(testID || accessibilityLabel)) {
+        return result;
+      }
 
-    result.accessible = accessible ?? true;
-    result.accessibilityLabel = accessibilityLabel ?? testID;
-    result.testID = testID ?? accessibilityLabel;
+      result.accessible = accessible ?? true;
+      result.accessibilityLabel = accessibilityLabel ?? testID;
+      result.testID = testID ?? accessibilityLabel;
 
-    return result;
-  }, [testID, accessibilityLabel, accessible]);
+      return result;
+    }, [testID, accessibilityLabel, accessible]);
 
-  return <RNView {...props} {...testProps} />;
-};
+    return <RNView {...props} {...testProps} ref={ref} />;
+  },
+);
 
 export default Box;