From 1a8e1d0871b45975bf1d6af2e6e7e5cec17206dd Mon Sep 17 00:00:00 2001
From: anuraghazra <anurag.hazra@razorpay.com>
Date: Thu, 22 Feb 2024 15:01:46 +0530
Subject: [PATCH] refactor: use react context

---
 .../components/Breadcrumb/Breadcrumb.web.tsx  | 75 ++++++++++---------
 .../Breadcrumb/BreadcrumbContext.tsx          | 10 +++
 .../Breadcrumb/BreadcrumbItem.web.tsx         | 25 +++----
 3 files changed, 63 insertions(+), 47 deletions(-)
 create mode 100644 packages/blade/src/components/Breadcrumb/BreadcrumbContext.tsx

diff --git a/packages/blade/src/components/Breadcrumb/Breadcrumb.web.tsx b/packages/blade/src/components/Breadcrumb/Breadcrumb.web.tsx
index 00fae34c966..326fdfd0f3b 100644
--- a/packages/blade/src/components/Breadcrumb/Breadcrumb.web.tsx
+++ b/packages/blade/src/components/Breadcrumb/Breadcrumb.web.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable react-native-a11y/has-valid-accessibility-role */
 import React from 'react';
 import type { BreadcrumbProps } from './types';
+import { BreadcrumbContext } from './BreadcrumbContext';
 import BaseBox from '~components/Box/BaseBox';
 import { Text } from '~components/Typography';
 import { makeAccessible } from '~utils/makeAccessible';
@@ -22,7 +23,7 @@ const Separator = ({
   );
 };
 
-const listStyle = { listStyle: 'none' };
+const listStyleNone = { listStyle: 'none' };
 
 const Breadcrumb = ({
   size = 'medium',
@@ -32,42 +33,48 @@ const Breadcrumb = ({
   children,
   ...styledProps
 }: BreadcrumbProps): React.ReactElement => {
+  const contextValue = React.useMemo(() => ({ size, color }), [size, color]);
+
   return (
     <BaseBox as="nav" {...getStyledProps(styledProps)}>
-      <BaseBox
-        as="ol"
-        margin="spacing.0"
-        padding="spacing.0"
-        display="flex"
-        flexWrap="wrap"
-        gap="spacing.3"
-        alignItems="center"
-        style={listStyle}
-        {...makeAccessible({ label: accessibilityLabel })}
-      >
-        {React.Children.map(children, (child, index) => {
-          return (
-            <BaseBox
-              key={index}
-              as="li"
-              display="flex"
-              alignItems="center"
-              gap="spacing.3"
-              {...makeAccessible({
-                current: (child as React.ReactElement)?.props?.isCurrentPage ? 'page' : undefined,
-              })}
-            >
-              {React.cloneElement(child as React.ReactElement, { _size: size, _color: color })}
-              <BaseBox as="span" {...makeAccessible({ hidden: true })}>
-                {index !== React.Children.count(children) - 1 && <Separator size={size} />}
-                {index === React.Children.count(children) - 1 && showLastSeparator && (
-                  <Separator size={size} color={color} />
-                )}
+      <BreadcrumbContext.Provider value={contextValue}>
+        <BaseBox
+          as="ol"
+          margin="spacing.0"
+          padding="spacing.0"
+          display="flex"
+          flexWrap="wrap"
+          gap="spacing.3"
+          alignItems="center"
+          style={listStyleNone}
+          {...makeAccessible({ label: accessibilityLabel })}
+        >
+          {React.Children.map(children, (child, index) => {
+            const ariaCurrent = (child as React.ReactElement)?.props?.isCurrentPage
+              ? 'page'
+              : undefined;
+
+            return (
+              <BaseBox
+                key={index}
+                as="li"
+                display="flex"
+                alignItems="center"
+                gap="spacing.3"
+                {...makeAccessible({ current: ariaCurrent })}
+              >
+                {child}
+                <BaseBox as="span" {...makeAccessible({ hidden: true })}>
+                  {index !== React.Children.count(children) - 1 && <Separator size={size} />}
+                  {index === React.Children.count(children) - 1 && showLastSeparator && (
+                    <Separator size={size} color={color} />
+                  )}
+                </BaseBox>
               </BaseBox>
-            </BaseBox>
-          );
-        })}
-      </BaseBox>
+            );
+          })}
+        </BaseBox>
+      </BreadcrumbContext.Provider>
     </BaseBox>
   );
 };
diff --git a/packages/blade/src/components/Breadcrumb/BreadcrumbContext.tsx b/packages/blade/src/components/Breadcrumb/BreadcrumbContext.tsx
new file mode 100644
index 00000000000..ade158efe70
--- /dev/null
+++ b/packages/blade/src/components/Breadcrumb/BreadcrumbContext.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import type { BreadcrumbProps } from './types';
+
+type BreadcrumbContextValue = Pick<BreadcrumbProps, 'color' | 'size'>;
+const BreadcrumbContext = React.createContext<BreadcrumbContextValue>({
+  size: 'medium',
+  color: 'primary',
+});
+
+export { BreadcrumbContext };
diff --git a/packages/blade/src/components/Breadcrumb/BreadcrumbItem.web.tsx b/packages/blade/src/components/Breadcrumb/BreadcrumbItem.web.tsx
index b5c89d281a1..4f7ca269893 100644
--- a/packages/blade/src/components/Breadcrumb/BreadcrumbItem.web.tsx
+++ b/packages/blade/src/components/Breadcrumb/BreadcrumbItem.web.tsx
@@ -1,34 +1,33 @@
-import type { BreadcrumbItemProps, BreadcrumbProps } from './types';
+import React from 'react';
+import type { BreadcrumbItemProps } from './types';
+import { BreadcrumbContext } from './BreadcrumbContext';
 import { BaseLink } from '~components/Link/BaseLink';
 import { Text } from '~components/Typography';
 import BaseBox from '~components/Box/BaseBox';
 
 const BreadcrumbItem = ({
-  _size,
-  _color,
   children,
   href,
   icon: Icon,
   isCurrentPage,
   onClick,
   accessibilityLabel,
-}: BreadcrumbItemProps & {
-  _size?: BreadcrumbProps['size'];
-  _color?: BreadcrumbProps['color'];
-}): React.ReactElement => {
+}: BreadcrumbItemProps): React.ReactElement => {
+  const { color, size } = React.useContext(BreadcrumbContext);
+
   if (isCurrentPage) {
-    const isWhite = _color === 'white';
+    const isWhite = color === 'white';
     return (
       <BaseBox display="flex" gap="spacing.2" alignItems="center">
         {Icon && (
           <Icon
-            size={_size}
+            size={size}
             color={isWhite ? 'surface.icon.staticWhite.normal' : 'surface.icon.gray.normal'}
           />
         )}
         <Text
           weight="medium"
-          size={_size}
+          size={size}
           color={isWhite ? 'surface.text.staticWhite.normal' : 'surface.text.gray.normal'}
         >
           {children}
@@ -39,9 +38,9 @@ const BreadcrumbItem = ({
 
   return (
     <BaseLink
-      size={_size}
-      color={_color}
-      opacity={_color !== 'primary' ? 0.5 : 1}
+      size={size}
+      color={color}
+      opacity={color !== 'primary' ? 0.5 : 1}
       icon={Icon}
       href={href}
       onClick={onClick}