@wordpress/components
Version:
UI components for WordPress.
87 lines (84 loc) • 2.52 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useConvertUnitToMobile = exports.getValueAndUnit = exports.convertUnitToMobile = void 0;
var _reactNative = require("react-native");
var _element = require("@wordpress/element");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
const getValueAndUnit = (value, unit) => {
const regex = /(\d+\.?\d*)(.*)/;
const splitValue = `${value}`?.match(regex)?.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 || {};
if (valueToConvert === undefined) {
return undefined;
}
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, styles) => {
const [windowSizes, setWindowSizes] = (0, _element.useState)(_reactNative.Dimensions.get('window'));
(0, _element.useEffect)(() => {
const dimensionsChangeSubscription = _reactNative.Dimensions.addEventListener('change', onDimensionsChange);
return () => {
dimensionsChangeSubscription.remove();
};
// See https://github.com/WordPress/gutenberg/pull/41166
}, []);
const onDimensionsChange = (0, _element.useCallback)(({
window
}) => {
setWindowSizes(window);
}, []);
return (0, _element.useMemo)(() => {
const {
valueToConvert,
valueUnit
} = getValueAndUnit(value, unit) || {};
return convertUnitToMobile(windowSizes, styles, valueToConvert, valueUnit);
// See https://github.com/WordPress/gutenberg/pull/41166
}, [windowSizes, value, unit]);
};
exports.useConvertUnitToMobile = useConvertUnitToMobile;
//# sourceMappingURL=use-unit-converter-to-mobile.native.js.map