@@ -11,57 +11,63 @@ DOMProperty.injection.injectDOMPropertyConfig(
11
11
) ;
12
12
13
13
/**
14
- * Makes attributes compatible with React props.
14
+ * Converts HTML/SVG DOM attributes to React props.
15
15
*
16
- * @param {Object } [attributes={}] - The attributes.
17
- * @return {Object } - The props.
16
+ * @param {Object } [attributes={}] - The HTML/SVG DOM attributes.
17
+ * @return {Object } - The React props.
18
18
*/
19
19
function attributesToProps ( attributes ) {
20
20
attributes = attributes || { } ;
21
+
22
+ var attributeName ;
23
+ var attributeValue ;
24
+ var property ;
21
25
var props = { } ;
22
- var propertyName ;
23
- var propertyValue ;
24
- var reactProperty ;
25
26
26
- for ( propertyName in attributes ) {
27
- propertyValue = attributes [ propertyName ] ;
27
+ for ( attributeName in attributes ) {
28
+ attributeValue = attributes [ attributeName ] ;
28
29
29
- // custom attributes (` data-` and `aria-`)
30
- if ( isCustomAttribute ( propertyName ) ) {
31
- props [ propertyName ] = propertyValue ;
30
+ // ARIA (aria-*) or custom data ( data-*) attribute
31
+ if ( isCustomAttribute ( attributeName ) ) {
32
+ props [ attributeName ] = attributeValue ;
32
33
continue ;
33
34
}
34
35
35
- // make HTML DOM attribute/property consistent with React attribute/property
36
- reactProperty = config . html [ propertyName . toLowerCase ( ) ] ;
37
- if ( reactProperty ) {
36
+ // convert HTML attribute to React prop
37
+ property = config . html [ attributeName . toLowerCase ( ) ] ;
38
+ if ( property ) {
38
39
if (
39
40
Object . prototype . hasOwnProperty . call (
40
41
DOMProperty . properties ,
41
- reactProperty
42
+ property
42
43
) &&
43
- DOMProperty . properties [ reactProperty ] . hasBooleanValue
44
+ DOMProperty . properties [ property ] . hasBooleanValue
44
45
) {
45
- props [ reactProperty ] = true ;
46
+ props [ property ] = true ;
46
47
} else {
47
- props [ reactProperty ] = propertyValue ;
48
+ props [ property ] = attributeValue ;
48
49
}
49
50
continue ;
50
51
}
51
52
52
- // make SVG DOM attribute/property consistent with React attribute/property
53
- reactProperty = config . svg [ propertyName ] ;
54
- if ( reactProperty ) {
55
- props [ reactProperty ] = propertyValue ;
56
- } else if ( utilities . PRESERVE_CUSTOM_ATTRIBUTES ) {
57
- props [ propertyName ] = propertyValue ;
53
+ // convert SVG attribute to React prop
54
+ property = config . svg [ attributeName ] ;
55
+ if ( property ) {
56
+ props [ property ] = attributeValue ;
57
+ continue ;
58
+ }
59
+
60
+ // custom attribute
61
+ if ( utilities . PRESERVE_CUSTOM_ATTRIBUTES ) {
62
+ props [ attributeName ] = attributeValue ;
58
63
}
59
64
}
60
65
61
66
// convert inline style to object
62
67
if ( attributes . style != null ) {
63
68
props . style = cssToJs ( attributes . style ) ;
64
69
}
70
+
65
71
return props ;
66
72
}
67
73
@@ -75,14 +81,16 @@ function cssToJs(style) {
75
81
if ( typeof style !== 'string' ) {
76
82
throw new TypeError ( 'First argument must be a string.' ) ;
77
83
}
84
+
78
85
var styleObj = { } ;
79
86
80
- styleToObject ( style , function ( propName , propValue ) {
81
- // Check if it's not a comment node
82
- if ( propName && propValue ) {
83
- styleObj [ camelCase ( propName ) ] = propValue ;
87
+ styleToObject ( style , function ( property , value ) {
88
+ // skip if it's a comment node
89
+ if ( property && value ) {
90
+ styleObj [ camelCase ( property ) ] = value ;
84
91
}
85
92
} ) ;
93
+
86
94
return styleObj ;
87
95
}
88
96
0 commit comments