From fb49f4e42a774f5909b528be400ae51b57c9343a Mon Sep 17 00:00:00 2001
From: Bruno <bruno.castro@codeminer42.com>
Date: Wed, 17 Apr 2019 10:40:02 -0300
Subject: [PATCH] fix(appbar): make allowed children to accept additional props

---
 src/components/Appbar/Appbar.js               |   9 +-
 .../__tests__/Appbar/Appbar.test.js           |  14 +
 .../Appbar/__snapshots__/Appbar.test.js.snap  | 305 ++++++++++++++++++
 3 files changed, 322 insertions(+), 6 deletions(-)

diff --git a/src/components/Appbar/Appbar.js b/src/components/Appbar/Appbar.js
index 539c1fcf34..7c49a466ce 100644
--- a/src/components/Appbar/Appbar.js
+++ b/src/components/Appbar/Appbar.js
@@ -135,12 +135,9 @@ class Appbar extends React.Component<Props> {
           .map((child, i) => {
             if (
               !React.isValidElement(child) ||
-              ![
-                'AppbarContent',
-                'AppbarAction',
-                'AppbarBackAction',
-                'AppbarHeader',
-              ].includes(child.type.name)
+              ![AppbarContent, AppbarAction, AppbarBackAction].includes(
+                child.type
+              )
             ) {
               return child;
             }
diff --git a/src/components/__tests__/Appbar/Appbar.test.js b/src/components/__tests__/Appbar/Appbar.test.js
index 6dfcf5da54..1c07030f23 100644
--- a/src/components/__tests__/Appbar/Appbar.test.js
+++ b/src/components/__tests__/Appbar/Appbar.test.js
@@ -15,4 +15,18 @@ describe('Appbar', () => {
 
     expect(tree).toMatchSnapshot();
   });
+
+  it('passes additional props to AppbarBackAction, AppbarContent and AppbarAction', () => {
+    const tree = renderer
+      .create(
+        <Appbar>
+          <Appbar.BackAction onPress={() => {}} />
+          <Appbar.Content title="Examples" />
+          <Appbar.Action icon="menu" onPress={() => {}} />
+        </Appbar>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
 });
diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap
index 60343d3311..aa0881d0dc 100644
--- a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap
+++ b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap
@@ -232,3 +232,308 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
   </View>
 </View>
 `;
+
+exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and AppbarAction 1`] = `
+<View
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#6200ee",
+      "elevation": 4,
+      "flexDirection": "row",
+      "height": 56,
+      "paddingHorizontal": 4,
+      "shadowColor": "#000000",
+      "shadowOffset": Object {
+        "height": 3,
+        "width": 0,
+      },
+      "shadowOpacity": 0.24,
+      "shadowRadius": 4,
+    }
+  }
+>
+  <View
+    accessibilityLabel="Back"
+    accessibilityRole="button"
+    accessible={true}
+    hitSlop={
+      Object {
+        "bottom": 6,
+        "left": 6,
+        "right": 6,
+        "top": 6,
+      }
+    }
+    isTVSelectable={true}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "overflow": "hidden",
+        },
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderRadius": 18,
+            "height": 36,
+            "justifyContent": "center",
+            "margin": 6,
+            "overflow": "visible",
+            "width": 36,
+          },
+          undefined,
+          undefined,
+        ],
+      ]
+    }
+  >
+    <View
+      style={null}
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "justifyContent": "center",
+            },
+            Object {
+              "height": 24,
+              "width": 24,
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "opacity": 1,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "transform": Array [
+                Object {
+                  "rotate": "0deg",
+                },
+              ],
+            }
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "justifyContent": "center",
+                },
+                Object {
+                  "height": 24,
+                  "transform": Array [
+                    Object {
+                      "scaleX": 1,
+                    },
+                  ],
+                  "width": 24,
+                },
+              ]
+            }
+          >
+            <Image
+              source={
+                Object {
+                  "testUri": "../../../src/assets/back-chevron.png",
+                }
+              }
+              style={
+                Array [
+                  Object {
+                    "height": 21,
+                    "resizeMode": "contain",
+                    "width": 21,
+                  },
+                  Object {
+                    "tintColor": "#ffffff",
+                  },
+                ]
+              }
+            />
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    accessible={true}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+          "paddingHorizontal": 12,
+        },
+        Array [
+          Object {
+            "marginLeft": 8,
+          },
+          Object {
+            "alignItems": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+  >
+    <Text
+      accessibilityRole="header"
+      accessibilityTraits="header"
+      numberOfLines={1}
+      style={
+        Array [
+          Object {
+            "color": "#000000",
+            "fontFamily": "Helvetica Neue",
+            "textAlign": "left",
+            "writingDirection": "ltr",
+          },
+          Array [
+            Object {
+              "color": "#ffffff",
+              "fontFamily": "Helvetica Neue",
+            },
+            Object {
+              "fontSize": 17,
+            },
+            undefined,
+          ],
+        ]
+      }
+    >
+      Examples
+    </Text>
+  </View>
+  <View
+    accessibilityRole="button"
+    accessible={true}
+    hitSlop={
+      Object {
+        "bottom": 6,
+        "left": 6,
+        "right": 6,
+        "top": 6,
+      }
+    }
+    isTVSelectable={true}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "overflow": "hidden",
+        },
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderRadius": 18,
+            "height": 36,
+            "justifyContent": "center",
+            "margin": 6,
+            "overflow": "visible",
+            "width": 36,
+          },
+          undefined,
+          undefined,
+        ],
+      ]
+    }
+  >
+    <View
+      style={null}
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "justifyContent": "center",
+            },
+            Object {
+              "height": 24,
+              "width": 24,
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "opacity": 1,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "transform": Array [
+                Object {
+                  "rotate": "0deg",
+                },
+              ],
+            }
+          }
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            allowFontScaling={false}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            style={
+              Array [
+                Object {
+                  "color": "#ffffff",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "transform": Array [
+                      Object {
+                        "scaleX": 1,
+                      },
+                    ],
+                  },
+                  Object {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+                Object {
+                  "fontFamily": "Material Icons",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;