@bootstrap-styled/utils/lib/unitUtils/index.js

UMD module for helper functions used as utilities for bootstrap-styled and other related modules

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var UnitUtils = function UnitUtils() {
  var _this = this;

  _classCallCheck(this, UnitUtils);

  /**
  * Unit
  * @type {{EM: string, REM: string, PX: string, PERCENT: string}}
  */
  this.UNIT = {
    EM: 'em',
    REM: 'rem',
    PX: 'px',
    PERCENT: '%'
  };
  /**
  * @public
  * @description Math operations accepting units value and return calculated result with unit.
  * @example
  * import unitUtils from '@bootstrap-styled/utils/lib/unitUtils';
  *
  * const { math } = unitUtils;
  *
  * const add = math.addition('15px' + '23px');
  * // OUTPUT '38px';
  * const sub = math.substract('1.5em' + '2.3em');
  * // OUTPUT '3.8em';
  * const mult = math.multiply('15px' * 0.5);
  * // OUTPUT '7.5px';
  * const div = math.divide('15px' / 5);
  * // OUTPUT '3px';
  */

  this.math = {
    addition: function addition(a, b) {
      var unit = this.detectUnit(a) || this.detectUnit(b);
      return this.rmUnit(a) + this.rmUnit(b) + unit;
    }.bind(this),
    subtract: function subtract(a, b) {
      var unit = this.detectUnit(a) || this.detectUnit(b);
      return this.rmUnit(a) - this.rmUnit(b) + unit;
    }.bind(this),
    multiply: function multiply(a, b) {
      var unit = this.detectUnit(a) || this.detectUnit(b);
      return this.rmUnit(a) * this.rmUnit(b) + unit;
    }.bind(this),
    divide: function divide(a, b) {
      var unit = this.detectUnit(a) || this.detectUnit(b);
      return this.rmUnit(a) / this.rmUnit(b) + unit;
    }.bind(this)
  };
  /**
  * @public
  * @description Return the unit from a string by priority : px/rem/em/percent
  * @param {String} value
  * @throw {Error} if unit can't be detected
  * @returns {String} a unit.
  * @example
  * import unitUtils from '@bootstrap-styled/utils/lib/unitUtils';
  * const { detectUnit } = unitUtils;
  *
  * const spacer = '1rem';
  * const detectedUnit = detectUnit(spacer);
  *
  * // OUTPUT 'rem'
  */

  this.detectUnit = function (value) {
    var ext;
    var valueStr = value.toString();

    if (valueStr.match(_this.UNIT.PX)) {
      ext = _this.UNIT.PX;
    } else if (valueStr.match(_this.UNIT.REM)) {
      ext = _this.UNIT.REM;
    } else if (valueStr.match(_this.UNIT.EM)) {
      ext = _this.UNIT.EM;
    } else if (valueStr.match(_this.UNIT.PERCENT)) {
      ext = _this.UNIT.PERCENT;
    } else if (!isNaN(value)) {
      // eslint-disable-line no-restricted-globals
      return null;
    } else {
      throw new Error("detectUnit can't find unit for ".concat(value));
    }

    return ext;
  };
  /**
  * @public
  * @description Convert a value string to float. If unit is undefined, it will try to guess it's value using {detectUnit}
  * @param {String} value
  * @param {String} unit
  * @returns {Number} without it's unit
  * @example
  * import unitUtils from '@bootstrap-styled/utils/lib/unitUtils';
  * const { detectUnit, rmUnit } = unitUtils;
  *
  * const spacer = '1rem';
  * const spacerHalved' = rmUnit(spacer, detectedUnit) / 2 + detectedUnit);
  *
  * // OUTPUT '.5rem'
  */


  this.rmUnit = function (value, unit) {
    var valueStr = value.toString();

    var ext = unit || _this.detectUnit(valueStr);

    var number = valueStr.replace(ext, '');
    return parseFloat(number);
  };
  /**
  * @public
  * @description toPercent
  * @param {Number} value
  * @param {Number} [input=100]
  * @param {Number} decimal (default: 2)
  * @returns {string} percentage value
  * @example
  * import unitUtils from '@bootstrap-styled/utils/lib/unitUtils';
  * const { toPercent } = unitUtils;
  *
  *  const percentage = toPercent(20, 100, 10);
  *
  * // OUTPUT '20%'
  */


  this.toPercent = function (value) {
    var total = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100;
    var decimal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2;
    // eslint-disable-line arrow-body-style
    return "".concat(Math.floor(value / total * 100 * Math.pow(10, decimal)) / Math.pow(10, decimal)).concat(_this.UNIT.PERCENT); // eslint-disable-line no-mixed-operators
  };
};

var _default = new UnitUtils();

exports.default = _default;
module.exports = exports.default;