addressing some deficiencies

emotion-js · Nov 24, 2019 · b7bea71 · b7bea71
1 parent c2f6f6f
commit b7bea71
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 13 deletions.
diff --git a/packages/native/types/base.d.ts b/packages/native/types/base.d.ts
@@ -4,7 +4,8 @@
 import {
   ComponentPropsWithoutRef,
   ComponentType,
-  NamedExoticComponent
+  NamedExoticComponent,
+  PropsWithChildren
 } from 'react'
 import * as RN from 'react-native'
 
@@ -62,24 +63,28 @@ export type ReactNativeComponentProps<
 export type ReactNativeStyleType<Props> = Props extends {
   style?: RN.StyleProp<infer StyleType>
 }
-  ? StyleType
+  ? StyleType extends ReactNativeStyle ? StyleType : ReactNativeStyle
   : ReactNativeStyle
 
-export type ObjectInterpolation<StyleType = ReactNativeStyle> = StyleType
+export type ObjectInterpolation<
+  StyleType extends ReactNativeStyle = ReactNativeStyle
+> = StyleType
 
-export interface ArrayInterpolation<MergedProps, StyleType = ReactNativeStyle>
-  extends Array<Interpolation<MergedProps, StyleType>> {}
+export interface ArrayInterpolation<
+  MergedProps,
+  StyleType extends ReactNativeStyle = ReactNativeStyle
+> extends Array<Interpolation<MergedProps, StyleType>> {}
 
 export interface FunctionInterpolation<
   MergedProps,
-  StyleType = ReactNativeStyle
+  StyleType extends ReactNativeStyle = ReactNativeStyle
 > {
   (mergedProps: MergedProps): Interpolation<MergedProps, StyleType>
 }
 
 export type Interpolation<
   MergedProps = unknown,
-  StyleType = ReactNativeStyle
+  StyleType extends ReactNativeStyle = ReactNativeStyle
 > =
   | null
   | undefined
@@ -120,7 +125,9 @@ export interface StyledWithComponent<ComponentProps extends {}> {
 export type StyledComponent<
   ComponentProps extends {},
   SpecificComponentProps extends {} = {}
-> = NamedExoticComponent<ComponentProps & SpecificComponentProps> &
+> = NamedExoticComponent<
+  PropsWithChildren<ComponentProps & SpecificComponentProps>
+> &
   StyledWithComponent<ComponentProps>
 
 /**
@@ -132,7 +139,7 @@ export interface CreateStyledComponent<
   ComponentProps extends {},
   SpecificComponentProps extends {} = {},
   StyleProps extends {} = {},
-  StyleType = ReactNativeStyle
+  StyleType extends ReactNativeStyle = ReactNativeStyle
 > {
   /**
    * @typeparam AdditionalProps  Additional props to add to your styled component

diff --git a/packages/native/types/index.d.ts b/packages/native/types/index.d.ts
@@ -25,11 +25,16 @@ export {
   StyledOptions
 } from './base'
 
-export function css(
+export function css<StyleType extends ReactNativeStyle = ReactNativeStyle>(
   template: TemplateStringsArray,
   ...args: Array<Interpolation>
-): ReactNativeStyle
-export function css(...args: Array<Interpolation>): ReactNativeStyle
+): StyleType
+export function css<StyleType extends ReactNativeStyle = ReactNativeStyle>(
+  ...args: Array<StyleType>
+): StyleType
+export function css<StyleType extends ReactNativeStyle = ReactNativeStyle>(
+  ...args: Array<Interpolation>
+): StyleType
 
 export type StyledComponents<Theme extends {} = any> = {
   [ComponentName in ReactNativeComponentNames]: CreateStyledComponent<

diff --git a/packages/native/types/tests.tsx b/packages/native/types/tests.tsx
@@ -1,5 +1,12 @@
 import * as React from 'react'
-import { ImageStyle, StyleProp, TextStyle, View } from 'react-native'
+import {
+  FlexStyle,
+  ImageStyle,
+  ScrollView,
+  StyleProp,
+  TextStyle,
+  View
+} from 'react-native'
 import styled, { CreateStyled, css, ReactNativeStyle } from '@emotion/native'
 
 const cssObject = {
@@ -117,3 +124,27 @@ styled(MyComponent)({ width: 100 })
 styled(MyComponent)(({ bar }) => ({ color: bar }))
 styled(View)({ width: 100 })
 styled(View)<ExtraProps>(({ foo, testID }) => ({ color: foo, testID }))
+
+const styles = {
+  container: css({ flex: 1 }),
+  scrollContainer: css`
+    flex-grow: 1;
+    align-items: center;
+  `,
+  centered: css<FlexStyle>`
+    justify-content: center;
+    align-items: center;
+  `
+}
+
+export const scrollElem = (
+  <ScrollView contentContainerStyle={styles.scrollContainer}>
+    <View />
+  </ScrollView>
+)
+export const Container = styled.View(styles.container)
+export const CenterContainer = styled.View(styles.container, styles.centered)
+export const ImageFullWidthContained = styled.Image`
+  ${styles.container} width: 100%;
+  resize-mode: contain;
+`
diff --git a/packages/native/types/tslint.json b/packages/native/types/tslint.json
@@ -18,6 +18,7 @@
       "check-preblock"
     ],
     "no-null-undefined-union": false,
+    "no-unnecessary-generics": false,
     "strict-export-declare-modifiers": false
   }
 }