From 15eff541e0da1a8478c370963a4044c3cc0918a3 Mon Sep 17 00:00:00 2001 From: Vincent Siao Date: Thu, 5 Nov 2015 10:41:03 -0800 Subject: [PATCH] [React.14] Update refs for DOM elements --- material-ui/legacy/material-ui-0.11.1.d.ts | 4 +- material-ui/material-ui.d.ts | 8 +- react/react-dom.d.ts | 8 +- react/react-global-tests.ts | 12 +- react/react-tests.ts | 12 +- react/react.d.ts | 309 ++++++++++----------- 6 files changed, 174 insertions(+), 179 deletions(-) diff --git a/material-ui/legacy/material-ui-0.11.1.d.ts b/material-ui/legacy/material-ui-0.11.1.d.ts index 7f464bc57..f974c33be 100644 --- a/material-ui/legacy/material-ui-0.11.1.d.ts +++ b/material-ui/legacy/material-ui-0.11.1.d.ts @@ -233,7 +233,7 @@ declare namespace __MaterialUI { } // what's not commonly overridden by Checkbox, RadioButton, or Toggle - interface CommonEnhancedSwitchProps extends React.HTMLAttributesBase { + interface CommonEnhancedSwitchProps extends React.HTMLAttributes, React.Props { // is root element id?: string; iconStyle?: React.CSSProperties; @@ -412,7 +412,7 @@ declare namespace __MaterialUI { } // non generally overridden elements of EnhancedButton - interface SharedEnhancedButtonProps extends React.HTMLAttributesBase { + interface SharedEnhancedButtonProps extends React.HTMLAttributes, React.Props { centerRipple?: boolean; containerElement?: string | React.ReactElement; disabled?: boolean; diff --git a/material-ui/material-ui.d.ts b/material-ui/material-ui.d.ts index 8b1201bf5..edd8fff8d 100644 --- a/material-ui/material-ui.d.ts +++ b/material-ui/material-ui.d.ts @@ -233,7 +233,7 @@ declare namespace __MaterialUI { } // what's not commonly overridden by Checkbox, RadioButton, or Toggle - interface CommonEnhancedSwitchProps extends React.HTMLAttributesBase { + interface CommonEnhancedSwitchProps extends React.HTMLAttributes, React.Props { // is root element id?: string; iconStyle?: React.CSSProperties; @@ -413,7 +413,7 @@ declare namespace __MaterialUI { } // non generally overridden elements of EnhancedButton - interface SharedEnhancedButtonProps extends React.HTMLAttributesBase { + interface SharedEnhancedButtonProps extends React.HTMLAttributes, React.Props { centerRipple?: boolean; containerElement?: string | React.ReactElement; disabled?: boolean; @@ -655,7 +655,7 @@ declare namespace __MaterialUI { export class Overlay extends React.Component { } - interface PaperProps extends React.HTMLAttributesBase { + interface PaperProps extends React.HTMLAttributes, React.Props { circle?: boolean; rounded?: boolean; transitionEnabled?: boolean; @@ -1309,7 +1309,7 @@ declare namespace __MaterialUI { export class ToolbarSeparator extends React.Component { } - interface ToolbarTitleProps extends React.HTMLAttributesBase { + interface ToolbarTitleProps extends React.HTMLAttributes, React.Props { text?: string; } export class ToolbarTitle extends React.Component { diff --git a/react/react-dom.d.ts b/react/react-dom.d.ts index a2183b7ea..7e90a9bf2 100644 --- a/react/react-dom.d.ts +++ b/react/react-dom.d.ts @@ -16,15 +16,15 @@ declare namespace __React { function render

( element: DOMElement

, container: Element, - callback?: () => any): DOMComponent

; + callback?: (element: Element) => any): Element; function render( element: ClassicElement

, container: Element, - callback?: () => any): ClassicComponent; + callback?: (component: ClassicComponent) => any): ClassicComponent; function render( element: ReactElement

, container: Element, - callback?: () => any): Component; + callback?: (component: Component) => any): Component; function unmountComponentAtNode(container: Element): boolean; @@ -38,7 +38,7 @@ declare namespace __React { parentComponent: Component, nextElement: DOMElement

, container: Element, - callback?: (component: DOMComponent

) => any): DOMComponent

