react-native-web-internals
Version:
React Native for Web
143 lines (142 loc) • 6.65 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: !0 });
}, __copyProps = (to, from, except, desc) => {
if (from && typeof from == "object" || typeof from == "function")
for (let key of __getOwnPropNames(from))
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
mod
)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
var createReactDOMStyle_exports = {};
__export(createReactDOMStyle_exports, {
createTransformValue: () => createTransformValue,
default: () => createReactDOMStyle_default
});
module.exports = __toCommonJS(createReactDOMStyle_exports);
var import_canUseDOM = __toESM(require("../../modules/canUseDOM")), import_normalizeValueWithProperty = __toESM(require("./normalizeValueWithProperty")), emptyObject = {}, supportsCSS3TextDecoration = !import_canUseDOM.default || window.CSS != null && window.CSS.supports != null && (window.CSS.supports("text-decoration-line", "none") || window.CSS.supports("-webkit-text-decoration-line", "none")), ignoredProps = {
elevation: !0,
overlayColor: !0,
resizeMode: !0,
tintColor: !0
}, MONOSPACE_FONT_STACK = "monospace,monospace", SYSTEM_FONT_STACK = '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif', STYLE_SHORT_FORM_EXPANSIONS = {
borderColor: [
"borderTopColor",
"borderRightColor",
"borderBottomColor",
"borderLeftColor"
],
borderRadius: [
"borderTopLeftRadius",
"borderTopRightRadius",
"borderBottomRightRadius",
"borderBottomLeftRadius"
],
borderStyle: [
"borderTopStyle",
"borderRightStyle",
"borderBottomStyle",
"borderLeftStyle"
],
borderWidth: [
"borderTopWidth",
"borderRightWidth",
"borderBottomWidth",
"borderLeftWidth"
],
marginHorizontal: [
"marginRight",
"marginLeft"
],
marginVertical: [
"marginTop",
"marginBottom"
],
overflow: [
"overflowX",
"overflowY"
],
overscrollBehavior: [
"overscrollBehaviorX",
"overscrollBehaviorY"
],
paddingHorizontal: [
"paddingRight",
"paddingLeft"
],
paddingVertical: [
"paddingTop",
"paddingBottom"
]
}, mapTransform = function(transform) {
var type = Object.keys(transform)[0], value = transform[type];
if (type === "matrix" || type === "matrix3d")
return `${type}(${value.join(",")})`;
var normalizedValue = (0, import_normalizeValueWithProperty.default)(value, type);
return `${type}(${normalizedValue})`;
}, createTransformValue = function(style) {
var transform = style.transform;
return Array.isArray(style.transform) && (transform = style.transform.map(mapTransform).join(" ")), transform;
}, createReactDOMStyle = function(style, isInline) {
var _loop = function(prop2) {
var value = style[prop2];
if (
// Ignore everything with a null value
value == null || // Ignore some React Native styles
ignoredProps[prop2]
)
return "continue";
if (prop2 === "aspectRatio")
resolvedStyle[prop2] = value.toString();
else if (prop2 === "backgroundClip")
value === "text" && (resolvedStyle.backgroundClip = value, resolvedStyle.WebkitBackgroundClip = value);
else if (prop2 === "flex")
value === -1 ? (resolvedStyle.flexGrow = 0, resolvedStyle.flexShrink = 1, resolvedStyle.flexBasis = "auto") : resolvedStyle.flex = value;
else if (prop2 === "font")
resolvedStyle[prop2] = value.replace("System", SYSTEM_FONT_STACK);
else if (prop2 === "fontFamily")
if (value.indexOf("System") > -1) {
var stack = value.split(/,\s*/);
stack[stack.indexOf("System")] = SYSTEM_FONT_STACK, resolvedStyle[prop2] = stack.join(",");
} else value === "monospace" ? resolvedStyle[prop2] = MONOSPACE_FONT_STACK : resolvedStyle[prop2] = value;
else if (prop2 === "fontVariant")
Array.isArray(value) && value.length > 0 && (resolvedStyle.fontVariant = value.join(" "));
else if (prop2 === "textAlignVertical")
resolvedStyle.verticalAlign = value === "center" ? "middle" : value;
else if (prop2 === "textDecorationLine")
supportsCSS3TextDecoration ? resolvedStyle.textDecorationLine = value : resolvedStyle.textDecoration = value;
else if (prop2 === "transform" || prop2 === "transformMatrix")
resolvedStyle.transform = createTransformValue(style);
else if (prop2 === "writingDirection")
resolvedStyle.direction = value;
else {
var value1 = (0, import_normalizeValueWithProperty.default)(style[prop2], prop2), longFormProperties = STYLE_SHORT_FORM_EXPANSIONS[prop2];
isInline && prop2 === "margin" ? (style.marginHorizontal == null && (resolvedStyle.marginLeft = value1, resolvedStyle.marginRight = value1), style.marginVertical == null && (resolvedStyle.marginTop = value1, resolvedStyle.marginBottom = value1)) : isInline && prop2 === "padding" ? (style.paddingHorizontal == null && (resolvedStyle.paddingLeft = value1, resolvedStyle.paddingRight = value1), style.paddingVertical == null && (resolvedStyle.paddingTop = value1, resolvedStyle.paddingBottom = value1)) : longFormProperties ? longFormProperties.forEach(function(longForm, i) {
style[longForm] == null && (resolvedStyle[longForm] = value1);
}) : resolvedStyle[prop2] = Array.isArray(value1) ? value1.join(",") : value1;
}
};
if (!style)
return emptyObject;
var resolvedStyle = {};
for (var prop in style) _loop(prop);
return resolvedStyle;
}, createReactDOMStyle_default = createReactDOMStyle;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
createTransformValue
});
//# sourceMappingURL=createReactDOMStyle.js.map