-

lovetingyuan · Mar 29, 2024 · 7d0b980 · 7d0b980
1 parent d7df134
commit 7d0b980
Show file tree

Hide file tree

Showing 16 changed files with 155 additions and 135 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,8 +41,10 @@
     "@sentry/react-native": "5.19.1",
     "@shopify/flash-list": "1.6.3",
     "@total-typescript/ts-reset": "^0.5.1",
+    "clsx": "^2.1.0",
     "expo": "~50.0.8",
     "expo-application": "~5.8.3",
+    "expo-asset": "~9.0.2",
     "expo-background-fetch": "~11.8.1",
     "expo-clipboard": "~5.0.1",
     "expo-constants": "~15.4.5",
@@ -67,8 +69,8 @@
     "react-native-webview": "13.6.4",
     "spark-md5": "^3.0.2",
     "swr": "^2.2.4",
-    "zod": "^3.21.4",
-    "expo-asset": "~9.0.2"
+    "throttle-debounce": "^5.0.0",
+    "zod": "^3.21.4"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
@@ -77,6 +79,7 @@
     "@types/he": "^1.2.3",
     "@types/react": "~18.2.14",
     "@types/spark-md5": "^3.0.4",
+    "@types/throttle-debounce": "^5.0.2",
     "@typescript-eslint/eslint-plugin": "^5.57.0",
     "@typescript-eslint/parser": "^5.57.0",
     "babel-plugin-transform-remove-console": "^6.9.4",

diff --git a/src/components/Comment.tsx b/src/components/Comment.tsx
@@ -1,6 +1,8 @@
 import { useNavigation, useRoute } from '@react-navigation/native'
 import { NativeStackScreenProps } from '@react-navigation/native-stack'
 import { Button, Text } from '@rneui/themed'
+import clsx from 'clsx'
+import * as Clipboard from 'expo-clipboard'
 import React from 'react'
 import { Image, Linking, View } from 'react-native'
 
@@ -9,7 +11,7 @@ import { colors } from '@/constants/colors.tw'
 import type { CommentItemType, CommentMessageContent } from '../api/comments'
 import { useStore } from '../store'
 import type { NavigationProps, RootStackParamList } from '../types'
