From c4ff5782b0a9e216d1f115bf4b25322361d72a22 Mon Sep 17 00:00:00 2001
From: Daksh Bhardwaj <daksh@plgworks.com>
Date: Wed, 17 Aug 2022 12:28:28 +0530
Subject: [PATCH 1/4] feat: added loading icon in searchBar

---
 example/src/Examples/SearchbarExample.tsx |  9 ++++
 src/components/Searchbar.tsx              | 60 +++++++++++++++--------
 2 files changed, 49 insertions(+), 20 deletions(-)

diff --git a/example/src/Examples/SearchbarExample.tsx b/example/src/Examples/SearchbarExample.tsx
index bd18bbe270..9d68d4ba16 100644
--- a/example/src/Examples/SearchbarExample.tsx
+++ b/example/src/Examples/SearchbarExample.tsx
@@ -12,6 +12,7 @@ const SearchExample = ({ navigation }: Props) => {
   const [firstQuery, setFirstQuery] = React.useState<string>('');
   const [secondQuery, setSecondQuery] = React.useState<string>('');
   const [thirdQuery, setThirdQuery] = React.useState<string>('');
+  const [fourthQuery, setFourthQuery] = React.useState<string>('');
 
   const { isV3 } = useTheme();
 
@@ -44,6 +45,14 @@ const SearchExample = ({ navigation }: Props) => {
         icon="menu"
         style={styles.searchbar}
       />
+
+      <Searchbar
+        placeholder="Search"
+        onChangeText={(query: string) => setFourthQuery(query)}
+        value={fourthQuery}
+        loading
+        style={styles.searchbar}
+      />
     </ScreenWrapper>
   );
 };
diff --git a/src/components/Searchbar.tsx b/src/components/Searchbar.tsx
index 741b37cf4f..e1f1a95fc0 100644
--- a/src/components/Searchbar.tsx
+++ b/src/components/Searchbar.tsx
@@ -18,6 +18,9 @@ import { withTheme } from '../core/theming';
 import type { IconSource } from './Icon';
 import type { Theme } from '../types';
 import MaterialCommunityIcon from './MaterialCommunityIcon';
+import ActivityIndicator, {
+  Props as ActivityIndicatorProps,
+} from './ActivityIndicator';
 
 export type Props = React.ComponentPropsWithRef<typeof TextInput> & {
   /**
@@ -70,6 +73,14 @@ export type Props = React.ComponentPropsWithRef<typeof TextInput> & {
    * Custom icon for clear button, default will be icon close
    */
   clearIcon?: IconSource;
+  /**
+   * Custom flag for replacing clear button with activity indicator.
+   */
+  loading?: Boolean;
+  /**
+   * Custom styles for the activity indicator.
+   */
+  loaderStyle?: Omit<ActivityIndicatorProps, 'theme'>;
 };
 
 type TextInputHandles = Pick<
@@ -122,6 +133,8 @@ const Searchbar = React.forwardRef<TextInputHandles, Props>(
       style,
       theme,
       value,
+      loading = false,
+      loaderStyle,
       ...rest
     }: Props,
     ref
@@ -218,26 +231,30 @@ const Searchbar = React.forwardRef<TextInputHandles, Props>(
           value={value}
           {...rest}
         />
-        <IconButton
-          borderless
-          disabled={!value}
-          accessibilityLabel={clearAccessibilityLabel}
-          iconColor={value ? iconColor : 'rgba(255, 255, 255, 0)'}
-          rippleColor={rippleColor}
-          onPress={handleClearPress}
-          icon={
-            clearIcon ||
-            (({ size, color }) => (
-              <MaterialCommunityIcon
-                name="close"
-                color={color}
-                size={size}
-                direction={I18nManager.isRTL ? 'rtl' : 'ltr'}
-              />
-            ))
-          }
-          accessibilityRole="button"
-        />
+        {loading ? (
+          <ActivityIndicator {...loaderStyle} style={styles.loader} />
+        ) : (
+          <IconButton
+            borderless
+            disabled={!value}
+            accessibilityLabel={clearAccessibilityLabel}
+            iconColor={value ? iconColor : 'rgba(255, 255, 255, 0)'}
+            rippleColor={rippleColor}
+            onPress={handleClearPress}
+            icon={
+              clearIcon ||
+              (({ size, color }) => (
+                <MaterialCommunityIcon
+                  name="close"
+                  color={color}
+                  size={size}
+                  direction={I18nManager.isRTL ? 'rtl' : 'ltr'}
+                />
+              ))
+            }
+            accessibilityRole="button"
+          />
+        )}
       </Surface>
     );
   }
