Make processColor more efficient

Reviewed By: @nicklockwood, @vjeux

Differential Revision: D2507684
This commit is contained in:
Pieter De Baets 2015-10-05 10:08:10 -07:00 committed by facebook-github-bot-7
parent 787895e903
commit babdeb33ba
3 changed files with 18 additions and 40 deletions

View File

@ -91,13 +91,13 @@ describe('processColor', () => {
describe('HSL strings', () => { 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 colorFromString = processColor('hsla(318, 69%, 55%, 0.25)');
var expectedInt = 0x40DB3DAC; var expectedInt = 0x40DB3DAC;
expect(colorFromString).toEqual(expectedInt); 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 colorFromString = processColor('hsla 318, 69%, 55%, 0.25');
var expectedInt = 0x40DB3DAC; var expectedInt = 0x40DB3DAC;
expect(colorFromString).toEqual(expectedInt); expect(colorFromString).toEqual(expectedInt);

View File

@ -13,14 +13,19 @@
var tinycolor = require('tinycolor'); var tinycolor = require('tinycolor');
var Platform = require('Platform'); var Platform = require('Platform');
/* eslint no-bitwise: 0 */
function processColor(color) { function processColor(color) {
if (!color || typeof color === 'number') { if (!color || typeof color === 'number') {
return color; return color;
} else if (color instanceof Array) { } else if (color instanceof Array) {
return color.map(processColor); return color.map(processColor);
} else { } 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') { if (Platform.OS === 'android') {
// Android use 32 bit *signed* integer to represent the color // Android use 32 bit *signed* integer to represent the color
// We utilize the fact that bitwise operations in JS also operates on // We utilize the fact that bitwise operations in JS also operates on
@ -30,6 +35,8 @@ function processColor(color) {
} }
return colorInt; return colorInt;
} }
return 0;
}
} }
module.exports = processColor; module.exports = processColor;

View File

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