Merge pull request #15394 from chrisgervang/patch-3

Updating ReactCSS types to version 1.2

types/reactcss/index.d.ts

@@ -1,29 +1,29 @@
-// Type definitions for ReactCSS v1.0.0
+// Type definitions for ReactCSS 1.2.0
 // Project: http://reactcss.com/
-// Definitions by: Karol Janyst <https://github.com/LKay>
+// Definitions by: Chris Gervang <https://github.com/chrisgervang>, Karol Janyst <https://github.com/LKay>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 2.1
+// TypeScript Version: 2.2
 
 import * as React from "react"
 
-
-interface LoopableProps {
+interface LoopableProps extends React.Props<any> {
+    "nth-child": number
     "first-child"?: boolean
     "last-child"?: boolean
     even?: boolean
     odd?: boolean
-    [nthChild: string]: boolean
 }
 
-interface HoverProps {
+interface HoverProps<T> extends React.Props<T> {
     hover?: boolean
 }
 
-interface Classes {
-    default: any
-    [scope: string]: any
+interface Classes<T> {
+    default: Partial<T>
+    [scope: string]: Partial<T>
 }
 
+export type CSS = React.CSSProperties
 export function hover<A>(component: React.ComponentClass<A> | React.StatelessComponent<A>): React.ComponentClass<A>
-export function loop(i: number, length: number): LoopableProps
-export default function reactCSS(classes: Classes, ...activations: Array<any>): any
+export function loop(index: number, length: number): LoopableProps
+export default function reactCSS<T>(classes: Classes<T>, ...activations: Array<any>): T

types/reactcss/reactcss-tests.tsx

@@ -1,19 +1,67 @@
 import * as React from "react"
-import { StatelessComponent } from "react"
+import { SFC } from "react"
 import { render } from "react-dom"
-import { default as reactCSS, hover, loop, LoopableProps, HoverProps } from "reactcss"
+import { default as reactCSS, hover, loop, LoopableProps, HoverProps, CSS } from "reactcss"
 
-interface TestProps extends HoverProps { }
+interface TestHoverProps extends HoverProps<any> { }
 
-var styles: any = reactCSS({
-    default: {},
-    hover: {}
-}, { hover: true })
+const TestHover: SFC<TestHoverProps> = ({hover}) => {
+    const styles = reactCSS<{title: CSS}>({
+        default: {
+            title: {
+                color: "black"
+            }
+        },
+        hover: {
+            title: {
+                color: "blue"
+            }
+        }
+    }, { hover })
 
-var loopProps: LoopableProps = loop(1, 10)
+    const list = ["First!", "Second!", "Third!"]
 
-var TestComponent: StatelessComponent<TestProps>
-var Test = hover(TestComponent)
+    return (
+        <div>
+            <div style={ styles.title }>
+                Cool Title!
+            </div>
+
+            {list.map((item, index) => (
+                <TestLoop key={index} {...loop(index, list.length)}>{item}</TestLoop>
+            ))}
+        </div>
+    )
+}
+
+interface TestLoopProps extends LoopableProps { }
+
+const TestLoop: SFC<TestLoopProps> = (props) => {
+    const styles = reactCSS<{element: CSS}>({
+        default: {
+            element: {
+                width: "200px",
+                border: "1px solid black"
+            }
+        },
+        "first-child": {
+            element: {
+                borderTopLeftRadius: "2px",
+                borderTopRightRadius: "2px"
+            }
+        },
+        "last-child": {
+            element: {
+                borderBottomLeftRadius: "2px",
+                borderBottomRightRadius: "2px"
+            }
+        }
+    }, props)
+
+    return <div style={styles.element}>{props.children}</div>
+}
+
+const Test = hover(TestHover)
 
 render(
     <Test />,