feat: support right side icon in Button (#2376)

callstack · Nov 26, 2020 · 3ab3200 · 3ab3200
1 parent ed60fae
commit 3ab3200
Show file tree

Hide file tree

Showing 4 changed files with 175 additions and 3 deletions.
diff --git a/example/src/Examples/ButtonExample.tsx b/example/src/Examples/ButtonExample.tsx
@@ -30,6 +30,14 @@ const ButtonExample = () => {
           <Button loading onPress={() => {}} style={styles.button}>
             Loading
           </Button>
+          <Button
+            icon="camera"
+            onPress={() => {}}
+            style={styles.button}
+            contentStyle={{ flexDirection: 'row-reverse' }}
+          >
+            Icon right
+          </Button>
         </View>
       </List.Section>
       <List.Section title="Outlined button">

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -71,7 +71,7 @@ type Props = React.ComponentProps<typeof Surface> & {
   onLongPress?: () => void;
   /**
    * Style of button's inner content.
-   * Use this prop to apply custom height and width.
+   * Use this prop to apply custom height and width and to set the icon on the right with `flexDirection: 'row-reverse'`.
    */
   contentStyle?: StyleProp<ViewStyle>;
   style?: StyleProp<ViewStyle>;
@@ -240,6 +240,10 @@ const Button = ({
 
   const textStyle = { color: textColor, ...font };
   const elevationRes = disabled || mode !== 'contained' ? 0 : elevation;
+  const iconStyle =
+    StyleSheet.flatten(contentStyle)?.flexDirection === 'row-reverse'
+      ? styles.iconReverse
+      : styles.icon;
 
   return (
     <Surface
@@ -271,7 +275,7 @@ const Button = ({
       >
         <View style={[styles.content, contentStyle]}>
           {icon && loading !== true ? (
-            <View style={styles.icon}>
+            <View style={iconStyle}>
               <Icon
                 source={icon}
                 size={customLabelSize || 16}
@@ -283,7 +287,7 @@ const Button = ({
             <ActivityIndicator
               size={customLabelSize || 16}
               color={customLabelColor || textColor}
-              style={styles.icon}
+              style={iconStyle}
             />
           ) : null}
           <Text
@@ -322,6 +326,10 @@ const styles = StyleSheet.create({
     marginLeft: 12,
     marginRight: -4,
   },
+  iconReverse: {
+    marginRight: 12,
+    marginLeft: -4,
+  },
   label: {
     textAlign: 'center',
     letterSpacing: 1,

diff --git a/src/components/__tests__/Button.test.js b/src/components/__tests__/Button.test.js
@@ -41,6 +41,21 @@ it('renders button with icon', () => {
   expect(tree).toMatchSnapshot();
 });
 
+it('renders button with icon in reverse order', () => {
+  const tree = renderer
+    .create(
+      <Button
+        icon="chevron-right"
+        contentStyle={{ flexDirection: 'row-reverse' }}
+      >
+        Right Icon
+      </Button>
+    )
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
 it('renders loading button', () => {
   const tree = renderer
     .create(<Button loading>Loading Button</Button>)

diff --git a/src/components/__tests__/__snapshots__/Button.test.js.snap b/src/components/__tests__/__snapshots__/Button.test.js.snap
@@ -330,6 +330,147 @@ exports[`renders button with icon 1`] = `
 </View>
 `;
 
+exports[`renders button with icon in reverse order 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "transparent",
+      "borderColor": "transparent",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 0,
+      "elevation": 0,
+      "minWidth": 64,
+    }
+  }
+>
+  <View
+    accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": undefined,
+      }
+    }
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "overflow": "hidden",
+        },
+        Object {
+          "borderRadius": 4,
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
+          },
+          Object {
+            "flexDirection": "row-reverse",
+          },
+        ]
+      }
+    >
+      <View
+        style={
+          Object {
+            "marginLeft": -4,
+            "marginRight": 12,
+          }
+        }
+      >
+        <Text
+          accessibilityElementsHidden={true}
+          allowFontScaling={false}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          style={
+            Array [
+              Object {
+                "color": "#6200ee",
+                "fontSize": 16,
+              },
+              Array [
+                Object {
+                  "lineHeight": 16,
+                  "transform": Array [
+                    Object {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                Object {
+                  "backgroundColor": "transparent",
+                },
+              ],
+              Object {
+                "fontFamily": "Material Design Icons",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              Object {},
+            ]
+          }
+        >
+          
+        </Text>
+      </View>
+      <Text
+        numberOfLines={1}
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+              "fontFamily": "System",
+              "fontWeight": "400",
+              "textAlign": "left",
+            },
+            Array [
+              Object {
+                "letterSpacing": 1,
+                "marginHorizontal": 16,
+                "marginVertical": 9,
+                "textAlign": "center",
+              },
+              undefined,
+              Object {
+                "textTransform": "uppercase",
+              },
+              Object {
+                "color": "#6200ee",
+                "fontFamily": "System",
+                "fontWeight": "500",
+              },
+              Object {
+                "fontFamily": "System",
+                "fontWeight": "500",
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        Right Icon
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
 exports[`renders contained contained with mode 1`] = `
 <View
   style={