From 19c5bf96ed9e1b3b9bacb1d61988d4f81ad271ef Mon Sep 17 00:00:00 2001
From: Tom Crockett <pelotom@gmail.com>
Date: Fri, 6 Oct 2017 01:15:52 -0700
Subject: [PATCH] Fix withStyles typing for class components; remove usage as
 TS decorator (#8561)

* Fix withStyles typing for class components; remove usage as TS decorator
* Remove unnecessary non-null assertion
---
 src/styles/withStyles.d.ts          | 22 +++-------------------
 test/typescript/components.spec.tsx |  3 ++-
 test/typescript/styles.spec.tsx     | 18 ++++++++++--------
 3 files changed, 15 insertions(+), 28 deletions(-)

diff --git a/src/styles/withStyles.d.ts b/src/styles/withStyles.d.ts
index 2bdc4c78e19d50..5a9e96a8f1b596 100644
--- a/src/styles/withStyles.d.ts
+++ b/src/styles/withStyles.d.ts
@@ -26,22 +26,6 @@ export type WithStyles<ClassKey extends string = string> = {
 export default function withStyles<ClassKey extends string>(
   style: StyleRules<ClassKey> | StyleRulesCallback<ClassKey>,
   options?: WithStylesOptions
-): {
-  /**
-   * Decorating a stateless functional component.
-   */
-  <P>(
-    component: React.StatelessComponent<P & WithStyles<ClassKey>>
-  ): StyledComponent<P, ClassKey>;
-
-  /**
-   * Decorating a class component. This is slightly less type safe than the
-   * function decoration case, due to current restrictions on TypeScript
-   * decorators (https://github.com/Microsoft/TypeScript/issues/4881). The
-   * upshot is that one has to use the non-null assertion operator (`!`) when
-   * accessing `props.classes`.
-   */
-  <P, C extends React.ComponentClass<P & StyledComponentProps<ClassKey>>>(
-    component: C
-  ): C;
-};
+): <P>(
+  component: React.ComponentType<P & WithStyles<ClassKey>>
+) => StyledComponent<P, ClassKey>;
diff --git a/test/typescript/components.spec.tsx b/test/typescript/components.spec.tsx
index 901ca92eab4a66..487453601ddd81 100644
--- a/test/typescript/components.spec.tsx
+++ b/test/typescript/components.spec.tsx
@@ -53,6 +53,7 @@ import Table, {
 } from '../../src/Table';
 import { withStyles, StyleRulesCallback } from '../../src/styles';
 import { withResponsiveFullScreen, DialogProps } from '../../src/Dialog';
+import { WithStyles } from '../../src/styles/withStyles';
 
 const log = console.log;
 const FakeIcon = () => <div>ICON</div>;
@@ -717,7 +718,7 @@ const TabsTest = () => {
     },
   });
 
-  class BasicTabs extends React.Component<{ classes: { root: string } }> {
+  class BasicTabs extends React.Component<WithStyles<'root'|'button'>> {
     state = {
       value: 0,
     };
diff --git a/test/typescript/styles.spec.tsx b/test/typescript/styles.spec.tsx
index 2da89158e0804e..283c5231eaf9cd 100644
--- a/test/typescript/styles.spec.tsx
+++ b/test/typescript/styles.spec.tsx
@@ -120,15 +120,17 @@ const AllTheStyles: React.SFC<AllTheProps> = ({ theme, classes }) => (
 
 const AllTheComposition = withTheme(withStyles(styles)(AllTheStyles));
 
-@withStyles(styles)
-class DecoratedComponent extends React.Component<
-  ComponentProps & StyledComponentProps<'root'>
-> {
-  render() {
-    const { classes, text } = this.props;
-    return <div className={classes!.root}>{text}</div>;
+// Can't use withStyles effectively as a decorator in TypeScript
+// due to https://github.com/Microsoft/TypeScript/issues/4881
+//@withStyles(styles)
+const DecoratedComponent = withStyles(styles)(
+  class extends React.Component<ComponentProps & WithStyles<'root'>> {
+    render() {
+      const { classes, text } = this.props;
+      return <div className={classes.root}>{text}</div>;
+    }
   }
-}
+);
 
 // no 'classes' property required at element creation time (#8267)
 <DecoratedComponent text="foo" />;