@onesy/ui-react/utils.js

UI for React

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.controlPoint = exports.caret = exports.canvasSaturation = exports.canvasOldPhoto = exports.canvasInvert = exports.canvasFade = exports.canvasContrast = exports.canvasBrightness = exports.angleToCoordinates = void 0;
Object.defineProperty(exports, "currencies", {
  enumerable: true,
  get: function () {
    return _currencies.default;
  }
});
exports.print = exports.minMaxBetweenNumbers = exports.matches = exports.line = exports.keyboardStyleCommands = exports.keyboardStandardCommands = exports.importIframeStyles = exports.image = exports.iconSizeToFontSize = exports.iconFontSize = exports.getOverflowParent = exports.formats = exports.decodeHTMLEntities = void 0;
exports.reflow = reflow;
exports.valueBreakpoints = exports.toNumber = exports.staticClassName = exports.scrollToMiddleOfParent = exports.save = exports.sanitize = exports.replace = void 0;
var _utils = require("@onesy/utils");
var _currencies = _interopRequireDefault(require("./currencies"));
function reflow(element) {
  return element === null || element === void 0 ? void 0 : element.offsetHeight;
}
const staticClassName = (name, theme) => {
  var _theme$ui, _theme$ui2, _theme$ui3;
  return (theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui[`onesy-${name}`]) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.className) === null || _theme$ui === void 0 ? void 0 : _theme$ui.static) !== undefined ? theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2[`onesy-${name}`]) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.className) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.static : theme === null || theme === void 0 || (_theme$ui3 = theme.ui) === null || _theme$ui3 === void 0 ? void 0 : _theme$ui3.className.static;
};
exports.staticClassName = staticClassName;
const iconSizeToFontSize = value => {
  let fontSize = '1.5rem';
  if (value === 'very small') fontSize = '0.75rem';else if (value === 'small') fontSize = '1.125rem';else if (value === 'regular') fontSize = '1.5rem';else if (value === 'medium') fontSize = '1.875rem';else if (value === 'large') fontSize = '2.25rem';else if (value === 'very large') fontSize = '2.625rem';else if (value !== undefined) fontSize = value;
  return fontSize;
};

