diff --git a/package.json b/package.json index e1c1841a..db047361 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "deep-assign": "^2.0.0", "fbjs": "^0.8.8", "inline-style-prefixer": "^2.0.5", + "normalize-css-color": "^1.0.2", "react-dom": "~15.4.1", "react-textarea-autosize": "^4.0.4", "react-timer-mixin": "^0.13.3" diff --git a/src/apis/StyleSheet/resolveBoxShadow.js b/src/apis/StyleSheet/resolveBoxShadow.js index 37b70239..b4ac5295 100644 --- a/src/apis/StyleSheet/resolveBoxShadow.js +++ b/src/apis/StyleSheet/resolveBoxShadow.js @@ -1,4 +1,4 @@ -import normalizeColor from '../../modules/normalizeColor'; +import normalizeColor from 'normalize-css-color'; import normalizeValue from './normalizeValue'; const defaultOffset = { height: 0, width: 0 }; @@ -6,11 +6,9 @@ const defaultOffset = { height: 0, width: 0 }; const applyOpacity = (color, opacity = 1) => { const nullableColor = normalizeColor(color); const colorInt = nullableColor === null ? 0x00000000 : nullableColor; - const r = Math.round(((colorInt & 0xff000000) >>> 24)); - const g = Math.round(((colorInt & 0x00ff0000) >>> 16)); - const b = Math.round(((colorInt & 0x0000ff00) >>> 8)); - const a = (((colorInt & 0x000000ff) >>> 0) / 255).toFixed(2); - return `rgba(${r},${g},${b},${a * opacity})`; + const { r, g, b, a } = normalizeColor.rgba(colorInt); + const alpha = a.toFixed(2); + return `rgba(${r},${g},${b},${alpha * opacity})`; }; // TODO: add inset and spread support diff --git a/src/components/Touchable/Touchable.js b/src/components/Touchable/Touchable.js index 1209c79f..deddede0 100644 --- a/src/components/Touchable/Touchable.js +++ b/src/components/Touchable/Touchable.js @@ -14,7 +14,6 @@ /* @edit start */ const BoundingDimensions = require('./BoundingDimensions'); -const normalizeColor = require('../../modules/normalizeColor'); const Position = require('./Position'); const React = require('react'); const TouchEventUtils = require('fbjs/lib/TouchEventUtils'); diff --git a/src/modules/normalizeColor/index.js b/src/modules/normalizeColor/index.js deleted file mode 100644 index cebe1be6..00000000 --- a/src/modules/normalizeColor/index.js +++ /dev/null @@ -1,353 +0,0 @@ -/* eslint-disable */ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - * - * @providesModule normalizeColor - * @flow - */ -/* eslint no-bitwise: 0 */ -'use strict'; - -function normalizeColor(color: string | number): ?number { - var match; - - if (typeof color === 'number') { - if (color >>> 0 === color && color >= 0 && color <= 0xffffffff) { - return color; - } - return null; - } - - // Ordered based on occurrences on Facebook codebase - if ((match = matchers.hex6.exec(color))) { - return parseInt(match[1] + 'ff', 16) >>> 0; - } - - if (names.hasOwnProperty(color)) { - return names[color]; - } - - if ((match = matchers.rgb.exec(color))) { - return ( - parse255(match[1]) << 24 | // r - parse255(match[2]) << 16 | // g - parse255(match[3]) << 8 | // b - 0x000000ff // a - ) >>> 0; - } - - if ((match = matchers.rgba.exec(color))) { - return ( - parse255(match[1]) << 24 | // r - parse255(match[2]) << 16 | // g - parse255(match[3]) << 8 | // b - parse1(match[4]) // a - ) >>> 0; - } - - if ((match = matchers.hex3.exec(color))) { - return parseInt( - match[1] + match[1] + // r - match[2] + match[2] + // g - match[3] + match[3] + // b - 'ff', // a - 16 - ) >>> 0; - } - - // https://drafts.csswg.org/css-color-4/#hex-notation - if ((match = matchers.hex8.exec(color))) { - return parseInt(match[1], 16) >>> 0; - } - - if ((match = matchers.hex4.exec(color))) { - return parseInt( - match[1] + match[1] + // r - match[2] + match[2] + // g - match[3] + match[3] + // b - match[4] + match[4], // a - 16 - ) >>> 0; - } - - if ((match = matchers.hsl.exec(color))) { - return ( - hslToRgb( - parse360(match[1]), // h - parsePercentage(match[2]), // s - parsePercentage(match[3]) // l - ) | - 0x000000ff // a - ) >>> 0; - } - - if ((match = matchers.hsla.exec(color))) { - return ( - hslToRgb( - parse360(match[1]), // h - parsePercentage(match[2]), // s - parsePercentage(match[3]) // l - ) | - parse1(match[4]) // a - ) >>> 0; - } - - return null; -} - -function hue2rgb(p: number, q: number, t: number): number { - if (t < 0) { - t += 1; - } - if (t > 1) { - t -= 1; - } - if (t < 1 / 6) { - return p + (q - p) * 6 * t; - } - if (t < 1 / 2) { - return q; - } - if (t < 2 / 3) { - return p + (q - p) * (2 / 3 - t) * 6; - } - return p; -} - -function hslToRgb(h: number, s: number, l: number): number { - var q = l < 0.5 ? l * (1 + s) : l + s - l * s; - var p = 2 * l - q; - var r = hue2rgb(p, q, h + 1 / 3); - var g = hue2rgb(p, q, h); - var b = hue2rgb(p, q, h - 1 / 3); - - return ( - Math.round(r * 255) << 24 | - Math.round(g * 255) << 16 | - Math.round(b * 255) << 8 - ); -} - -// var INTEGER = '[-+]?\\d+'; -var NUMBER = '[-+]?\\d*\\.?\\d+'; -var PERCENTAGE = NUMBER + '%'; - -function call(...args) { - return '\\(\\s*(' + args.join(')\\s*,\\s*(') + ')\\s*\\)'; -} - -var matchers = { - rgb: new RegExp('rgb' + call(NUMBER, NUMBER, NUMBER)), - rgba: new RegExp('rgba' + call(NUMBER, NUMBER, NUMBER, NUMBER)), - hsl: new RegExp('hsl' + call(NUMBER, PERCENTAGE, PERCENTAGE)), - hsla: new RegExp('hsla' + call(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER)), - hex3: /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, - hex4: /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, - hex6: /^#([0-9a-fA-F]{6})$/, - hex8: /^#([0-9a-fA-F]{8})$/, -}; - -function parse255(str: string): number { - var int = parseInt(str, 10); - if (int < 0) { - return 0; - } - if (int > 255) { - return 255; - } - return int; -} - -function parse360(str: string): number { - var int = parseFloat(str); - return (((int % 360) + 360) % 360) / 360; -} - -function parse1(str: string): number { - var num = parseFloat(str); - if (num < 0) { - return 0; - } - if (num > 1) { - return 255; - } - return Math.round(num * 255); -} - -function parsePercentage(str: string): number { - // parseFloat conveniently ignores the final % - var int = parseFloat(str, 10); - if (int < 0) { - return 0; - } - if (int > 100) { - return 1; - } - return int / 100; -} - -var names = { - /* @edit start */ - currentcolor: 'currentcolor', - inherit: 'inherit', - /* @edit end */ - transparent: 0x00000000, - - // http://www.w3.org/TR/css3-color/#svg-color - aliceblue: 0xf0f8ffff, - antiquewhite: 0xfaebd7ff, - aqua: 0x00ffffff, - aquamarine: 0x7fffd4ff, - azure: 0xf0ffffff, - beige: 0xf5f5dcff, - bisque: 0xffe4c4ff, - black: 0x000000ff, - blanchedalmond: 0xffebcdff, - blue: 0x0000ffff, - blueviolet: 0x8a2be2ff, - brown: 0xa52a2aff, - burlywood: 0xdeb887ff, - burntsienna: 0xea7e5dff, - cadetblue: 0x5f9ea0ff, - chartreuse: 0x7fff00ff, - chocolate: 0xd2691eff, - coral: 0xff7f50ff, - cornflowerblue: 0x6495edff, - cornsilk: 0xfff8dcff, - crimson: 0xdc143cff, - cyan: 0x00ffffff, - darkblue: 0x00008bff, - darkcyan: 0x008b8bff, - darkgoldenrod: 0xb8860bff, - darkgray: 0xa9a9a9ff, - darkgreen: 0x006400ff, - darkgrey: 0xa9a9a9ff, - darkkhaki: 0xbdb76bff, - darkmagenta: 0x8b008bff, - darkolivegreen: 0x556b2fff, - darkorange: 0xff8c00ff, - darkorchid: 0x9932ccff, - darkred: 0x8b0000ff, - darksalmon: 0xe9967aff, - darkseagreen: 0x8fbc8fff, - darkslateblue: 0x483d8bff, - darkslategray: 0x2f4f4fff, - darkslategrey: 0x2f4f4fff, - darkturquoise: 0x00ced1ff, - darkviolet: 0x9400d3ff, - deeppink: 0xff1493ff, - deepskyblue: 0x00bfffff, - dimgray: 0x696969ff, - dimgrey: 0x696969ff, - dodgerblue: 0x1e90ffff, - firebrick: 0xb22222ff, - floralwhite: 0xfffaf0ff, - forestgreen: 0x228b22ff, - fuchsia: 0xff00ffff, - gainsboro: 0xdcdcdcff, - ghostwhite: 0xf8f8ffff, - gold: 0xffd700ff, - goldenrod: 0xdaa520ff, - gray: 0x808080ff, - green: 0x008000ff, - greenyellow: 0xadff2fff, - grey: 0x808080ff, - honeydew: 0xf0fff0ff, - hotpink: 0xff69b4ff, - indianred: 0xcd5c5cff, - indigo: 0x4b0082ff, - ivory: 0xfffff0ff, - khaki: 0xf0e68cff, - lavender: 0xe6e6faff, - lavenderblush: 0xfff0f5ff, - lawngreen: 0x7cfc00ff, - lemonchiffon: 0xfffacdff, - lightblue: 0xadd8e6ff, - lightcoral: 0xf08080ff, - lightcyan: 0xe0ffffff, - lightgoldenrodyellow: 0xfafad2ff, - lightgray: 0xd3d3d3ff, - lightgreen: 0x90ee90ff, - lightgrey: 0xd3d3d3ff, - lightpink: 0xffb6c1ff, - lightsalmon: 0xffa07aff, - lightseagreen: 0x20b2aaff, - lightskyblue: 0x87cefaff, - lightslategray: 0x778899ff, - lightslategrey: 0x778899ff, - lightsteelblue: 0xb0c4deff, - lightyellow: 0xffffe0ff, - lime: 0x00ff00ff, - limegreen: 0x32cd32ff, - linen: 0xfaf0e6ff, - magenta: 0xff00ffff, - maroon: 0x800000ff, - mediumaquamarine: 0x66cdaaff, - mediumblue: 0x0000cdff, - mediumorchid: 0xba55d3ff, - mediumpurple: 0x9370dbff, - mediumseagreen: 0x3cb371ff, - mediumslateblue: 0x7b68eeff, - mediumspringgreen: 0x00fa9aff, - mediumturquoise: 0x48d1ccff, - mediumvioletred: 0xc71585ff, - midnightblue: 0x191970ff, - mintcream: 0xf5fffaff, - mistyrose: 0xffe4e1ff, - moccasin: 0xffe4b5ff, - navajowhite: 0xffdeadff, - navy: 0x000080ff, - oldlace: 0xfdf5e6ff, - olive: 0x808000ff, - olivedrab: 0x6b8e23ff, - orange: 0xffa500ff, - orangered: 0xff4500ff, - orchid: 0xda70d6ff, - palegoldenrod: 0xeee8aaff, - palegreen: 0x98fb98ff, - paleturquoise: 0xafeeeeff, - palevioletred: 0xdb7093ff, - papayawhip: 0xffefd5ff, - peachpuff: 0xffdab9ff, - peru: 0xcd853fff, - pink: 0xffc0cbff, - plum: 0xdda0ddff, - powderblue: 0xb0e0e6ff, - purple: 0x800080ff, - rebeccapurple: 0x663399ff, - red: 0xff0000ff, - rosybrown: 0xbc8f8fff, - royalblue: 0x4169e1ff, - saddlebrown: 0x8b4513ff, - salmon: 0xfa8072ff, - sandybrown: 0xf4a460ff, - seagreen: 0x2e8b57ff, - seashell: 0xfff5eeff, - sienna: 0xa0522dff, - silver: 0xc0c0c0ff, - skyblue: 0x87ceebff, - slateblue: 0x6a5acdff, - slategray: 0x708090ff, - slategrey: 0x708090ff, - snow: 0xfffafaff, - springgreen: 0x00ff7fff, - steelblue: 0x4682b4ff, - tan: 0xd2b48cff, - teal: 0x008080ff, - thistle: 0xd8bfd8ff, - tomato: 0xff6347ff, - turquoise: 0x40e0d0ff, - violet: 0xee82eeff, - wheat: 0xf5deb3ff, - white: 0xffffffff, - whitesmoke: 0xf5f5f5ff, - yellow: 0xffff00ff, - yellowgreen: 0x9acd32ff, -}; - -module.exports = normalizeColor; diff --git a/src/propTypes/ColorPropType.js b/src/propTypes/ColorPropType.js index 020ce92d..ccacacb5 100644 --- a/src/propTypes/ColorPropType.js +++ b/src/propTypes/ColorPropType.js @@ -13,7 +13,7 @@ import { PropTypes } from 'react' var colorPropType = function(isRequired, props, propName, componentName, location, propFullName) { - var normalizeColor = require('../modules/normalizeColor'); + var normalizeColor = require('normalize-css-color'); var ReactPropTypeLocationNames = require('react-dom/lib/ReactPropTypeLocationNames'); var color = props[propName]; if (color === undefined || color === null) { @@ -34,6 +34,10 @@ var colorPropType = function(isRequired, props, propName, componentName, locatio return; } + if (color === 'currentcolor' || color === 'inherit') { + return; + } + if (normalizeColor(color) === null) { var locationName = ReactPropTypeLocationNames[location]; return new Error( diff --git a/yarn.lock b/yarn.lock index 2e7abf0a..bfb1fb89 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2299,18 +2299,7 @@ fb-watchman@^1.8.0, fb-watchman@^1.9.0: dependencies: bser "^1.0.2" -fbjs@^0.8.1, fbjs@^0.8.4: - version "0.8.6" - resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.6.tgz#7eb67d6986b2d5007a9b6e92e0e7cb6f75cad290" - dependencies: - core-js "^1.0.0" - isomorphic-fetch "^2.1.1" - loose-envify "^1.0.0" - object-assign "^4.1.0" - promise "^7.1.1" - ua-parser-js "^0.7.9" - -fbjs@^0.8.8: +fbjs@^0.8.1, fbjs@^0.8.4, fbjs@^0.8.8: version "0.8.8" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.8.tgz#02f1b6e0ea0d46c24e0b51a2d24df069563a5ad6" dependencies: @@ -4033,6 +4022,10 @@ normalize-css-color@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/normalize-css-color/-/normalize-css-color-1.0.1.tgz#792f59cae25036950a9127cfcfddc073048f4f9d" +normalize-css-color@^1.0.2: + version "1.0.2" + resolved "https://artifactory.twitter.biz:443/api/npm/js-virtual/normalize-css-color/-/normalize-css-color-1.0.2.tgz#02991e97cccec6623fe573afbbf0de6a1f3e9f8d" + normalize-package-data@^2.3.2, normalize-package-data@^2.3.4: version "2.3.5" resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.3.5.tgz#8d924f142960e1777e7ffe170543631cc7cb02df"