fix: revert 'replace MaterialCommunityIcon in favor of internal Icon' (callstack#3745)

lukewalczak · web-flow · commit 58a223ba442b · 2023-03-11T15:54:46.000+01:00
diff --git a/src/components/Appbar/AppbarBackIcon.tsx b/src/components/Appbar/AppbarBackIcon.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Platform, I18nManager, View, Image, StyleSheet } from 'react-native';
 
-import Icon from '../Icon';
+import MaterialCommunityIcon from '../MaterialCommunityIcon';
 
 const AppbarBackIcon = ({ size, color }: { size: number; color: string }) => {
   const iosIconSize = size - 3;
@@ -27,8 +27,8 @@ const AppbarBackIcon = ({ size, color }: { size: number; color: string }) => {
       />
     </View>
   ) : (
-    <Icon
-      source="arrow-left"
+    <MaterialCommunityIcon
+      name="arrow-left"
       color={color}
       size={size}
       direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
diff --git a/src/components/Checkbox/CheckboxAndroid.tsx b/src/components/Checkbox/CheckboxAndroid.tsx
@@ -8,7 +8,7 @@ import {
 
 import { useInternalTheme } from '../../core/theming';
 import type { $RemoveChildren, ThemeProp } from '../../types';
-import Icon from '../Icon';
+import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 import { getAndroidSelectionControlColor } from './utils';
 
@@ -143,9 +143,9 @@ const CheckboxAndroid = ({
       theme={theme}
     >
       <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
-        <Icon
+        <MaterialCommunityIcon
           allowFontScaling={false}
-          source={icon}
+          name={icon}
           size={24}
           color={selectionControlColor}
           direction="ltr"
diff --git a/src/components/Checkbox/CheckboxIOS.tsx b/src/components/Checkbox/CheckboxIOS.tsx
@@ -3,7 +3,7 @@ import { GestureResponderEvent, StyleSheet, View } from 'react-native';
 
 import { useInternalTheme } from '../../core/theming';
 import type { $RemoveChildren, ThemeProp } from '../../types';
-import Icon from '../Icon';
+import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 import { getSelectionControlIOSColor } from './utils';
 
@@ -86,9 +86,9 @@ const CheckboxIOS = ({
       theme={theme}
     >
       <View style={{ opacity }}>
-        <Icon
+        <MaterialCommunityIcon
           allowFontScaling={false}
-          source={icon}
+          name={icon}
           size={24}
           color={checkedColor}
           direction="ltr"
diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx
@@ -17,6 +17,7 @@ import { white } from '../../styles/themes/v2/colors';
 import type { EllipsizeProp, ThemeProp } from '../../types';
 import type { IconSource } from '../Icon';
 import Icon from '../Icon';
+import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import Surface from '../Surface';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
@@ -322,8 +323,8 @@ const Chip = ({
                   theme={theme}
                 />
               ) : (
-                <Icon
-                  source="check"
+                <MaterialCommunityIcon
+                  name="check"
                   color={avatar ? white : iconColor}
                   size={18}
                   direction="ltr"
@@ -364,8 +365,8 @@ const Chip = ({
               {closeIcon ? (
                 <Icon source={closeIcon} color={iconColor} size={iconSize} />
               ) : (
-                <Icon
-                  source={isV3 ? 'close' : 'close-circle'}
+                <MaterialCommunityIcon
+                  name={isV3 ? 'close' : 'close-circle'}
                   size={iconSize}
                   color={iconColor}
                   direction="ltr"
diff --git a/src/components/DataTable/DataTablePagination.tsx b/src/components/DataTable/DataTablePagination.tsx
@@ -12,8 +12,8 @@ import type { ThemeProp } from 'src/types';
 
 import { useInternalTheme } from '../../core/theming';
 import Button from '../Button/Button';
-import Icon from '../Icon';
 import IconButton from '../IconButton/IconButton';
+import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import Menu from '../Menu/Menu';
 import Text from '../Typography/Text';
 
@@ -101,8 +101,8 @@ const PaginationControls = ({
       {showFastPaginationControls ? (
         <IconButton
           icon={({ size, color }) => (
-            <Icon
-              source="page-first"
+            <MaterialCommunityIcon
+              name="page-first"
               color={color}
               size={size}
               direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
@@ -117,8 +117,8 @@ const PaginationControls = ({
       ) : null}
       <IconButton
         icon={({ size, color }) => (
-          <Icon
-            source="chevron-left"
+          <MaterialCommunityIcon
+            name="chevron-left"
             color={color}
             size={size}
             direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
@@ -132,8 +132,8 @@ const PaginationControls = ({
       />
       <IconButton
         icon={({ size, color }) => (
-          <Icon
-            source="chevron-right"
+          <MaterialCommunityIcon
+            name="chevron-right"
             color={color}
             size={size}
             direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
@@ -148,8 +148,8 @@ const PaginationControls = ({
       {showFastPaginationControls ? (
         <IconButton
           icon={({ size, color }) => (
-            <Icon
-              source="page-last"
+            <MaterialCommunityIcon
+              name="page-last"
               color={color}
               size={size}
               direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
diff --git a/src/components/DataTable/DataTableTitle.tsx b/src/components/DataTable/DataTableTitle.tsx
@@ -15,7 +15,7 @@ import color from 'color';
 
 import { useInternalTheme } from '../../core/theming';
 import type { ThemeProp } from '../../types';
-import Icon from '../Icon';
+import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import Text from '../Typography/Text';
 
 export type Props = React.ComponentPropsWithRef<
@@ -120,8 +120,8 @@ const DataTableTitle = ({
 
   const icon = sortDirection ? (
     <Animated.View style={[styles.icon, { transform: [{ rotate: spin }] }]}>
-      <Icon
-        source="arrow-up"
+      <MaterialCommunityIcon
+        name="arrow-up"
         size={16}
         color={textColor}
         direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
@@ -24,9 +24,8 @@ type IconProps = {
 };
 
 type Props = IconProps & {
-  source: any;
   color?: string;
-  direction?: 'rtl' | 'ltr' | 'auto';
+  source: any;
   /**
    * @optional
    */
@@ -73,19 +72,17 @@ const Icon = ({
   color,
   size,
   theme: themeOverrides,
-  direction: customDirection,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
   const direction =
-    customDirection ||
-    (typeof source === 'object' && source.direction && source.source
+    typeof source === 'object' && source.direction && source.source
       ? source.direction === 'auto'
         ? I18nManager.getConstants().isRTL
           ? 'rtl'
           : 'ltr'
         : source.direction
-      : null);
+      : null;
 
   const s =
     typeof source === 'object' && source.direction && source.source
diff --git a/src/components/List/ListAccordion.tsx b/src/components/List/ListAccordion.tsx
@@ -12,7 +12,7 @@ import {
 
 import { useInternalTheme } from '../../core/theming';
 import type { ThemeProp } from '../../types';
-import Icon from '../Icon';
+import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
 import { ListAccordionGroupContext } from './ListAccordionGroup';
@@ -262,8 +262,8 @@ const ListAccordion = ({
                   isExpanded: isExpanded,
                 })
               ) : (
-                <Icon
-                  source={isExpanded ? 'chevron-up' : 'chevron-down'}
+                <MaterialCommunityIcon
+                  name={isExpanded ? 'chevron-up' : 'chevron-down'}
                   color={theme.isV3 ? descriptionColor : titleColor}
                   size={24}
                   direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
diff --git a/src/components/RadioButton/RadioButtonIOS.tsx b/src/components/RadioButton/RadioButtonIOS.tsx
@@ -4,7 +4,7 @@ import { GestureResponderEvent, StyleSheet, View } from 'react-native';
 import { useInternalTheme } from '../../core/theming';
 import type { $RemoveChildren, InternalTheme } from '../../types';
 import { getSelectionControlIOSColor } from '../Checkbox/utils';
-import Icon from '../Icon';
+import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 import { RadioButtonContext, RadioButtonContextType } from './RadioButtonGroup';
 import { handlePress, isChecked } from './utils';
@@ -109,9 +109,9 @@ const RadioButtonIOS = ({
             theme={theme}
           >
             <View style={{ opacity }}>
-              <Icon
+              <MaterialCommunityIcon
                 allowFontScaling={false}
-                source="check"
+                name="check"
                 size={24}
                 color={checkedColor}
                 direction="ltr"
diff --git a/src/components/Searchbar.tsx b/src/components/Searchbar.tsx
@@ -21,8 +21,8 @@ import { forwardRef } from '../utils/forwardRef';
 import ActivityIndicator from './ActivityIndicator';
 import Divider from './Divider';
 import type { IconSource } from './Icon';
-import Icon from './Icon';
 import IconButton from './IconButton/IconButton';
+import MaterialCommunityIcon from './MaterialCommunityIcon';
 import Surface from './Surface';
 
 interface Style {
@@ -291,8 +291,8 @@ const Searchbar = forwardRef<TextInputHandles, Props>(
           icon={
             icon ||
             (({ size, color }) => (
-              <Icon
-                source="magnify"
+              <MaterialCommunityIcon
+                name="magnify"
                 color={color}
                 size={size}
                 direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
@@ -352,8 +352,8 @@ const Searchbar = forwardRef<TextInputHandles, Props>(
               icon={
                 clearIcon ||
                 (({ size, color }) => (
-                  <Icon
-                    source={isV3 ? 'close' : 'close-circle-outline'}
+                  <MaterialCommunityIcon
+                    name={isV3 ? 'close' : 'close-circle-outline'}
                     color={color}
                     size={size}
                     direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
diff --git a/src/components/Snackbar.tsx b/src/components/Snackbar.tsx
@@ -16,8 +16,8 @@ import { useInternalTheme } from '../core/theming';
 import type { $RemoveChildren, ThemeProp } from '../types';
 import Button from './Button/Button';
 import type { IconSource } from './Icon';
-import Icon from './Icon';
 import IconButton from './IconButton/IconButton';
+import MaterialCommunityIcon from './MaterialCommunityIcon';
 import Surface from './Surface';
 import Text from './Typography/Text';
 
@@ -321,8 +321,8 @@ const Snackbar = ({
                   icon ||
                   (({ size, color }) => {
                     return (
-                      <Icon
-                        source="close"
+                      <MaterialCommunityIcon
+                        name="close"
                         color={color}
                         size={size}
                         direction={
