@builder.io/mitosis
Version:
Write components once, run everywhere. Compiles to Vue, React, Solid, and Liquid. Import code from Figma and Builder.io
58 lines (57 loc) • 2.19 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.sanitizeReactNativeBlockStyles = void 0;
const helpers_1 = require("./helpers");
const propertiesThatMustBeNumber = new Set(['lineHeight']);
const displayValues = new Set(['flex', 'none']);
const normalizeNumber = (value) => {
if (Number.isNaN(value)) {
return undefined;
}
else if (value < 0) {
// TODO: why are negative values not allowed?
return 0;
}
else {
return value;
}
};
const sanitizeReactNativeBlockStyles = (styles, options) => {
if (options.sanitizeReactNative) {
return (0, helpers_1.cleanReactNativeBlockStyles)(styles);
}
return Object.keys(styles).reduce((acc, key) => {
const propertyValue = styles[key];
if (typeof propertyValue === 'string' &&
key === 'display' &&
!displayValues.has(propertyValue)) {
console.warn(`Style value for key "display" must be "flex" or "none" but had ${propertyValue}`);
return acc;
}
if (propertiesThatMustBeNumber.has(key) && typeof propertyValue !== 'number') {
console.warn(`Style key ${key} must be a number, but had value \`${styles[key]}\``);
return acc;
}
if (typeof propertyValue === 'string') {
// `px` units need to be stripped and replaced with numbers
// https://regexr.com/6ualn
const isPixelUnit = propertyValue.match(/^-?(\d*)(\.?)(\d*)*px$/);
if (isPixelUnit) {
const newValue = parseFloat(propertyValue);
const normalizedValue = normalizeNumber(newValue);
if (normalizedValue) {
return { ...acc, [key]: normalizedValue };
}
else {
return acc;
}
}
else if (propertyValue === '0') {
// 0 edge case needs to be handled
return { ...acc, [key]: 0 };
}
}
return { ...acc, [key]: propertyValue };
}, {});
};
exports.sanitizeReactNativeBlockStyles = sanitizeReactNativeBlockStyles;