esoftplay-event 0.0.2-t → 0.0.2-u

package/event/htmltext.tsx

@@ -9,15 +9,11 @@ export interface EventHtmltextProps extends TextProps {
 export default function m({ style, children, ...props }: EventHtmltextProps): JSX.Element {
   const renderChildren = (child: ReactNode) => {
     if (typeof child === 'string') {
-      return parseHtmlText(child).map((part, index) => (
+      return parseRecursive(child).map((part, index) => (
         <Text key={index} style={[style, part.style]}>
-          {part.text}
+          {part.children}
         </Text>
       ));
-    } else if (React.isValidElement(child)) {
-      return React.cloneElement(child, {
-        style: [style, child.props.style], // Merge styles properly
-      });
     } else if (Array.isArray(child)) {
       return child.map((nestedChild, index) => (
         <React.Fragment key={index}>{renderChildren(nestedChild)}</React.Fragment>
@@ -29,32 +25,48 @@ export default function m({ style, children, ...props }: EventHtmltextProps): JS
   return <Text {...props}>{renderChildren(children)}</Text>;
 }
 
-const parseHtmlText = (htmlString: string) => {
-  const regex = /(<b>(.*?)<\/b>)|(<i>(.*?)<\/i>)|(<u>(.*?)<\/u>)|(<br\s*\/?>)/g;
-  let parts = [];
-  let lastIndex = 0;
+interface ParsedPart {
+  children: ReactNode;
+  style: TextStyle;
+}
 
-  htmlString.replace(regex, (match, bold, boldText, italic, italicText, underline, underlineText, br, index) => {
-    if (index > lastIndex) {
-      parts.push({ text: htmlString.substring(lastIndex, index), style: {} });
-    }
+const parseRecursive = (htmlString: string): ParsedPart[] => {
+  const regex = /<(b|i|u|span|br)(?:\s+style=["']color:\s*(.*?)["'])?\s*>(.*?)<\/\1>|<br\s*\/?>/i;
+  const match = htmlString.match(regex);
 
-    if (boldText) {
-      parts.push({ text: boldText, style: { fontWeight: 'bold' } });
-    } else if (italicText) {
-      parts.push({ text: italicText, style: { fontStyle: 'italic' } });
-    } else if (underlineText) {
-      parts.push({ text: underlineText, style: { textDecorationLine: 'underline' } });
-    } else if (br) {
-      parts.push({ text: '\n', style: {} });
-    }
+  if (!match) {
+    return [{ children: htmlString, style: {} }];
+  }
+
+  const parts: ParsedPart[] = [];
+  const [fullMatch, tag, color, content] = match;
+  const index = match.index!;
 
-    lastIndex = index + match.length;
-    return match;
-  });
+  if (index > 0) {
+    parts.push({ children: htmlString.substring(0, index), style: {} });
+  }
+  let currentStyle: TextStyle = {};
+  switch (tag?.toLowerCase()) {
+    case 'b': currentStyle.fontWeight = 'bold'; break;
+    case 'i': currentStyle.fontStyle = 'italic'; break;
+    case 'u': currentStyle.textDecorationLine = 'underline'; break;
+    case 'span': if (color) currentStyle.color = color.trim(); break;
+    case 'br':
+      parts.push({ children: '\n', style: {} });
+      break;
+  }
+
+  if (tag !== 'br' && content !== undefined) {
+    const nestedParts = parseRecursive(content).map(p => ({
+      ...p,
+      style: { ...currentStyle, ...p.style }
+    }));
+    parts.push(...nestedParts);
+  }
 
-  if (lastIndex < htmlString.length) {
-    parts.push({ text: htmlString.substring(lastIndex), style: {} });
+  const remaining = htmlString.substring(index + fullMatch.length);
+  if (remaining) {
+    parts.push(...parseRecursive(remaining));
   }
 
   return parts;

package/event/message.tsx

@@ -21,8 +21,8 @@ export default function m(props: EventMessageProps): any {
   return (
     <View style={[{ flex: 1, alignItems: 'center', justifyContent: 'center' }, props.style]}>
       <View style={{ justifyContent: 'center', alignItems: 'center', padding: 10 }}>
-        <LibPicture source={esp.assets('img_failed_msg.png')} style={{ width: LibStyle.width * 0.8, height: 200, resizeMode: 'contain' }} />
-        <View style={{ width: LibStyle.width - 40, justifyContent: 'center', alignItems: 'center', padding: 15, borderRadius: 10, marginTop: 20 }}>
+        <LibPicture source={esp.assets('img_failed_msg.png')} style={{ width: LibStyle.width * 0.8, height: 150, resizeMode: 'contain' }} />
+        <View style={{ width: LibStyle.width - 40, justifyContent: 'center', alignItems: 'center', padding: 10, borderRadius: 10, marginTop: 10 }}>
           <Text allowFontScaling={false} style={[{ flexWrap: 'wrap', fontSize: 14, lineHeight: 20, fontWeight: "bold", marginBottom: 5, color: "#4a4a4a", textAlign: "center" }, props.textStyle]}>{props.message}</Text>
         </View>
       </View>