shineout/esm/utils/color.js

A components library for React

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
import { isOne, isPercent } from "./is";
var CSS_INTEGER = '[-\\+]?\\d+%?';

// <http://www.w3.org/TR/css3-values/#number-value>
var CSS_NUMBER = '[-\\+]?\\d*\\.\\d+%?';
var CSS_UNIT = "(?:".concat(CSS_NUMBER, ")|(?:").concat(CSS_INTEGER, ")");
var PERMISSIVE_MATCH3 = "[\\s|\\(]+(".concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")\\s*\\)?");
var PERMISSIVE_MATCH4 = "[\\s|\\(]+(".concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")\\s*\\)?");
var floor = Math.floor;

// all color RegExp
var MATCH = {
  CSS_UNIT: new RegExp(CSS_UNIT),
  rgb: new RegExp("rgb".concat(PERMISSIVE_MATCH3)),
  rgba: new RegExp("rgba".concat(PERMISSIVE_MATCH4)),
  hsl: new RegExp("hsl".concat(PERMISSIVE_MATCH3)),
  hsla: new RegExp("hsla".concat(PERMISSIVE_MATCH4)),
  hsv: new RegExp("hsv".concat(PERMISSIVE_MATCH3)),
  hsva: new RegExp("hsva".concat(PERMISSIVE_MATCH4)),
  hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
  hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
  hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
  hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
};
function parseIntFromHex(val) {
  return parseInt(val, 16);
}
function convertHexToDecimal(h) {
  return parseIntFromHex(h) / 255;
}

// string to rgba {}
var parse = function parse(color) {
  color = color.toLowerCase();
  var match;
  if (match = MATCH.rgb.exec(color)) {
    return {
      r: match[1],
      g: match[2],
      b: match[3]
    };
  }
  if (match = MATCH.rgba.exec(color)) {
    return {
      r: match[1],
      g: match[2],
      b: match[3],
      a: match[4]
    };
  }
  if (match = MATCH.hex8.exec(color)) {
    return {
      r: parseIntFromHex(match[1]),
      g: parseIntFromHex(match[2]),
      b: parseIntFromHex(match[3]),
      a: convertHexToDecimal(match[4])
    };
  }
  if (match = MATCH.hex6.exec(color)) {
    return {
      r: parseIntFromHex(match[1]),
      g: parseIntFromHex(match[2]),
      b: parseIntFromHex(match[3])
    };
  }
  if (match = MATCH.hex4.exec(color)) {
    return {
      r: parseIntFromHex("".concat(match[1]).concat(match[1])),
      g: parseIntFromHex("".concat(match[2]).concat(match[2])),
      b: parseIntFromHex("".concat(match[3]).concat(match[3])),
      a: convertHexToDecimal("".concat(match[4]).concat(match[4]))
    };
  }
  if (match = MATCH.hex3.exec(color)) {
    return {
      r: parseIntFromHex("".concat(match[1]).concat(match[1])),
      g: parseIntFromHex("".concat(match[2]).concat(match[2])),
      b: parseIntFromHex("".concat(match[3]).concat(match[3]))
    };
  }
  return false;
};
var toRGB = function toRGB(input) {
  if (!input || typeof input !== 'string') return '';
  var color = parse(input);
  if (!color) return '';
  return color.a ? "rgba(".concat(color.r, ",").concat(color.g, ",").concat(color.b, ",").concat(color.a, ")") : "rgb(".concat(color.r, ",").concat(color.g, ",").concat(color.b, ")");
};
var isString = function isString(string) {
  if (!string) {
    console.error(new Error('the color is empty'));
    return false;
  }
  if (typeof string !== 'string') {
    console.error(new Error("the color is get a ".concat(_typeof(string), ", expect string")));
    return false;
  }
  return true;
};
var dealPointZero = function dealPointZero(string) {
  var num = string.toFixed(1);
  var reg = /\.0*$/;
  if (reg.test(num)) return floor(Number(num));
  return num;
};

/**
 * parse Hex to int
 * @param {*} value Hex number
 */
var parseHex = function parseHex(value) {
  return parseInt(value, 16);
};

/**
 * format the hex array
 * @param {Array} array hex array
 */
