feat: topic replay

Author: funnyzak

src/i18n/locales/zh.json

@@ -84,7 +84,7 @@
     "postedTime": "发布于 $",
     "lastReplyTime": "最后回复于 $",
     "replyedCount": "回复数量",
-    "replyedTime": "回复于",
+    "replyedTime": "回复于 $",
     "createSince": "创建至今",
     "profileLastModified": "最近修改于 $。",
     "activeLatest": "最近活跃于 $。",
@@ -149,9 +149,9 @@
     "token": "输入API令牌..",
     "search": "搜索关键字...",
     "message": "写点啥...",
-    "empty": "无内容。",
-    "noResult": "无内容。 ",
-    "noFound": "未找到内容。 ",
+    "empty": "无内容",
+    "noResult": "无内容",
+    "noFound": "未找到内容 ",
     "noTopics": "还没有任何主题.",
     "noReplies": "还没有任何回复.",
     "noNodes": "还没有任何节点.",

src/screens/components/common/TabCardContainer.tsx

@@ -57,7 +57,7 @@ const styles = {
     flexDirection: 'row',
     justifyContent: 'flex-start',
     alignItems: 'center',
-    height: 30
+    height: 36
   }),
   content: (theme: ITheme): ViewStyle => ({
     marginVertical: theme.spacing.small

src/screens/components/topic/TopicInfo.tsx

@@ -45,7 +45,7 @@ const TopicInfo: React.FC<TopicInfoProps> = ({ containerStyle, info }: TopicInfo
 
 const styles = {
   container: (theme: ITheme): ViewStyle => ({
-    paddingTop: theme.spacing.medium
+    paddingVertical: theme.spacing.medium
   })
 }
 

src/screens/components/topic/TopicReplayItem.tsx

@@ -0,0 +1,89 @@
+/**
+ * Created by leon<[email protected]> on 22/04/28.
+ */
+import RenderHtml from 'react-native-render-html'
+import React, { useMemo } from 'react'
+import { View, ViewStyle, TextStyle, StyleProp } from 'react-native'
+
+import { Text, Button, Spinner, Placeholder, Avatar } from '@src/components'
+import { ITheme, SylCommon, useTheme } from '@src/theme'
+import { translate } from '@src/i18n'
+import { NavigationService, ROUTES } from '@src/navigation'
+import { V2exObject } from '@src/types'
+import { BorderLine, TextWithIconPress } from '../common'
+import dayjs from 'dayjs'
+
+/**
+ * TopicReplayItem props
+ */
+export interface TopicReplayItemProps {
+  containerStyle?: StyleProp<ViewStyle>
+
+  info: V2exObject.TopicReply
+}
+
+const TopicReplayItem: React.FC<TopicReplayItemProps> = ({ containerStyle, info }: TopicReplayItemProps) => {
+  const { theme } = useTheme()
+  const avatar_link = useMemo(() => (info.member ? info.member.avatar || info.member.avatar_normal : undefined), [info])
+  return (
+    <View style={[styles.container(theme), containerStyle]}>
+      <View style={styles.infoContainer(theme)}>
+        <Avatar size={40} source={{ uri: avatar_link }} username={info.member?.username} style={styles.avatar(theme)} />
+
+        <View style={styles.infoMain(theme)}>
+          <View style={styles.infoMainItem(theme)}>
+            <TextWithIconPress
+              text={info.member?.username ?? 'none'}
+              textStyle={[{ color: theme.colors.secondary }]}
+              onPress={() => {
+                NavigationService.navigate(ROUTES.Profile, { username: info.member?.username })
+              }}
+            />
+            <TextWithIconPress
+              text={translate('label.replyedTime').replace('$', dayjs(info.created * 1000).fromNow())}
+            />
+          </View>
+          <View style={styles.infoMainItem(theme)}>
+            <RenderHtml
+              source={{
+                html: `<div style="color:${theme.colors.bodyText}">${info.content_rendered}</div>` || '<p></p>'
+              }}
+              contentWidth={theme.dimens.layoutContainerWidth - 40 - theme.spacing.large}
+            />
+          </View>
+        </View>
+      </View>
+      <BorderLine width={0.4} />
+    </View>
+  )
+}
+
+const styles = {
+  container: (theme: ITheme): ViewStyle => ({
+    paddingTop: theme.spacing.medium,
+    width: '100%',
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    alignItems: 'center'
+  }),
+  infoContainer: (theme: ITheme): ViewStyle => ({
+    flexDirection: 'row',
+    marginBottom: theme.spacing.small
+  }),
+  avatar: (theme: ITheme): ViewStyle => ({
+    width: 40,
+    marginRight: theme.spacing.large
+  }),
+  infoMain: (theme: ITheme): ViewStyle => ({
+    flex: 1,
+    justifyContent: 'flex-start',
+    flexDirection: 'column'
+  }),
+  infoMainItem: (theme: ITheme): ViewStyle => ({
+    flexDirection: 'row',
+    marginBottom: theme.spacing.small,
+    justifyContent: 'space-between'
+  })
+}
+
+export default TopicReplayItem

src/screens/components/topic/TopicReplayList.tsx

@@ -77,6 +77,7 @@ const TopicReplayList: React.FC<TopicReplayListProps> = ({ containerStyle, topic
     return (
       <Placeholder
         placeholderText={translate('placeholder.noResult')}
+        displayType={'text'}
         buttonText={translate('button.tryAgain')}
         buttonPress={onRefresh}
       />
@@ -93,9 +94,7 @@ const styles = {
   container: (theme: ITheme): ViewStyle => ({
     flex: 1
   }),
-  itemContainer: (theme: ITheme): ViewStyle => ({
-    ...SylCommon.Card.container(theme)
-  }),
+  itemContainer: (theme: ITheme): ViewStyle => ({}),
   itemSeparator: (theme: ITheme) => ({
     height: 0
   })