; + callback?: (element: Element) => any): Element; function unstable_renderSubtreeIntoContainer( parentComponent: Component, nextElement: ClassicElement

, diff --git a/react/react-global-tests.ts b/react/react-global-tests.ts index 18596358b..7caf82fdf 100644 --- a/react/react-global-tests.ts +++ b/react/react-global-tests.ts @@ -103,12 +103,12 @@ class ModernComponent extends React.Component }); } - private _input: React.HTMLComponent; + private _input: HTMLInputElement; render() { return React.DOM.div(null, React.DOM.input({ - ref: input => this._input = input, + ref: input => this._input = input, value: this.state.inputValue })); } @@ -135,7 +135,7 @@ var element: React.ReactElement = React.createElement(ModernComponent, props); var classicElement: React.ClassicElement = React.createElement(ClassicComponent, props); -var domElement: React.HTMLElement = +var domElement: React.ReactHTMLElement = React.createElement("div"); // React.cloneElement @@ -143,7 +143,7 @@ var clonedElement: React.ReactElement = React.cloneElement(element, props); var clonedClassicElement: React.ClassicElement = React.cloneElement(classicElement, props); -var clonedDOMElement: React.HTMLElement = +var clonedDOMElement: React.ReactHTMLElement = React.cloneElement(domElement); // React.render @@ -151,7 +151,7 @@ var component: React.Component = ReactDOM.render(element, container); var classicComponent: React.ClassicComponent = ReactDOM.render(classicElement, container); -var domComponent: React.DOMComponent = +var domComponent: Element = ReactDOM.render(domElement, container); // Other Top-Level API @@ -206,7 +206,7 @@ var divStyle: React.CSSProperties = { // CSSProperties flex: "1 1 main-size", backgroundImage: "url('hello.png')" }; -var htmlAttr: React.HTMLAttributes = { +var htmlAttr: React.HTMLProps = { key: 36, ref: "htmlComponent", children: children, diff --git a/react/react-tests.ts b/react/react-tests.ts index 33a114404..5a20d51f8 100644 --- a/react/react-tests.ts +++ b/react/react-tests.ts @@ -123,12 +123,12 @@ class ModernComponent extends React.Component }); } - private _input: React.HTMLComponent; + private _input: HTMLInputElement; render() { return React.DOM.div(null, React.DOM.input({ - ref: input => this._input = input, + ref: input => this._input = input, value: this.state.inputValue })); } @@ -155,7 +155,7 @@ var element: React.ReactElement = React.createElement(ModernComponent, props); var classicElement: React.ClassicElement = React.createElement(ClassicComponent, props); -var domElement: React.HTMLElement = +var domElement: React.ReactHTMLElement = React.createElement("div"); // React.cloneElement @@ -163,7 +163,7 @@ var clonedElement: React.ReactElement = React.cloneElement(element, props); var clonedClassicElement: React.ClassicElement = React.cloneElement(classicElement, props); -var clonedDOMElement: React.HTMLElement = +var clonedDOMElement: React.ReactHTMLElement = React.cloneElement(domElement); // React.render @@ -171,7 +171,7 @@ var component: React.Component = ReactDOM.render(element, container); var classicComponent: React.ClassicComponent = ReactDOM.render(classicElement, container); -var domComponent: React.DOMComponent = +var domComponent: Element = ReactDOM.render(domElement, container); // Other Top-Level API @@ -224,7 +224,7 @@ var divStyle: React.CSSProperties = { // CSSProperties flex: "1 1 main-size", backgroundImage: "url('hello.png')" }; -var htmlAttr: React.HTMLAttributes = { +var htmlAttr: React.HTMLProps = { key: 36, ref: "htmlComponent", children: children, diff --git a/react/react.d.ts b/react/react.d.ts index 975d228cc..46b114865 100644 --- a/react/react.d.ts +++ b/react/react.d.ts @@ -14,7 +14,7 @@ declare namespace __React { type: string | ComponentClass

