85 lines
3.1 KiB
TypeScript
85 lines
3.1 KiB
TypeScript
import React from "react";
|
|
import { View, Text, StyleSheet, Image } from "react-native";
|
|
import {
|
|
ImageFieldData,
|
|
LottieFieldData,
|
|
SubstringStyle,
|
|
TextFieldData,
|
|
} from "../../../App/common/interface/widgets/widgetData/TitleWidgetData";
|
|
import { StyledImage } from "../../StyledImage";
|
|
import styles from "./StyledTextComponentStyle";
|
|
import { StyledLottie } from "../styled-lottie/StyledLottie";
|
|
import Animated from "react-native-reanimated";
|
|
|
|
export const StyledText = ({
|
|
textFieldData,
|
|
}: {
|
|
textFieldData: TextFieldData;
|
|
}) => {
|
|
let renderedText: string[] = [textFieldData.text];
|
|
|
|
let substringStyleMap: SubstringStyle[] = [];
|
|
let textFieldString: string = textFieldData.text || "";
|
|
let topImage: ImageFieldData | undefined =
|
|
textFieldData?.textDrawableData?.top;
|
|
let bottomImage: ImageFieldData | undefined =
|
|
textFieldData?.textDrawableData?.bottom;
|
|
let leftImage: ImageFieldData | undefined =
|
|
textFieldData?.textDrawableData?.left;
|
|
let rightImage: ImageFieldData | undefined =
|
|
textFieldData?.textDrawableData?.right;
|
|
|
|
let topLottie: LottieFieldData | undefined =
|
|
textFieldData?.textDrawableData?.topLottie;
|
|
let bottomLottie: LottieFieldData | undefined =
|
|
textFieldData?.textDrawableData?.bottomLottie;
|
|
let leftLottie: LottieFieldData | undefined =
|
|
textFieldData?.textDrawableData?.leftLottie;
|
|
let rightLottie: LottieFieldData | undefined =
|
|
textFieldData?.textDrawableData?.rightLottie;
|
|
|
|
textFieldData.substringStyles?.forEach(({ substring, textStyle }, index) => {
|
|
textFieldString = substringStyleMap?.pop()?.substring || textFieldData.text;
|
|
const splitArray = textFieldString.split(substring);
|
|
const part1: SubstringStyle = {
|
|
substring: splitArray[0] || "",
|
|
};
|
|
const part2: SubstringStyle = {
|
|
substring: substring,
|
|
textStyle: textStyle,
|
|
};
|
|
const part3: SubstringStyle = {
|
|
substring: splitArray[1] || "",
|
|
};
|
|
substringStyleMap = [...substringStyleMap, part1, part2, part3];
|
|
});
|
|
return (
|
|
<View style={styles.columnContainer}>
|
|
{topImage && <StyledImage imageFieldData={topImage} />}
|
|
{topLottie && <StyledLottie lottieFieldData={topLottie} />}
|
|
<View style={styles.rowContainer}>
|
|
{leftImage && <StyledImage imageFieldData={leftImage} />}
|
|
{leftLottie && <StyledLottie lottieFieldData={leftLottie} />}
|
|
<Animated.Text style={textFieldData.textStyle || undefined}>
|
|
{substringStyleMap.length !== 0
|
|
? substringStyleMap.map((substringStyle, index) => {
|
|
return (
|
|
<Animated.Text
|
|
style={substringStyle.textStyle || undefined}
|
|
key={index}
|
|
>
|
|
{substringStyle.substring}
|
|
</Animated.Text>
|
|
);
|
|
})
|
|
: textFieldData.text}
|
|
</Animated.Text>
|
|
{rightImage && <StyledImage imageFieldData={rightImage} />}
|
|
{rightLottie && <StyledLottie lottieFieldData={rightLottie} />}
|
|
</View>
|
|
{bottomImage && <StyledImage imageFieldData={bottomImage} />}
|
|
{bottomLottie && <StyledLottie lottieFieldData={bottomLottie} />}
|
|
</View>
|
|
);
|
|
};
|