fix withTheme typing

flyingcircle · Mar 3, 2021 · 107ecde · 107ecde
1 parent b239adc
commit 107ecde
Show file tree

Hide file tree

Showing 33 changed files with 336 additions and 351 deletions.
diff --git a/package.json b/package.json
@@ -74,7 +74,8 @@
     "react-native-vector-icons": "^7.0.0",
     "react-test-renderer": "^16.13.1",
     "rimraf": "^3.0.2",
-    "typescript": "^4.1.3"
+    "typescript": "^4.1.3",
+    "utility-types": "^3.10.0"
   },
   "peerDependencies": {
     "react-native-safe-area-context": "^3.1.9",

diff --git a/src/avatar/Accessory.tsx b/src/avatar/Accessory.tsx
@@ -44,6 +44,7 @@ const Accessory: React.FunctionComponent<AccessoryProps> = ({
     >
       <View>
         {source ? (
+          //@ts-ignore
           <Image
             style={{
               width: size,

diff --git a/src/avatar/Avatar.tsx b/src/avatar/Avatar.tsx
@@ -50,107 +50,104 @@ export type AvatarProps = {
   ImageComponent?: React.ComponentClass;
 };
 
-interface Avatar extends React.FunctionComponent<AvatarProps> {
-  Accessory: typeof Accessory;
-}
+interface Avatar extends React.FunctionComponent<AvatarProps> {}
 
-const AvatarComponent: Avatar = Object.assign(
-  ({
-    onPress,
-    onLongPress,
-    Component = onPress || onLongPress ? TouchableOpacity : View,
-    containerStyle,
-    icon,
-    iconStyle,
-    source,
-    size = 'small',
-    avatarStyle,
-    rounded,
-    title,
-    titleStyle,
-    overlayContainerStyle,
-    imageProps,
-    placeholderStyle,
-    renderPlaceholderContent,
-    ImageComponent = RNImage,
-    children,
-    ...attributes
-  }: React.PropsWithChildren<AvatarProps>) => {
-    const width =
-      typeof size === 'number' ? size : avatarSizes[size] || avatarSizes.small;
-    const height = width;
-    const titleSize = width / 2;
-    const iconSize = width / 2;
-    const PlaceholderContent =
-      (renderPlaceholderContent &&
-        renderNode(undefined, renderPlaceholderContent)) ||
-      (title && (
-        <Text
-          style={StyleSheet.flatten([
-            styles.title,
-            { fontSize: titleSize },
-            titleStyle,
-          ])}
-        >
-          {title}
-        </Text>
-      )) ||
-      (icon && (
-        <Icon
-          style={iconStyle && iconStyle}
-          color={icon.color || 'white'}
-          name={icon.name || 'user'}
-          size={icon.size || iconSize}
-          type={icon.type && icon.type}
-        />
-      ));
-    // @ts-ignore
-    const hidePlaceholder = !(source && source.uri);
-    // Merge image container style
-    const imageContainerStyle = StyleSheet.flatten([
-      styles.overlayContainer,
-      rounded && { borderRadius: width / 2, overflow: 'hidden' },
-      overlayContainerStyle,
-      imageProps && imageProps.containerStyle,
-    ]);
-    if (imageProps && imageProps.containerStyle) {
-      delete imageProps.containerStyle;
-    }
-    return (
-      <Component
-        onPress={onPress}
-        onLongPress={onLongPress}
+const AvatarComponent: Avatar = ({
+  onPress,
+  onLongPress,
+  Component = onPress || onLongPress ? TouchableOpacity : View,
+  containerStyle,
+  icon,
+  iconStyle,
+  source,
+  size = 'small',
+  avatarStyle,
+  rounded,
+  title,
+  titleStyle,
+  overlayContainerStyle,
+  imageProps,
+  placeholderStyle,
+  renderPlaceholderContent,
+  ImageComponent = RNImage,
+  children,
+  ...attributes
+}: React.PropsWithChildren<AvatarProps>) => {
+  const width =
+    typeof size === 'number' ? size : avatarSizes[size] || avatarSizes.small;
+  const height = width;
+  const titleSize = width / 2;
+  const iconSize = width / 2;
+  const PlaceholderContent =
+    (renderPlaceholderContent &&
+      renderNode(undefined, renderPlaceholderContent)) ||
+    (title && (
+      <Text
         style={StyleSheet.flatten([
-          styles.container,
-          { height, width },
-          rounded && { borderRadius: width / 2 },
-          containerStyle,
+          styles.title,
+          { fontSize: titleSize },
+          titleStyle,
         ])}
-        {...attributes}
       >
-        <Image
-          placeholderStyle={StyleSheet.flatten([
-            placeholderStyle,
-            hidePlaceholder && styles.hiddenPlaceholderStyle,
-          ])}
-          PlaceholderContent={PlaceholderContent}
-          containerStyle={imageContainerStyle}
-          source={source}
-          borderRadius={rounded ? width / 2 : undefined}
-          {...imageProps}
-          style={StyleSheet.flatten([
-            styles.avatar,
-            imageProps && imageProps.style,
-            avatarStyle,
-          ])}
-          ImageComponent={ImageComponent}
-        />
-        {children}
-      </Component>
-    );
-  },
-  { Accessory: Accessory }
-);
+        {title}
+      </Text>
+    )) ||
+    (icon && (
+      <Icon
+        //@ts-ignore
+        style={iconStyle && iconStyle}
+        color={icon.color || 'white'}
+        name={icon.name || 'user'}
+        size={icon.size || iconSize}
+        type={icon.type && icon.type}
+      />
+    ));
+  // @ts-ignore
+  const hidePlaceholder = !(source && source.uri);
+  // Merge image container style
+  const imageContainerStyle = StyleSheet.flatten([
+    styles.overlayContainer,
+    rounded && { borderRadius: width / 2, overflow: 'hidden' },
+    overlayContainerStyle,
+    imageProps && imageProps.containerStyle,
+  ]);
+  if (imageProps && imageProps.containerStyle) {
+    delete imageProps.containerStyle;
+  }
+  return (
+    <Component
+      onPress={onPress}
+      onLongPress={onLongPress}
+      style={StyleSheet.flatten([
+        styles.container,
+        { height, width },
+        rounded && { borderRadius: width / 2 },
+        containerStyle,
+      ])}
+      {...attributes}
+    >
+      <Image
+        placeholderStyle={StyleSheet.flatten([
+          placeholderStyle,
+          hidePlaceholder && styles.hiddenPlaceholderStyle,
+        ])}
+        PlaceholderContent={PlaceholderContent}
+        //@ts-ignore
+        containerStyle={imageContainerStyle}
+        source={source}
+        borderRadius={rounded ? width / 2 : undefined}
+        {...imageProps}
+        style={StyleSheet.flatten([
+          styles.avatar,
+          imageProps && imageProps.style,
+          avatarStyle,
+        ])}
+        ImageComponent={ImageComponent}
+      />
+      {children}
+    </Component>
+  );
+};
 
 const styles = StyleSheet.create({
   container: {
@@ -176,6 +173,7 @@ const styles = StyleSheet.create({
 
 const Avatar = React.memo(AvatarComponent, isEqual);
 export { Avatar };
-const ThemedAvatar = withTheme(Avatar, 'Avatar');
-
+const ThemedAvatar = Object.assign(withTheme(Avatar, 'Avatar'), {
+  Accessory: Accessory,
+});
 export default ThemedAvatar;
diff --git a/src/avatar/__tests__/__snapshots__/Avatar.js.snap b/src/avatar/__tests__/__snapshots__/Avatar.js.snap
@@ -10,7 +10,7 @@ exports[`Avatar Component Placeholders renders using icon prop 1`] = `
     }
   }
 >
-  <ForwardRef(forwardRef)
+  <Themed.Image
     ImageComponent={[Function]}
     PlaceholderContent={
       <Themed.Icon
@@ -57,7 +57,7 @@ exports[`Avatar Component Placeholders renders using icon with defaults 1`] = `
     }
   }
 >
-  <ForwardRef(forwardRef)
+  <Themed.Image
     ImageComponent={[Function]}
     PlaceholderContent={
       <Themed.Icon
@@ -103,7 +103,7 @@ exports[`Avatar Component Placeholders shouldn't show placeholder if not using s
     }
   }
 >
-  <ForwardRef(forwardRef)
+  <Themed.Image
     ImageComponent={[Function]}
     PlaceholderContent={
       <Text
@@ -151,7 +151,7 @@ exports[`Avatar Component Placeholders shouldn't show placeholder if source does
     }
   }
 >
-  <ForwardRef(forwardRef)
+  <Themed.Image
     ImageComponent={[Function]}
     PlaceholderContent={
       <Text
@@ -200,7 +200,7 @@ exports[`Avatar Component Placeholders shouldn't show placeholder if source exis
     }
   }
 >
-  <ForwardRef(forwardRef)
+  <Themed.Image
     ImageComponent={[Function]}
     PlaceholderContent={
       <Text
@@ -253,7 +253,7 @@ exports[`Avatar Component Sizes accepts a number 1`] = `
     }
   }
 >
-  <ForwardRef(forwardRef)
+  <Themed.Image
     ImageComponent={[Function]}
     containerStyle={
       Object {
@@ -287,7 +287,7 @@ exports[`Avatar Component Sizes accepts large 1`] = `
     }
   }
 >
-  <ForwardRef(forwardRef)
+  <Themed.Image
     ImageComponent={[Function]}
     containerStyle={
       Object {
@@ -321,7 +321,7 @@ exports[`Avatar Component Sizes accepts medium 1`] = `
     }
   }
 >
-  <ForwardRef(forwardRef)
+  <Themed.Image
     ImageComponent={[Function]}
     containerStyle={
       Object {
@@ -355,7 +355,7 @@ exports[`Avatar Component Sizes accepts small 1`] = `
     }
   }
 >
-  <ForwardRef(forwardRef)
+  <Themed.Image
     ImageComponent={[Function]}
     containerStyle={
       Object {
@@ -389,7 +389,7 @@ exports[`Avatar Component Sizes accepts xlarge 1`] = `
     }
   }
 >
-  <ForwardRef(forwardRef)
+  <Themed.Image
     ImageComponent={[Function]}
     containerStyle={
       Object {
@@ -423,7 +423,7 @@ exports[`Avatar Component allows custom imageProps 1`] = `
     }
   }
 >
-  <ForwardRef(forwardRef)
+  <Themed.Image
     ImageComponent={[Function]}
     containerStyle={
       Object {
@@ -459,7 +459,7 @@ exports[`Avatar Component renders rounded 1`] = `
     }
   }
 >
-  <ForwardRef(forwardRef)
+  <Themed.Image
     ImageComponent={[Function]}
     borderRadius={17}
     containerStyle={
@@ -497,7 +497,7 @@ exports[`Avatar Component renders touchable if onPress given 1`] = `
     }
   }
 >
-  <ForwardRef(forwardRef)
+  <Themed.Image
     ImageComponent={[Function]}
     containerStyle={
       Object {
@@ -753,7 +753,7 @@ exports[`Avatar Component should render without issues 1`] = `
     }
   }
 >
-  <ForwardRef(forwardRef)
+  <Themed.Image
     ImageComponent={[Function]}
     containerStyle={
       Object {

diff --git a/src/buttons/Button.tsx b/src/buttons/Button.tsx
@@ -270,4 +270,5 @@ const styles = StyleSheet.create({
 });
 
 export { Button };
+//@ts-ignore
 export default withTheme(Button, 'Button');