fix(transform): increase uicolor to 3 decimals to retain 8bit precisi…

…on (#314) Two decimals only allow for 100 different shades for each channel. Using a gray scale color of #1d with only 2 decimals of precision would produce 0.11 for each channel, converting this number back to hex would result in #1c which is incorrect. This is now fixed by using 3 decimals of precision allowing a theoretical 1000 different shades.
amzn · Aug 14, 2019 · a3bde96 · a3bde96
1 parent 4f13f57
commit a3bde96
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 13 deletions.
diff --git a/__tests__/common/transforms.test.js b/__tests__/common/transforms.test.js
@@ -286,14 +286,21 @@ describe('common', () => {
         var value = transforms["color/UIColor"].transformer({
           value: "#aaaaaa"
         });
-        expect(value).toBe("[UIColor colorWithRed:0.67f green:0.67f blue:0.67f alpha:1.00f]");
+        expect(value).toBe("[UIColor colorWithRed:0.667f green:0.667f blue:0.667f alpha:1.000f]");
+      });
+
+      it('should retain enough precision when converting to decimal', () => {
+        var value = transforms["color/UIColor"].transformer({
+          value: "#1d1d1d"
+        });
+        expect(value).toBe("[UIColor colorWithRed:0.114f green:0.114f blue:0.114f alpha:1.000f]");
       });
 
       it('should handle colors with transparency', () => {
         var value = transforms["color/UIColor"].transformer({
           value: "#aaaaaa99"
         });
-        expect(value).toBe("[UIColor colorWithRed:0.67f green:0.67f blue:0.67f alpha:0.60f]");
+        expect(value).toBe("[UIColor colorWithRed:0.667f green:0.667f blue:0.667f alpha:0.600f]");
       });
     });
 
@@ -302,14 +309,21 @@ describe('common', () => {
         var value = transforms["color/UIColorSwift"].transformer({
           value: "#aaaaaa"
         });
-        expect(value).toBe("UIColor(red: 0.67, green: 0.67, blue: 0.67, alpha:1)");
+        expect(value).toBe("UIColor(red: 0.667, green: 0.667, blue: 0.667, alpha:1)");
+      });
+
+      it('should retain enough precision when converting to decimal', () => {
+        var value = transforms["color/UIColorSwift"].transformer({
+          value: "#1d1d1d"
+        });
+        expect(value).toBe("UIColor(red: 0.114, green: 0.114, blue: 0.114, alpha:1)");
       });
 
       it('should handle colors with transparency', () => {
         var value = transforms["color/UIColorSwift"].transformer({
           value: "#aaaaaa99"
         });
-        expect(value).toBe("UIColor(red: 0.67, green: 0.67, blue: 0.67, alpha:0.6)");
+        expect(value).toBe("UIColor(red: 0.667, green: 0.667, blue: 0.667, alpha:0.6)");
       });
     });
 

diff --git a/lib/common/transforms.js b/lib/common/transforms.js
@@ -351,7 +351,7 @@ module.exports = {
    * ```objectivec
    * // Matches: prop.attributes.category === 'color'
    * // Returns:
-   * [UIColor colorWithRed:0.00f green:0.59f blue:0.53f alpha:1.0f]
+   * [UIColor colorWithRed:0.114f green:0.114f blue:0.114f alpha:1.000f]
    * ```
    *
    * @memberof Transforms
@@ -361,10 +361,10 @@ module.exports = {
     matcher: isColor,
     transformer: function (prop) {
       var rgb = Color(prop.value).toRgb();
-      return '[UIColor colorWithRed:' + (rgb.r/255).toFixed(2) + 'f' +
-             ' green:' + (rgb.g/255).toFixed(2) + 'f' +
-             ' blue:' + (rgb.b/255).toFixed(2) + 'f' +
-             ' alpha:' + rgb.a.toFixed(2) + 'f]';
+      return '[UIColor colorWithRed:' + (rgb.r/255).toFixed(3) + 'f' +
+             ' green:' + (rgb.g/255).toFixed(3) + 'f' +
+             ' blue:' + (rgb.b/255).toFixed(3) + 'f' +
+             ' alpha:' + rgb.a.toFixed(3) + 'f]';
     }
   },
 
@@ -374,7 +374,7 @@ module.exports = {
    * ```swift
    * // Matches: prop.attributes.category === 'color'
    * // Returns:
-   * UIColor(red: 0.67, green: 0.67, blue: 0.67, alpha:0.6)
+   * UIColor(red: 0.667, green: 0.667, blue: 0.667, alpha:0.6)
    * ```
    *
    * @memberof Transforms
@@ -384,9 +384,9 @@ module.exports = {
     matcher: isColor,
     transformer: function (prop) {
       const { r, g, b, a } = Color(prop.value).toRgb();
-      const rFixed = (r / 255.0).toFixed(2);
-      const gFixed = (g / 255.0).toFixed(2);
-      const bFixed = (b / 255.0).toFixed(2);
+      const rFixed = (r / 255.0).toFixed(3);
+      const gFixed = (g / 255.0).toFixed(3);
+      const bFixed = (b / 255.0).toFixed(3);
       return `UIColor(red: ${rFixed}, green: ${gFixed}, blue: ${bFixed}, alpha:${a})`;
     }
   },