@ramses-superapp/ramses-ui/lib/module/components/RsText.js

Skinless UI primitives for Ramses Built Apps

"use strict";

import { Text, StyleSheet, TouchableOpacity } from 'react-native';
import { useTheme } from "../hooks/ThemeProvider.js";
import { useMemo } from 'react';
import { jsx as _jsx } from "react/jsx-runtime";
const RsText = ({
  fontSize = 16,
  fontWeight = 'Regular',
  textAlign = 'left',
  textTransform = 'none',
  color,
  text = 'Ramses Text',
  pressable = false,
  onPress = () => {},
  style = {},
  containerStyle = {},
  props
}) => {
  const theme = useTheme();
  const styles = useMemo(() => generateStyles(theme, {
    fontSize,
    fontWeight,
    textAlign,
    textTransform,
    color
  }, pressable), [theme, fontSize, fontWeight, textAlign, textTransform, color, pressable]);
  return /*#__PURE__*/_jsx(TouchableOpacity, {
    disabled: !pressable,
    onPress: pressable ? onPress : undefined,
    style: containerStyle,
    children: /*#__PURE__*/_jsx(Text, {
      style: [styles.text, style],
      ...props,
      children: text
    })
  });
};
export default RsText;
const generateStyles = (theme, style, pressable) => StyleSheet.create({
  text: {
    color: style.color ?? (!pressable ? theme.Text.text : theme.Text.highlightText),
    fontSize: style.fontSize,
    textAlign: style.textAlign,
    fontFamily: `Cairo-${style.fontWeight}-Tight`,
    includeFontPadding: false,
    lineHeight: style.fontSize ? style.fontSize * 1.2 : 28,
    textTransform: style.textTransform,
    textDecorationLine: pressable ? 'underline' : 'none',
    textDecorationColor: style.color ?? (!pressable ? theme.Text.text : theme.Text.highlightText)
  }
});
//# sourceMappingURL=RsText.js.map