choerodon-ui/es/_util/UnitConvertor.js

An enterprise-class UI design language and React-based implementation

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import isNumber from 'lodash/isNumber';
import isString from 'lodash/isString';
import isNil from 'lodash/isNil';
import cssUnitConverter from 'css-unit-converter';
import { global } from 'choerodon-ui/shared';

function defaultTo(value, callback) {
  if (isNil(value)) {
    return callback();
  }

  return value;
}

function isEvalSupport() {
  var EVAL_SUPPORT = global.EVAL_SUPPORT;

  if (EVAL_SUPPORT === undefined) {
    try {
      /* eslint-disable-next-line no-eval */
      eval('');
      global.EVAL_SUPPORT = true;
      return true;
    } catch (e) {
      global.EVAL_SUPPORT = false;
      return false;
    }
  }

  return EVAL_SUPPORT;
}

export function getRootFontSize() {
  var ROOT_STYLE = global.ROOT_STYLE;

  if (!ROOT_STYLE && typeof window !== 'undefined') {
    ROOT_STYLE = window.getComputedStyle(document.documentElement);
  }

  return ROOT_STYLE ? defaultTo(toPx(ROOT_STYLE.fontSize), function () {
    return 100;
  }) : 100;
}

function calculate(n1, n2, operation) {
  if (n1 !== undefined && n2 !== undefined) {
    switch (operation.trim()) {
      case '+':
        return n1 + n2;

      case '-':
        return n1 - n2;

      case '*':
        return n1 * n2;

      case '/':
        return n1 / n2;

      case '%':
        return n1 % n2;

      default:
        {
          if (isEvalSupport()) {
            /* eslint-disable-next-line no-eval */
            return eval("".concat(n1).concat(operation).concat(n2));
          }
        }
    }
  }
}

export function scaleSize(px) {
  return px * getRootFontSize() / 100;
}
export function pxToRem(num, useCurrentFrontSize) {
  if (num !== undefined && num !== null) {
    if (num === 0) {
      return '0';
    }

    if (isNumber(num)) {
      return "".concat(num / (useCurrentFrontSize ? getRootFontSize() : 100), "rem");
    }

    return num;
  }
}
export function pxToVw(num) {
  var unit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'vw';

  if (num !== undefined && num !== null) {
    if (isNumber(num)) {
      var _document$documentEle = document.documentElement,
          clientWidth = _document$documentEle.clientWidth,
          clientHeight = _document$documentEle.clientHeight;
      return "".concat(num / (unit === 'vw' ? clientWidth : clientHeight) * 100).concat(unit);
    }

    return num;
  }
}
export function pxToPercent(num, parentPx) {
  if (num !== undefined && num !== null) {
    if (isNumber(num) && isNumber(parentPx)) {
      return "".concat(num / parentPx * 100, "%");
    }

    return num;
  }
}
var builtInHeight = ['auto', 'fit-content', 'max-content', 'min-content', 'inherit', 'initial', 'unset', 'revert', 'available', '-webkit-fit-content', '-moz-max-content', '-moz-min-content', '-moz-initial'];
var calcReg = /^calc\(([^()]*)\)$/;
var unitReg = /^([+-]?[\d]+(?:[.][\d]+)?(?:[Ee][+-]?[\d]+)?)([^\d.+-]+)$/;
export function isCalcSize(num) {
  return num.match(calcReg);
}
export function isPercentSize(num) {
  return num.indexOf('%') !== -1;
}
export function toPx(num, getRelationSize) {
  if (num !== undefined && num !== null) {
    if (isNumber(num)) {
      return num;
    }

    if (isString(num) && !builtInHeight.includes(num)) {
      var calcMatches = isCalcSize(num);

      if (calcMatches) {
        try {
          var list = calcMatches[1].split(' ');
          return list.slice(1).reduce(function (result, calc, index, array) {
            if (index % 2 === 1) {
              return calculate(result, toPx(calc, getRelationSize), array[index - 1]);
            }

            return result;
          }, toPx(list[0], getRelationSize));
        } catch (e) {
          console.error("Invalid property value in \"".concat(num, "\"."));
          return undefined;
        }
      }

      var unitMatches = num.match(unitReg);

      if (unitMatches) {
        var _unitMatches = _slicedToArray(unitMatches, 3),
            n = _unitMatches[1],
            u = _unitMatches[2];

        if (n) {
          var number = Number(n);

          if (u && u !== 'px') {
            switch (u) {
              case '%':
                {
                  var parentPx = getRelationSize && getRelationSize('%');

                  if (parentPx !== undefined) {
                    return parentPx * number / 100;
                  }

                  return undefined;
                }

              case 'vh':
                {
                  var viewHeight = defaultTo(getRelationSize && getRelationSize('vh'), function () {
                    return document.documentElement.clientHeight;
                  });
                  return viewHeight * number / 100;
                }

              case 'vw':
                {
                  var viewWidth = defaultTo(getRelationSize && getRelationSize('vw'), function () {
                    return document.documentElement.clientWidth;
                  });
                  return viewWidth * number / 100;
                }

              case 'rem':
                return number * getRootFontSize();

              case 'em':
                return number * defaultTo(getRelationSize && getRelationSize('em'), function () {
                  return defaultTo(toPx(window.getComputedStyle(document.body).fontSize), function () {
                    return 12;
                  });
                });

              default:
                try {
                  return cssUnitConverter(number, u, 'px');
                } catch (e) {
                  return undefined;
                }

            }
          }

          return number;
        }
      }
    }
  }
}
//# sourceMappingURL=UnitConvertor.js.map