native-variants
Version:
A library for handling variants in React Native components with theme support.
129 lines • 3.34 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.composeText = composeText;
exports.hasTextStyles = hasTextStyles;
exports.composeView = composeView;
/**
* Complete list of React Native TextStyle property keys.
* Used to filter text-specific styles from combined style objects.
*/
const textStyleKeys = new Set([
"color",
"fontSize",
"fontWeight",
"fontStyle",
"textAlign",
"textAlignVertical",
"letterSpacing",
"lineHeight",
"textDecorationLine",
"textDecorationColor",
"textDecorationStyle",
"fontFamily",
"includeFontPadding",
"textTransform",
"writingDirection",
"textShadowColor",
"textShadowOffset",
"textShadowRadius",
"fontVariant",
"userSelect",
]);
/**
* Extracts text-specific styles from a combined style object.
* Useful when you need to apply text styles to a Text component
* from a style object that may contain View styles.
*
* @param style - The combined style object to extract from
* @returns A new object containing only TextStyle properties
*
* @example
* ```ts
* const combinedStyles = {
* backgroundColor: "#fff",
* padding: 16,
* color: "#000",
* fontSize: 14,
* fontWeight: "600",
* };
*
* const textStyles = composeText(combinedStyles);
* // Result: { color: "#000", fontSize: 14, fontWeight: "600" }
*
* // Usage in components
* <View style={combinedStyles}>
* <Text style={composeText(combinedStyles)}>Hello</Text>
* </View>
* ```
*/
function composeText(style) {
if (!style)
return {};
const result = {};
const keys = Object.keys(style);
for (let i = 0; i < keys.length; i++) {
const key = keys[i];
if (textStyleKeys.has(key)) {
result[key] = style[key];
}
}
return result;
}
/**
* Checks if a style object contains any text-specific styles.
*
* @param style - The style object to check
* @returns True if the style contains at least one text style property
*
* @example
* ```ts
* hasTextStyles({ padding: 10 }); // false
* hasTextStyles({ color: "red" }); // true
* hasTextStyles({ padding: 10, fontSize: 14 }); // true
* ```
*/
function hasTextStyles(style) {
if (!style)
return false;
const keys = Object.keys(style);
for (let i = 0; i < keys.length; i++) {
if (textStyleKeys.has(keys[i])) {
return true;
}
}
return false;
}
/**
* Extracts non-text styles (View styles) from a combined style object.
* Complement to composeText - returns everything except text styles.
*
* @param style - The combined style object to extract from
* @returns A new object containing only non-TextStyle properties
*
* @example
* ```ts
* const combinedStyles = {
* backgroundColor: "#fff",
* padding: 16,
* color: "#000",
* fontSize: 14,
* };
*
* const viewStyles = composeView(combinedStyles);
* // Result: { backgroundColor: "#fff", padding: 16 }
* ```
*/
function composeView(style) {
if (!style)
return {};
const result = {};
const keys = Object.keys(style);
for (let i = 0; i < keys.length; i++) {
const key = keys[i];
if (!textStyleKeys.has(key)) {
result[key] = style[key];
}
}
return result;
}
//# sourceMappingURL=compose-text.js.map