feat: reduce api surface, change to testID

minheq · minheq · commit ff66244571dd · 2019-02-22T11:45:51.000+07:00
diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TouchableOpacity, View, ViewProps } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import { DeepPartial } from 'ts-essentials';
 
 import { Intent } from '../../constants/Intent';
@@ -10,10 +10,11 @@ import { Spacing } from '../Layout';
 import { Strong, Text } from '../Typography';
 import { AlertStyles, GetAlertStyles, getAlertStyles } from './Alert.styles';
 
-export interface AlertProps extends ViewProps {
+export interface AlertProps {
   theme: Theme;
   title?: string;
   description?: string;
+  testID?: string;
   /* custom component, will take precedence over title and description */
   component?: React.ReactNode;
   onClose?: () => void;
@@ -58,7 +59,7 @@ const AlertBase = (props: AlertProps) => {
     intent = 'info',
     getStyles,
     theme,
-    ...viewProps
+    testID,
   } = props;
 
   const { containerStyle, bodyStyle } = mergeStyles(getAlertStyles, getStyles)(
@@ -67,7 +68,7 @@ const AlertBase = (props: AlertProps) => {
   );
 
   return (
-    <View style={containerStyle} {...viewProps}>
+    <View style={containerStyle} testID={testID}>
       {icon || (
         <Spacing paddingRight={2} justifyContent="center">
           {resolveIcon(intent, theme)}
diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Image, ImageSourcePropType, View, ViewProps } from 'react-native';
+import { Image, ImageSourcePropType, View } from 'react-native';
 import { DeepPartial } from 'ts-essentials';
 
 import { Theme, withTheme } from '../../theme';
@@ -26,7 +26,7 @@ export const globalGetInitials: GetInitialsType = (name, fallback = '?') => {
     .join('');
 };
 
-export interface AvatarProps extends ViewProps {
+export interface AvatarProps {
   /**
    * The source attribute of the image.
    * When it's not available, render initials instead.
@@ -83,6 +83,8 @@ export interface AvatarProps extends ViewProps {
   theme: Theme;
 
   getStyles?: ReplaceReturnType<GetAvatarStyles, DeepPartial<AvatarStyles>>;
+
+  testID?: string;
 }
 
 export const AvatarBase = (props: AvatarProps) => {
@@ -99,7 +101,7 @@ export const AvatarBase = (props: AvatarProps) => {
     forceShowInitials = false,
     sizeLimitOneCharacter = 20,
     getStyles,
-    ...viewProps
+    testID,
   } = props;
 
   const { imageHasFailedLoading } = { imageHasFailedLoading: false };
@@ -126,7 +128,7 @@ export const AvatarBase = (props: AvatarProps) => {
   );
 
   return (
-    <View style={boxStyle} {...viewProps}>
+    <View style={boxStyle} testID={testID}>
       {(imageUnavailable || forceShowInitials) && (
         <Text
           getStyles={() => ({
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, ViewProps } from 'react-native';
+import { View } from 'react-native';
 import { DeepPartial } from 'ts-essentials';
 
 import { Theme, withTheme } from '../../theme';
@@ -14,14 +14,15 @@ import {
   getBadgeStyles,
 } from './Badge.styles';
 
-export interface BadgeProps extends ViewProps {
+export interface BadgeProps {
   children: React.ReactNode;
   theme: Theme;
   color?: FillColor;
   size?: BadgeSize;
   shape?: Shape;
   isSolid?: boolean;
   getStyles?: ReplaceReturnType<GetBadgeStyles, DeepPartial<BadgeStyles>>;
+  testID?: string;
 }
 
 const BadgeBase = (props: BadgeProps) => {
@@ -33,7 +34,7 @@ const BadgeBase = (props: BadgeProps) => {
     shape = 'rounded',
     size = 'small',
     theme,
-    ...viewProps
+    testID,
   } = props;
 
   const { containerStyle, textStyle } = mergeStyles(getBadgeStyles, getStyles)(
@@ -42,7 +43,7 @@ const BadgeBase = (props: BadgeProps) => {
   );
 
   return (
-    <View style={containerStyle} {...viewProps}>
+    <View style={containerStyle} testID={testID}>
       <Strong
         size={size}
         getStyles={() => ({
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -1,9 +1,5 @@
 import * as React from 'react';
-import {
-  TouchableHighlight,
-  TouchableHighlightProps,
-  View,
-} from 'react-native';
+import { AccessibilityProps, TouchableHighlight, View } from 'react-native';
 import { DeepPartial } from 'ts-essentials';
 
 import { Theme, withTheme } from '../../theme';
@@ -20,7 +16,7 @@ import {
   getButtonStyles,
 } from './Button.styles';
 
-export interface ButtonProps extends TouchableHighlightProps {
+export interface ButtonProps extends AccessibilityProps {
   title?: string;
 
   /**
@@ -98,6 +94,8 @@ export interface ButtonProps extends TouchableHighlightProps {
    * Inline styles for components
    */
   getStyles?: ReplaceReturnType<GetButtonStyles, DeepPartial<ButtonStyles>>;
+
+  testID?: string;
 }
 
 const ButtonBase = (props: ButtonProps) => {
@@ -118,8 +116,9 @@ const ButtonBase = (props: ButtonProps) => {
     },
     size = 'medium',
     theme,
+    testID,
 
-    ...touchableHighlightProps
+    ...accessibilityProps
   } = props;
 
   const { buttonStyle, textStyle, focusColor } = mergeStyles(
@@ -145,7 +144,8 @@ const ButtonBase = (props: ButtonProps) => {
       disabled={!!(isDisabled || isLoading)}
       onPress={onPress}
       style={buttonStyle}
-      {...touchableHighlightProps}
+      testID={testID}
+      {...accessibilityProps}
     >
       <View
         style={{
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import {
+  AccessibilityProps,
   GestureResponderEvent,
   TouchableHighlight,
-  TouchableHighlightProps,
   View,
 } from 'react-native';
 import { DeepPartial } from 'ts-essentials';
@@ -18,7 +18,7 @@ import {
 
 export type CheckboxShape = 'circle' | 'square';
 
-export interface CheckboxProps extends TouchableHighlightProps {
+export interface CheckboxProps extends AccessibilityProps {
   theme: Theme;
   isChecked?: boolean;
   isDisabled?: boolean;
@@ -29,6 +29,7 @@ export interface CheckboxProps extends TouchableHighlightProps {
   shape?: CheckboxShape;
   onChange?: (e: GestureResponderEvent) => void | undefined;
   getStyles?: ReplaceReturnType<GetCheckboxStyles, DeepPartial<CheckboxStyles>>;
+  testID?: string;
 }
 
 const CheckboxBase = (props: CheckboxProps) => {
@@ -41,7 +42,8 @@ const CheckboxBase = (props: CheckboxProps) => {
     shape = 'square',
     theme,
     getStyles,
-    ...touchableHighlightProps
+    testID,
+    ...accessibilityProps
   } = props;
 
   const { checkboxStyle, checkboxFocusBackgroundColor } = mergeStyles(
@@ -62,7 +64,8 @@ const CheckboxBase = (props: CheckboxProps) => {
         : {
             disabled: true,
           })}
-      {...touchableHighlightProps}
+      testID={testID}
+      {...accessibilityProps}
     >
       <View
         style={{
diff --git a/src/components/Layout/Box.tsx b/src/components/Layout/Box.tsx
@@ -66,7 +66,7 @@ const propToFn = {
 };
 
 const Box = ({ theme, ...props }: BoxProps) => {
-  const { children, style: propStyle, ...viewStyles } = props;
+  const { children, style: propStyle, testID, ...viewStyles } = props;
   const transformedStyles = [];
   const pureStyles = {};
 
@@ -88,7 +88,9 @@ const Box = ({ theme, ...props }: BoxProps) => {
   }
 
   return (
-    <View style={[pureStyles, transformedStyles, propStyle]}>{children}</View>
+    <View testID={testID} style={[pureStyles, transformedStyles, propStyle]}>
+      {children}
+    </View>
   );
 };
 
diff --git a/src/components/ListItem/ListItem.tsx b/src/components/ListItem/ListItem.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import {
+  AccessibilityProps,
   ImageSourcePropType,
   TouchableHighlight,
-  TouchableHighlightProps,
   View,
 } from 'react-native';
 import { DeepPartial } from 'ts-essentials';
@@ -18,7 +18,7 @@ import {
   ListItemStyles,
 } from './ListItem.styles';
 
-export interface ListItemProps extends TouchableHighlightProps {
+export interface ListItemProps extends AccessibilityProps {
   theme: Theme;
   size?: ListItemSize;
   isDisabled?: boolean;
@@ -28,6 +28,7 @@ export interface ListItemProps extends TouchableHighlightProps {
   avatarProps?: AvatarProps;
   rightIcon?: React.ReactNode;
   getStyles?: ReplaceReturnType<GetListItemStyles, DeepPartial<ListItemStyles>>;
+  testID?: string;
 }
 
 const ListItemBase = (props: ListItemProps) => {
@@ -41,7 +42,8 @@ const ListItemBase = (props: ListItemProps) => {
     rightIcon = null,
     theme,
     avatarProps,
-    ...touchableHighlightProps
+    testID,
+    ...accessibilityProps
   } = props;
 
   const {
@@ -59,7 +61,8 @@ const ListItemBase = (props: ListItemProps) => {
       disabled={isDisabled}
       underlayColor={focusBackgroundColor}
       style={containerStyle}
-      {...touchableHighlightProps}
+      testID={testID}
+      {...accessibilityProps}
     >
       <View style={wrapperStyle}>
         <View style={leftWrapperStyle}>
diff --git a/src/components/Progress/Progress.tsx b/src/components/Progress/Progress.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Platform, View, ViewProps } from 'react-native';
+import { Platform, View } from 'react-native';
 import { Spring } from 'react-spring';
 import { DeepPartial } from 'ts-essentials';
 
@@ -12,21 +12,16 @@ import {
   ProgressStyles,
 } from './Progress.styles';
 
-export interface ProgressProps extends ViewProps {
+export interface ProgressProps {
   theme: Theme;
   percent?: number;
   size?: ProgressSize;
   getStyles?: ReplaceReturnType<GetProgressStyles, DeepPartial<ProgressStyles>>;
+  testID?: string;
 }
 
 const ProgressBase = (props: ProgressProps) => {
-  const {
-    percent = 0,
-    size = 'medium',
-    getStyles,
-    theme,
-    ...viewProps
-  } = props;
+  const { percent = 0, size = 'medium', getStyles, theme, testID } = props;
   const { containerStyle, progressStyle } = mergeStyles(
     getProgressStyles,
     getStyles,
@@ -36,7 +31,7 @@ const ProgressBase = (props: ProgressProps) => {
     <Spring to={{ value: percent }}>
       {({ value }) => {
         return (
-          <View style={containerStyle} {...viewProps}>
+          <View style={containerStyle} testID={testID}>
             <View
               // @ts-ignore
               accessibilityRole={Platform.OS === 'web' ? 'progress' : 'none'}
diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx
@@ -1,9 +1,5 @@
 import * as React from 'react';
-import {
-  Animated,
-  TouchableOpacity,
-  TouchableOpacityProps,
-} from 'react-native';
+import { AccessibilityProps, Animated, TouchableOpacity } from 'react-native';
 import { DeepPartial } from 'ts-essentials';
 
 import { Icon } from '../../icons';
@@ -16,14 +12,15 @@ import {
 } from './Switch.styles';
 
 /* Copy pasted from https://github.com/react-native-seoul/react-native-switch-toggle */
-export interface SwitchProps extends TouchableOpacityProps {
+export interface SwitchProps extends AccessibilityProps {
   isSwitchedOn?: boolean;
   isDisabled?: boolean;
   onChange?: () => void;
   onIcon?: React.ReactNode;
   offIcon?: React.ReactNode;
   duration?: number;
   theme: Theme;
+  testID?: string;
   /**
    * Inline styles for components
    */
@@ -113,7 +110,8 @@ class SwitchBase extends React.Component<SwitchProps, SwitchState> {
       theme,
       isSwitchedOn,
       getStyles,
-      ...touchableOpacityProps
+      testID,
+      ...accessibilityProps
     } = this.props;
     const { animXValue, circlePosXStart, circlePosXEnd } = this.state;
 
@@ -137,7 +135,8 @@ class SwitchBase extends React.Component<SwitchProps, SwitchState> {
           flexDirection: 'row',
           flexWrap: 'wrap',
         }}
-        {...touchableOpacityProps}
+        testID={testID}
+        {...accessibilityProps}
       >
         <Animated.View
           style={[
