Skip to content

Commit 48542fd

Browse files
Methuselah96Methuselah96
committed
[styled-components] Move React Native-dependent types to separate package
1 parent 4c607e6 commit 48542fd

9 files changed

Lines changed: 180 additions & 453 deletions

File tree

‎types/styled-components-react-native/index.d.ts‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
// Type definitions for styled-components-react-native 5.1
2+
// Project: https://github.com/styled-components/styled-components
3+
// Definitions by: Nathan Bierema <https://github.com/Methuselah96>
4+
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
5+
6+
// tslint:disable-next-line:no-single-declare-module
7+
declare module "styled-components/native" {
8+
import * as ReactNative from "react-native";
9+
import * as React from "react";
10+
11+
export {
12+
css,
13+
DefaultTheme,
14+
isStyledComponent,
15+
ThemeConsumer,
16+
ThemeContext,
17+
ThemeProps,
18+
ThemeProvider,
19+
withTheme,
20+
useTheme,
21+
} from "styled-components";
22+
23+
import {
24+
AnyStyledComponent,
25+
DefaultTheme,
26+
isStyledComponent,
27+
StyledComponentInnerAttrs,
28+
StyledComponentInnerComponent,
29+
StyledComponentInnerOtherProps,
30+
ThemedCssFunction,
31+
ThemedStyledFunction,
32+
ThemedStyledInterface,
33+
ThemeProviderComponent,
34+
WithThemeFnInterface,
35+
} from "styled-components";
36+
37+
type AnyIfEmpty<T extends object> = keyof T extends never ? any : T;
38+
39+
export type ReactNativeThemedStyledFunction<
40+
C extends React.ComponentType<any>,
41+
T extends object
42+
> = ThemedStyledFunction<C, T>;
43+
44+
// Copied over from "ThemedBaseStyledInterface" in index.d.ts in order to remove DOM element typings
45+
interface ReactNativeThemedBaseStyledInterface<T extends object> {
46+
<C extends AnyStyledComponent>(component: C): ThemedStyledFunction<
47+
StyledComponentInnerComponent<C>,
48+
T,
49+
StyledComponentInnerOtherProps<C>,
50+
StyledComponentInnerAttrs<C>
51+
>;
52+
<C extends React.ComponentType<any>>(
53+
// unfortunately using a conditional type to validate that it can receive a `theme?: Theme`
54+
// causes tests to fail in TS 3.1
55+
component: C
56+
): ThemedStyledFunction<C, T>;
57+
}
58+
59+
type ReactNativeThemedStyledInterface<T extends object> = ReactNativeThemedBaseStyledInterface<AnyIfEmpty<T>>;
60+
61+
export interface ReactNativeStyledInterface<T extends object> extends ReactNativeThemedStyledInterface<T> {
62+
ActivityIndicator: ReactNativeThemedStyledFunction<typeof ReactNative.ActivityIndicator, T>;
63+
ActivityIndicatorIOS: ReactNativeThemedStyledFunction<typeof ReactNative.ActivityIndicator, T>;
64+
Button: ReactNativeThemedStyledFunction<typeof ReactNative.Button, T>;
65+
DatePickerIOS: ReactNativeThemedStyledFunction<typeof ReactNative.DatePickerIOS, T>;
66+
DrawerLayoutAndroid: ReactNativeThemedStyledFunction<typeof ReactNative.DrawerLayoutAndroid, T>;
67+
Image: ReactNativeThemedStyledFunction<typeof ReactNative.Image, T>;
68+
ImageBackground: ReactNativeThemedStyledFunction<typeof ReactNative.ImageBackground, T>;
69+
KeyboardAvoidingView: ReactNativeThemedStyledFunction<typeof ReactNative.KeyboardAvoidingView, T>;
70+
ListView: ReactNativeThemedStyledFunction<typeof ReactNative.ListView, T>;
71+
Modal: ReactNativeThemedStyledFunction<typeof ReactNative.Modal, T>;
72+
NavigatorIOS: ReactNativeThemedStyledFunction<typeof ReactNative.NavigatorIOS, T>;
73+
Picker: ReactNativeThemedStyledFunction<typeof ReactNative.Picker, T>;
74+
PickerIOS: ReactNativeThemedStyledFunction<typeof ReactNative.PickerIOS, T>;
75+
ProgressBarAndroid: ReactNativeThemedStyledFunction<typeof ReactNative.ProgressBarAndroid, T>;
76+
ProgressViewIOS: ReactNativeThemedStyledFunction<typeof ReactNative.ProgressViewIOS, T>;
77+
ScrollView: ReactNativeThemedStyledFunction<typeof ReactNative.ScrollView, T>;
78+
SegmentedControlIOS: ReactNativeThemedStyledFunction<typeof ReactNative.SegmentedControlIOS, T>;
79+
Slider: ReactNativeThemedStyledFunction<typeof ReactNative.Slider, T>;
80+
SliderIOS: ReactNativeThemedStyledFunction<typeof ReactNative.Slider, T>;
81+
SnapshotViewIOS: ReactNativeThemedStyledFunction<typeof ReactNative.SnapshotViewIOS, T>;
82+
Switch: ReactNativeThemedStyledFunction<typeof ReactNative.Switch, T>;
83+
RecyclerViewBackedScrollView: ReactNativeThemedStyledFunction<
84+
typeof ReactNative.RecyclerViewBackedScrollView,
85+
T
86+
>;
87+
RefreshControl: ReactNativeThemedStyledFunction<typeof ReactNative.RefreshControl, T>;
88+
SafeAreaView: ReactNativeThemedStyledFunction<typeof ReactNative.SafeAreaView, T>;
89+
StatusBar: ReactNativeThemedStyledFunction<typeof ReactNative.StatusBar, T>;
90+
SwipeableListView: ReactNativeThemedStyledFunction<typeof ReactNative.SwipeableListView, T>;
91+
SwitchAndroid: ReactNativeThemedStyledFunction<typeof ReactNative.Switch, T>;
92+
SwitchIOS: ReactNativeThemedStyledFunction<typeof ReactNative.SwitchIOS, T>;
93+
TabBarIOS: ReactNativeThemedStyledFunction<typeof ReactNative.TabBarIOS, T>;
94+
Text: ReactNativeThemedStyledFunction<typeof ReactNative.Text, T>;
95+
TextInput: ReactNativeThemedStyledFunction<typeof ReactNative.TextInput, T>;
96+
ToolbarAndroid: ReactNativeThemedStyledFunction<typeof ReactNative.ToolbarAndroid, T>;
97+
TouchableHighlight: ReactNativeThemedStyledFunction<typeof ReactNative.TouchableHighlight, T>;
98+
TouchableNativeFeedback: ReactNativeThemedStyledFunction<typeof ReactNative.TouchableNativeFeedback, T>;
99+
TouchableOpacity: ReactNativeThemedStyledFunction<typeof ReactNative.TouchableOpacity, T>;
100+
TouchableWithoutFeedback: ReactNativeThemedStyledFunction<typeof ReactNative.TouchableWithoutFeedback, T>;
101+
View: ReactNativeThemedStyledFunction<typeof ReactNative.View, T>;
102+
ViewPagerAndroid: ReactNativeThemedStyledFunction<typeof ReactNative.ViewPagerAndroid, T>;
103+
FlatList: ReactNativeThemedStyledFunction<typeof ReactNative.FlatList, T>;
104+
SectionList: ReactNativeThemedStyledFunction<typeof ReactNative.SectionList, T>;
105+
}
106+
107+
export interface ReactNativeThemedStyledComponentsModule<T extends object, U extends object = T> {
108+
default: ReactNativeStyledInterface<T>;
109+
110+
css: ThemedCssFunction<T>;
111+
112+
withTheme: WithThemeFnInterface<T>;
113+
ThemeProvider: ThemeProviderComponent<T, U>;
114+
ThemeConsumer: React.Consumer<T>;
115+
ThemeContext: React.Context<T>;
116+
useTheme(): T;
117+
118+
// This could be made to assert `target is StyledComponent<any, T>` instead, but that feels not type safe
119+
isStyledComponent: typeof isStyledComponent;
120+
}
121+
122+
const styled: ReactNativeStyledInterface<DefaultTheme>;
123+
124+
export default styled;
125+
}

