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

…onents (callstack#972)

src/components/Appbar/Appbar.tsx

@@ -135,7 +135,15 @@ class Appbar extends React.Component<Props> {
  {React.Children.toArray(children)
  .filter(child => child != null && typeof child !== 'boolean')
  .map((child, i) => {
- if (!React.isValidElement(child)) {
+ if (
+ !React.isValidElement(child) ||
+ ![
+ 'AppbarContent',
+ 'AppbarAction',
+ 'AppbarBackAction',
+ 'AppbarHeader',
+ ].includes(child.type.name)
+ ) {
  return child;
  }
 

src/components/__tests__/Appbar/Appbar.test.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Appbar from '../../Appbar/Appbar';
+import Searchbar from '../../Searchbar';
+
+describe('Appbar', () => {
+ it('does not pass any additional props to Searchbar', () => {
+ const tree = renderer
+ .create(
+ <Appbar>
+ <Searchbar placeholder="Search" />
+ </Appbar>
+ )
+ .toJSON();
+
+ expect(tree).toMatchSnapshot();
+ });
+});

src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap

@@ -0,0 +1,234 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Appbar does not pass any additional props to Searchbar 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
+ style={
+ Object {
+ "alignItems": "center",
+ "backgroundColor": "#ffffff",
+ "borderRadius": 4,
+ "elevation": 4,
+ "flexDirection": "row",
+ "shadowColor": "#000000",
+ "shadowOffset": Object {
+ "height": 3,
+ "width": 0,
+ },
+ "shadowOpacity": 0.24,
+ "shadowRadius": 4,
+ }
+ }
+ >
+ <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}
+ >
+ <Text
+ accessibilityElementsHidden={true}
+ allowFontScaling={false}
+ importantForAccessibility="no-hide-descendants"
+ pointerEvents="none"
+ style={
+ Array [
+ Object {
+ "color": "rgba(0, 0, 0, 0.54)",
+ "fontSize": 24,
+ },
+ Array [
+ Object {
+ "transform": Array [
+ Object {
+ "scaleX": 1,
+ },
+ ],
+ },
+ Object {
+ "backgroundColor": "transparent",
+ },
+ ],
+ Object {
+ "fontFamily": "Material Icons",
+ "fontStyle": "normal",
+ "fontWeight": "normal",
+ },
+ Object {},
+ ]
+ }
+ >
+ 
+ </Text>
+ </View>
+ </View>
+ <TextInput
+ accessibilityRole="search"
+ accessibilityTraits="search"
+ allowFontScaling={true}
+ keyboardAppearance="light"
+ placeholder="Search"
+ placeholderTextColor="rgba(0, 0, 0, 0.54)"
+ returnKeyType="search"
+ selectionColor="#6200ee"
+ style={
+ Array [
+ Object {
+ "alignSelf": "stretch",
+ "flex": 1,
+ "fontSize": 18,
+ "minWidth": 0,
+ "paddingLeft": 8,
+ "textAlign": "left",
+ },
+ Object {
+ "color": "#000000",
+ "fontFamily": "Helvetica Neue",
+ },
+ undefined,
+ ]
+ }
+ underlineColorAndroid="transparent"
+ />
+ <View
+ accessibilityRole="button"
+ accessibilityStates={
+ Array [
+ "disabled",
+ ]
+ }
+ 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,
+ },
+ Object {
+ "opacity": 0.32,
+ },
+ undefined,
+ ],
+ ]
+ }
+ >
+ <View
+ style={null}
+ >
+ <Text
+ accessibilityElementsHidden={true}
+ allowFontScaling={false}
+ importantForAccessibility="no-hide-descendants"
+ pointerEvents="none"
+ style={
+ Array [
+ Object {
+ "color": "rgba(255, 255, 255, 0)",
+ "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>
+`;