var formatHexArray = function formatHexArray(array, length) {
  if (length === 6) return ["".concat(array[1]), "".concat(array[2]), "".concat(array[3])];
  if (length === 3) return ["".concat(array[1]).concat(array[1]), "".concat(array[2]).concat(array[2]), "".concat(array[3]).concat(array[3])];
  if (length === 8) return ["".concat(array[1]), "".concat(array[2]), "".concat(array[3]), "".concat(array[4])];
  return ["".concat(array[1]).concat(array[1]), "".concat(array[2]).concat(array[2]), "".concat(array[3]).concat(array[3]), "".concat(array[4]).concat(array[4])];
};
var getRgb = function getRgb(arr, length) {
  var array = formatHexArray(arr, length);
  return "rgb(".concat(parseHex(array[0]), ", ").concat(parseHex(array[1]), ", ").concat(parseHex(array[2]), ")");
};
var getRgba = function getRgba(arr, length) {
  var array = formatHexArray(arr, length);
  return "rgba(".concat(parseHex(array[0]), ", ").concat(parseHex(array[1]), ", ").concat(parseHex(array[2]), ", ").concat(dealPointZero(parseHex(array[3]) / 255), ")");
};
var toBound01 = function toBound01(val, max) {
  if (isOne(val)) {
    val = '100%';
  }
  var processPercent = isPercent(val);
  val = Math.min(max, Math.max(0, parseInt(String(val), 10)));

  // Automatically convert percentage into number
  if (processPercent) {
    val = parseInt(String(val * max), 10) / 100;
  }

  // Handle floating point rounding errors
  if (Math.abs(val - max) < 0.000001) {
    return 1;
  }

  // Convert into [0, 1] range if it isn't already
  return val % max / parseInt(String(max), 10);
};
var hueToRgb = function hueToRgb(p, q, t) {
  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;
};
var translateHsl = function translateHsl(matchs, a) {
  var _matchs = _slicedToArray(matchs, 4),
    h = _matchs[1],
    s = _matchs[2],
    l = _matchs[3];
  var r;
  var g;
  var b;
  h = toBound01(h, 360);
  s = toBound01(s, 100);
  l = toBound01(l, 100);
  if (s === 0) {
    r = l;
    g = l;
    b = l;
  } else {
    var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
    var p = 2 * l - q;
    r = hueToRgb(p, q, h + 1 / 3);
    g = hueToRgb(p, q, h);
    b = hueToRgb(p, q, h - 1 / 3);
  }
  r = floor(r * 255);
  g = floor(g * 255);
  b = floor(b * 255);
  return a ? "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(a, ")") : "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ")");
};
var isDarkRgb = function isDarkRgb(color) {
  var matchs = MATCH.rgb.exec(color) || MATCH.rgba.exec(color);
  if (matchs) {
    var _matchs2 = _slicedToArray(matchs, 4),
      r = _matchs2[1],
      g = _matchs2[2],
      b = _matchs2[3];
    return Number(r) * 0.299 + Number(g) * 0.578 + Number(b) * 0.114 < 192;
  }
  console.error(new Error("the string '".concat(color, "' is not a legal color")));
  return undefined;
};
var toHex = function toHex(rgb, noAlpha, a) {
  var _rgb = _slicedToArray(rgb, 4),
    r = _rgb[1],
    g = _rgb[2],
    b = _rgb[3];
  var _rgb2 = _slicedToArray(rgb, 4);
  r = _rgb2[1];
  g = _rgb2[2];
  b = _rgb2[3];
  var o;
  var calAlhpa = !noAlpha && a;
  r = floor(r).toString(16);
  g = floor(g).toString(16);
  b = floor(b).toString(16);
  if (r.length !== 2) r = "0".concat(r);
  if (g.length !== 2) g = "0".concat(g);
  if (b.length !== 2) b = "0".concat(b);
  if (calAlhpa) o = floor(a * 255).toString(16);
  return calAlhpa ? "#".concat(r).concat(g).concat(b).concat(o) : "#".concat(r).concat(g).concat(b);
};

