Make processColor more efficient

Reviewed By: @nicklockwood, @vjeux

Differential Revision: D2507684

Libraries/StyleSheet/__tests__/processColor-test.js

@@ -91,13 +91,13 @@ describe('processColor', () => {
 
   describe('HSL strings', () => {
 
-    it('should convert hsl(x, y%, z%)', () => {
+    it('should convert hsla(x, y%, z%, a)', () => {
       var colorFromString = processColor('hsla(318, 69%, 55%, 0.25)');
       var expectedInt = 0x40DB3DAC;
       expect(colorFromString).toEqual(expectedInt);
     });
 
-    it('should convert hsl x, y%, z%', () => {
+    it('should convert hsla x, y%, z%, a', () => {
       var colorFromString = processColor('hsla 318, 69%, 55%, 0.25');
       var expectedInt = 0x40DB3DAC;
       expect(colorFromString).toEqual(expectedInt);

Libraries/StyleSheet/processColor.js

@@ -13,14 +13,19 @@
 var tinycolor = require('tinycolor');
 var Platform = require('Platform');
 
+/* eslint no-bitwise: 0 */
 function processColor(color) {
   if (!color || typeof color === 'number') {
     return color;
   } else if (color instanceof Array) {
     return color.map(processColor);
   } else {
-    var hexString = tinycolor(color).toHex8();
+    var color = tinycolor(color);
-    var colorInt = parseInt(hexString, 16);
+    if (color.isValid()) {
+      var rgb = color.toRgb();
+      // All bitwise operations happen on 32-bit numbers, so we shift the 1 first
+      // then multiply it with the actual value.
+      var colorInt = Math.round(rgb.a * 255) * (1 << 24) + rgb.r * (1 << 16) + rgb.g * (1 << 8) + rgb.b;
       if (Platform.OS === 'android') {
         // Android use 32 bit *signed* integer to represent the color
         // We utilize the fact that bitwise operations in JS also operates on
@@ -30,6 +35,8 @@ function processColor(color) {
       }
       return colorInt;
     }
+    return 0;
+  }
 }
 
 module.exports = processColor;

Libraries/vendor/tinycolor/tinycolor.js

@@ -34,9 +34,6 @@ function tinycolor (color, opts) {
 }
 
 tinycolor.prototype = {
-    toHex8: function() {
-        return rgbaToHex(this._r, this._g, this._b, this._a);
-    },
     toRgb: function() {
         return { r: mathRound(this._r), g: mathRound(this._g), b: mathRound(this._b), a: this._a };
     },
@@ -163,7 +160,6 @@ function hslToRgb(h, s, l) {
 // *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
 // *Returns:* { r, g, b } in the set [0, 255]
  function hsvToRgb(h, s, v) {
-
     h = bound01(h, 360) * 6;
     s = bound01(s, 100);
     v = bound01(v, 100);
@@ -181,21 +177,6 @@ function hslToRgb(h, s, l) {
     return { r: r * 255, g: g * 255, b: b * 255 };
 }
 
-// `rgbaToHex`
-// Converts an RGBA color plus alpha transparency to hex
-// Assumes r, g, b and a are contained in the set [0, 255]
-// Returns an 8 character hex
-function rgbaToHex(r, g, b, a) {
-    var hex = [
-        pad2(convertDecimalToHex(a)),
-        pad2(mathRound(r).toString(16)),
-        pad2(mathRound(g).toString(16)),
-        pad2(mathRound(b).toString(16))
-    ];
-
-    return hex.join("");
-}
-
 // Big List of Colors
 // ------------------
 // <http://www.w3.org/TR/css3-color/#svg-color>
@@ -399,11 +380,6 @@ function isPercentage(n) {
     return typeof n === "string" && n.indexOf('%') != -1;
 }
 
-// Force a hex value to have 2 characters
-function pad2(c) {
-    return c.length == 1 ? '0' + c : '' + c;
-}
-
 // Replace a decimal with it's percentage value
 function convertToPercentage(n) {
     if (n <= 1) {
@@ -413,11 +389,6 @@ function convertToPercentage(n) {
     return n;
 }
 
-// Converts a decimal to a hex value
-function convertDecimalToHex(d) {
-    return Math.round(parseFloat(d) * 255).toString(16);
-}
-
 var matchers = (function() {
     // <http://www.w3.org/TR/css3-values/#integers>
     var CSS_INTEGER = "[-\\+]?\\d+%?";