- fixed czy0729#190

htyf-mp-community · Sep 1, 2024 · 47242b4 · 47242b4
1 parent 616cfb2
commit 47242b4
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 15 deletions.
diff --git a/src/components/render-html/a/index.tsx b/src/components/render-html/a/index.tsx
@@ -2,7 +2,7 @@
  * @Author: czy0729
  * @Date: 2022-05-13 05:12:53
  * @Last Modified by: czy0729
- * @Last Modified time: 2024-09-01 10:30:09
+ * @Last Modified time: 2024-09-01 11:06:43
  */
 import React, { useEffect, useState } from 'react'
 import { useObserver } from 'mobx-react'
@@ -57,6 +57,15 @@ function A({ style, attrs = {}, passProps, children, onPress, ...other }: Props)
   return useObserver(() => {
     if (el) return el
 
+    const childrens = React.Children.toArray(children)
+    if (
+      childrens?.length === 1 &&
+      // @ts-expect-error
+      childrens?.[0]?.type?.displayName === 'ToggleImage'
+    ) {
+      return childrens[0]
+    }
+
     return (
       <Text
         style={style}
@@ -69,7 +78,7 @@ function A({ style, attrs = {}, passProps, children, onPress, ...other }: Props)
           }, 80)
         }}
       >
-        {filterChildren(children)}
+        {filterChildren(childrens)}
       </Text>
     )
   })

diff --git a/src/components/render-html/a/utils.tsx b/src/components/render-html/a/utils.tsx
@@ -2,7 +2,7 @@
  * @Author: czy0729
  * @Date: 2022-05-13 05:32:07
  * @Last Modified by: czy0729
- * @Last Modified time: 2024-09-01 10:09:07
+ * @Last Modified time: 2024-09-01 10:55:20
  */
 import React from 'react'
 import { View } from 'react-native'
@@ -22,10 +22,9 @@ import Topic from './topic'
 import { memoStyles } from './styles'
 
 /** @todo 待优化, 安卓 Text 中一定要过滤非文字节点 */
-export function filterChildren(children: ReactNode | ReactNode[]): ReactNode | ReactNode[] {
-  if (IOS || WEB) return children
+export function filterChildren(childrens: ReactNode[]): ReactNode[] {
+  if (IOS || WEB) return childrens
 
-  const childrens = React.Children.toArray(children)
   const data = childrens.filter(
     item =>
       // @ts-expect-error

diff --git a/src/components/render-html/toggle-image/index.tsx b/src/components/render-html/toggle-image/index.tsx
@@ -2,7 +2,7 @@
  * @Author: czy0729
  * @Date: 2019-08-14 10:15:24
  * @Last Modified by: czy0729
- * @Last Modified time: 2024-09-01 10:26:05
+ * @Last Modified time: 2024-09-01 11:16:23
  */
 import React from 'react'
 import { View } from 'react-native'
@@ -24,6 +24,8 @@ class ToggleImage extends React.Component<Props, State> {
     onImageFallback: () => {}
   }
 
+  static displayName = 'ToggleImage'
+
   state = {
     show: this.props.show || false,
     loaded: false,
@@ -160,11 +162,12 @@ class ToggleImage extends React.Component<Props, State> {
                 withoutFeedback
                 onLoadEnd={this.onLoadEnd}
                 onError={this.onLoadEnd}
+                onLongPress={() => open(this.src)}
               />
             </View>
           )}
           <View style={this.styles.closeImageWrap}>
-            <Touchable onPress={this.toggleShow} onLongPress={() => open(this.src as string)}>
+            <Touchable style={this.styles.closeImageTouch} onPress={this.toggleShow}>
               <Flex style={this.styles.closeImage} justify='center'>
                 <Iconfont size={16} name='md-close' color={_.colorIcon} />
               </Flex>

diff --git a/src/components/render-html/toggle-image/styles.ts b/src/components/render-html/toggle-image/styles.ts
@@ -2,7 +2,7 @@
  * @Author: czy0729
  * @Date: 2022-05-17 06:41:29
  * @Last Modified by: czy0729
- * @Last Modified time: 2024-05-16 16:12:47
+ * @Last Modified time: 2024-09-01 11:17:52
  */
 import { _ } from '@stores'
 
@@ -36,17 +36,22 @@ export const memoStyles = _.memoStyles(() => ({
   closeImageWrap: {
     position: 'absolute',
     zIndex: 10,
-    top: 8,
-    right: 8,
-    borderRadius: 12,
-    overflow: 'hidden'
+    top: 0,
+    right: 0
+  },
+  closeImageTouch: {
+    width: 52,
+    height: 52
   },
   closeImage: {
+    position: 'absolute',
+    zIndex: 10,
+    top: 9,
+    right: 13,
     width: 24,
     height: 24,
-    marginRight: 4,
     borderRadius: 24,
-    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    backgroundColor: 'rgba(0, 0, 0, 0.28)',
     overflow: 'hidden'
   },
   remoteImage: {