@gitlab/ui/dist/utils/utils.js

GitLab UI Components

import { labelColorOptions, focusableTags } from './constants';

function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}

function _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}

function _iterableToArrayLimit(arr, i) {
  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
  var _arr = [];
  var _n = true;
  var _d = false;
  var _e = undefined;

  try {
    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
      _arr.push(_s.value);

      if (i && _arr.length === i) break;
    }
  } catch (err) {
    _d = true;
    _e = err;
  } finally {
    try {
      if (!_n && _i["return"] != null) _i["return"]();
    } finally {
      if (_d) throw _e;
    }
  }

  return _arr;
}

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 _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 debounceByAnimationFrame(fn) {
  var requestId;
  return function debounced() {
    var _this = this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    if (requestId) {
      window.cancelAnimationFrame(requestId);
    }

    requestId = window.requestAnimationFrame(function () {
      return fn.apply(_this, args);
    });
  };
}
function throttle(fn) {
  var frameId = null;
  return function () {
    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
      args[_key2] = arguments[_key2];
    }

    if (frameId) {
      return;
    }

    frameId = window.requestAnimationFrame(function () {
      fn.apply(void 0, args);
      frameId = null;
    });
  };
}
function rgbFromHex(hex) {
  var cleanHex = hex.replace('#', '');
  var rgb = cleanHex.length === 3 ? cleanHex.split('').map(function (val) {
    return val + val;
  }) : cleanHex.match(/[\da-f]{2}/gi);

  var _rgb$map = rgb.map(function (val) {
    return parseInt(val, 16);
  }),
      _rgb$map2 = _slicedToArray(_rgb$map, 3),
      r = _rgb$map2[0],
      g = _rgb$map2[1],
      b = _rgb$map2[2];

  return [r, g, b];
}
function rgbFromString(color, sub) {
  var rgb = color.substring(sub, color.length - 1).split(',');

  var _rgb$map3 = rgb.map(function (i) {
    return parseInt(i, 10);
  }),
      _rgb$map4 = _slicedToArray(_rgb$map3, 3),
      r = _rgb$map4[0],
      g = _rgb$map4[1],
      b = _rgb$map4[2];

  return [r, g, b];
}
function hexToRgba(hex) {
  var opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;

  var _rgbFromHex = rgbFromHex(hex),
      _rgbFromHex2 = _slicedToArray(_rgbFromHex, 3),
      r = _rgbFromHex2[0],
      g = _rgbFromHex2[1],
      b = _rgbFromHex2[2];

  return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(opacity, ")");
}
function colorFromBackground(backgroundColor) {
  var r;
  var g;
  var b;

  if (backgroundColor.startsWith('#')) {
    var _rgbFromHex3 = rgbFromHex(backgroundColor);

    var _rgbFromHex4 = _slicedToArray(_rgbFromHex3, 3);

    r = _rgbFromHex4[0];
    g = _rgbFromHex4[1];
    b = _rgbFromHex4[2];
  } else if (backgroundColor.startsWith('rgba(')) {
    var _rgbFromString = rgbFromString(backgroundColor, 5);

    var _rgbFromString2 = _slicedToArray(_rgbFromString, 3);

    r = _rgbFromString2[0];
    g = _rgbFromString2[1];
    b = _rgbFromString2[2];
  } else if (backgroundColor.startsWith('rgb(')) {
    var _rgbFromString3 = rgbFromString(backgroundColor, 4);

    var _rgbFromString4 = _slicedToArray(_rgbFromString3, 3);

    r = _rgbFromString4[0];
    g = _rgbFromString4[1];
    b = _rgbFromString4[2];
  }

  if (r + g + b <= 500) {
    return labelColorOptions.light;
  }

  return labelColorOptions.dark;
}
function uid() {
  return Math.random().toString(36).substring(2);
}
/**
 * Receives an element and validates that it can be focused
 * @param { HTMLElement } The element we want to validate
 * @return { boolean } Is the element focusable
 */

function isElementFocusable(elt) {
  if (!elt) return false;
  var tagName = elt.tagName;
  var isValidTag = focusableTags.includes(tagName);
  var hasValidType = elt.getAttribute('type') !== 'hidden';
  var isDisabled = elt.getAttribute('disabled') === '' || elt.getAttribute('disabled');
  var hasValidZIndex = elt.getAttribute('z-index') !== '-1';
  var isInvalidAnchorTag = tagName === 'A' && !elt.getAttribute('href');
  return isValidTag && hasValidType && !isDisabled && hasValidZIndex && !isInvalidAnchorTag;
}
/**
 * Receives an array of HTML elements and focus the first one possible
 * @param { Array.<HTMLElement> } An array of element to potentially focus
 * @return { undefined }
 */

function focusFirstFocusableElement(elts) {
  var focusableElt = elts.find(function (el) {
    return isElementFocusable(el);
  });
  if (focusableElt) focusableElt.focus();
}

export { colorFromBackground, debounceByAnimationFrame, focusFirstFocusableElement, hexToRgba, isElementFocusable, rgbFromHex, rgbFromString, throttle, uid };