improve getColorTint util to support custom colors tints (#257)

* add fallback logic for getColorTint to support random colors tints

* improve logic of getColorTint for bright tint colors

* improve getColorTint util to support custom colors tints

* handle edge cases for getColorTint

Author: ethanshar

package.json

@@ -39,6 +39,7 @@
     "babel-plugin-transform-inline-environment-variables": "^0.0.2",
     "hoist-non-react-statics": "^2.3.0",
     "lodash": "^4.0.0",
+    "onecolor": "^3.1.0",
     "prop-types": "^15.5.10",
     "react-native-animatable": "^1.1.0",
     "react-native-blur": "^3.1.1",

src/style/__tests__/colors.spec.js

@@ -45,12 +45,35 @@ describe('services/AvatarService', () => {
       expect(uut.getColorTint(uut.blue20, 60)).toEqual(uut.blue60);
     });
 
-    /* it('should throw error if the color could not be found', () => {
-      expect(() => uut.getColorTint('#ff115', '10')).toThrow(new Error('"Colors.getColorTint" could not find this color'));
+    it('should return same color if tintLevel param is undefined or NaN', () => {
+      expect(uut.getColorTint('#F1BE0B')).toEqual('#F1BE0B');
+      expect(uut.getColorTint('#F1BE0B', '2a4')).toEqual('#F1BE0B');
     });
 
-    it('should throw error if tint key was not provided', () => {
-      expect(() => uut.getColorTint('#ff115')).toThrow(new Error('"Colors.getColorTint" must accept a color and tintKey params'));
-    }); */
+    it('should return undefined if color param is undefined', () => {
+      expect(uut.getColorTint(undefined, 10)).toEqual(undefined);
+    });
+    
+    it('should handle color that does not exist in uilib', () => {
+      expect(uut.getColorTint('#F1BE0B', 10)).toEqual('#b28c08');
+      expect(uut.getColorTint('#F1BE0B', 20)).toEqual('#ca9f09');
+      expect(uut.getColorTint('#F1BE0B', 30)).toEqual('#F1BE0B');
+      expect(uut.getColorTint('#F1BE0B', 40)).toEqual('#f5d04d');
+      expect(uut.getColorTint('#F1BE0B', 50)).toEqual('#f9e291');
+      expect(uut.getColorTint('#F1BE0B', 60)).toEqual('#fbedbb');
+      expect(uut.getColorTint('#F1BE0B', 70)).toEqual('#fdf4d6');
+      expect(uut.getColorTint('#F1BE0B', 80)).toEqual('#fef9e7');
+    });
+    
+    it('should round down tint level to the nearest one', () => {
+      expect(uut.getColorTint('#F1BE0B', 75)).toEqual('#fdf4d6');
+      expect(uut.getColorTint('#F1BE0B', 25)).toEqual('#ca9f09');
+      expect(uut.getColorTint('#F1BE0B', 35)).toEqual('#F1BE0B');
+    });
+    
+    it('should handle out of range tint levels and round them to the nearest one in range', () => {
+      expect(uut.getColorTint('#F1BE0B', 3)).toEqual('#b28c08');
+      expect(uut.getColorTint('#F1BE0B', 95)).toEqual('#fef9e7');
+    });
   });
 });

src/style/colors.js

@@ -1,6 +1,8 @@
 import _ from 'lodash';
 import {colorsPalette} from './colorsPalette';
 
+const one = require('onecolor');
+
 class Colors {
   /**
    * Load custom set of colors
@@ -60,10 +62,15 @@ class Colors {
   }
 
   getColorTint(color, tintKey) {
+    const BASE_COLOR_LEVEL = 3;
+    const darkRatios = [0.13, 0.08];
+    const lightRatios = [0.27, 0.55, 0.72, 0.83, 0.9];
+
     const colorKey = _.findKey(this, (value, key) => this[key] === color);
 
-    if (_.isUndefined(tintKey)) {
-      throw new Error('"Colors.getColorTint" must accept a color and tintKey params');
+    if (_.isUndefined(tintKey) || isNaN(tintKey) || _.isUndefined(color)) {
+      console.error('"Colors.getColorTint" must accept a color and tintKey params');
+      return color;
     }
 
     if (colorKey) {
@@ -74,10 +81,20 @@ class Colors {
         return color;
       }
       return requiredColor;
+    // Handles dynamic colors (non uilib colors)
     } else {
-      // throw new Error('"Colors.getColorTint" could not find this color');
-      console.warn('"Colors.getColorTint" could not find this color');
-      return color;
+      let tintLevel = Math.floor(Number(tintKey) / 10);
+      tintLevel = Math.max(1, tintLevel);
+      tintLevel = Math.min(8, tintLevel);
+      if (tintLevel === BASE_COLOR_LEVEL) {
+        return color;
+      } else if (tintLevel <= BASE_COLOR_LEVEL) {
+        const darkRatio = darkRatios[tintLevel - 1];
+        return one(color).darken(darkRatio).hex();
+      } else {
+        const lightRatio = lightRatios[tintLevel - 4];
+        return one(color).mix('#ffffff', lightRatio).hex();
+      }
     }
   }
 }