Skip to content

Commit 0ae8a11

Browse files
refactor(attributes-to-props): rename variables so they're semantic
1 parent c963bc0 commit 0ae8a11

File tree

1 file changed

+36
-28
lines changed

1 file changed

+36
-28
lines changed

lib/attributes-to-props.js

Lines changed: 36 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -11,57 +11,63 @@ DOMProperty.injection.injectDOMPropertyConfig(
1111
);
1212

1313
/**
14-
* Makes attributes compatible with React props.
14+
* Converts HTML/SVG DOM attributes to React props.
1515
*
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.
1818
*/
1919
function attributesToProps(attributes) {
2020
attributes = attributes || {};
21+
22+
var attributeName;
23+
var attributeValue;
24+
var property;
2125
var props = {};
22-
var propertyName;
23-
var propertyValue;
24-
var reactProperty;
2526

26-
for (propertyName in attributes) {
27-
propertyValue = attributes[propertyName];
27+
for (attributeName in attributes) {
28+
attributeValue = attributes[attributeName];
2829

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;
3233
continue;
3334
}
3435

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) {
3839
if (
3940
Object.prototype.hasOwnProperty.call(
4041
DOMProperty.properties,
41-
reactProperty
42+
property
4243
) &&
43-
DOMProperty.properties[reactProperty].hasBooleanValue
44+
DOMProperty.properties[property].hasBooleanValue
4445
) {
45-
props[reactProperty] = true;
46+
props[property] = true;
4647
} else {
47-
props[reactProperty] = propertyValue;
48+
props[property] = attributeValue;
4849
}
4950
continue;
5051
}
5152

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;
5863
}
5964
}
6065

6166
// convert inline style to object
6267
if (attributes.style != null) {
6368
props.style = cssToJs(attributes.style);
6469
}
70+
6571
return props;
6672
}
6773

@@ -75,14 +81,16 @@ function cssToJs(style) {
7581
if (typeof style !== 'string') {
7682
throw new TypeError('First argument must be a string.');
7783
}
84+
7885
var styleObj = {};
7986

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;
8491
}
8592
});
93+
8694
return styleObj;
8795
}
8896

0 commit comments

Comments
 (0)