fix(appbar): do not pass any additional props to custom children comp…

…onents (#1001)
callstack · Apr 17, 2019 · 57a9e97 · 57a9e97
1 parent d95bb8b
commit 57a9e97
Show file tree

Hide file tree

Showing 3 changed files with 322 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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>
+`;