@ant-design/fast-color - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

es/FastColor.d.ts

@@ -94,4 +94,5 @@ import type { ColorInput, HSL, HSV, RGB } from './types';
     private fromHsv;
+    private fromHsvString;
     private fromHslString;
     private fromRgbString;
 }

es/FastColor.js

 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+/**
+ * Support format, alpha unit will check the % mark:
+ * - rgba(102, 204, 255, .5)      -> [102, 204, 255, 0.5]
+ * - rgb(102 204 255 / .5)        -> [102, 204, 255, 0.5]
+ * - rgb(100%, 50%, 0% / 50%)     -> [255, 128, 0, 0.5]
+ * - hsl(270, 60, 40, .5)         -> [270, 60, 40, 0.5]
+ * - hsl(270deg 60% 40% / 50%)   -> [270, 60, 40, 0.5]
+ *
+ * When `base` is provided, the percentage value will be divided by `base`.
+ */
+function splitColorStr(str, parseNum) {
+  const match = str.match(/\d*\.?\d+%?/g);
+  const numList = match ? match.map(item => parseFloat(item)) : [];
+  for (let i = 0; i < 3; i += 1) {
+    numList[i] = parseNum(numList[i], match[i], i);
+  }
+
+  // For alpha. 50% should be 0.5
+  if (match[3]) {
+    numList[3] = match[3].includes('%') ? numList[3] / 100 : numList[3];
+  } else {
+    // By default, alpha is 1
+    numList[3] = 1;
+  }
+  return numList;
+}
+const parseHSVorHSL = (num, _, index) => index === 0 ? num : num / 100;
 export class FastColor {
@@ -37,2 +64,4 @@ constructor(input) {
         this.fromHslString(trimed);
+      } else if (trimed.startsWith('hsv') || trimed.startsWith('hsb')) {
+        this.fromHsvString(trimed);
       }
@@ -430,24 +459,29 @@ } else if ('r' in input && 'g' in input && 'b' in input) {
   }
+  fromHsvString(trimed) {
+    const cells = splitColorStr(trimed, parseHSVorHSL);
+    this.fromHsv({
+      h: cells[0],
+      s: cells[1],
+      v: cells[2],
+      a: cells[3]
+    });
+  }
   fromHslString(trimed) {
-    const str = trimed.substring(trimed.indexOf('(') + 1, trimed.indexOf(')'));
-    const arr = str.includes(',') ? str.split(',') : str.replace('/', ' ').split(' ').filter(item => item.length > 0);
-    const h = parseInt(arr[0]);
-    const s = parseFloat(arr[1]) / 100;
-    const l = parseFloat(arr[2]) / 100;
-    const a = arr[3] ? arr[3].includes('%') ? parseFloat(arr[3]) / 100 : parseFloat(arr[3]) : 1;
+    const cells = splitColorStr(trimed, parseHSVorHSL);
     this.fromHsl({
-      h,
-      s,
-      l,
-      a
+      h: cells[0],
+      s: cells[1],
+      l: cells[2],
+      a: cells[3]
     });
   }
   fromRgbString(trimed) {
-    const str = trimed.substring(trimed.indexOf('(') + 1, trimed.indexOf(')'));
-    const arr = str.includes(',') ? str.split(',') : str.replace('/', ' ').split(' ').filter(item => item.length > 0);
-    this.r = arr[0].includes('%') ? Math.round(parseFloat(arr[0]) / 100 * 255) : parseInt(arr[0]);
-    this.g = arr[1].includes('%') ? Math.round(parseFloat(arr[1]) / 100 * 255) : parseInt(arr[1]);
-    this.b = arr[2].includes('%') ? Math.round(parseFloat(arr[2]) / 100 * 255) : parseInt(arr[2]);
-    this.a = arr[3] ? arr[3].includes('%') ? parseFloat(arr[3]) / 100 : parseFloat(arr[3]) : 1;
+    const cells = splitColorStr(trimed, (num, txt) =>
+    // Convert percentage to number. e.g. 50% -> 128
+    txt.includes('%') ? Math.round(num / 100 * 255) : num);
+    this.r = cells[0];
+    this.g = cells[1];
+    this.b = cells[2];
+    this.a = cells[3];
   }
 }

lib/FastColor.d.ts

@@ -94,4 +94,5 @@ import type { ColorInput, HSL, HSV, RGB } from './types';
     private fromHsv;
+    private fromHsvString;
     private fromHslString;
     private fromRgbString;
 }

lib/FastColor.js

