diff --git a/src/screens/Comment/components/CommentText.tsx b/src/screens/Comment/components/CommentText.tsx index 768b3f1..ea7fad7 100644 --- a/src/screens/Comment/components/CommentText.tsx +++ b/src/screens/Comment/components/CommentText.tsx @@ -1,22 +1,40 @@ -import { useState } from 'react' +import { memo, useMemo, useState } from 'react' import { TouchableOpacity, View } from 'react-native' import { createStyle } from '@/utils/tools' import Text from '@/components/common/Text' import { useTheme } from '@/store/theme/hook' -const TEXT_LIMIT = 130 +const TEXT_LIMIT = 160 +// const CHAR_RXP = /\n/g -export default ({ text }: { text: string }) => { +export default memo(({ text }: { text: string }) => { const [show, setShow] = useState(false) const theme = useTheme() + const length = useMemo(() => { + // text.length + (text.match(CHAR_RXP)?.length ?? 0) * 40 + let count = 0 + let bCount = 0 + for (let i = 0; i < text.length; i++) { + let char = text.charAt(i) + if (char == '\n') { + count += bCount * 24 + 20 + bCount++ + } else { + count++ + if (char.trim() != '') bCount &&= 0 + } + if (count >= TEXT_LIMIT) return i + } + return 0 + }, [text]) return ( - text.length > TEXT_LIMIT ? ( + length ? ( { show ? {text} - : {text.substring(0, TEXT_LIMIT)} …… + : {text.substring(0, length)} …… } { setShow(!show) }}> {show ? global.i18n.t('comment_hide_text') : global.i18n.t('comment_show_text')} @@ -25,7 +43,7 @@ export default ({ text }: { text: string }) => { ) : {text} ) -} +}) const styles = createStyle({ text: {