-import { parseImgUrl } from '../utils'
+import { parseImgUrl, showToast } from '../utils'
 
 function CommentText(props: {
   nodes: CommentMessageContent
@@ -39,7 +41,10 @@ function CommentText(props: {
           return (
             <Text
               key={key}
-              className={` ${fontSize} ${upName === name ? colors.secondary.text : colors.primary.text}`}
+              className={clsx([
+                fontSize,
+                upName === name ? colors.secondary.text : colors.primary.text,
+              ])}
               onPress={() => {
                 navigation.push('Dynamic', {
                   user: {
@@ -59,10 +64,15 @@ function CommentText(props: {
             <Text
               key={key}
               className={`${colors.primary.text} ${fontSize}`}
+              onLongPress={() => {
+                Clipboard.setStringAsync(node.url).then(() => {
+                  showToast('已复制链接')
+                })
+              }}
               onPress={() => {
                 Linking.openURL(node.url)
               }}>
-              {node.url}
+              {'🔗 链接 '}
             </Text>
           )
         }
@@ -108,7 +118,7 @@ function CommentText(props: {
           )
         }
         return (
-          <Text className={fontSize} selectable key={key}>
+          <Text className={fontSize} key={key}>
             {node.text}
           </Text>
         )
@@ -117,8 +127,9 @@ function CommentText(props: {
   )
 }
 
-function CommentItem(props: {
+export function CommentItem(props: {
   comment: CommentItemType | CommentItemType['replies'][0]
+  smallFont?: boolean
 }) {
   const { comment } = props
   const { setImagesList, setCurrentImageIndex } = useStore()
@@ -135,15 +146,15 @@ function CommentItem(props: {
       : route.params.name
     : ''
   const navigation = useNavigation<NavigationProps['navigation']>()
-  const fontSize = 'rcount' in comment ? 'text-base' : 'text-sm'
+  const fontSize = props.smallFont ? 'text-sm' : 'text-base'
   return (
     <Text className="py-[2px]">
       <Text
-        className={`${
-          upName === comment.name
-            ? colors.secondary.text + ' font-bold'
-            : colors.primary.text
-        } ${fontSize}`}
+        className={clsx(
+          colors.primary.text,
+          upName === comment.name && [colors.secondary.text, 'font-bold'],
+          fontSize,
+        )}
         onPress={() => {
           navigation.push('Dynamic', {
             user: {
@@ -160,7 +171,9 @@ function CommentItem(props: {
         {comment.sex === '男' ? '♂：' : comment.sex === '女' ? '♀：' : '：'}
       </Text>
       {'top' in comment && comment.top ? (
-        <Text className={fontSize}> 🔝 </Text>
+        <Text className={`text-sm font-bold ${colors.secondary.text}`}>
+          {' 置顶 '}
+        </Text>
       ) : null}
       {comment.message?.length ? (
         <CommentText
@@ -190,9 +203,9 @@ function CommentItem(props: {
   )
 }
 
-export default React.memo(Comment)
+export const Comment = React.memo(CommentBlock)
 
-function Comment(props: {
+function CommentBlock(props: {
   comment: CommentItemType
   className?: string
   style?: any
@@ -202,13 +215,16 @@ function Comment(props: {
 
   return (
     <View
-      className={`${comment.replies?.length ? 'mb-7' : 'mb-4'} ${props.className || ''}`}
+      className={clsx([
+        comment.replies?.length ? 'mb-7' : 'mb-4',
+        props.className,
+      ])}
       style={props.style}>
       <CommentItem comment={comment} />
       {comment.replies?.length ? (
         <View className="p-2 mt-1 rounded gap-1 opacity-90 flex-1 shrink-0 border-gray-500 bg-neutral-200 dark:bg-neutral-900">
           {comment.replies.map(reply => {
-            return <CommentItem key={reply.id} comment={reply} />
+            return <CommentItem key={reply.id} comment={reply} smallFont />
           })}
           {comment.moreText && comment.rcount > comment.replies.length ? (
             <Button

diff --git a/src/components/CommentList.tsx b/src/components/CommentList.tsx
@@ -6,8 +6,7 @@ import { View } from 'react-native'
 import { colors } from '@/constants/colors.tw'
 
 import { type CommentItemType, useComments } from '../api/comments'
-import Comment from './Comment'
-// import MoreReplies from './MoreReplies'
+import { Comment } from './Comment'
 import ReplyList from './ReplyList'
 
 function Loading() {

diff --git a/src/components/ReplyList.tsx b/src/components/ReplyList.tsx
@@ -8,7 +8,7 @@ import { ReplyItemType, useReplies } from '@/api/replies'
 import { colors } from '@/constants/colors.tw'
 import { useStore } from '@/store'
 
-import Comment from './Comment'
+import { CommentItem } from './Comment'
 
 export default function ReplyList() {
   const {
@@ -54,13 +54,17 @@ export default function ReplyList() {
             data={replies}
             keyExtractor={v => v.id + '@' + v.root}
             renderItem={({ item }: { item: ReplyItemType }) => {
-              return <Comment comment={item} className="pl-7 pr-3 mb-2" />
+              return (
+                <View className="px-5 mb-2">
+                  <CommentItem comment={item} smallFont />
+                </View>
+              )
             }}
             estimatedItemSize={30}
             ListHeaderComponent={
               root ? (
-                <View className="border-b-[16px] px-4 border-b-neutral-300 dark:border-b-neutral-700 mb-4">
-                  <Comment comment={root} className="mb-3" />
+                <View className="border-b-[18px] p-4 border-b-neutral-300 dark:border-b-neutral-700 mb-5">
+                  <CommentItem comment={root} />
                 </View>
               ) : null
             }
@@ -86,7 +90,7 @@ export default function ReplyList() {
                 </Text>
               ) : null
             }
-            contentContainerStyle={tw('py-5')}
+            contentContainerStyle={tw('pb-5')}
             onEndReached={() => {
               update()
             }}

diff --git a/src/components/VideoItem.tsx b/src/components/VideoItem.tsx
@@ -122,7 +122,9 @@ function VideoListItem({
         </Text>
         <View className="gap-2">
           <Text
-            className={`${isFollowed ? colors.secondary.text : colors.primary.text}`}>
+            className={
+              isFollowed ? colors.secondary.text : colors.primary.text
+            }>
             <Text className={colors.gray7.text}>UP: </Text>
             {video.name}
           </Text>

diff --git a/src/routes/Dynamic/CommonItem.tsx b/src/routes/Dynamic/CommonItem.tsx
@@ -1,5 +1,6 @@
 import { useNavigation } from '@react-navigation/native'
 import { Text } from '@rneui/themed'
+import clsx from 'clsx'
 import { Image } from 'expo-image'
 import React from 'react'
 import { Linking, Pressable, TouchableOpacity, View } from 'react-native'
@@ -90,12 +91,11 @@ export function CommonContent(props: {
       <Foo className="gap-2 flex-1" {...linkProp}>
         {title ? (
           <Text
-            className={[
-              props.type === HandledDynamicTypeEnum.DYNAMIC_TYPE_ARTICLE
-                ? 'font-bold'
-                : '',
+            className={clsx([
+              props.type === HandledDynamicTypeEnum.DYNAMIC_TYPE_ARTICLE &&
+                'font-bold',
               'text-[15px]',
-            ].join(' ')}
+            ])}
             numberOfLines={2}>
             {title}
           </Text>