// third parameter, to keep same with toHex
var toHsl = function toHsl(rgb, _, a) {
  var _rgb3 = _slicedToArray(rgb, 4),
    r = _rgb3[1],
    g = _rgb3[2],
    b = _rgb3[3];
  r = toBound01(r, 255);
  g = toBound01(g, 255);
  b = toBound01(b, 255);
  var max = Math.max(r, g, b);
  var min = Math.min(r, g, b);
  var h;
  var s;
  var l = (max + min) / 2;
  if (max === min) {
    h = 0;
    s = 0; // achromatic
  } else {
    var d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r:
        h = (g - b) / d + (g < b ? 6 : 0);
        break;
      case g:
        h = (b - r) / d + 2;
        break;
      case b:
        h = (r - g) / d + 4;
        break;
      default:
        h = 0;
        break;
    }
    h /= 6;
  }
  h = floor(h * 360);
  s = floor(s * 100);
  l = floor(l * 100);
  return a ? "hsla(".concat(h, ", ").concat(s, ", ").concat(l, ", ").concat(a, ")") : "hsl(".concat(h, ", ").concat(s, ", ").concat(l, ")");
};
var rgbTranlate = function rgbTranlate(target) {
  return function (rgb, noAlpha) {
    if (!isString(rgb)) return '';
    var matchs;
    matchs = MATCH.rgb.exec(rgb);
    if (matchs) {
      return target(matchs, noAlpha);
    }
    matchs = MATCH.rgba.exec(rgb);
    if (matchs) {
      return target(matchs, noAlpha, Number(matchs[4]));
    }
    console.error(new Error("the string '".concat(rgb, "' is not a rgb color")));
    return '';
  };
};
export function hexToRgb(hex) {
  if (!isString(hex)) return '';
  var matchs;
  matchs = MATCH.hex3.exec(hex);
  if (matchs) {
    return getRgb(matchs, 3);
  }
  matchs = MATCH.hex6.exec(hex);
  if (matchs) {
    return getRgb(matchs, 6);
  }
  matchs = MATCH.hex4.exec(hex);
  if (matchs) {
    return getRgba(matchs, 4);
  }
  matchs = MATCH.hex8.exec(hex);
  if (matchs) {
    return getRgba(matchs, 8);
  }
  console.error(new Error("the string '".concat(hex, "' is not a hex color")));
  return '';
}
export function hslToRgb(hsl) {
  if (!isString(hsl)) return '';
  var matchs;
  matchs = MATCH.hsl.exec(hsl);
  if (matchs) {
    return translateHsl(matchs);
  }
  matchs = MATCH.hsla.exec(hsl);
  if (matchs) {
    return translateHsl(matchs, matchs[4]);
  }
  console.error(new Error("the string '".concat(hsl, "' is not a hsl color")));
  return '';
}
// @ts-ignore
export var rgbToHex = rgbTranlate(toHex);
// @ts-ignore
export var rgbTohsl = rgbTranlate(toHsl);
export function hexToHsl(hex) {
  var temp = hexToRgb(hex);
  if (!temp) return '';
  return rgbTohsl(temp);
}
export function hslToHex(hsl, noAlpha) {
  var temp = hslToRgb(hsl);
  if (!temp) return '';
  return rgbToHex(temp, noAlpha);
}

// dark or light

export function judgeDark(color) {
  if (!isString(color)) return undefined;
  var rgbString = color;
  if (MATCH.hsl.test(color) || MATCH.hsla.test(color)) {
    rgbString = hslToRgb(color);
  }
  if (MATCH.hex3.test(color) || MATCH.hex4.test(color) || MATCH.hex6.test(color) || MATCH.hex8.test(color)) {
    rgbString = hexToRgb(color);
  }
  return isDarkRgb(rgbString);
}
export function isDark(color) {
  var result = judgeDark(color);
  if (result === undefined) return false;
  return result;
}
export function isLight(color) {
  var result = judgeDark(color);
  if (result === undefined) return false;
  return !result;
}

/**
 * get hsla h s l a
 * @param color hsl
 */
function getHSLA(color) {
  var hslReg = new RegExp(/hsla?\((\d{1,3}), (\d{1,3}), (\d{1,3})(, (\d{1,3}))?\)$/);
  hslReg.test(color);
  var h = RegExp.$1;
  var s = RegExp.$2;
  var l = RegExp.$3;
  var a = RegExp.$5.length ? RegExp.$5 : 1;
  return {
    h: h,
    s: s,
    l: parseInt(l, 10),
    a: a
  };
}

/**
 * darken color
 * @param color format rgb | rgba
 * @param value -100 ~ 100
 */
export function darken(color, value) {
  if (!color) return '';
  if (!value) value = 0;
  value = parseInt(String(value), 10);
  color = toRGB(color);
  var hsl = rgbTohsl(color);
  var _getHSLA = getHSLA(hsl),
    h = _getHSLA.h,
    s = _getHSLA.s,
    l = _getHSLA.l,
    a = _getHSLA.a;
  return hslToRgb("hsla(".concat(h, ",").concat(s, "%,").concat(l - value, "%,").concat(a, ")"));
}

/**
 * fade color
 * @param color format rgb
 * @param alpha 0-1
 */
export function fade(color) {
  var alpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
  if (!color) return '';
  color = toRGB(color);
  var hsl = rgbTohsl(color);
  var _getHSLA2 = getHSLA(hsl),
    h = _getHSLA2.h,
    s = _getHSLA2.s,
    l = _getHSLA2.l;
  return hslToRgb("hsla(".concat(h, ",").concat(s, "%,").concat(l, "%,").concat(alpha, ")"));
}