@@ -259,6 +276,9 @@ const styles = StyleSheet.create({
   elevation: {
     elevation: 4,
   },
+  loader: {
+    margin: 10,
+  },
 });
 
 export default withTheme(Searchbar);

From b280e7c2ea59ab8602b3dd8e780c2995dbe95ac2 Mon Sep 17 00:00:00 2001
From: Daksh Bhardwaj <daksh@plgworks.com>
Date: Wed, 17 Aug 2022 16:04:34 +0530
Subject: [PATCH 2/4] test: added test cases

---
 src/components/__tests__/Searchbar.test.js    |   6 +
 .../__snapshots__/Searchbar.test.js.snap      | 384 ++++++++++++++++++
 2 files changed, 390 insertions(+)

diff --git a/src/components/__tests__/Searchbar.test.js b/src/components/__tests__/Searchbar.test.js
index 1d17e5187f..23f3fd426d 100644
--- a/src/components/__tests__/Searchbar.test.js
+++ b/src/components/__tests__/Searchbar.test.js
@@ -15,3 +15,9 @@ it('renders with text', () => {
 
   expect(tree).toMatchSnapshot();
 });
+
+it('renders with loadingIcon', () => {
+  const tree = renderer.create(<Searchbar loading={true} />).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
diff --git a/src/components/__tests__/__snapshots__/Searchbar.test.js.snap b/src/components/__tests__/__snapshots__/Searchbar.test.js.snap
index 66802d975c..cca04f7ced 100644
--- a/src/components/__tests__/__snapshots__/Searchbar.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Searchbar.test.js.snap
@@ -1,5 +1,389 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders with loadingIcon 1`] = `
+<View
+  collapsable={false}
+  style={
+    Object {
+      "alignSelf": undefined,
+      "bottom": undefined,
+      "left": undefined,
+      "position": undefined,
+      "right": undefined,
+      "shadowColor": "#000",
+      "shadowOffset": Object {
+        "height": 1,
+        "width": 0,
+      },
+      "shadowOpacity": 0.15,
+      "shadowRadius": 3,
+      "top": undefined,
+    }
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      Object {
+        "shadowColor": "#000",
+        "shadowOffset": Object {
+          "height": 1,
+          "width": 0,
+        },
+        "shadowOpacity": 0.3,
+        "shadowRadius": 1,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "rgb(247, 243, 249)",
+          "borderRadius": 4,
+          "flexDirection": "row",
+        }
+      }
+    >
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "alignSelf": undefined,
+            "bottom": undefined,
+            "left": undefined,
+            "position": undefined,
+            "right": undefined,
+            "shadowColor": "#000",
+            "shadowOffset": Object {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
+            "top": undefined,
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            Object {
+              "shadowColor": "#000",
+              "shadowOffset": Object {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "backgroundColor": undefined,
+                "borderColor": "rgba(121, 116, 126, 1)",
+                "borderRadius": 20,
+                "borderWidth": 0,
+                "elevation": 0,
+                "height": 40,
+                "margin": 6,
+                "overflow": "hidden",
+                "width": 40,
+              }
+            }
+          >
+            <View
+              accessibilityLabel="search"
+              accessibilityRole="button"
+              accessibilityState={
+                Object {
+                  "disabled": true,
+                }
+              }
+              accessible={true}
+              focusable={false}
+              hitSlop={
+                Object {
+                  "bottom": 6,
+                  "left": 6,
+                  "right": 6,
+                  "top": 6,
+                }
+              }
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Array [
+                  Object {
+                    "overflow": "hidden",
+                  },
+                  Object {
+                    "alignItems": "center",
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessibilityElementsHidden={true}
+                importantForAccessibility="no-hide-descendants"
+                pointerEvents="none"
+                selectable={false}
+                style={
+                  Array [
+                    Object {
+                      "backgroundColor": "transparent",
+                    },
+                    Object {
+                      "color": "rgba(28, 27, 31, 0.54)",
+                      "fontSize": 24,
+                    },
+                  ]
+                }
+              >
+                □
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+      <TextInput
+        accessibilityRole="search"
+        keyboardAppearance="light"
+        placeholder=""
+        placeholderTextColor="rgba(28, 27, 31, 1)"
+        returnKeyType="search"
+        selectionColor="rgba(103, 80, 164, 1)"
+        style={
+          Array [
+            Object {
+              "alignSelf": "stretch",
+              "flex": 1,
+              "fontSize": 18,
+              "minWidth": 0,
+              "paddingLeft": 8,
+              "textAlign": "left",
+            },
+            Object {
+              "color": "rgba(28, 27, 31, 1)",
+            },
+            undefined,
+          ]
+        }
+        underlineColorAndroid="transparent"
+      />
+      <View
+        accessibilityRole="progressbar"
+        accessibilityState={
+          Object {
+            "busy": true,
+          }
+        }
+        accessible={true}
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "justifyContent": "center",
+            },
+            Object {
+              "margin": 10,
+            },
+          ]
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            Object {
+              "height": 24,
+              "opacity": 1,
+              "width": 24,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "alignItems": "center",
+                "bottom": 0,
+                "justifyContent": "center",
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "height": 24,
+                  "transform": Array [
+                    Object {
+                      "rotate": "45deg",
+                    },
+                  ],
+                  "width": 24,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "height": 12,
+                    "overflow": "hidden",
+                    "width": 24,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "height": 24,
+                      "transform": Array [
+                        Object {
+                          "translateY": 0,
+                        },
+                        Object {
+                          "rotate": "-165deg",
+                        },
+                      ],
+                      "width": 24,
+                    }
+                  }
+                >
+                  <View
+                    collapsable={false}
+                    style={
+                      Object {
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 24,
+                      }
+                    }
+                  >
+                    <View
+                      collapsable={false}
+                      style={
+                        Object {
+                          "borderColor": "rgba(103, 80, 164, 1)",
+                          "borderRadius": 12,
+                          "borderWidth": 2.4,
+                          "height": 24,
+                          "width": 24,
+                        }
+                      }
+                    />
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "alignItems": "center",
+                "bottom": 0,
+                "justifyContent": "center",
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "height": 24,
+                  "transform": Array [
+                    Object {
+                      "rotate": "45deg",
+                    },
+                  ],
+                  "width": 24,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "height": 12,
+                    "overflow": "hidden",
+                    "top": 12,
+                    "width": 24,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "height": 24,
+                      "transform": Array [
+                        Object {
+                          "translateY": -12,
+                        },
+                        Object {
+                          "rotate": "345deg",
+                        },
+                      ],
+                      "width": 24,
+                    }
+                  }
+                >
+                  <View
+                    collapsable={false}
+                    style={
+                      Object {
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 24,
+                      }
+                    }
+                  >
+                    <View
+                      collapsable={false}
+                      style={
+                        Object {
+                          "borderColor": "rgba(103, 80, 164, 1)",
+                          "borderRadius": 12,
+                          "borderWidth": 2.4,
+                          "height": 24,
+                          "width": 24,
+                        }
+                      }
+                    />
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
 exports[`renders with placeholder 1`] = `
 <View
   collapsable={false}

From 9a22eda2dc65fc35d6ca5dad525660567f010a3a Mon Sep 17 00:00:00 2001
From: Daksh Bhardwaj <daksh@plgworks.com>
Date: Thu, 18 Aug 2022 12:51:04 +0530
Subject: [PATCH 3/4] test: added unit test cases for activity indicator

---
 src/components/__tests__/Searchbar.test.js    | 25 ++++++++++++++++++-
 .../__snapshots__/Searchbar.test.js.snap      |  2 +-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/__tests__/Searchbar.test.js b/src/components/__tests__/Searchbar.test.js
index 23f3fd426d..b0a0ccd350 100644
--- a/src/components/__tests__/Searchbar.test.js
+++ b/src/components/__tests__/Searchbar.test.js
@@ -1,3 +1,4 @@
+import { render } from '@testing-library/react-native';
 import * as React from 'react';
 import renderer from 'react-test-renderer';
 import Searchbar from '../Searchbar.tsx';
@@ -16,8 +17,30 @@ it('renders with text', () => {
   expect(tree).toMatchSnapshot();
 });
 
-it('renders with loadingIcon', () => {
+it('activity indicator snapshot test', () => {
   const tree = renderer.create(<Searchbar loading={true} />).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
+
+it('renders with ActivityIndicator', () => {
+  const tree = render(
+    <Searchbar
+      loading={true}
+      loaderStyle={{ testID: 'withActivityIndicator' }}
+    />
+  );
+
+  expect(tree.getByTestId('withActivityIndicator')).toBeTruthy();
+});
+
+it('renders without ActivityIndicator', () => {
+  const tree = render(
+    <Searchbar
+      loading={false}
+      loaderStyle={{ testID: 'withOutActivityIndicator' }}
+    />
+  );
+
+  expect(() => tree.getByTestId('withOutActivityIndicator')).toThrow();
+});
diff --git a/src/components/__tests__/__snapshots__/Searchbar.test.js.snap b/src/components/__tests__/__snapshots__/Searchbar.test.js.snap
index cca04f7ced..21618c4602 100644
--- a/src/components/__tests__/__snapshots__/Searchbar.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Searchbar.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders with loadingIcon 1`] = `
+exports[`activity indicator snapshot test 1`] = `
 <View
   collapsable={false}
   style={

From 0d48384672c46fc09148123b1948af7269a44045 Mon Sep 17 00:00:00 2001
From: Daksh Bhardwaj <daksh@plgworks.com>
Date: Fri, 19 Aug 2022 17:35:03 +0530
Subject: [PATCH 4/4] refactor: removed the loaderStyle props and updated the
 docs

---
 src/components/Searchbar.tsx                  | 15 +++++--------
 src/components/__tests__/Searchbar.test.js    | 22 +++++--------------
 .../__snapshots__/Searchbar.test.js.snap      |  1 +
 3 files changed, 13 insertions(+), 25 deletions(-)

diff --git a/src/components/Searchbar.tsx b/src/components/Searchbar.tsx
index e1f1a95fc0..e46a9a0fe2 100644
--- a/src/components/Searchbar.tsx
+++ b/src/components/Searchbar.tsx
@@ -18,9 +18,7 @@ import { withTheme } from '../core/theming';
 import type { IconSource } from './Icon';
 import type { Theme } from '../types';
 import MaterialCommunityIcon from './MaterialCommunityIcon';
-import ActivityIndicator, {
-  Props as ActivityIndicatorProps,
-} from './ActivityIndicator';
+import ActivityIndicator from './ActivityIndicator';
 
 export type Props = React.ComponentPropsWithRef<typeof TextInput> & {
   /**
@@ -74,13 +72,10 @@ export type Props = React.ComponentPropsWithRef<typeof TextInput> & {
    */
   clearIcon?: IconSource;
   /**
+   * @supported Available in v5.x
    * Custom flag for replacing clear button with activity indicator.
    */
   loading?: Boolean;
-  /**
-   * Custom styles for the activity indicator.
-   */
-  loaderStyle?: Omit<ActivityIndicatorProps, 'theme'>;
 };
 
 type TextInputHandles = Pick<
@@ -134,7 +129,6 @@ const Searchbar = React.forwardRef<TextInputHandles, Props>(
       theme,
       value,
       loading = false,
-      loaderStyle,
       ...rest
     }: Props,
     ref
@@ -232,7 +226,10 @@ const Searchbar = React.forwardRef<TextInputHandles, Props>(
           {...rest}
         />
         {loading ? (
-          <ActivityIndicator {...loaderStyle} style={styles.loader} />
+          <ActivityIndicator
+            testID="activity-indicator"
+            style={styles.loader}
+          />
         ) : (
           <IconButton
             borderless
diff --git a/src/components/__tests__/Searchbar.test.js b/src/components/__tests__/Searchbar.test.js
index b0a0ccd350..af7ff40b23 100644
--- a/src/components/__tests__/Searchbar.test.js
+++ b/src/components/__tests__/Searchbar.test.js
@@ -24,23 +24,13 @@ it('activity indicator snapshot test', () => {
 });
 
 it('renders with ActivityIndicator', () => {
-  const tree = render(
-    <Searchbar
-      loading={true}
-      loaderStyle={{ testID: 'withActivityIndicator' }}
-    />
-  );
-
-  expect(tree.getByTestId('withActivityIndicator')).toBeTruthy();
+  const tree = render(<Searchbar loading={true} />);
+
+  expect(tree.getByTestId('activity-indicator')).toBeTruthy();
 });
 
 it('renders without ActivityIndicator', () => {
-  const tree = render(
-    <Searchbar
-      loading={false}
-      loaderStyle={{ testID: 'withOutActivityIndicator' }}
-    />
-  );
-
-  expect(() => tree.getByTestId('withOutActivityIndicator')).toThrow();
+  const tree = render(<Searchbar loading={false} />);
+
+  expect(() => tree.getByTestId('activity-indicator')).toThrow();
 });
diff --git a/src/components/__tests__/__snapshots__/Searchbar.test.js.snap b/src/components/__tests__/__snapshots__/Searchbar.test.js.snap
index 21618c4602..21b696a044 100644
--- a/src/components/__tests__/__snapshots__/Searchbar.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Searchbar.test.js.snap
@@ -201,6 +201,7 @@ exports[`activity indicator snapshot test 1`] = `
             },
           ]
         }
+        testID="activity-indicator"
       >
         <View
           collapsable={false}