feat: customize font scale & fix link can not be press

liaoliao666 · Feb 1, 2023 · 2738163 · 2738163
1 parent 9487a4a
commit 2738163
Show file tree

Hide file tree

Showing 44 changed files with 401 additions and 209 deletions.
diff --git a/App.tsx b/App.tsx
@@ -16,6 +16,7 @@ import StyledImageViewer from './components/StyledImageViewer'
 import StyledToast from './components/StyledToast'
 import { enabledAutoCheckinAtom } from './jotai/enabledAutoCheckinAtom'
 import { enabledMsgPushAtom } from './jotai/enabledMsgPushAtom'
+import { fontScaleAtom } from './jotai/fontSacleAtom'
 import { imageViewerAtom } from './jotai/imageViewerAtom'
 import { profileAtom } from './jotai/profileAtom'
 import { store } from './jotai/store'
@@ -35,7 +36,15 @@ LogBox.ignoreLogs([
 
 // enabledNetworkInspect()
 
-export default function App() {
+export default function AppWithSuspense() {
+  return (
+    <Suspense>
+      <App />
+    </Suspense>
+  )
+}
+
+function App() {
   return (
     <ActionSheetProvider>
       <Provider unstable_createStore={() => store}>
@@ -67,6 +76,7 @@ function AppInitializer({ children }: { children: ReactNode }) {
       profileAtom,
       enabledAutoCheckinAtom,
       enabledMsgPushAtom,
+      fontScaleAtom,
     ])
   )
 

diff --git a/components/FormControl.tsx b/components/FormControl.tsx
@@ -7,6 +7,7 @@ import {
 import { Text, View } from 'react-native'
 import { ViewStyle } from 'react-native'
 
+import { getFontSize } from '@/jotai/fontSacleAtom'
 import tw from '@/utils/tw'
 
 interface FormControlProps<
@@ -27,7 +28,9 @@ export default function FormControl<
       render={props => (
         <View style={style}>
           {!!label && (
-            <Text style={tw`text-tint-primary text-body-5 mb-1`}>{label}</Text>
+            <Text style={tw.style(`text-tint-primary ${getFontSize(5)} mb-1`)}>
+              {label}
+            </Text>
           )}
           {render(props)}
           <View style={tw`min-h-[16px]`}>

diff --git a/components/Html/CodeRenderer.tsx b/components/Html/CodeRenderer.tsx
@@ -8,6 +8,7 @@ import RenderHTML, {
   MixedStyleDeclaration,
 } from 'react-native-render-html'
 
+import { getFontSize } from '@/jotai/fontSacleAtom'
 import { colorSchemeAtom } from '@/jotai/themeAtom'
 import tw from '@/utils/tw'
 
@@ -35,6 +36,8 @@ const CodeRenderer: CustomBlockRenderer = ({ tnode, style }) => {
 
   const colorScheme = useAtomValue(colorSchemeAtom)
 
+  const baseStyle = tw.style(getFontSize(5))
+
   return (
     <ScrollView
       horizontal
@@ -43,16 +46,23 @@ const CodeRenderer: CustomBlockRenderer = ({ tnode, style }) => {
     >
       <RenderHTML
         contentWidth={width}
-        baseStyle={tw`text-[#383a42] dark:text-[#abb2bf] text-[15px] leading-5`}
+        baseStyle={tw.style(`text-[#383a42] dark:text-[#abb2bf]`, {
+          ...baseStyle,
+          lineHeight: (baseStyle.lineHeight as number) - 4,
+        })}
         tagsStyles={{
           pre: tw`my-2`,
-          h1: tw`text-body-3 pb-1.5 border-b border-solid border-tint-border`,
-          h2: tw`text-body-4 pb-1.5 border-b border-solid border-tint-border`,
-          h3: tw`text-body-4 `,
-          h4: tw`text-body-4`,
-          h5: tw`text-body-5`,
-          h6: tw`text-body-6`,
-          p: tw`text-body-5`,
+          h1: tw`${getFontSize(
+            3
+          )} pb-1.5 border-b border-solid border-tint-border`,
+          h2: tw`${getFontSize(
+            4
+          )} pb-1.5 border-b border-solid border-tint-border`,
+          h3: tw`${getFontSize(4)}`,
+          h4: tw`${getFontSize(4)}`,
+          h5: tw`${getFontSize(5)}`,
+          h6: tw`${getFontSize(6)}`,
+          p: tw`${getFontSize(5)}`,
           a: tw`text-tint-secondary no-underline`,
           hr: {
             backgroundColor: tw.color(`border-tint-border`),

diff --git a/components/Html/TextRenderer.tsx b/components/Html/TextRenderer.tsx
@@ -1,6 +1,8 @@
 import { Platform, Text, TextInput } from 'react-native'
 import {
   CustomTextualRenderer,
+  TPhrasing,
+  TText,
   getNativePropsForTNode,
 } from 'react-native-render-html'
 
@@ -14,7 +16,11 @@ const resetTextInputStyle = {
 const TextRenderer: CustomTextualRenderer = props => {
   const renderProps = getNativePropsForTNode(props)
 
-  if (!renderProps.selectable || Platform.OS === 'android')
+  if (
+    !renderProps.selectable ||
+    Platform.OS === 'android' ||
+    hasLink(props.tnode)
+  )
     return <Text {...renderProps} />
 
   return (
@@ -29,4 +35,11 @@ const TextRenderer: CustomTextualRenderer = props => {
   )
 }
 
+function hasLink(tnode: TText | TPhrasing) {
+  return (
+    tnode.domNode?.name === 'a' ||
+    tnode.children.some(child => child.domNode?.name === 'a')
+  )
+}
+
 export default TextRenderer
diff --git a/components/Html/index.tsx b/components/Html/index.tsx
@@ -11,6 +11,7 @@ import RenderHtml, {
   RenderHTMLProps,
 } from 'react-native-render-html'
 
+import { getFontSize } from '@/jotai/fontSacleAtom'
 import { imageViewerAtom } from '@/jotai/imageViewerAtom'
 import { store } from '@/jotai/store'
 import { colorSchemeAtom } from '@/jotai/themeAtom'
@@ -29,13 +30,13 @@ const defaultProps: Omit<RenderHTMLProps, 'source'> = {
   domVisitors: {
     onElement: (el: any) => {
       const firstChild: any = first(el.children)
-      if (firstChild && firstChild.name === 'p')
-        firstChild.attribs = { class: 'text-body-5 mt-0' }
+      if (firstChild && firstChild.name === 'p') {
+        firstChild.attribs = { class: `mt-0 ${firstChild.attribs?.class}` }
+      }
     },
   },
   classesStyles: {
     'mt-0': tw`mt-0`,
-    'text-body-5': tw`text-body-5`,
   },
   renderers: {
     pre: CodeRenderer,
@@ -122,16 +123,20 @@ function Html({
       )}
     >
       <RenderHtml
-        baseStyle={tw`text-tint-primary text-body-5`}
+        baseStyle={tw`text-tint-primary ${getFontSize(5)}`}
         contentWidth={width}
         tagsStyles={{
-          h1: tw`text-body-3 pb-1.5 border-b border-solid border-tint-border`,
-          h2: tw`text-body-4 pb-1.5 border-b border-solid border-tint-border`,
-          h3: tw`text-body-4`,
-          h4: tw`text-body-4`,
-          h5: tw`text-body-5`,
-          h6: tw`text-body-6`,
-          p: tw`text-body-5`,
+          h1: tw`${getFontSize(
+            3
+          )} pb-1.5 border-b border-solid border-tint-border`,
+          h2: tw`${getFontSize(
+            4
+          )} pb-1.5 border-b border-solid border-tint-border`,
+          h3: tw`${getFontSize(4)}`,
+          h4: tw`${getFontSize(4)}`,
+          h5: tw`${getFontSize(5)}`,
+          h6: tw`${getFontSize(6)}`,
+          p: tw`${getFontSize(5)}`,
           a: tw`text-tint-secondary no-underline`,
           hr: {
             backgroundColor: tw.color(`border-tint-border`),

diff --git a/components/ListItem.tsx b/components/ListItem.tsx
@@ -1,6 +1,7 @@
 import { ReactNode } from 'react'
 import { PressableProps, Text } from 'react-native'
 
+import { getFontSize } from '@/jotai/fontSacleAtom'
 import tw from '@/utils/tw'
 
 import DebouncePressable from './DebouncePressable'
@@ -18,6 +19,7 @@ export default function ListItem({
   onPress?: PressableProps['onPress']
   pressable?: boolean
 }) {
+  const fontSize = (tw.style(getFontSize(3)).fontSize as string) + 1
   return (
     <DebouncePressable
       style={({ pressed }) =>
@@ -30,7 +32,11 @@ export default function ListItem({
     >
       {icon}
 
-      <Text style={tw`ml-6 text-[20px] font-medium text-tint-primary mr-auto`}>
+      <Text
+        style={tw.style(`ml-6 font-medium text-tint-primary mr-auto`, {
+          fontSize,
+        })}
+      >
         {label}
       </Text>
 

diff --git a/components/Money.tsx b/components/Money.tsx
@@ -1,6 +1,7 @@
 import { some } from 'lodash-es'
 import { Text, View, ViewProps } from 'react-native'
 
+import { getFontSize } from '@/jotai/fontSacleAtom'
 import tw from '@/utils/tw'
 
 import Space from './Space'
@@ -21,7 +22,7 @@ export default function Money({
     <Space style={style} gap={4}>
       {!!gold && (
         <View style={tw`flex-row items-center`}>
-          <Text style={tw`text-tint-secondary text-body-6`}>{gold}</Text>
+          <Text style={tw`text-tint-secondary ${getFontSize(6)}`}>{gold}</Text>
           <StyledImage
             style={tw`w-4 h-4 ml-0.5`}
             source={{ uri: `/static/img/[email protected]` }}
@@ -30,7 +31,9 @@ export default function Money({
       )}
       {!!silver && (
         <View style={tw`flex-row items-center`}>
-          <Text style={tw`text-tint-secondary text-body-6`}>{silver}</Text>
+          <Text style={tw`text-tint-secondary ${getFontSize(6)}`}>
+            {silver}
+          </Text>
           <StyledImage
             style={tw`w-4 h-4 ml-0.5`}
             source={{ uri: `/static/img/[email protected]` }}
@@ -39,7 +42,9 @@ export default function Money({
       )}
       {!!bronze && (
         <View style={tw`flex-row items-center`}>
-          <Text style={tw`text-tint-secondary text-body-6`}>{bronze}</Text>
+          <Text style={tw`text-tint-secondary ${getFontSize(6)}`}>
+            {bronze}
+          </Text>
           <StyledImage
             style={tw`w-4 h-4 ml-0.5`}
             source={{ uri: `/static/img/[email protected]` }}

diff --git a/components/NavBar.tsx b/components/NavBar.tsx
@@ -1,9 +1,12 @@
 import { useNavigation } from '@react-navigation/native'
+import { NativeStackNavigationProp } from '@react-navigation/native-stack'
 import { StatusBarStyle } from 'expo-status-bar'
 import { ReactNode, isValidElement } from 'react'
 import { Platform, PressableProps, Text, View, ViewStyle } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
+import { getFontSize } from '@/jotai/fontSacleAtom'
+import { RootStackParamList } from '@/types'
 import tw from '@/utils/tw'
 import { useStatusBarStyle } from '@/utils/useStatusBarStyle'
 
@@ -54,7 +57,7 @@ export default function NavBar({
             children
           ) : (
             <Text
-              style={tw.style(`text-tint-primary text-[17px] font-bold`, {
+              style={tw.style(`text-tint-primary ${getFontSize(4)} font-bold`, {
                 color: tintColor,
               })}
             >
@@ -75,17 +78,30 @@ export default function NavBar({
 
 export function BackButton({
   tintColor,
+  onPress,
 }: {
   tintColor?: string
   onPress?: PressableProps['onPress']
 }) {
-  const { goBack } = useNavigation()
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>()
 
   const color = tintColor || tw.color(`text-tint-primary`)
 
   return (
     <IconButton
-      onPress={goBack}
+      onPress={ev => {
+        if (typeof onPress === 'function') {
+          onPress(ev)
+          return
+        }
+
+        if (navigation.canGoBack()) {
+          navigation.goBack()
+        } else {
+          navigation.replace('Root')
+        }
+      }}
       name="arrow-left"
       size={24}
       color={color}

diff --git a/components/NodeItem.tsx b/components/NodeItem.tsx
@@ -2,6 +2,7 @@ import { compact } from 'lodash-es'
 import { memo } from 'react'
 import { Pressable, Text } from 'react-native'
 
+import { getFontSize } from '@/jotai/fontSacleAtom'
 import { Node } from '@/servicies/types'
 import tw from '@/utils/tw'
 
@@ -30,7 +31,7 @@ function NodeItem({
           uri: node.avatar_large,
         }}
       />
-      <Text style={tw`text-body-5 text-tint-secondary ml-2`}>
+      <Text style={tw`${getFontSize(5)} text-tint-secondary ml-2`}>
         {compact([node.title, node.name]).join(' / ')}
       </Text>
     </Pressable>

diff --git a/components/Profile.tsx b/components/Profile.tsx
@@ -15,6 +15,7 @@ import { SafeAreaView } from 'react-native-safe-area-context'
 import Money from '@/components/Money'
 import Space from '@/components/Space'
 import StyledImage from '@/components/StyledImage'
+import { fontScaleAtom, getFontSize } from '@/jotai/fontSacleAtom'
 import { profileAtom } from '@/jotai/profileAtom'
 import { colorSchemeAtom, themeAtom } from '@/jotai/themeAtom'
 import { RootStackParamList } from '@/types'
@@ -30,6 +31,9 @@ export default withQuerySuspense(memo(Profile))
 
 function Profile() {
   const colorScheme = useAtomValue(colorSchemeAtom)
+
+  const fontScale = useAtomValue(fontScaleAtom)
+
   const [theme, setTheme] = useAtom(themeAtom)
 
   const profile = useAtomValue(profileAtom)
@@ -115,7 +119,7 @@ function Profile() {
   ]
 
   return (
-    <SafeAreaView edges={['top']} style={tw`flex-1 bg-body-1`}>
+    <SafeAreaView edges={['top']} style={tw`flex-1 bg-body-1`} key={fontScale}>
       {isLogin ? (
         <View style={tw`p-4`}>
           <View style={tw`flex-row justify-between items-center`}>
@@ -157,7 +161,7 @@ function Profile() {
           </Space>
 
           {!!profile?.motto && (
-            <Text style={tw`text-tint-secondary text-body-5 mt-2`}>
+            <Text style={tw`text-tint-secondary ${getFontSize(5)} mt-2`}>
               {profile?.motto}
             </Text>
           )}

diff --git a/components/QuerySuspense.tsx b/components/QuerySuspense.tsx
@@ -7,6 +7,7 @@ import { ErrorBoundary } from 'react-error-boundary'
 import { Text, View } from 'react-native'
 import { isObject } from 'twrnc/dist/esm/types'
 
+import { getFontSize } from '@/jotai/fontSacleAtom'
 import { confirm } from '@/utils/confirm'
 import { queryClient } from '@/utils/query'
 import tw from '@/utils/tw'
@@ -30,7 +31,7 @@ export function FallbackComponent({
           ? (error as unknown as AxiosError).code || error.name
           : error.name || '出现错误了'}
       </Text>
-      <Text style={tw`text-body-5 text-tint-secondary mt-2`}>
+      <Text style={tw`${getFontSize(5)} text-tint-secondary mt-2`}>
         {isObject(error) && error.message}
       </Text>
       <StyledButton

diff --git a/components/RadioButtonGroup.tsx b/components/RadioButtonGroup.tsx
@@ -1,5 +1,6 @@
 import { Pressable, Text, View } from 'react-native'
 
+import { getFontSize } from '@/jotai/fontSacleAtom'
 import tw from '@/utils/tw'
 
 export default function RadioButtonGroup<
@@ -34,7 +35,7 @@ export default function RadioButtonGroup<
             >
               <Text
                 style={tw.style(
-                  `text-body-5`,
+                  `${getFontSize(5)}`,
                   active ? `text-tint-primary` : `text-tint-secondary`
                 )}
               >