refactor: replace MaterialCommunityIcon in favor of internal Icon (#3699

)
callstack · Mar 6, 2023 · e34c3e4 · e34c3e4
1 parent 5c31ef9
commit e34c3e4
Show file tree

Hide file tree

Showing 11 changed files with 46 additions and 43 deletions.
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 MaterialCommunityIcon from '../MaterialCommunityIcon';
+import Icon from '../Icon';
 
 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>
   ) : (
-    <MaterialCommunityIcon
-      name="arrow-left"
+    <Icon
+      source="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 MaterialCommunityIcon from '../MaterialCommunityIcon';
+import Icon from '../Icon';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 import { getAndroidSelectionControlColor } from './utils';
 
@@ -143,9 +143,9 @@ const CheckboxAndroid = ({
       theme={theme}
     >
       <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
-        <MaterialCommunityIcon
+        <Icon
           allowFontScaling={false}
-          name={icon}
+          source={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 MaterialCommunityIcon from '../MaterialCommunityIcon';
+import Icon from '../Icon';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 import { getSelectionControlIOSColor } from './utils';
 
@@ -86,9 +86,9 @@ const CheckboxIOS = ({
       theme={theme}
     >
       <View style={{ opacity }}>
-        <MaterialCommunityIcon
+        <Icon
           allowFontScaling={false}
-          name={icon}
+          source={icon}
           size={24}
           color={checkedColor}
           direction="ltr"

diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx
@@ -17,7 +17,6 @@ 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';
@@ -323,8 +322,8 @@ const Chip = ({
                   theme={theme}
                 />
               ) : (
-                <MaterialCommunityIcon
-                  name="check"
+                <Icon
+                  source="check"
                   color={avatar ? white : iconColor}
                   size={18}
                   direction="ltr"
@@ -365,8 +364,8 @@ const Chip = ({
               {closeIcon ? (
                 <Icon source={closeIcon} color={iconColor} size={iconSize} />
               ) : (
-                <MaterialCommunityIcon
-                  name={isV3 ? 'close' : 'close-circle'}
+                <Icon
+                  source={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 }) => (
-            <MaterialCommunityIcon
-              name="page-first"
+            <Icon
+              source="page-first"
               color={color}
               size={size}
               direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
@@ -117,8 +117,8 @@ const PaginationControls = ({
       ) : null}
       <IconButton
         icon={({ size, color }) => (
-          <MaterialCommunityIcon
-            name="chevron-left"
+          <Icon
+            source="chevron-left"
             color={color}
             size={size}
             direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
@@ -132,8 +132,8 @@ const PaginationControls = ({
       />
       <IconButton
         icon={({ size, color }) => (
-          <MaterialCommunityIcon
-            name="chevron-right"
+          <Icon
+            source="chevron-right"
             color={color}
             size={size}
             direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
@@ -148,8 +148,8 @@ const PaginationControls = ({
       {showFastPaginationControls ? (
         <IconButton
           icon={({ size, color }) => (
-            <MaterialCommunityIcon
-              name="page-last"
+            <Icon
+              source="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 MaterialCommunityIcon from '../MaterialCommunityIcon';
+import Icon from '../Icon';
 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 }] }]}>
-      <MaterialCommunityIcon
-        name="arrow-up"
+      <Icon
+        source="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,8 +24,9 @@ type IconProps = {
 };
 
 type Props = IconProps & {
-  color?: string;
   source: any;
+  color?: string;
+  direction?: 'rtl' | 'ltr' | 'auto';
   /**
    * @optional
    */
@@ -72,17 +73,20 @@ const Icon = ({
   color,
   size,
   theme: themeOverrides,
+  direction: customDirection,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
   const direction =
-    typeof source === 'object' && source.direction && source.source
+    customDirection ||
+    (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
       ? 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 MaterialCommunityIcon from '../MaterialCommunityIcon';
+import Icon from '../Icon';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
 import { ListAccordionGroupContext } from './ListAccordionGroup';
@@ -262,8 +262,8 @@ const ListAccordion = ({
                   isExpanded: isExpanded,
                 })
               ) : (
-                <MaterialCommunityIcon
-                  name={isExpanded ? 'chevron-up' : 'chevron-down'}
+                <Icon
+                  source={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 MaterialCommunityIcon from '../MaterialCommunityIcon';
+import Icon from '../Icon';
 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 }}>
-              <MaterialCommunityIcon
+              <Icon
                 allowFontScaling={false}
-                name="check"
+                source="check"
                 size={24}
                 color={checkedColor}
                 direction="ltr"

diff --git a/src/components/Searchbar.tsx b/src/components/Searchbar.tsx
@@ -20,8 +20,8 @@ import type { ThemeProp } from '../types';
 import { forwardRef } from '../utils/forwardRef';
 import ActivityIndicator from './ActivityIndicator';
 import type { IconSource } from './Icon';
+import Icon from './Icon';
 import IconButton from './IconButton/IconButton';
-import MaterialCommunityIcon from './MaterialCommunityIcon';
 import Surface from './Surface';
 
 export type Props = React.ComponentPropsWithRef<typeof TextInput> & {
@@ -203,8 +203,8 @@ const Searchbar = forwardRef<TextInputHandles, Props>(
           icon={
             icon ||
             (({ size, color }) => (
-              <MaterialCommunityIcon
-                name="magnify"
+              <Icon
+                source="magnify"
                 color={color}
                 size={size}
                 direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
@@ -261,8 +261,8 @@ const Searchbar = forwardRef<TextInputHandles, Props>(
               icon={
                 clearIcon ||
                 (({ size, color }) => (
-                  <MaterialCommunityIcon
-                    name="close"
+                  <Icon
+                    source="close"
                     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 (
-                      <MaterialCommunityIcon
-                        name="close"
+                      <Icon
+                        source="close"
                         color={color}
                         size={size}
                         direction={