fix: merge types with the props of the component used internally

Author: satya164

example/src/CardExample.js

@@ -45,12 +45,8 @@ class CardExample extends React.Component<Props> {
         <Card style={styles.card}>
           <Card.Cover source={require('../assets/forest.jpg')} />
           <Card.Actions>
-            <Button primary onPress={() => {}}>
-              Share
-            </Button>
-            <Button primary onPress={() => {}}>
-              Explore
-            </Button>
+            <Button onPress={() => {}}>Share</Button>
+            <Button onPress={() => {}}>Explore</Button>
           </Card.Actions>
         </Card>
         <Card style={styles.card}>

example/src/DialogExample.js

@@ -56,19 +56,15 @@ class DialogExample extends React.Component<Props, State> {
     const { visible1, visible2, visible3, visible4, visible5 } = this.state;
     return (
       <View style={[styles.container, { backgroundColor: background }]}>
-        <Button primary onPress={this._openDialog1}>
-          Show Dialog with long text
-        </Button>
-        <Button primary onPress={this._openDialog2}>
+        <Button onPress={this._openDialog1}>Show Dialog with long text</Button>
+        <Button onPress={this._openDialog2}>
           Show Dialog with radio buttons
         </Button>
-        <Button primary onPress={this._openDialog3}>
+        <Button onPress={this._openDialog3}>
           Show Dialog with loading indicator
         </Button>
-        <Button primary onPress={this._openDialog4}>
-          Show undismissable Dialog
-        </Button>
-        <Button primary onPress={this._openDialog5}>
+        <Button onPress={this._openDialog4}>Show undismissable Dialog</Button>
+        <Button onPress={this._openDialog5}>
           Show Dialog with custom colors
         </Button>
         <DialogWithLongText visible={visible1} close={this._closeDialog1} />

example/src/Dialogs/DialogWithLongText.js

@@ -40,9 +40,7 @@ const DialogWithLongText = ({
         </ScrollView>
       </Dialog.ScrollArea>
       <Dialog.Actions>
-        <Button primary onPress={close}>
-          OK
-        </Button>
+        <Button onPress={close}>OK</Button>
       </Dialog.Actions>
     </Dialog>
   </Portal>

example/src/Dialogs/DialogWithRadioBtns.js

@@ -91,12 +91,8 @@ export default class extends React.Component<Props, State> {
             </ScrollView>
           </Dialog.ScrollArea>
           <Dialog.Actions>
-            <Button primary onPress={close}>
-              Cancel
-            </Button>
-            <Button primary onPress={close}>
-              Ok
-            </Button>
+            <Button onPress={close}>Cancel</Button>
+            <Button onPress={close}>Ok</Button>
           </Dialog.Actions>
         </Dialog>
       </Portal>

example/src/Dialogs/UndismissableDialog.js

@@ -20,9 +20,7 @@ const DialogWithLongText = ({
         <Button color={Colors.teal500} disabled>
           Disagree
         </Button>
-        <Button primary onPress={close}>
-          Agree
-        </Button>
+        <Button onPress={close}>Agree</Button>
       </Dialog.Actions>
     </Dialog>
   </Portal>

src/components/Appbar/Appbar.js

@@ -12,7 +12,7 @@ import { withTheme } from '../../core/theming';
 import { black, white } from '../../styles/colors';
 import type { Theme } from '../../types';
 
-type Props = {
+type Props = React.ElementConfig<typeof View> & {
   /**
    * Whether the background color is a dark color. A dark appbar will render light text and vice-versa.
    */

src/components/Appbar/AppbarAction.js

@@ -6,7 +6,7 @@ import { black } from '../../styles/colors';
 import IconButton from '../IconButton';
 import type { IconSource } from '../Icon';
 
-type Props = {
+type Props = React.ElementConfig<typeof IconButton> & {
   /**
    *  Custom color for action icon.
    */

src/components/Appbar/AppbarBackAction.js

@@ -5,7 +5,7 @@ import { View, Image, I18nManager, StyleSheet, Platform } from 'react-native';
 
 import AppbarAction from './AppbarAction';
 
-type Props = {
+type Props = React.ElementConfig<typeof AppbarAction> & {
   /**
    *  Custom color for back icon.
    */

src/components/Appbar/AppbarContent.js

@@ -9,9 +9,9 @@ import Text from '../Typography/Text';
 import { withTheme } from '../../core/theming';
 import { black } from '../../styles/colors';
 
-import type { Theme } from '../../types';
+import type { Theme, $RemoveChildren } from '../../types';
 
-type Props = {
+type Props = $RemoveChildren<typeof View> & {
   /**
    * CUstom color for the text.
    */
@@ -54,6 +54,7 @@ class AppbarContent extends React.Component<Props> {
       titleStyle,
       theme,
       title,
+      ...rest
     } = this.props;
     const { fonts } = theme;
 
@@ -63,7 +64,7 @@ class AppbarContent extends React.Component<Props> {
       .string();
 
     return (
-      <View style={[styles.container, style]}>
+      <View style={[styles.container, style]} {...rest}>
         <Text
           style={[
             {

src/components/Appbar/AppbarHeader.js

@@ -7,7 +7,7 @@ import Appbar, { DEFAULT_APPBAR_HEIGHT } from './Appbar';
 import { withTheme } from '../../core/theming';
 import type { Theme } from '../../types';
 
-type Props = {
+type Props = React.ElementConfig<typeof Appbar> & {
   /**
    * Whether the background color is a dark color. A dark header will render light text and vice-versa.
    */
@@ -109,6 +109,7 @@ class AppbarHeader extends React.Component<Props> {
 
     return (
       <Wrapper style={[{ backgroundColor, elevation }]}>
+        {/* $FlowFixMe: There seems to be conflict between Appbar's props and Header's props */}
         <Appbar
           style={[
             { height, backgroundColor, marginTop: statusBarHeight },

src/components/Banner.js

@@ -6,9 +6,9 @@ import Surface from './Surface';
 import Text from './Typography/Text';
 import Button from './Button';
 import { withTheme } from '../core/theming';
-import type { Theme } from '../types';
+import type { Theme, $RemoveChildren } from '../types';
 
-type Props = {
+type Props = $RemoveChildren<typeof Surface> & {
   /**
    * Whether banner is currently visible.
    */

src/components/Button.js

@@ -12,7 +12,7 @@ import { withTheme } from '../core/theming';
 import type { Theme } from '../types';
 import type { IconSource } from './Icon';
 
-type Props = {
+type Props = React.ElementConfig<typeof Surface> & {
   /**
    * Mode of the button. You can change the mode to adjust the styling to give it desired emphasis.
    * - `text` - flat button without background or outline (low emphasis)

src/components/Card/Card.js

@@ -14,7 +14,7 @@ import Surface from '../Surface';
 import { withTheme } from '../../core/theming';
 import type { Theme } from '../../types';
 
-type Props = {
+type Props = React.ElementConfig<typeof Surface> & {
   /**
    * Resting elevation of the card which controls the drop shadow.
    */
@@ -105,7 +105,14 @@ class Card extends React.Component<Props, State> {
   };
 
   render() {
-    const { children, onLongPress, onPress, style, theme } = this.props;
+    const {
+      children,
+      onLongPress,
+      onPress,
+      style,
+      theme,
+      ...rest
+    } = this.props;
     const { elevation } = this.state;
     const { roundness } = theme;
     const total = React.Children.count(children);
@@ -117,7 +124,10 @@ class Card extends React.Component<Props, State> {
           : null
     );
     return (
-      <Surface style={[{ borderRadius: roundness, elevation }, style]}>
+      <Surface
+        style={[{ borderRadius: roundness, elevation }, style]}
+        {...rest}
+      >
         <TouchableWithoutFeedback
           delayPressIn={0}
           disabled={!(onPress || onLongPress)}

src/components/Card/CardActions.js

@@ -3,9 +3,9 @@
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-type Props = {
+type Props = React.ElementConfig<typeof View> & {
   /**
-   * Content of the `CardActions`.
+   * Items inside the `CardActions`.
    */
   children: React.Node,
   style?: any,

src/components/Card/CardContent.js

@@ -3,7 +3,11 @@
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-type Props = {
+type Props = React.ElementConfig<typeof View> & {
+  /**
+   * Items inside the `Card.Content`.
+   */
+  children: React.Node,
   /**
    * @internal
    */

src/components/Card/CardCover.js

@@ -6,7 +6,7 @@ import { withTheme } from '../../core/theming';
 import { grey200 } from '../../styles/colors';
 import type { Theme } from '../../types';
 
-type Props = {
+type Props = React.ElementConfig<typeof Image> & {
   /**
    * @internal
    */

src/components/CheckboxAndroid.js

@@ -6,9 +6,9 @@ import color from 'color';
 import Icon from './Icon';
 import TouchableRipple from './TouchableRipple';
 import { withTheme } from '../core/theming';
-import type { Theme } from '../types';
+import type { Theme, $RemoveChildren } from '../types';
 
-type Props = {
+type Props = $RemoveChildren<typeof TouchableRipple> & {
   /**
    * Status of checkbox.
    */

src/components/CheckboxIOS.js

@@ -6,9 +6,9 @@ import color from 'color';
 import Icon from './Icon';
 import TouchableRipple from './TouchableRipple';
 import { withTheme } from '../core/theming';
-import type { Theme } from '../types';
+import type { Theme, $RemoveChildren } from '../types';
 
-type Props = {
+type Props = $RemoveChildren<typeof TouchableRipple> & {
   /**
    * Status of checkbox.
    */

src/components/Chip.js

@@ -18,7 +18,7 @@ import { black, white } from '../styles/colors';
 import type { Theme } from '../types';
 import type { IconSource } from './Icon';
 
-type Props = {
+type Props = React.ElementConfig<typeof Surface> & {
   /**
    * Mode of the chip.
    * - `flat` - flat chip without outline.
@@ -132,6 +132,7 @@ class Chip extends React.Component<Props, State> {
       onClose,
       style,
       theme,
+      ...rest
     } = this.props;
     const { dark, colors } = theme;
 
@@ -193,6 +194,7 @@ class Chip extends React.Component<Props, State> {
           },
           style,
         ]}
+        {...rest}
       >
         <TouchableRipple
           borderless
@@ -248,7 +250,7 @@ class Chip extends React.Component<Props, State> {
                 },
               ]}
             >
-              {children}
+              {(children: any)}
             </Text>
             {onClose ? (
               <TouchableWithoutFeedback

src/components/Dialog/DialogActions.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-type Props = {
+type Props = React.ElementConfig<typeof View> & {
   /**
    * Content of the `DialogActions`.
    */

src/components/Dialog/DialogContent.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 
-type Props = {
+type Props = React.ElementConfig<typeof View> & {
   /**
    * Content of the `DialogContent`.
    */
@@ -47,7 +47,7 @@ class DialogContent extends React.Component<Props> {
 
   render() {
     return (
-      <View style={[styles.container, this.props.style]}>
+      <View {...this.props} style={[styles.container, this.props.style]}>
         {this.props.children}
       </View>
     );

src/components/Dialog/DialogScrollArea.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 
-type Props = {
+type Props = React.ElementConfig<typeof View> & {
   /**
    * Content of the `DialogScrollArea`.
    */
@@ -51,7 +51,7 @@ class DialogScrollArea extends React.Component<Props> {
 
   render() {
     return (
-      <View style={[styles.container, this.props.style]}>
+      <View {...this.props} style={[styles.container, this.props.style]}>
         {this.props.children}
       </View>
     );

src/components/Dialog/DialogTitle.js

@@ -6,7 +6,7 @@ import Title from '../Typography/Title';
 import { withTheme } from '../../core/theming';
 import type { Theme } from '../../types';
 
-type Props = {
+type Props = React.ElementConfig<typeof Title> & {
   /**
    * Title text for the `DialogTitle`.
    */

src/components/Divider.js

@@ -4,10 +4,10 @@ import * as React from 'react';
 import color from 'color';
 import { StyleSheet, View } from 'react-native';
 import { withTheme } from '../core/theming';
-import type { Theme } from '../types';
 import { black, white } from '../styles/colors';
+import type { Theme, $RemoveChildren } from '../types';
 
-type Props = {
+type Props = $RemoveChildren<typeof View> & {
   /**
    *  Whether divider has a left inset.
    */

src/components/Drawer/DrawerItem.js

@@ -7,10 +7,10 @@ import Text from '../Typography/Text';
 import Icon from '../Icon';
 import TouchableRipple from '../TouchableRipple';
 import { withTheme } from '../../core/theming';
-import type { Theme } from '../../types';
+import type { Theme, $RemoveChildren } from '../../types';
 import type { IconSource } from '../Icon';
 
-type Props = {
+type Props = $RemoveChildren<typeof View> & {
   /**
    * The label text of the item.
    */

src/components/Drawer/DrawerSection.js

@@ -8,7 +8,7 @@ import Divider from '../Divider';
 import { withTheme } from '../../core/theming';
 import type { Theme } from '../../types';
 
-type Props = {
+type Props = React.ElementConfig<typeof View> & {
   /**
    * Title to show as the header for the section.
    */