@@ -9,2 +9,29 @@ "use strict";
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+/**
+ * Support format, alpha unit will check the % mark:
+ * - rgba(102, 204, 255, .5)      -> [102, 204, 255, 0.5]
+ * - rgb(102 204 255 / .5)        -> [102, 204, 255, 0.5]
+ * - rgb(100%, 50%, 0% / 50%)     -> [255, 128, 0, 0.5]
+ * - hsl(270, 60, 40, .5)         -> [270, 60, 40, 0.5]
+ * - hsl(270deg 60% 40% / 50%)   -> [270, 60, 40, 0.5]
+ *
+ * When `base` is provided, the percentage value will be divided by `base`.
+ */
+function splitColorStr(str, parseNum) {
+  const match = str.match(/\d*\.?\d+%?/g);
+  const numList = match ? match.map(item => parseFloat(item)) : [];
+  for (let i = 0; i < 3; i += 1) {
+    numList[i] = parseNum(numList[i], match[i], i);
+  }
+
+  // For alpha. 50% should be 0.5
+  if (match[3]) {
+    numList[3] = match[3].includes('%') ? numList[3] / 100 : numList[3];
+  } else {
+    // By default, alpha is 1
+    numList[3] = 1;
+  }
+  return numList;
+}
+const parseHSVorHSL = (num, _, index) => index === 0 ? num : num / 100;
 class FastColor {
@@ -45,2 +72,4 @@ constructor(input) {
         this.fromHslString(trimed);
+      } else if (trimed.startsWith('hsv') || trimed.startsWith('hsb')) {
+        this.fromHsvString(trimed);
       }
@@ -438,25 +467,30 @@ } else if ('r' in input && 'g' in input && 'b' in input) {
   }
+  fromHsvString(trimed) {
+    const cells = splitColorStr(trimed, parseHSVorHSL);
+    this.fromHsv({
+      h: cells[0],
+      s: cells[1],
+      v: cells[2],
+      a: cells[3]
+    });
+  }
   fromHslString(trimed) {
-    const str = trimed.substring(trimed.indexOf('(') + 1, trimed.indexOf(')'));
-    const arr = str.includes(',') ? str.split(',') : str.replace('/', ' ').split(' ').filter(item => item.length > 0);
-    const h = parseInt(arr[0]);
-    const s = parseFloat(arr[1]) / 100;
-    const l = parseFloat(arr[2]) / 100;
-    const a = arr[3] ? arr[3].includes('%') ? parseFloat(arr[3]) / 100 : parseFloat(arr[3]) : 1;
+    const cells = splitColorStr(trimed, parseHSVorHSL);
     this.fromHsl({
-      h,
-      s,
-      l,
-      a
+      h: cells[0],
+      s: cells[1],
+      l: cells[2],
+      a: cells[3]
     });
   }
   fromRgbString(trimed) {
-    const str = trimed.substring(trimed.indexOf('(') + 1, trimed.indexOf(')'));
-    const arr = str.includes(',') ? str.split(',') : str.replace('/', ' ').split(' ').filter(item => item.length > 0);
-    this.r = arr[0].includes('%') ? Math.round(parseFloat(arr[0]) / 100 * 255) : parseInt(arr[0]);
-    this.g = arr[1].includes('%') ? Math.round(parseFloat(arr[1]) / 100 * 255) : parseInt(arr[1]);
-    this.b = arr[2].includes('%') ? Math.round(parseFloat(arr[2]) / 100 * 255) : parseInt(arr[2]);
-    this.a = arr[3] ? arr[3].includes('%') ? parseFloat(arr[3]) / 100 : parseFloat(arr[3]) : 1;
+    const cells = splitColorStr(trimed, (num, txt) =>
+    // Convert percentage to number. e.g. 50% -> 128
+    txt.includes('%') ? Math.round(num / 100 * 255) : num);
+    this.r = cells[0];
+    this.g = cells[1];
+    this.b = cells[2];
+    this.a = cells[3];
   }
 }
 exports.FastColor = FastColor;

package.json

 {
   "name": "@ant-design/fast-color",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "fast and small color class",
@@ -5,0 +5,0 @@ "engines": {

README.md

@@ -47,4 +47,4 @@ # @ant-design/fast-color
 new FastColor({ r: 102, g: 204, b: 255, a: 0.5 }); // rgb object
-new FastColor({ h: 270, s: 60, l: 40, a: 0.5 }); // hsl object
-new FastColor({ h: 270, s: 60, v: 40, a: 0.5 }); // hsv object
+new FastColor({ h: 270, s: 0.6, l: 0.4, a: 0.5 }); // hsl object
+new FastColor({ h: 270, s: 0.6, v: 0.4, a: 0.5 }); // hsv object
 
@@ -51,0 +51,0 @@ // clone

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

40719

increased by3.19%

Lines of code

1220

increased by5.9%

No dependency changes