feat: added the loading prop to IconButton and updated react native (#…

…4201)
callstack · Jan 8, 2024 · 80edc1a · 80edc1a
1 parent c42cfa2
commit 80edc1a
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 1 deletion.
diff --git a/example/src/Examples/IconButtonExample.tsx b/example/src/Examples/IconButtonExample.tsx
@@ -18,6 +18,7 @@ const ButtonExample = () => {
           iconColor={MD2Colors.green500}
           onPress={() => {}}
         />
+        <IconButton icon="" size={24} onPress={() => {}} loading />
         <IconButton icon="camera" size={36} onPress={() => {}} />
         <IconButton
           icon="lock"
@@ -37,6 +38,7 @@ const ButtonExample = () => {
           <IconButton icon="camera" size={24} onPress={() => {}} />
           <IconButton icon="camera" selected size={24} onPress={() => {}} />
           <IconButton icon="camera" disabled size={24} onPress={() => {}} />
+          <IconButton icon="camera" size={24} onPress={() => {}} loading />
         </View>
       </List.Section>
 
@@ -62,6 +64,14 @@ const ButtonExample = () => {
             size={24}
             onPress={() => {}}
           />
+          <IconButton
+            icon=""
+            mode="contained"
+            selected
+            loading
+            size={24}
+            onPress={() => {}}
+          />
         </View>
       </List.Section>
 
@@ -87,6 +97,14 @@ const ButtonExample = () => {
             size={24}
             onPress={() => {}}
           />
+          <IconButton
+            icon=""
+            mode="contained-tonal"
+            disabled
+            size={24}
+            onPress={() => {}}
+            loading
+          />
         </View>
       </List.Section>
 
@@ -112,6 +130,14 @@ const ButtonExample = () => {
             size={24}
             onPress={() => {}}
           />
+          <IconButton
+            icon=""
+            mode="outlined"
+            disabled
+            size={24}
+            onPress={() => {}}
+            loading
+          />
         </View>
       </List.Section>
 
@@ -139,6 +165,7 @@ const ButtonExample = () => {
             containerColor={MD3Colors.tertiary60}
           />
           <IconButton icon="heart" size={60} onPress={() => {}} />
+          <IconButton icon="" size={60} onPress={() => {}} loading />
         </View>
       </List.Section>
     </ScreenWrapper>

diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
@@ -13,6 +13,7 @@ import { getIconButtonColor } from './utils';
 import { useInternalTheme } from '../../core/theming';
 import type { $RemoveChildren, ThemeProp } from '../../types';
 import { forwardRef } from '../../utils/forwardRef';
+import ActivityIndicator from '../ActivityIndicator';
 import CrossFadeIcon from '../CrossFadeIcon';
 import Icon, { IconSource } from '../Icon';
 import Surface from '../Surface';
@@ -80,6 +81,11 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
    * @optional
    */
   theme?: ThemeProp;
+  /**
+   * @optional
+   * If true Activity Indicator will appear instead of icon
+   */
+  loading?: boolean;
 };
 
 /**
@@ -121,6 +127,7 @@ const IconButton = forwardRef<View, Props>(
       style,
       theme: themeOverrides,
       testID = 'icon-button',
+      loading = false,
       ...rest
     }: Props,
     ref
@@ -192,7 +199,11 @@ const IconButton = forwardRef<View, Props>(
           testID={testID}
           {...rest}
         >
-          <IconComponent color={iconColor} source={icon} size={size} />
+          {loading ? (
+            <ActivityIndicator size={size} color={iconColor} />
+          ) : (
+            <IconComponent color={iconColor} source={icon} size={size} />
+          )}
         </TouchableRipple>
       </Surface>
     );