types/styled-components/test/native.tsx renamed to types/styled-components-react-native/styled-components-react-native-tests.tsx

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import * as React from 'react';
2-
import * as ReactNative from 'react-native';
3-
import * as ReactDOMServer from 'react-dom/server';
1+
import * as React from "react";
2+
import * as ReactNative from "react-native";
3+
import * as ReactDOMServer from "react-dom/server";
44

55
import styled, {
66
css,
@@ -10,8 +10,8 @@ import styled, {
1010
withTheme,
1111
ThemeConsumer,
1212
ReactNativeThemedStyledComponentsModule,
13-
} from 'styled-components/native';
14-
import {} from 'styled-components/cssprop';
13+
} from "styled-components/native";
14+
import {} from "styled-components/cssprop";
1515

1616
const StyledView = styled.View`
1717
background-color: papayawhip;
@@ -61,25 +61,25 @@ const tomatoElement = <TomatoButton name="needed" />;
6161

6262
async function typedThemes() {
6363
const theme = {
64-
color: 'green',
64+
color: "green",
6565
};
6666

6767
// abuse "await import(...)" to be able to reference the styled-components namespace
6868
// without actually doing a top level namespace import
6969
const { default: styled, css, ThemeProvider, ThemeConsumer } = ((await import(
70-
'styled-components/native'
70+
"styled-components/native"
7171
)) as any) as ReactNativeThemedStyledComponentsModule<typeof theme>;
7272

7373
const ThemedView = styled.View`
74-
background: ${props => {
74+
background: ${(props) => {
7575
// $ExpectType string
7676
props.theme.color;
7777
// $ExpectType string | undefined
7878
props.testID;
7979
return props.theme.color;
8080
}};
8181
`;
82-
const ThemedView2 = styled.View(props => {
82+
const ThemedView2 = styled.View((props) => {
8383
// $ExpectType string
8484
props.theme.color;
8585
// $ExpectType string | undefined
@@ -89,7 +89,7 @@ async function typedThemes() {
8989
background: props.theme.color,
9090
};
9191
});
92-
const ThemedView3 = styled.View(props => {
92+
const ThemedView3 = styled.View((props) => {
9393
// $ExpectType string
9494
props.theme.color;
9595
// $ExpectType string | undefined
@@ -100,7 +100,7 @@ async function typedThemes() {
100100
`;
101101
});
102102
const themedCss = css`
103-
background: ${props => {
103+
background: ${(props) => {
104104
// $ExpectType string
105105
props.theme.color;
106106
// $ExpectType "theme"
@@ -112,10 +112,10 @@ async function typedThemes() {
112112
// $ExpectError
113113
const ThemedView4 = styled.View(themedCss);
114114

115-
const themedCssWithNesting = css(props => ({
115+
const themedCssWithNesting = css((props) => ({
116116
color: props.theme.color,
117117
[ThemedView3]: {
118-
color: 'green',
118+
color: "green",
119119
},
120120
}));
121121

@@ -126,7 +126,7 @@ async function typedThemes() {
126126
<ThemedView2 />
127127
<ThemedView3 />
128128
<ThemeConsumer>
129-
{theme => {
129+
{(theme) => {
130130
// $ExpectType string
131131
theme.color;
132132
return theme.color;
@@ -138,7 +138,7 @@ async function typedThemes() {
138138
}
139139

140140
async function reexportCompatibility() {
141-
const sc = await import('styled-components/native');
141+
const sc = await import("styled-components/native");
142142
const themed = sc as ReactNativeThemedStyledComponentsModule<any>;
143143

144144
let { ...scExports } = sc;
@@ -159,30 +159,30 @@ async function themeAugmentation() {
159159
accent: string;
160160
}
161161

162-
const base = ((await import('styled-components/native')) as any) as ReactNativeThemedStyledComponentsModule<
163-
BaseTheme
164-
>;
165-
const extra = ((await import('styled-components/native')) as any) as ReactNativeThemedStyledComponentsModule<
162+
const base = ((await import(
163+
"styled-components/native"
164+
)) as any) as ReactNativeThemedStyledComponentsModule<BaseTheme>;
165+
const extra = ((await import("styled-components/native")) as any) as ReactNativeThemedStyledComponentsModule<
166166
ExtraTheme,
167167
BaseTheme
168168
>;
169169

170170
return (
171171
<base.ThemeProvider
172172
theme={{
173-
background: 'black',
173+
background: "black",
174174
}}
175175
>
176176
<>
177177
<extra.ThemeProvider
178-
theme={base => base} // $ExpectError
178+
theme={(base) => base} // $ExpectError
179179
>
180180
<extra.ThemeConsumer>{() => null}</extra.ThemeConsumer>
181181
</extra.ThemeProvider>
182182
<extra.ThemeProvider
183-
theme={base => ({
183+
theme={(base) => ({
184184
...base,
185-
accent: 'blue',
185+
accent: "blue",
186186
})}
187187
>
188188
<extra.ThemeConsumer>{() => null}</extra.ThemeConsumer>

‎types/styled-components-react-native/tsconfig.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"compilerOptions": {
3+
"module": "commonjs",
4+
"jsx": "react",
5+
"lib": [
6+
"es6"
7+
],
8+
"noImplicitAny": true,
9+
"noImplicitThis": true,
10+
"strictFunctionTypes": true,
11+
"strictNullChecks": true,
12+
"baseUrl": "../",
13+
"typeRoots": [
14+
"../"
15+
],
16+
"types": [],
17+
"noEmit": true,
18+
"forceConsistentCasingInFileNames": true
19+
},
20+
"files": [
21+
"index.d.ts",
22+
"styled-components-react-native-tests.tsx"
23+
]
24+
}

‎types/styled-components-react-native/tslint.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"extends": "dtslint/dt.json",
3+
"rules": {
4+
"npm-naming": false
5+
}
6+
}

0 commit comments

Comments
 (0)