// Media query value or value
exports.iconSizeToFontSize = iconSizeToFontSize;
const valueBreakpoints = (item, value, breakpoints, theme) => {
  // Simple
  if (!(0, _utils.is)('object', item) && item !== undefined) return item;
  const breakpointsKeysTheme = Object.keys(theme.breakpoints.media);
  const breakpointsKeys = Object.keys(breakpoints || {});

  // No breakpoints object
  if ((0, _utils.is)('object', item) && !Object.keys(item).every(prop => ['default', ...breakpointsKeysTheme].includes(prop))) return item;

  // Item
  if ((0, _utils.is)('object', item)) {
    for (const breakpoint of breakpointsKeys) {
      if (breakpoints[breakpoint] && (item === null || item === void 0 ? void 0 : item[breakpoint]) !== undefined) return item[breakpoint];
    }
    if ((item === null || item === void 0 ? void 0 : item.default) !== undefined) return item === null || item === void 0 ? void 0 : item.default;
  }

  // Value
  if ((0, _utils.is)('object', value)) {
    for (const breakpoint of breakpointsKeys) {
      if (breakpoints[breakpoint] && (value === null || value === void 0 ? void 0 : value[breakpoint]) !== undefined) return value[breakpoint];
    }
    if ((value === null || value === void 0 ? void 0 : value.default) !== undefined) return value === null || value === void 0 ? void 0 : value.default;
  }
  return value;
};
exports.valueBreakpoints = valueBreakpoints;
const image = uri => new Promise((resolve, reject) => {
  const img = document.createElement('img');
  const method = () => resolve(img);
  img.onload = method;
  img.onerror = () => resolve('');
  img.src = uri;
});
exports.image = image;
const canvasBrightness = (value, mainCanvas, valueCopy) => {
  const rootDocument = (mainCanvas === null || mainCanvas === void 0 ? void 0 : mainCanvas.ownerDocument) || window.document;
  const canvas = rootDocument.createElement('canvas');
  canvas.width = valueCopy.width;
  canvas.height = valueCopy.height;
  const context = canvas.getContext('2d');
  context.drawImage(valueCopy, 0, 0);
  if (![0, undefined].includes(value)) (0, _utils.canvasFilterBrightness)(value, canvas);
  mainCanvas === null || mainCanvas === void 0 || mainCanvas.getContext('2d').drawImage(canvas, 0, 0, canvas.width, canvas.height);
  return canvas;
};
exports.canvasBrightness = canvasBrightness;
const canvasContrast = (value, mainCanvas, valueCopy) => {
  const rootDocument = (mainCanvas === null || mainCanvas === void 0 ? void 0 : mainCanvas.ownerDocument) || window.document;
  const canvas = rootDocument.createElement('canvas');
  canvas.width = valueCopy.width;
  canvas.height = valueCopy.height;
  const context = canvas.getContext('2d');
  context.drawImage(valueCopy, 0, 0);
  if (![0, undefined].includes(value)) (0, _utils.canvasFilterContrast)(value, canvas);
  mainCanvas === null || mainCanvas === void 0 || mainCanvas.getContext('2d').drawImage(canvas, 0, 0, canvas.width, canvas.height);
  return canvas;
};
exports.canvasContrast = canvasContrast;
const canvasSaturation = (value, mainCanvas, valueCopy) => {
  const rootDocument = (mainCanvas === null || mainCanvas === void 0 ? void 0 : mainCanvas.ownerDocument) || window.document;
  const canvas = rootDocument.createElement('canvas');
  canvas.width = valueCopy.width;
  canvas.height = valueCopy.height;
  const context = canvas.getContext('2d');
  context.drawImage(valueCopy, 0, 0);
  if (![0, undefined].includes(value)) (0, _utils.canvasFilterSaturation)(value, canvas);
  mainCanvas === null || mainCanvas === void 0 || mainCanvas.getContext('2d').drawImage(canvas, 0, 0, canvas.width, canvas.height);
  return canvas;
};
exports.canvasSaturation = canvasSaturation;
const canvasFade = (value, mainCanvas, valueCopy) => {
  const rootDocument = (mainCanvas === null || mainCanvas === void 0 ? void 0 : mainCanvas.ownerDocument) || window.document;
  const canvas = rootDocument.createElement('canvas');
  canvas.width = valueCopy.width;
  canvas.height = valueCopy.height;
  const context = canvas.getContext('2d');
  context.drawImage(valueCopy, 0, 0);
  if (![0, undefined].includes(value)) (0, _utils.canvasFilterFade)(value, canvas);
  mainCanvas === null || mainCanvas === void 0 || mainCanvas.getContext('2d').drawImage(canvas, 0, 0, canvas.width, canvas.height);
  return canvas;
};
exports.canvasFade = canvasFade;
const canvasInvert = (value, mainCanvas, valueCopy) => {
  const rootDocument = (mainCanvas === null || mainCanvas === void 0 ? void 0 : mainCanvas.ownerDocument) || window.document;
  const canvas = rootDocument.createElement('canvas');
  canvas.width = valueCopy.width;
  canvas.height = valueCopy.height;
  const context = canvas.getContext('2d');
  context.drawImage(valueCopy, 0, 0);
  if (![0, undefined].includes(value)) (0, _utils.canvasFilterInvert)(value, canvas);
  mainCanvas === null || mainCanvas === void 0 || mainCanvas.getContext('2d').drawImage(canvas, 0, 0, canvas.width, canvas.height);
  return canvas;
};
exports.canvasInvert = canvasInvert;
const canvasOldPhoto = (value, mainCanvas, valueCopy) => {
  const rootDocument = (mainCanvas === null || mainCanvas === void 0 ? void 0 : mainCanvas.ownerDocument) || window.document;
  const canvas = rootDocument.createElement('canvas');
  canvas.width = valueCopy.width;
  canvas.height = valueCopy.height;
  const context = canvas.getContext('2d');
  context.drawImage(valueCopy, 0, 0);
  if (![0, undefined].includes(value)) (0, _utils.canvasFilterOldPhoto)(value, canvas);
  mainCanvas === null || mainCanvas === void 0 || mainCanvas.getContext('2d').drawImage(canvas, 0, 0, canvas.width, canvas.height);
  return canvas;
};
exports.canvasOldPhoto = canvasOldPhoto;
const print = element => {
  const rootDocument = (element === null || element === void 0 ? void 0 : element.ownerDocument) || window.document;
  const clone = rootDocument.cloneNode(true);
  clone.body.innerHTML = '';
  const elementClone = element.cloneNode(true);
  clone.body.append(elementClone);
  const windowNew = window.open('', 'print');
  windowNew.document.head.innerHTML = clone.head.innerHTML;
  windowNew.document.body.innerHTML = clone.body.innerHTML;
  windowNew.document.close();
  windowNew.focus();
  windowNew.print();
  windowNew.close();
};
exports.print = print;
const save = element => {
  const rootDocument = (element === null || element === void 0 ? void 0 : element.ownerDocument) || window.document;
  const clone = rootDocument.cloneNode(true);
  clone.body.innerHTML = '';
  const elementClone = element.cloneNode(true);
  elementClone.contentEditable = 'false';
  clone.body.append(elementClone);
  (0, _utils.download)(`${rootDocument.title}.html`, clone.documentElement.innerHTML, 'text/html');
};
exports.save = save;
const matches = value => {
  const method = (0, _utils.is)('element', value) && (value.matches || value['webkitMatchesSelector'] || value['mozMatchesSelector'] || value['oMatchesSelector'] || value['msMatchesSelector']);
  if (!method) return () => false;
  return method.bind(value);
};
exports.matches = matches;
const angleToCoordinates = (degrees, centerX, centerY, radius) => {
  const radians = degrees * Math.PI / 180;
  return {
    x: centerX + radius * Math.cos(radians),
    y: centerY + radius * Math.sin(radians)
  };
};
exports.angleToCoordinates = angleToCoordinates;
const line = (pointA, pointB) => {
  const lengthX = pointB[0] - pointA[0];
  const lengthY = pointB[1] - pointA[1];
  return {
    length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
    angle: Math.atan2(lengthY, lengthX)
  };
};
exports.line = line;
const controlPoint = (current, previous_, next_, reverse = false, smoothRatio = 0.14) => {
  const previous = previous_ || current;
  const next = next_ || current;
  const opposed = line(previous, next);
  const angle = opposed.angle + (reverse ? Math.PI : 0);
  const length = opposed.length * smoothRatio;

  // Bug fix, prevent ties if x are the same
  // for previous, and current value
  const x = (0, _utils.clamp)(current[0] + Math.cos(angle) * length, previous[0], next[0]);
  const y = current[1] + Math.sin(angle) * length;
  return [x, y];
};
exports.controlPoint = controlPoint;
const minMaxBetweenNumbers = (value = 10, min = 0, max = 100) => {
  const part = (max - min) / (value - 1);
  const values = [min];
  for (let i = 0; i < value - 2; i++) values.push(values[values.length - 1] + part);
  values.push(max);
  return values;
};
exports.minMaxBetweenNumbers = minMaxBetweenNumbers;
const sanitize = value => {
  if (value) {
    const map = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#x27;',
      "/": '&#x2F;',
      "\\": '&#x5c;',
      '*': '&#x2a'
    };
    const reg = /[&<>"'/\\*]/ig;
    return value.replace(reg, match => map[match]);
  }
};
exports.sanitize = sanitize;
const replace = (value, split, join) => {
  return value.split(split).join(join);
};
exports.replace = replace;
const importIframeStyles = iframeDocument => {
  const styleSheets = window.document.styleSheets;
  for (const styleSheet of Array.from(styleSheets)) {
    if (!styleSheet.ownerNode.onesy) {
      var _styleSheet$ownerNode;
      iframeDocument.head.append((_styleSheet$ownerNode = styleSheet.ownerNode) === null || _styleSheet$ownerNode === void 0 ? void 0 : _styleSheet$ownerNode.cloneNode(true));
      continue;
    }
    let css = '';
    const rules = styleSheet === null || styleSheet === void 0 ? void 0 : styleSheet.cssRules;
    for (const rule of Array.from(rules)) css += rule.cssText;
    const style = window.document.createElement('style');
    style.innerHTML = css;
    iframeDocument.head.append(style);
  }
};
exports.importIframeStyles = importIframeStyles;
const getOverflowParent = (element, vertical = true) => {
  if (!element) return;

  // height
  if (vertical && element.scrollHeight > element.clientHeight) return element;

  // width
  if (!vertical && element.scrollWidth > element.clientWidth) return element;
  return getOverflowParent(element.parentElement, vertical);
};
exports.getOverflowParent = getOverflowParent;
const keyboardStandardCommands = exports.keyboardStandardCommands = ['a', 'c', 'v', 'y', 'z'];
const keyboardStyleCommands = exports.keyboardStyleCommands = ['b', 'i', 'u'];
const caret = exports.caret = {};
if ((0, _utils.isEnvironment)('browser')) {
  if (window.getSelection && document.createRange) {
    // Saves caret position(s)
    caret.save = function (container) {
      var _window$getSelection;
      const selection = window.getSelection();
      if (!(selection && selection.rangeCount > 0)) return;
      const range = (_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.getRangeAt(0);
      if (!range) return;
      const preSelectionRange = range.cloneRange();
      preSelectionRange.selectNodeContents(container);
      preSelectionRange.setEnd(range.startContainer, range.startOffset);
      const start = preSelectionRange.toString().length;
      return {
        start: start,
        end: start + range.toString().length
      };
    };

    // Restores caret position(s)
    caret.restore = function (container, savedElement) {
      let charIndex = 0;
      const range = document.createRange();
      range.setStart(container, 0);
      range.collapse(true);
      const nodeStack = [container];
      let node;
      let foundStart = false;
      let stop = false;

      // tslint:disable-next-line
      while (!stop && (node = nodeStack.pop())) {
        if (node.nodeType === 3) {
          const nextCharIndex = charIndex + node.length;
          if (!foundStart && savedElement.start >= charIndex && savedElement.start <= nextCharIndex) {
            range.setStart(node, savedElement.start - charIndex);
            foundStart = true;
          }
          if (foundStart && savedElement.end >= charIndex && savedElement.end <= nextCharIndex) {
            range.setEnd(node, savedElement.end - charIndex);
            stop = true;
          }
          charIndex = nextCharIndex;
        } else {
          let i = node.childNodes.length;
          while (i--) {
            nodeStack.push(node.childNodes[i]);
          }
        }
      }
      const selection = window.getSelection();
      selection === null || selection === void 0 || selection.removeAllRanges();
      selection === null || selection === void 0 || selection.addRange(range);
    };
  } else if (process.window && window.document.selection && window.document.body.createTextRange) {
    // Saves caret position(s)
    caret.save = function (container) {
      const selectedTextRange = window.document.selection.createRange();
      const preSelectionTextRange = window.document.body.createTextRange();
      preSelectionTextRange.moveToElementText(container);
      preSelectionTextRange.setEndPoint("EndToStart", selectedTextRange);
      const start = preSelectionTextRange.text.length;
      return {
        start: start,
        end: start + selectedTextRange.text.length
      };
    };

    // Restores caret position(s)
    caret.restore = function (container, savedElement) {
      const textRange = window.document.body.createTextRange();
      textRange.moveToElementText(container);
      textRange.collapse(true);
      textRange.moveEnd("character", savedElement.end);
      textRange.moveStart("character", savedElement.start);
      textRange.select();
    };
  }
}
const toNumber = (item, valueDefault = 0) => {
  var _String$match;
  return ((0, _utils.is)('number', item) ? item : +((_String$match = String(item).match(/\d+.?\d+/)) === null || _String$match === void 0 ? void 0 : _String$match[0])) || valueDefault;
};
exports.toNumber = toNumber;
const formats = exports.formats = {
  entire: 'DD MMM, YYYY [at] h:mm a',
  date: 'DD MMM, YYYY',
  time: 'h:mm a'
};
const iconFontSize = exports.iconFontSize = 20;
const decodeHTMLEntities = html => {
  const document = new DOMParser().parseFromString(html, 'text/html');
  return document.documentElement.textContent || '';
};
exports.decodeHTMLEntities = decodeHTMLEntities;
const scrollToMiddleOfParent = element => {
  const parent = element.parentElement;
  if (!parent) return;
  const rects = {
    element: element.getBoundingClientRect(),
    parent: parent.getBoundingClientRect()
  };
  const offsetTop = rects.element.top - rects.parent.top + parent.scrollTop;
  const top = offsetTop - parent.clientHeight / 2 + element.offsetHeight / 2;
  parent.scrollTo({
    top,
    behavior: 'smooth'
  });
};
exports.scrollToMiddleOfParent = scrollToMiddleOfParent;