From 51fda94d0497b362656fea922022ef5a12014a0a Mon Sep 17 00:00:00 2001 From: Wayne Dela Cruz Date: Tue, 28 Mar 2017 21:10:03 +0800 Subject: [PATCH 1/7] Add specific typings to css overflow props CSS overflows are any one of the ff. auto, hidden, scroll, visible Applied those to overflow, overlowX, and overflowY --- types/react/index.d.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/types/react/index.d.ts b/types/react/index.d.ts index 73cb0ae16f..969c86f353 100644 --- a/types/react/index.d.ts +++ b/types/react/index.d.ts @@ -1504,7 +1504,7 @@ declare namespace React { /** * The overflow property controls how extra content exceeding the bounding box of an element is rendered. It can be used in conjunction with an element that has a fixed width and height, to eliminate text-induced page distortion. */ - overflow?: CSSWideKeyword | any; + overflow?: CSSWideKeyword | 'auto' | 'hidden' | 'scroll' | 'visible'; /** * Specifies the preferred scrolling methods for elements that overflow. @@ -1514,12 +1514,12 @@ declare namespace React { /** * Controls how extra content exceeding the x-axis of the bounding box of an element is rendered. */ - overflowX?: CSSWideKeyword | any; + overflowX?: CSSWideKeyword | 'auto' | 'hidden' | 'scroll' | 'visible'; /** * Controls how extra content exceeding the y-axis of the bounding box of an element is rendered. */ - overflowY?: CSSWideKeyword | any; + overflowY?: CSSWideKeyword | 'auto' | 'hidden' | 'scroll' | 'visible'; /** * The padding optional CSS property sets the required padding space on one to four sides of an element. The padding area is the space between an element and its border. Negative values are not allowed but decimal values are permitted. The element size is treated as fixed, and the content of the element shifts toward the center as padding is increased. From 6f8a10f1a1d343328e2047fc7c0a9f642fde6912 Mon Sep 17 00:00:00 2001 From: Wayne Dela Cruz Date: Tue, 28 Mar 2017 21:12:19 +0800 Subject: [PATCH 2/7] Wrote tests for css overflow props --- types/react/test/cssProperties.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/types/react/test/cssProperties.tsx b/types/react/test/cssProperties.tsx index 1221a0effc..a453589f23 100644 --- a/types/react/test/cssProperties.tsx +++ b/types/react/test/cssProperties.tsx @@ -27,6 +27,9 @@ const justifyContentStyleTest =
; const boxShadowStyle: React.CSSProperties = { boxShadow: '2px 2px 2px 1px rgba(0, 0, 0, 0.2)' }; const boxShadowStyleTest =
; +const overflowStyle: React.CSSProperties = { overflow: 'auto', overflowX: 'visible', overflowY: 'scroll' }; +const overflowStyleTest =
; + // SVG specific style attribute declarations const fillOpacityStyle: React.CSSProperties = { fillOpacity: 0.3 }; From e6ad73d5e3d178f3b19100718c78b4e56a946090 Mon Sep 17 00:00:00 2001 From: Wayne Dela Cruz Date: Wed, 29 Mar 2017 10:06:29 +0800 Subject: [PATCH 3/7] Fix travis build errors in material-ui tests * Create type Stylesheet who's props are all of type CSSProperties * Declared function createStylesheet which takes in an object and converts it's key-values to CSSProperties --- types/material-ui/material-ui-tests.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/types/material-ui/material-ui-tests.tsx b/types/material-ui/material-ui-tests.tsx index bb2bba94c8..2388630d8f 100644 --- a/types/material-ui/material-ui-tests.tsx +++ b/types/material-ui/material-ui-tests.tsx @@ -109,7 +109,13 @@ function handleTouchTap() { alert('onTouchTap triggered on the title component'); } -const styles = { +type Stylesheet = { + [P in keyof T]: React.CSSProperties +}; + +declare function createStylesheet(args: T): Stylesheet; + +const styles = createStylesheet({ title: { cursor: 'pointer', }, @@ -232,7 +238,7 @@ const styles = { floatingLabelFocusStyle: { color: blue500, }, -}; +}); const style = { marginRight: 20, From 85b26475136eb8071c2675717b2c05b36270765d Mon Sep 17 00:00:00 2001 From: Wayne Dela Cruz Date: Thu, 30 Mar 2017 19:53:06 +0800 Subject: [PATCH 4/7] Material-ui tests less hacky Suggested by @vsiao --- types/material-ui/material-ui-tests.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/types/material-ui/material-ui-tests.tsx b/types/material-ui/material-ui-tests.tsx index 2388630d8f..6e60d6fc0e 100644 --- a/types/material-ui/material-ui-tests.tsx +++ b/types/material-ui/material-ui-tests.tsx @@ -109,13 +109,7 @@ function handleTouchTap() { alert('onTouchTap triggered on the title component'); } -type Stylesheet = { - [P in keyof T]: React.CSSProperties -}; - -declare function createStylesheet(args: T): Stylesheet; - -const styles = createStylesheet({ +const styles: { [key: string]: React.CSSProperties } = { title: { cursor: 'pointer', }, @@ -238,7 +232,7 @@ const styles = createStylesheet({ floatingLabelFocusStyle: { color: blue500, }, -}); +}; const style = { marginRight: 20, From 7ca4941d991cd82ada692a4735bf8bc2bfbcc098 Mon Sep 17 00:00:00 2001 From: Wayne Dela Cruz Date: Thu, 30 Mar 2017 19:55:26 +0800 Subject: [PATCH 5/7] Use double quotes instead of single quotes --- types/react/index.d.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/types/react/index.d.ts b/types/react/index.d.ts index 969c86f353..62233663d9 100644 --- a/types/react/index.d.ts +++ b/types/react/index.d.ts @@ -1504,7 +1504,7 @@ declare namespace React { /** * The overflow property controls how extra content exceeding the bounding box of an element is rendered. It can be used in conjunction with an element that has a fixed width and height, to eliminate text-induced page distortion. */ - overflow?: CSSWideKeyword | 'auto' | 'hidden' | 'scroll' | 'visible'; + overflow?: CSSWideKeyword | "auto" | "hidden" | "scroll" | "visible"; /** * Specifies the preferred scrolling methods for elements that overflow. @@ -1514,12 +1514,12 @@ declare namespace React { /** * Controls how extra content exceeding the x-axis of the bounding box of an element is rendered. */ - overflowX?: CSSWideKeyword | 'auto' | 'hidden' | 'scroll' | 'visible'; + overflowX?: CSSWideKeyword | "auto" | "hidden" | "scroll" | "visible"; /** * Controls how extra content exceeding the y-axis of the bounding box of an element is rendered. */ - overflowY?: CSSWideKeyword | 'auto' | 'hidden' | 'scroll' | 'visible'; + overflowY?: CSSWideKeyword | "auto" | "hidden" | "scroll" | "visible"; /** * The padding optional CSS property sets the required padding space on one to four sides of an element. The padding area is the space between an element and its border. Negative values are not allowed but decimal values are permitted. The element size is treated as fixed, and the content of the element shifts toward the center as padding is increased. From a086b92d64879e87e7162ca97e08e79d3d00ffa1 Mon Sep 17 00:00:00 2001 From: Wayne Dela Cruz Date: Fri, 31 Mar 2017 09:44:56 +0800 Subject: [PATCH 6/7] material-ui use TS 2.2 --- types/material-ui/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/material-ui/index.d.ts b/types/material-ui/index.d.ts index d9ba4fc071..5fd8628598 100644 --- a/types/material-ui/index.d.ts +++ b/types/material-ui/index.d.ts @@ -2,7 +2,7 @@ // Project: https://github.com/callemall/material-ui // Definitions by: Nathan Brown , Oliver Herrmann // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 2.1 +// TypeScript Version: 2.2 /// /// From a3b39389cd2ae5dda6bb0ccb3ffacfbbeb9fabf2 Mon Sep 17 00:00:00 2001 From: Wayne Dela Cruz Date: Fri, 31 Mar 2017 09:45:49 +0800 Subject: [PATCH 7/7] react use TS 2.2 --- types/react/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/react/index.d.ts b/types/react/index.d.ts index 62233663d9..3464d91746 100644 --- a/types/react/index.d.ts +++ b/types/react/index.d.ts @@ -2,7 +2,7 @@ // Project: http://facebook.github.io/react/ // Definitions by: Asana , AssureSign , Microsoft , John Reilly , Benoit Benezech , Patricio Zavolinsky , Digiguru // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 2.1 +// TypeScript Version: 2.2 export = React; export as namespace React;