choerodon-ui/lib/_util/UnitConvertor.js

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.pxToRem = pxToRem;
exports.isCalcSize = isCalcSize;
exports.isPercentSize = isPercentSize;
exports.toPx = toPx;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _isNumber = _interopRequireDefault(require("lodash/isNumber"));

var _isString = _interopRequireDefault(require("lodash/isString"));

var _isNil = _interopRequireDefault(require("lodash/isNil"));

var _cssUnitConverter = _interopRequireDefault(require("css-unit-converter"));

function pxToRem(num) {
  if (num !== undefined && num !== null) {
    if (num === 0) {
      return '0';
    }

    if ((0, _isNumber["default"])(num)) {
      return "".concat(num / 100, "rem");
    }

    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.+-]+)$/;

function defaultTo(value, callback) {
  if ((0, _isNil["default"])(value)) {
    return callback();
  }

  return value;
}

function isCalcSize(num) {
  return num.match(calcReg);
}

function isPercentSize(num) {
  return num.indexOf('%') !== -1;
}

function toPx(num, getRelationSize) {
  if (num !== undefined && num !== null) {
    if ((0, _isNumber["default"])(num)) {
      return num;
    }

    if ((0, _isString["default"])(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) {
              /* eslint-disable-next-line no-eval */
              return eval("".concat(result).concat(array[index - 1]).concat(toPx(calc, getRelationSize)));
            }

            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 = (0, _slicedToArray2["default"])(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 * defaultTo(toPx(window.getComputedStyle(document.documentElement).fontSize), function () {
                  return 100;
                });

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

              default:
                try {
                  return (0, _cssUnitConverter["default"])(number, u, 'px');
                } catch (e) {
                  return undefined;
                }

            }
          }

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