@wordpress/components/build/mobile/utils/use-unit-converter-to-mobile.native.js

UI components for WordPress.

"use strict";

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

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

var _reactNative = require("react-native");

var _element = require("@wordpress/element");

var _globalStylesContext = _interopRequireDefault(require("../global-styles-context"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const getValueAndUnit = (value, unit) => {
  var _ref, _ref$match;

  const regex = /(\d+\.?\d*)(.*)/;
  const splitValue = (_ref = `${value}`) === null || _ref === void 0 ? void 0 : (_ref$match = _ref.match(regex)) === null || _ref$match === void 0 ? void 0 : _ref$match.filter(v => v !== '');

  if (splitValue) {
    return {
      valueToConvert: splitValue[1],
      valueUnit: unit || splitValue[2]
    };
  }

  return undefined;
};

exports.getValueAndUnit = getValueAndUnit;

const convertUnitToMobile = (containerSize, globalStyles, value, unit) => {
  const {
    width,
    height
  } = containerSize;
  const {
    valueToConvert,
    valueUnit
  } = getValueAndUnit(value, unit) || {};
  const {
    fontSize = 16
  } = globalStyles || {};

  switch (valueUnit) {
    case 'rem':
    case 'em':
      return valueToConvert * fontSize;

    case '%':
      return Number(valueToConvert / 100) * width;

    case 'px':
      return Number(valueToConvert);

    case 'vw':
      const vw = width / 100;
      return Math.round(valueToConvert * vw);

    case 'vh':
      const vh = height / 100;
      return Math.round(valueToConvert * vh);

    default:
      return Number(valueToConvert / 100) * width;
  }
};

exports.convertUnitToMobile = convertUnitToMobile;

const useConvertUnitToMobile = (value, unit) => {
  const {
    globalStyles: styles
  } = (0, _element.useContext)(_globalStylesContext.default);
  const [windowSizes, setWindowSizes] = (0, _element.useState)(_reactNative.Dimensions.get('window'));
  (0, _element.useEffect)(() => {
    _reactNative.Dimensions.addEventListener('change', onDimensionsChange);

    return () => {
      _reactNative.Dimensions.removeEventListener('change', onDimensionsChange);
    };
  }, []);
  const onDimensionsChange = (0, _element.useCallback)(({
    window
  }) => {
    setWindowSizes(window);
  }, []);
  return (0, _element.useMemo)(() => {
    const {
      valueToConvert,
      valueUnit
    } = getValueAndUnit(value, unit);
    return convertUnitToMobile(windowSizes, styles, valueToConvert, valueUnit);
  }, [windowSizes, value, unit]);
};

exports.useConvertUnitToMobile = useConvertUnitToMobile;
//# sourceMappingURL=use-unit-converter-to-mobile.native.js.map