From 3180fea53f4827c599e89369d613b33d4e167048 Mon Sep 17 00:00:00 2001
From: James Lawrence <jlaw90@hotmail.com>
Date: Thu, 10 Jan 2019 01:06:44 +0000
Subject: [PATCH] Update tests - had to disable strict function checking, if
 anyone knows how to make it work with this, please do!

---
 types/react-jss/react-jss-tests.tsx | 59 ++++++++++++++++-------------
 types/react-jss/tsconfig.json       |  2 +-
 2 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/types/react-jss/react-jss-tests.tsx b/types/react-jss/react-jss-tests.tsx
index 803170bb99..6e86bed492 100644
--- a/types/react-jss/react-jss-tests.tsx
+++ b/types/react-jss/react-jss-tests.tsx
@@ -17,42 +17,44 @@ interface MyTheme {
 /**
  * helper function to counter typescripts type widening
  */
-function createStyles<C extends string>(styles: Styles<C>): Styles<C> {
+function createStyles<Props = {}, C extends string = string>(styles: Styles<C, Props>): Styles<C, Props> {
   return styles;
 }
 
-const styles = (theme: MyTheme) =>
-  createStyles({
-    myButton: {
-      color: theme.color.primary,
-      margin: 1,
-      "& span": {
-        fontWeight: "revert"
-      }
-    },
-    myLabel: {
-      fontStyle: "italic"
-    }
-  });
 
-interface ButtonProps extends WithSheet<typeof styles> {
+interface ButtonProps {
   label: string;
+  active?: boolean;
 }
 
-const Button: React.SFC<ButtonProps> = ({ classes, children }) => {
+const styles = (theme: MyTheme) => createStyles({
+  myButton: {
+    color: (props: ButtonProps) => props.active ? 'red': theme.color.primary,
+    margin: 1,
+    "& span": {
+      fontWeight: "revert"
+    }
+  },
+  myLabel: {
+    fontStyle: "italic"
+  }
+});
+const Button: React.SFC<ButtonProps & WithSheet<typeof styles>> = ({active, classes, children}) => {
   return (
-    <button className={classes.myButton}>
-      <span className={classes.myLabel}>{children}</span>
-    </button>
+    <>
+      <button className={classes.myButton}>
+        <span className={classes.myLabel}>{children}</span>
+      </button>
+    </>
   );
 };
 
 const ManuallyStyles = () => {
   return (
     <Button
-      classes={{ myButton: "my-button", myLabel: "my-label" }}
+      classes={{myButton: "my-button", myLabel: "my-label"}}
       label="Hello, World!"
-      theme={{ color: { primary: "red", secondary: "blue" } }}
+      theme={{color: {primary: "red", secondary: "blue"}}}
     />
   );
 };
@@ -67,7 +69,10 @@ const darkTheme: MyTheme = {
 };
 const App = () => (
   <ThemeProvider theme={darkTheme}>
-    <StyledButton label="I'm dark" />
+    <>
+      <StyledButton label="I'm dark"/>
+      <StyledButton label="I'm active" active/>
+    </>
   </ThemeProvider>
 );
 
@@ -77,7 +82,7 @@ function ssrRender(req: any, res: { send: (text: string) => any }) {
 
   const body = mockedRenderToString(
     <JssProvider classNamePrefix="dt-" registry={sheets}>
-      <StyledButton label="I come from the server" />
+      <StyledButton label="I come from the server"/>
     </JssProvider>
   );
 
@@ -87,10 +92,10 @@ function ssrRender(req: any, res: { send: (text: string) => any }) {
   return res.send(
     mockedRenderToString(
       <html>
-        <head>
-          <style type="text/css">{sheets.toString()}</style>
-        </head>
-        <body>{body}</body>
+      <head>
+        <style type="text/css">{sheets.toString()}</style>
+      </head>
+      <body>{body}</body>
       </html>
     )
   );
diff --git a/types/react-jss/tsconfig.json b/types/react-jss/tsconfig.json
index 161f1a346c..bd1b3e736c 100644
--- a/types/react-jss/tsconfig.json
+++ b/types/react-jss/tsconfig.json
@@ -15,7 +15,7 @@
         "noEmit": true,
         "forceConsistentCasingInFileNames": true,
         "jsx": "react",
-        "strictFunctionTypes": true
+        "strictFunctionTypes": false
     },
     "files": [
         "index.d.ts",