rn-css 1.8.4 → 1.8.6

package/dist/index.js

@@ -35,7 +35,6 @@ Object.defineProperty(exports, "RemContext", { enumerable: true, get: function (
 __exportStar(require("./useTheme"), exports);
 const styled = (Component) => (0, styleComponent_1.default)(Component);
 styled.ActivityIndicator = styled(RN.ActivityIndicator);
-styled.Button = styled(RN.Button);
 styled.DrawerLayoutAndroid = styled(RN.DrawerLayoutAndroid);
 styled.Image = styled(RN.Image);
 styled.ImageBackground = styled(RN.ImageBackground);
@@ -48,7 +47,6 @@ styled.Switch = styled(RN.Switch);
 styled.RecyclerViewBackedScrollView = styled(RN.RecyclerViewBackedScrollView);
 styled.RefreshControl = styled(RN.RefreshControl);
 styled.SafeAreaView = styled(RN.SafeAreaView);
-styled.StatusBar = styled(RN.StatusBar);
 styled.Text = styled(RN.Text);
 styled.TextInput = styled(RN.TextInput);
 styled.TouchableHighlight = styled(RN.TouchableHighlight);

package/dist/styleComponent.d.ts

@@ -1,6 +1,6 @@
 import React, { MouseEvent } from 'react';
-import { Animated, FlatListProps, LayoutChangeEvent, SectionListProps, StyleProp, VirtualizedListProps } from 'react-native';
-import type { AnyStyle, CompleteStyle, Units } from './types';
+import { FlatListProps, LayoutChangeEvent, SectionListProps, StyleProp, VirtualizedListProps } from 'react-native';
+import type { CompleteStyle, Units } from './types';
 export declare const defaultUnits: Units;
 export declare const RemContext: React.Context<number>;
 export declare const FontSizeContext: React.Context<number>;
@@ -13,32 +13,31 @@ declare type Functs<T> = (arg: T & {
     shared: unknown;
     theme: DefaultTheme;
 }) => Primitive;
-declare type OptionalProps<T extends AnyStyle | Animated.WithAnimatedValue<AnyStyle> = AnyStyle> = {
+declare type OptionalProps = {
     rnCSS?: `${string};`;
     onMouseEnter?: (event: MouseEvent) => void;
     onMouseLeave?: (event: MouseEvent) => void;
     onLayout?: (event: LayoutChangeEvent) => void;
     children?: React.ReactNode;
-    style?: StyleProp<T>;
 };
-declare const styled: <Props, StyleType extends AnyStyle | Animated.WithAnimatedObject<import("react-native").ViewStyle> | Animated.WithAnimatedObject<import("react-native").TextStyle> | Animated.WithAnimatedObject<import("react-native").ImageStyle> = AnyStyle>(Component: React.ComponentType<Props>) => {
-    <S>(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & Props>)[]): React.ForwardRefExoticComponent<Props & S & OptionalProps<StyleType> & {
-        ref?: React.Ref<any> | undefined;
-    }>;
-    attrs<S_1>(opts: Partial<S_1 & Props> | ((props: S_1 & Props) => Partial<S_1 & Props>)): (chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S_1 & Props>)[]) => React.ForwardRefExoticComponent<(Props | S_1) & OptionalProps<StyleType> & {
+declare const styled: <StyleType, InitialProps extends {
+    style?: StyleProp<StyleType>;
+}, Props extends InitialProps & OptionalProps = InitialProps & OptionalProps>(Component: React.ComponentType<InitialProps>) => {
+    <S>(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & Props>)[]): React.ForwardRefExoticComponent<Props & S & {
         ref?: React.Ref<any> | undefined;
     }>;
+    attrs<Part, Result extends Partial<Part & Props> = Partial<Part & Props>>(opts: Result | ((props: Part & Props) => Result)): (chunks: TemplateStringsArray, ...functs: (Primitive | Functs<Part & Props>)[]) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Exclude<Props & Part, Result> & Partial<Props & Part>> & React.RefAttributes<React.ComponentType<Props & Part>>>;
 };
 export default styled;
 export declare const styledFlatList: {
-    <S>(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S>)[]): <Type>(props: S & FlatListProps<Type> & OptionalProps<AnyStyle>) => JSX.Element;
-    attrs<S_1>(opts: Partial<S_1 & FlatListProps<any>> | ((props: S_1 & FlatListProps<any>) => Partial<S_1 & FlatListProps<any>>)): (chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S_1 & FlatListProps<any>>)[]) => <Props>(componentProps: S_1 & FlatListProps<Props> & OptionalProps<AnyStyle>) => JSX.Element;
+    <S>(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & FlatListProps<any> & OptionalProps>)[]): <Type>(props: S & OptionalProps & FlatListProps<Type>) => JSX.Element;
+    attrs<S_1>(opts: (S_1 & FlatListProps<any> & OptionalProps) | ((props: S_1 & FlatListProps<any> & OptionalProps) => Partial<S_1 & OptionalProps & FlatListProps<any>>)): (chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S_1 & OptionalProps & FlatListProps<any>>)[]) => <Props>(componentProps: S_1 & OptionalProps & FlatListProps<Props>) => JSX.Element;
 };
 export declare const styledSectionList: {
-    <S>(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S>)[]): <Type>(props: S & SectionListProps<Type, import("react-native").DefaultSectionT> & OptionalProps<AnyStyle>) => JSX.Element;
-    attrs<S_1>(opts: Partial<S_1 & SectionListProps<any, import("react-native").DefaultSectionT>> | ((props: S_1 & SectionListProps<any, import("react-native").DefaultSectionT>) => Partial<S_1 & SectionListProps<any, import("react-native").DefaultSectionT>>)): (chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S_1 & SectionListProps<any, import("react-native").DefaultSectionT>>)[]) => <Props>(componentProps: S_1 & SectionListProps<Props, import("react-native").DefaultSectionT> & OptionalProps<AnyStyle>) => JSX.Element;
+    <S>(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & SectionListProps<any, import("react-native").DefaultSectionT> & OptionalProps>)[]): <Type>(props: S & OptionalProps & SectionListProps<Type, import("react-native").DefaultSectionT>) => JSX.Element;
+    attrs<S_1>(opts: (S_1 & SectionListProps<any, import("react-native").DefaultSectionT> & OptionalProps) | ((props: S_1 & SectionListProps<any, import("react-native").DefaultSectionT> & OptionalProps) => Partial<S_1 & OptionalProps & SectionListProps<any, import("react-native").DefaultSectionT>>)): (chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S_1 & SectionListProps<any, import("react-native").DefaultSectionT>>)[]) => <Props>(componentProps: S_1 & OptionalProps & SectionListProps<Props, import("react-native").DefaultSectionT>) => JSX.Element;
 };
 export declare const styledVirtualizedList: {
-    <S>(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S>)[]): <Type>(props: S & VirtualizedListProps<Type> & OptionalProps<AnyStyle>) => JSX.Element;
-    attrs<S_1>(opts: Partial<S_1 & VirtualizedListProps<any>> | ((props: S_1 & VirtualizedListProps<any>) => Partial<S_1 & VirtualizedListProps<any>>)): (chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S_1 & VirtualizedListProps<any>>)[]) => <Props>(componentProps: S_1 & VirtualizedListProps<Props> & OptionalProps<AnyStyle>) => JSX.Element;
+    <S>(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & VirtualizedListProps<any> & OptionalProps>)[]): <Type>(props: S & OptionalProps & VirtualizedListProps<Type>) => JSX.Element;
+    attrs<S_1>(opts: (S_1 & VirtualizedListProps<any> & OptionalProps) | ((props: S_1 & VirtualizedListProps<any> & OptionalProps) => Partial<S_1 & OptionalProps & VirtualizedListProps<any>>)): (chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S_1 & VirtualizedListProps<any>>)[]) => <Props>(componentProps: S_1 & OptionalProps & VirtualizedListProps<Props>) => JSX.Element;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-css",
-  "version": "1.8.4",
+  "version": "1.8.6",
   "scripts": {
     "test": "jest",
     "prepare": "tsc",

package/src/index.tsx

@@ -2,15 +2,13 @@ import React from 'react'
 import * as RN from 'react-native'
 import './polyfill'
 import styledComponent, { styledFlatList, styledSectionList, styledVirtualizedList } from './styleComponent'
-import { AnyStyle } from './types'
 export { cssToRNStyle } from './cssToRN'
 export { SharedValue, FontSizeContext, RemContext, DefaultTheme } from './styleComponent'
 export * from './useTheme'
 
-const styled = <T, >(Component: React.ComponentType<T>) => styledComponent<T, AnyStyle | RN.Animated.WithAnimatedValue<AnyStyle>>(Component)
+const styled = <StyleType, InitialProps extends { style?: RN.StyleProp<StyleType> }>(Component: React.ComponentType<InitialProps>) => styledComponent<StyleType, InitialProps>(Component)
 
 styled.ActivityIndicator = styled(RN.ActivityIndicator)
-styled.Button = styled(RN.Button)
 styled.DrawerLayoutAndroid = styled(RN.DrawerLayoutAndroid)
 styled.Image = styled(RN.Image)
 styled.ImageBackground = styled(RN.ImageBackground)
@@ -23,7 +21,6 @@ styled.Switch = styled(RN.Switch)
 styled.RecyclerViewBackedScrollView = styled(RN.RecyclerViewBackedScrollView)
 styled.RefreshControl = styled(RN.RefreshControl)
 styled.SafeAreaView = styled(RN.SafeAreaView)
-styled.StatusBar = styled(RN.StatusBar)
 styled.Text = styled(RN.Text)
 styled.TextInput = styled(RN.TextInput)
 styled.TouchableHighlight = styled(RN.TouchableHighlight)

package/src/styleComponent.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable react/display-name */
 import React, { MouseEvent } from 'react'
-import { Animated, FlatList, FlatListProps, LayoutChangeEvent, Platform, SectionList, SectionListProps, StyleProp, StyleSheet, VirtualizedList, VirtualizedListProps } from 'react-native'
+import { FlatList, FlatListProps, LayoutChangeEvent, Platform, SectionList, SectionListProps, StyleProp, StyleSheet, ViewStyle, VirtualizedList, VirtualizedListProps } from 'react-native'
 import convertStyle from './convertStyle'
 import cssToStyle from './cssToRN'
 import { useFontSize, useHover, useLayout, useScreenSize, useMediaQuery } from './features'
@@ -21,13 +21,12 @@ export interface DefaultTheme {}
 
 type Primitive = number | string | null | undefined | boolean | CompleteStyle
 type Functs<T> = (arg: T & { rnCSS?: string; shared: unknown, theme: DefaultTheme }) => Primitive
-type OptionalProps<T extends AnyStyle | Animated.WithAnimatedValue<AnyStyle> = AnyStyle> = {
+type OptionalProps = {
   rnCSS?: `${string};`;
   onMouseEnter?: (event: MouseEvent) => void;
   onMouseLeave?: (event: MouseEvent) => void;
   onLayout?: (event: LayoutChangeEvent) => void
   children?: React.ReactNode;
-  style?: StyleProp<T>;
 }
 
 /** Converts the tagged template string into a css string */
@@ -59,9 +58,9 @@ function removeStyle (hash: string) {
   styleMap[hash].usage--
   if (styleMap[hash].usage <= 0) delete styleMap[hash]
 }
-const styled = <Props, StyleType extends AnyStyle | Animated.WithAnimatedValue<AnyStyle> = AnyStyle>(Component: React.ComponentType<Props>) => {
+const styled = <StyleType, InitialProps extends { style?: StyleProp<StyleType> }, Props extends InitialProps & OptionalProps = InitialProps & OptionalProps>(Component: React.ComponentType<InitialProps>) => {
   const styledComponent = <S, >(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & Props>)[]) => {
-    const ForwardRefComponent = React.forwardRef<React.ComponentType<S & Props & OptionalProps<StyleType>>, S & Props & OptionalProps<StyleType>>((props: S & Props & OptionalProps<StyleType>, ref) => {
+    const ForwardRefComponent = React.forwardRef<React.ComponentType<S & Props>, S & Props>((props: S & Props, ref) => {
       const rem = React.useContext(RemContext)
       const shared = React.useContext(SharedValue)
       // Build the css string with the context
@@ -126,7 +125,7 @@ const styled = <Props, StyleType extends AnyStyle | Animated.WithAnimatedValue<A
         return { style: getStyle<CompleteStyle>(hash, style), hash }
       }, [finalStyle, units])
       const newProps = React.useMemo(() => {
-        const newProps: OptionalProps<StyleType> = { style: [styleConvertedFromCSS as StyleType, props.style], onMouseEnter, onMouseLeave, onLayout }
+        const newProps = { style: [styleConvertedFromCSS as StyleType, props.style], onMouseEnter, onMouseLeave, onLayout }
         if (finalStyle.textOverflow === 'ellipsis') {
           Object.assign(newProps, { numberOfLines: 1 })
         }
@@ -145,18 +144,18 @@ const styled = <Props, StyleType extends AnyStyle | Animated.WithAnimatedValue<A
         return <Component ref={ref} {...props} {...newProps} />
       }
     })
-    return ForwardRefComponent as React.ForwardRefExoticComponent<Props & S & OptionalProps<StyleType> & { ref?: React.Ref<any> }>
+    return ForwardRefComponent as React.ForwardRefExoticComponent<Props & S & { ref?: React.Ref<any> }>
   }
 
   // provide styled(Comp).attrs({} | () => {}) feature
-  styledComponent.attrs = <S, >(opts: Partial<S & Props> | ((props: S & Props) => Partial<S & Props>)) => (chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & Props>)[]) => {
+  styledComponent.attrs = <Part, Result extends Partial<Part & Props> = Partial<Part & Props>>(opts: Result | ((props: Part & Props) => Result)) => (chunks: TemplateStringsArray, ...functs: (Primitive | Functs<Part & Props>)[]) => {
     const ComponentWithAttrs = styledComponent(chunks, ...functs)
-    const ForwardRefComponent = React.forwardRef<typeof Component, S & Props>((props: Props & S, ref) => {
+    const ForwardRefComponent = React.forwardRef<React.ComponentType<Props & Part>, Exclude<Props & Part, Result> & Partial<Props & Part>>((props, ref) => {
       const attrs = (opts instanceof Function) ? opts(props) : opts
       return <ComponentWithAttrs ref={ref} {...props} {...attrs} />
     })
     // TODO : Find a way to remove from the Props the properties affected by opts
-    return ForwardRefComponent as React.ForwardRefExoticComponent<(Props | S) & OptionalProps<StyleType> & { ref?: React.Ref<any> }>
+    return ForwardRefComponent
   }
 
   return styledComponent
@@ -164,12 +163,12 @@ const styled = <Props, StyleType extends AnyStyle | Animated.WithAnimatedValue<A
 
 export default styled
 
-export const styledFlatList = <S, >(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S>)[]) => <Type, >(props: S & FlatListProps<Type> & OptionalProps) => invoke(styled<FlatListProps<Type>>(FlatList)(chunks, ...functs), props)
-styledFlatList.attrs = <S, >(opts: Partial<S & FlatListProps<any>> | ((props: S & FlatListProps<any>) => Partial<S & FlatListProps<any>>)) => (chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & FlatListProps<any>>)[]) => <Props, >(componentProps: S & FlatListProps<Props> & OptionalProps) => invoke(styled<FlatListProps<Props>>(FlatList).attrs<S & FlatListProps<Props>>(opts)(chunks, ...functs), componentProps)
-export const styledSectionList = <S, >(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S>)[]) => <Type, >(props: S & SectionListProps<Type> & OptionalProps) => invoke(styled<SectionListProps<Type>>(SectionList)(chunks, ...functs), props)
-styledSectionList.attrs = <S, >(opts: Partial<S & SectionListProps<any>> | ((props: S & SectionListProps<any>) => Partial<S & SectionListProps<any>>)) => (chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & SectionListProps<any>>)[]) => <Props, >(componentProps: S & SectionListProps<Props> & OptionalProps) => invoke(styled<SectionListProps<Props>>(SectionList).attrs<S & SectionListProps<Props>>(opts)(chunks, ...functs), componentProps as any)
-export const styledVirtualizedList = <S, >(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S>)[]) => <Type, >(props: S & VirtualizedListProps<Type> & OptionalProps) => invoke(styled<VirtualizedListProps<Type>>(VirtualizedList)(chunks, ...functs), props)
-styledVirtualizedList.attrs = <S, >(opts: Partial<S & VirtualizedListProps<any>> | ((props: S & VirtualizedListProps<any>) => Partial<S & VirtualizedListProps<any>>)) => (chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & VirtualizedListProps<any>>)[]) => <Props, >(componentProps: S & VirtualizedListProps<Props> & OptionalProps) => invoke(styled<VirtualizedListProps<Props>>(VirtualizedList).attrs<S & VirtualizedListProps<Props>>(opts)(chunks, ...functs), componentProps)
+export const styledFlatList = <S, >(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & FlatListProps<any> & OptionalProps>)[]) => <Type, >(props: S & OptionalProps & FlatListProps<Type>) => invoke(styled<ViewStyle, FlatListProps<Type>>(FlatList)(chunks, ...functs), props)
+styledFlatList.attrs = <S, >(opts: S & FlatListProps<any> & OptionalProps | ((props: S & FlatListProps<any> & OptionalProps) => Partial<S & OptionalProps & FlatListProps<any>>)) => (chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & OptionalProps & FlatListProps<any>>)[]) => <Props, >(componentProps: S & OptionalProps & FlatListProps<Props>) => invoke(styled<ViewStyle, FlatListProps<Props>>(FlatList).attrs<S>(opts)(chunks, ...functs), componentProps as any)
+export const styledSectionList = <S, >(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & SectionListProps<any> & OptionalProps>)[]) => <Type, >(props: S & OptionalProps & SectionListProps<Type>) => invoke(styled<ViewStyle, SectionListProps<Type>>(SectionList)(chunks, ...functs), props)
+styledSectionList.attrs = <S, >(opts: S & SectionListProps<any> & OptionalProps | ((props: S & SectionListProps<any> & OptionalProps) => Partial<S & OptionalProps & SectionListProps<any>>)) => (chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & SectionListProps<any>>)[]) => <Props, >(componentProps: S & OptionalProps & SectionListProps<Props>) => invoke(styled<ViewStyle, SectionListProps<Props>>(SectionList).attrs<S>(opts)(chunks, ...functs), componentProps as any)
+export const styledVirtualizedList = <S, >(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & VirtualizedListProps<any> & OptionalProps>)[]) => <Type, >(props: S & OptionalProps & VirtualizedListProps<Type>) => invoke(styled<ViewStyle, VirtualizedListProps<Type>>(VirtualizedList)(chunks, ...functs), props)
+styledVirtualizedList.attrs = <S, >(opts: S & VirtualizedListProps<any> & OptionalProps | ((props: S & VirtualizedListProps<any> & OptionalProps) => Partial<S & OptionalProps & VirtualizedListProps<any>>)) => (chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & VirtualizedListProps<any>>)[]) => <Props, >(componentProps: S & OptionalProps & VirtualizedListProps<Props>) => invoke(styled<ViewStyle, VirtualizedListProps<Props>>(VirtualizedList).attrs<S>(opts)(chunks, ...functs), componentProps as any)
 
 function invoke<T> (Component: React.ComponentType<T>, props: T) {
   return <Component {...props} />