Merge pull request styled-components#521 from patrick91/fix/ts-with-t…

…heme

Add withTheme definition

native/index.d.ts

@@ -11,7 +11,8 @@ export {
   OuterStyledProps,
   StyledFunction,
   BaseStyledInterface,
-  css
+  css,
+  withTheme,
 } from "..";
 
 import { StyledFunction, BaseStyledInterface } from "..";

typings/styled-components-hoc-test.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+import styled from "..";
+import { css, keyframes, ThemeProvider, injectGlobal, withTheme, ThemeProps } from "..";
+
+
+class MyComponent extends React.Component<ThemeProps<{}>, {}> {
+  render() {
+    const { theme } = this.props;
+
+    console.log("Current theme: ", theme);
+
+    return <h1>Hello</h1>;
+  }
+}
+
+export default withTheme(MyComponent);

typings/styled-components-test.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import styled from "..";
-import { css, keyframes, ThemeProvider, injectGlobal } from "..";
+import { css, keyframes, ThemeProvider, injectGlobal, withTheme } from "..";
 
 // Create a <Title> react component that renders an <h1> which is
 // centered, palevioletred and sized at 1.5em
@@ -149,3 +149,9 @@ injectGlobal`
   ${cssWithFunc1}
 `;
 */
+
+const name = "hey";
+
+const ThemedButton = withTheme(MyButton);
+
+<ThemedButton name={name} />;

typings/styled-components.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { StatelessComponent, ComponentClass } from "react";
+import { StatelessComponent, ComponentClass, PureComponent } from "react";
 
 type Component<P> = ComponentClass<P> | StatelessComponent<P>;
 
@@ -192,13 +192,16 @@ export interface ThemedStyledComponentsModule<T> {
   css: ThemedCssFunction<T>;
   keyframes(strings: TemplateStringsArray, ...interpolations: SimpleInterpolation[]): string;
   injectGlobal(strings: TemplateStringsArray, ...interpolations: SimpleInterpolation[]): void;
+  withTheme<P extends { theme?: T; }, T>(component: Component<P>): ComponentClass<P>;
 
   ThemeProvider: ThemeProviderComponent<T>;
 }
 
 declare const styled: StyledInterface;
 
 export const css: ThemedCssFunction<any>;
+export function withTheme<P extends { theme?: T; }, T>(component: Component<P>): ComponentClass<P>;
+
 export function keyframes(strings: TemplateStringsArray, ...interpolations: SimpleInterpolation[]): string;
 export function injectGlobal(strings: TemplateStringsArray, ...interpolations: SimpleInterpolation[]): void;
 

typings/themed-tests/mytheme-styled-components.tsx

@@ -12,8 +12,13 @@ const {
     css,
     injectGlobal,
     keyframes,
-    ThemeProvider
+    withTheme,
+    ThemeProvider,
 } = styledComponents as ThemedStyledComponentsModule<MyTheme>;
 
+interface ThemeProps {
+  theme?: MyTheme;
+}
+
 export default styled;
-export { css, injectGlobal, keyframes, ThemeProvider };
+export { css, injectGlobal, keyframes, withTheme, ThemeProvider, ThemeProps };

typings/themed-tests/with-theme-test.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import styled, { css, keyframes, ThemeProvider, injectGlobal, withTheme, MyTheme, ThemeProps } from "./mytheme-styled-components";
+
+interface MyComponentProps extends ThemeProps {
+  text: string;
+}
+
+class MyComponent extends React.Component<MyComponentProps, {}> {
+  render() {
+    return <h1>{this.props.theme}</h1>;
+  }
+}
+
+const theme: MyTheme = {
+  primaryColor: "red",
+  backgroundColor: "blue",
+  defaultMargin: 10,
+};
+
+const text = "hey";
+
+const MyThemedComponent = withTheme(MyComponent);
+
+<MyThemedComponent text={text} />;