; props: P; key: string | number; - ref: string | ((component: Component) => any); + ref: string | ((component: Component | Element) => any); } interface ClassicElement

extends ReactElement

{ @@ -22,13 +22,18 @@ declare namespace __React { ref: string | ((component: ClassicComponent) => any); } - interface DOMElement

extends ClassicElement

{ + interface DOMElement

extends ReactElement

{ type: string; - ref: string | ((component: DOMComponent

) => any); + ref: string | ((element: Element) => any); } - type HTMLElement = DOMElement; - type SVGElement = DOMElement; + interface ReactHTMLElement extends DOMElement { + ref: string | ((element: HTMLElement) => any); + } + + interface ReactSVGElement extends DOMElement { + ref: string | ((element: SVGElement) => any); + } // // Factories @@ -46,9 +51,8 @@ declare namespace __React { (props?: P, ...children: ReactNode[]): DOMElement

; } - type HTMLFactory = DOMFactory; - type SVGFactory = DOMFactory; - type SVGElementFactory = DOMFactory; + type HTMLFactory = DOMFactory; + type SVGFactory = DOMFactory; // // React Nodes @@ -124,7 +128,7 @@ declare namespace __React { state: S; context: {}; refs: { - [key: string]: Component + [key: string]: Component | Element }; } @@ -138,8 +142,8 @@ declare namespace __React { tagName: string; } - type HTMLComponent = DOMComponent; - type SVGComponent = DOMComponent; + type HTMLComponent = DOMComponent; + type SVGComponent = DOMComponent; interface ChildContextProvider { getChildContext(): CC; @@ -315,7 +319,12 @@ declare namespace __React { ref?: string | ((component: T) => any); } - interface DOMAttributesBase extends Props { + interface HTMLProps extends HTMLAttributes, Props { + } + interface SVGProps extends SVGAttributes, Props { + } + + interface DOMAttributes { onCopy?: ClipboardEventHandler; onCut?: ClipboardEventHandler; onPaste?: ClipboardEventHandler; @@ -360,9 +369,6 @@ declare namespace __React { }; } - interface DOMAttributes extends DOMAttributesBase> { - } - // This interface is not complete. Only properties accepting // unitless numbers are listed here (see CSSProperty.js in React) interface CSSProperties { @@ -392,7 +398,7 @@ declare namespace __React { [propertyName: string]: any; } - interface HTMLAttributesBase extends DOMAttributesBase { + interface HTMLAttributes extends DOMAttributes { accept?: string; acceptCharset?: string; accessKey?: string; @@ -510,17 +516,7 @@ declare namespace __React { unselectable?: boolean; } - interface HTMLAttributes extends HTMLAttributesBase { - } - - interface SVGElementAttributes extends HTMLAttributes { - viewBox?: string; - preserveAspectRatio?: string; - } - interface SVGAttributes extends DOMAttributes { - ref?: string | ((component: SVGComponent) => void); - cx?: number | string; cy?: number | string; d?: string; @@ -689,7 +685,7 @@ declare namespace __React { wbr: HTMLFactory; // SVG - svg: SVGElementFactory; + svg: SVGFactory; circle: SVGFactory; defs: SVGFactory; ellipse: SVGFactory; @@ -798,137 +794,136 @@ declare namespace JSX { interface IntrinsicElements { // HTML - a: React.HTMLAttributes; - abbr: React.HTMLAttributes; - address: React.HTMLAttributes; - area: React.HTMLAttributes; - article: React.HTMLAttributes; - aside: React.HTMLAttributes; - audio: React.HTMLAttributes; - b: React.HTMLAttributes; - base: React.HTMLAttributes; - bdi: React.HTMLAttributes; - bdo: React.HTMLAttributes; - big: React.HTMLAttributes; - blockquote: React.HTMLAttributes; - body: React.HTMLAttributes; - br: React.HTMLAttributes; - button: React.HTMLAttributes; - canvas: React.HTMLAttributes; - caption: React.HTMLAttributes; - cite: React.HTMLAttributes; - code: React.HTMLAttributes; - col: React.HTMLAttributes; - colgroup: React.HTMLAttributes; - data: React.HTMLAttributes; - datalist: React.HTMLAttributes; - dd: React.HTMLAttributes; - del: React.HTMLAttributes; - details: React.HTMLAttributes; - dfn: React.HTMLAttributes; - dialog: React.HTMLAttributes; - div: React.HTMLAttributes; - dl: React.HTMLAttributes; - dt: React.HTMLAttributes; - em: React.HTMLAttributes; - embed: React.HTMLAttributes; - fieldset: React.HTMLAttributes; - figcaption: React.HTMLAttributes; - figure: React.HTMLAttributes; - footer: React.HTMLAttributes; - form: React.HTMLAttributes; - h1: React.HTMLAttributes; - h2: React.HTMLAttributes; - h3: React.HTMLAttributes; - h4: React.HTMLAttributes; - h5: React.HTMLAttributes; - h6: React.HTMLAttributes; - head: React.HTMLAttributes; - header: React.HTMLAttributes; - hr: React.HTMLAttributes; - html: React.HTMLAttributes; - i: React.HTMLAttributes; - iframe: React.HTMLAttributes; - img: React.HTMLAttributes; - input: React.HTMLAttributes; - ins: React.HTMLAttributes; - kbd: React.HTMLAttributes; - keygen: React.HTMLAttributes; - label: React.HTMLAttributes; - legend: React.HTMLAttributes; - li: React.HTMLAttributes; - link: React.HTMLAttributes; - main: React.HTMLAttributes; - map: React.HTMLAttributes; - mark: React.HTMLAttributes; - menu: React.HTMLAttributes; - menuitem: React.HTMLAttributes; - meta: React.HTMLAttributes; - meter: React.HTMLAttributes; - nav: React.HTMLAttributes; - noscript: React.HTMLAttributes; - object: React.HTMLAttributes; - ol: React.HTMLAttributes; - optgroup: React.HTMLAttributes; - option: React.HTMLAttributes; - output: React.HTMLAttributes; - p: React.HTMLAttributes; - param: React.HTMLAttributes; - picture: React.HTMLAttributes; - pre: React.HTMLAttributes; - progress: React.HTMLAttributes; - q: React.HTMLAttributes; - rp: React.HTMLAttributes; - rt: React.HTMLAttributes; - ruby: React.HTMLAttributes; - s: React.HTMLAttributes; - samp: React.HTMLAttributes; - script: React.HTMLAttributes; - section: React.HTMLAttributes; - select: React.HTMLAttributes; - small: React.HTMLAttributes; - source: React.HTMLAttributes; - span: React.HTMLAttributes; - strong: React.HTMLAttributes; - style: React.HTMLAttributes; - sub: React.HTMLAttributes; - summary: React.HTMLAttributes; - sup: React.HTMLAttributes; - table: React.HTMLAttributes; - tbody: React.HTMLAttributes; - td: React.HTMLAttributes; - textarea: React.HTMLAttributes; - tfoot: React.HTMLAttributes; - th: React.HTMLAttributes; - thead: React.HTMLAttributes; - time: React.HTMLAttributes; - title: React.HTMLAttributes; - tr: React.HTMLAttributes; - track: React.HTMLAttributes; - u: React.HTMLAttributes; - ul: React.HTMLAttributes; - "var": React.HTMLAttributes; - video: React.HTMLAttributes; - wbr: React.HTMLAttributes; + a: React.HTMLProps; + abbr: React.HTMLProps; + address: React.HTMLProps; + area: React.HTMLProps; + article: React.HTMLProps; + aside: React.HTMLProps; + audio: React.HTMLProps; + b: React.HTMLProps; + base: React.HTMLProps; + bdi: React.HTMLProps; + bdo: React.HTMLProps; + big: React.HTMLProps; + blockquote: React.HTMLProps; + body: React.HTMLProps; + br: React.HTMLProps; + button: React.HTMLProps; + canvas: React.HTMLProps; + caption: React.HTMLProps; + cite: React.HTMLProps; + code: React.HTMLProps; + col: React.HTMLProps; + colgroup: React.HTMLProps; + data: React.HTMLProps; + datalist: React.HTMLProps; + dd: React.HTMLProps; + del: React.HTMLProps; + details: React.HTMLProps; + dfn: React.HTMLProps; + dialog: React.HTMLProps; + div: React.HTMLProps; + dl: React.HTMLProps; + dt: React.HTMLProps; + em: React.HTMLProps; + embed: React.HTMLProps; + fieldset: React.HTMLProps; + figcaption: React.HTMLProps; + figure: React.HTMLProps; + footer: React.HTMLProps; + form: React.HTMLProps; + h1: React.HTMLProps; + h2: React.HTMLProps; + h3: React.HTMLProps; + h4: React.HTMLProps; + h5: React.HTMLProps; + h6: React.HTMLProps; + head: React.HTMLProps; + header: React.HTMLProps; + hr: React.HTMLProps; + html: React.HTMLProps; + i: React.HTMLProps; + iframe: React.HTMLProps; + img: React.HTMLProps; + input: React.HTMLProps; + ins: React.HTMLProps; + kbd: React.HTMLProps; + keygen: React.HTMLProps; + label: React.HTMLProps; + legend: React.HTMLProps; + li: React.HTMLProps; + link: React.HTMLProps; + main: React.HTMLProps; + map: React.HTMLProps; + mark: React.HTMLProps; + menu: React.HTMLProps; + menuitem: React.HTMLProps; + meta: React.HTMLProps; + meter: React.HTMLProps; + nav: React.HTMLProps; + noscript: React.HTMLProps; + object: React.HTMLProps; + ol: React.HTMLProps; + optgroup: React.HTMLProps; + option: React.HTMLProps; + output: React.HTMLProps; + p: React.HTMLProps; + param: React.HTMLProps; + picture: React.HTMLProps; + pre: React.HTMLProps; + progress: React.HTMLProps; + q: React.HTMLProps; + rp: React.HTMLProps; + rt: React.HTMLProps; + ruby: React.HTMLProps; + s: React.HTMLProps; + samp: React.HTMLProps; + script: React.HTMLProps; + section: React.HTMLProps; + select: React.HTMLProps; + small: React.HTMLProps; + source: React.HTMLProps; + span: React.HTMLProps; + strong: React.HTMLProps; + style: React.HTMLProps; + sub: React.HTMLProps; + summary: React.HTMLProps; + sup: React.HTMLProps; + table: React.HTMLProps; + tbody: React.HTMLProps; + td: React.HTMLProps; + textarea: React.HTMLProps; + tfoot: React.HTMLProps; + th: React.HTMLProps; + thead: React.HTMLProps; + time: React.HTMLProps; + title: React.HTMLProps; + tr: React.HTMLProps; + track: React.HTMLProps; + u: React.HTMLProps; + ul: React.HTMLProps; + "var": React.HTMLProps; + video: React.HTMLProps; + wbr: React.HTMLProps; // SVG - svg: React.SVGElementAttributes; - - circle: React.SVGAttributes; - defs: React.SVGAttributes; - ellipse: React.SVGAttributes; - g: React.SVGAttributes; - line: React.SVGAttributes; - linearGradient: React.SVGAttributes; - mask: React.SVGAttributes; - path: React.SVGAttributes; - pattern: React.SVGAttributes; - polygon: React.SVGAttributes; - polyline: React.SVGAttributes; - radialGradient: React.SVGAttributes; - rect: React.SVGAttributes; - stop: React.SVGAttributes; - text: React.SVGAttributes; - tspan: React.SVGAttributes; + circle: React.SVGProps; + defs: React.SVGProps; + ellipse: React.SVGProps; + g: React.SVGProps; + line: React.SVGProps; + linearGradient: React.SVGProps; + mask: React.SVGProps; + path: React.SVGProps; + pattern: React.SVGProps; + polygon: React.SVGProps; + polyline: React.SVGProps; + radialGradient: React.SVGProps; + rect: React.SVGProps; + stop: React.SVGProps; + svg: React.SVGProps; + text: React.SVGProps; + tspan: React.SVGProps; } }