fix: use material community icon for hard coded names (#1630)

callstack · Feb 4, 2020 · 19664c4 · 19664c4
1 parent d159659
commit 19664c4
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 18 deletions.
diff --git a/src/components/CheckboxAndroid.tsx b/src/components/CheckboxAndroid.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { Animated, View, StyleSheet } from 'react-native';
+import { Animated, View, StyleSheet, I18nManager } from 'react-native';
 import color from 'color';
-import Icon from './Icon';
+import MaterialCommunityIcon from './MaterialCommunityIcon';
 import TouchableRipple from './TouchableRipple';
 import { withTheme } from '../core/theming';
 import { Theme, $RemoveChildren } from '../types';
@@ -138,11 +138,12 @@ class CheckboxAndroid extends React.Component<Props, State> {
         style={styles.container}
       >
         <Animated.View style={{ transform: [{ scale: this.state.scaleAnim }] }}>
-          <Icon
+          <MaterialCommunityIcon
             allowFontScaling={false}
-            source={icon}
+            name={icon}
             size={24}
             color={checkboxColor}
+            direction={I18nManager.isRTL ? 'rtl' : 'ltr'}
           />
           <View style={[StyleSheet.absoluteFill, styles.fillContainer]}>
             <Animated.View

diff --git a/src/components/CheckboxIOS.tsx b/src/components/CheckboxIOS.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, I18nManager } from 'react-native';
 import color from 'color';
-import Icon from './Icon';
+import MaterialCommunityIcon from './MaterialCommunityIcon';
 import TouchableRipple from './TouchableRipple';
 import { withTheme } from '../core/theming';
 import { Theme, $RemoveChildren } from '../types';
@@ -87,11 +87,12 @@ class CheckboxIOS extends React.Component<Props> {
         style={styles.container}
       >
         <View style={{ opacity: indeterminate || checked ? 1 : 0 }}>
-          <Icon
+          <MaterialCommunityIcon
             allowFontScaling={false}
-            source={icon}
+            name={icon}
             size={24}
             color={checkedColor}
+            direction={I18nManager.isRTL ? 'rtl' : 'ltr'}
           />
         </View>
       </TouchableRipple>

diff --git a/src/components/DataTable/DataTableTitle.tsx b/src/components/DataTable/DataTableTitle.tsx
@@ -6,9 +6,10 @@ import {
   TouchableWithoutFeedback,
   View,
   ViewStyle,
+  I18nManager,
 } from 'react-native';
 import color from 'color';
-import Icon from '../Icon';
+import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import Text from '../Typography/Text';
 import { withTheme } from '../../core/theming';
 import { Theme } from '../../types';
@@ -94,7 +95,12 @@ class DataTableTitle extends React.Component<Props, State> {
 
     const icon = sortDirection ? (
       <Animated.View style={[styles.icon, { transform: [{ rotate: spin }] }]}>
-        <Icon source="arrow-down" size={16} color={theme.colors.text} />
+        <MaterialCommunityIcon
+          name="arrow-down"
+          size={16}
+          color={theme.colors.text}
+          direction={I18nManager.isRTL ? 'rtl' : 'ltr'}
+        />
       </Animated.View>
     ) : null;
 

diff --git a/src/components/List/ListAccordion.tsx b/src/components/List/ListAccordion.tsx
@@ -6,9 +6,10 @@ import {
   StyleSheet,
   StyleProp,
   TextStyle,
+  I18nManager,
 } from 'react-native';
 import TouchableRipple from '../TouchableRipple';
-import Icon from '../Icon';
+import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import Text from '../Typography/Text';
 import { withTheme } from '../../core/theming';
 import { Theme } from '../../types';
@@ -251,10 +252,11 @@ class ListAccordion extends React.Component<Props, State> {
                       description ? styles.multiline : undefined,
                     ]}
                   >
-                    <Icon
-                      source={expanded ? 'chevron-up' : 'chevron-down'}
+                    <MaterialCommunityIcon
+                      name={expanded ? 'chevron-up' : 'chevron-down'}
                       color={titleColor}
                       size={24}
+                      direction={I18nManager.isRTL ? 'rtl' : 'ltr'}
                     />
                   </View>
                 </View>

diff --git a/src/components/MaterialCommunityIcon.tsx b/src/components/MaterialCommunityIcon.tsx
@@ -6,6 +6,7 @@ export type IconProps = {
   color: string;
   size: number;
   direction: 'rtl' | 'ltr';
+  allowFontScaling?: boolean;
 };
 
 let MaterialCommunityIcons: any;
@@ -75,8 +76,15 @@ export const accessibilityProps =
         importantForAccessibility: 'no-hide-descendants' as 'no-hide-descendants',
       };
 
-const defaultIcon = ({ name, color, size, direction }: IconProps) => (
+const defaultIcon = ({
+  name,
+  color,
+  size,
+  direction,
+  allowFontScaling,
+}: IconProps) => (
   <MaterialCommunityIcons
+    allowFontScaling={allowFontScaling}
     name={name}
     color={color}
     size={size}

diff --git a/src/components/RadioButton/RadioButtonIOS.tsx b/src/components/RadioButton/RadioButtonIOS.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, I18nManager } from 'react-native';
 import color from 'color';
 import { RadioButtonContext, RadioButtonContextType } from './RadioButtonGroup';
 import { handlePress, isChecked } from './utils';
-import Icon from '../Icon';
+import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import TouchableRipple from '../TouchableRipple';
 import { withTheme } from '../../core/theming';
 import { Theme, $RemoveChildren } from '../../types';
@@ -110,11 +110,12 @@ class RadioButtonIOS extends React.Component<Props> {
               style={styles.container}
             >
               <View style={{ opacity: checked ? 1 : 0 }}>
-                <Icon
+                <MaterialCommunityIcon
                   allowFontScaling={false}
-                  source="check"
+                  name="check"
                   size={24}
                   color={checkedColor}
+                  direction={I18nManager.isRTL ? 'rtl' : 'ltr'}
                 />
               </View>
             </TouchableRipple>