Don't use DOM API interfaces for React.SVGAttributes

This commit is contained in:
Vincent Siao 2015-03-14 16:15:59 -07:00
parent d3584fa716
commit 424bb99eac
5 changed files with 113 additions and 69 deletions

View File

@ -224,6 +224,20 @@ React.DOM.div(htmlAttr);
React.DOM.span(htmlAttr);
React.DOM.input(htmlAttr);
React.DOM.svg({ viewBox: "0 0 48 48" },
React.DOM.rect({
x: 22,
y: 10,
width: 4,
height: 28
}),
React.DOM.rect({
x: 10,
y: 22,
width: 28,
height: 4
}));
//
// React.PropTypes
// --------------------------------------------------------------------------

View File

@ -368,14 +368,18 @@ declare module "react/addons" {
};
}
// This interface is not complete. Only properties accepting
// unitless numbers are listed here (see CSSProperty.js in React)
interface CSSProperties {
boxFlex?: number;
boxFlexGroup?: number;
columnCount?: number;
flex?: number | string;
flexGrow?: number;
flexShrink?: number;
fontWeight?: number;
fontWeight?: number | string;
lineClamp?: number;
lineHeight?: number;
lineHeight?: number | string;
opacity?: number;
order?: number;
orphans?: number;
@ -386,6 +390,7 @@ declare module "react/addons" {
// SVG-related properties
fillOpacity?: number;
strokeOpacity?: number;
strokeWidth?: number;
}
interface HTMLAttributes extends DOMAttributes {
@ -501,18 +506,18 @@ declare module "react/addons" {
interface SVGAttributes extends DOMAttributes {
ref?: string | ((component: SVGComponent) => void);
cx?: SVGLength | SVGAnimatedLength;
cy?: any;
cx?: number | string;
cy?: number | string;
d?: string;
dx?: SVGLength | SVGAnimatedLength;
dy?: SVGLength | SVGAnimatedLength;
fill?: any; // SVGPaint | string
dx?: number | string;
dy?: number | string;
fill?: string;
fillOpacity?: number | string;
fontFamily?: string;
fontSize?: number | string;
fx?: SVGLength | SVGAnimatedLength;
fy?: SVGLength | SVGAnimatedLength;
gradientTransform?: SVGTransformList | SVGAnimatedTransformList;
fx?: number | string;
fy?: number | string;
gradientTransform?: string;
gradientUnits?: string;
markerEnd?: string;
markerMid?: string;
@ -523,27 +528,27 @@ declare module "react/addons" {
patternUnits?: string;
points?: string;
preserveAspectRatio?: string;
r?: SVGLength | SVGAnimatedLength;
rx?: SVGLength | SVGAnimatedLength;
ry?: SVGLength | SVGAnimatedLength;
r?: number | string;
rx?: number | string;
ry?: number | string;
spreadMethod?: string;
stopColor?: any; // SVGColor | string
stopColor?: string;
stopOpacity?: number | string;
stroke?: any; // SVGPaint
stroke?: string;
strokeDasharray?: string;
strokeLinecap?: string;
strokeOpacity?: number | string;
strokeWidth?: SVGLength | SVGAnimatedLength;
strokeWidth?: number | string;
textAnchor?: string;
transform?: SVGTransformList | SVGAnimatedTransformList;
transform?: string;
version?: string;
viewBox?: string;
x1?: SVGLength | SVGAnimatedLength;
x2?: SVGLength | SVGAnimatedLength;
x?: SVGLength | SVGAnimatedLength;
y1?: SVGLength | SVGAnimatedLength;
y2?: SVGLength | SVGAnimatedLength
y?: SVGLength | SVGAnimatedLength;
x1?: number | string;
x2?: number | string;
x?: number | string;
y1?: number | string;
y2?: number | string
y?: number | string;
}
//

View File

@ -368,14 +368,18 @@ declare module React {
};
}
// This interface is not complete. Only properties accepting
// unitless numbers are listed here (see CSSProperty.js in React)
interface CSSProperties {
boxFlex?: number;
boxFlexGroup?: number;
columnCount?: number;
flex?: number | string;
flexGrow?: number;
flexShrink?: number;
fontWeight?: number;
fontWeight?: number | string;
lineClamp?: number;
lineHeight?: number;
lineHeight?: number | string;
opacity?: number;
order?: number;
orphans?: number;
@ -386,6 +390,7 @@ declare module React {
// SVG-related properties
fillOpacity?: number;
strokeOpacity?: number;
strokeWidth?: number;
}
interface HTMLAttributes extends DOMAttributes {
@ -501,18 +506,18 @@ declare module React {
interface SVGAttributes extends DOMAttributes {
ref?: string | ((component: SVGComponent) => void);
cx?: SVGLength | SVGAnimatedLength;
cy?: any;
cx?: number | string;
cy?: number | string;
d?: string;
dx?: SVGLength | SVGAnimatedLength;
dy?: SVGLength | SVGAnimatedLength;
fill?: any; // SVGPaint | string
dx?: number | string;
dy?: number | string;
fill?: string;
fillOpacity?: number | string;
fontFamily?: string;
fontSize?: number | string;
fx?: SVGLength | SVGAnimatedLength;
fy?: SVGLength | SVGAnimatedLength;
gradientTransform?: SVGTransformList | SVGAnimatedTransformList;
fx?: number | string;
fy?: number | string;
gradientTransform?: string;
gradientUnits?: string;
markerEnd?: string;
markerMid?: string;
@ -523,27 +528,27 @@ declare module React {
patternUnits?: string;
points?: string;
preserveAspectRatio?: string;
r?: SVGLength | SVGAnimatedLength;
rx?: SVGLength | SVGAnimatedLength;
ry?: SVGLength | SVGAnimatedLength;
r?: number | string;
rx?: number | string;
ry?: number | string;
spreadMethod?: string;
stopColor?: any; // SVGColor | string
stopColor?: string;
stopOpacity?: number | string;
stroke?: any; // SVGPaint
stroke?: string;
strokeDasharray?: string;
strokeLinecap?: string;
strokeOpacity?: number | string;
strokeWidth?: SVGLength | SVGAnimatedLength;
strokeWidth?: number | string;
textAnchor?: string;
transform?: SVGTransformList | SVGAnimatedTransformList;
transform?: string;
version?: string;
viewBox?: string;
x1?: SVGLength | SVGAnimatedLength;
x2?: SVGLength | SVGAnimatedLength;
x?: SVGLength | SVGAnimatedLength;
y1?: SVGLength | SVGAnimatedLength;
y2?: SVGLength | SVGAnimatedLength
y?: SVGLength | SVGAnimatedLength;
x1?: number | string;
x2?: number | string;
x?: number | string;
y1?: number | string;
y2?: number | string
y?: number | string;
}
//

View File

@ -224,6 +224,21 @@ React.DOM.div(htmlAttr);
React.DOM.span(htmlAttr);
React.DOM.input(htmlAttr);
React.DOM.svg({ viewBox: "0 0 48 48" },
React.DOM.rect({
x: 22,
y: 10,
width: 4,
height: 28
}),
React.DOM.rect({
x: 10,
y: 22,
width: 28,
height: 4
}));
//
// React.PropTypes
// --------------------------------------------------------------------------

51
react/react.d.ts vendored
View File

@ -368,14 +368,18 @@ declare module "react" {
};
}
// This interface is not complete. Only properties accepting
// unitless numbers are listed here (see CSSProperty.js in React)
interface CSSProperties {
boxFlex?: number;
boxFlexGroup?: number;
columnCount?: number;
flex?: number | string;
flexGrow?: number;
flexShrink?: number;
fontWeight?: number;
fontWeight?: number | string;
lineClamp?: number;
lineHeight?: number;
lineHeight?: number | string;
opacity?: number;
order?: number;
orphans?: number;
@ -386,6 +390,7 @@ declare module "react" {
// SVG-related properties
fillOpacity?: number;
strokeOpacity?: number;
strokeWidth?: number;
}
interface HTMLAttributes extends DOMAttributes {
@ -501,18 +506,18 @@ declare module "react" {
interface SVGAttributes extends DOMAttributes {
ref?: string | ((component: SVGComponent) => void);
cx?: SVGLength | SVGAnimatedLength;
cy?: any;
cx?: number | string;
cy?: number | string;
d?: string;
dx?: SVGLength | SVGAnimatedLength;
dy?: SVGLength | SVGAnimatedLength;
fill?: any; // SVGPaint | string
dx?: number | string;
dy?: number | string;
fill?: string;
fillOpacity?: number | string;
fontFamily?: string;
fontSize?: number | string;
fx?: SVGLength | SVGAnimatedLength;
fy?: SVGLength | SVGAnimatedLength;
gradientTransform?: SVGTransformList | SVGAnimatedTransformList;
fx?: number | string;
fy?: number | string;
gradientTransform?: string;
gradientUnits?: string;
markerEnd?: string;
markerMid?: string;
@ -523,27 +528,27 @@ declare module "react" {
patternUnits?: string;
points?: string;
preserveAspectRatio?: string;
r?: SVGLength | SVGAnimatedLength;
rx?: SVGLength | SVGAnimatedLength;
ry?: SVGLength | SVGAnimatedLength;
r?: number | string;
rx?: number | string;
ry?: number | string;
spreadMethod?: string;
stopColor?: any; // SVGColor | string
stopColor?: string;
stopOpacity?: number | string;
stroke?: any; // SVGPaint
stroke?: string;
strokeDasharray?: string;
strokeLinecap?: string;
strokeOpacity?: number | string;
strokeWidth?: SVGLength | SVGAnimatedLength;
strokeWidth?: number | string;
textAnchor?: string;
transform?: SVGTransformList | SVGAnimatedTransformList;
transform?: string;
version?: string;
viewBox?: string;
x1?: SVGLength | SVGAnimatedLength;
x2?: SVGLength | SVGAnimatedLength;
x?: SVGLength | SVGAnimatedLength;
y1?: SVGLength | SVGAnimatedLength;
y2?: SVGLength | SVGAnimatedLength
y?: SVGLength | SVGAnimatedLength;
x1?: number | string;
x2?: number | string;
x?: number | string;
y1?: number | string;
y2?: number | string
y?: number | string;
}
//