feat: support black list & optimization for ui

liaoliao666 · Feb 17, 2023 · 3fcec54 · 3fcec54
1 parent 54a8e1c
commit 3fcec54
Show file tree

Hide file tree

Showing 45 changed files with 1,062 additions and 345 deletions.
diff --git a/App.tsx b/App.tsx
@@ -11,8 +11,6 @@ import { SafeAreaProvider } from 'react-native-safe-area-context'
 import Toast from 'react-native-toast-message'
 import { useDeviceContext } from 'twrnc'
 
-import '@/utils/dayjsPlugins'
-
 import StyledImageViewer from './components/StyledImageViewer'
 import StyledToast from './components/StyledToast'
 import { enabledAutoCheckinAtom } from './jotai/enabledAutoCheckinAtom'
@@ -27,6 +25,7 @@ import Navigation from './navigation'
 import { useCheckin } from './servicies/member'
 import { useNodes } from './servicies/node'
 import './utils/dayjsPlugins'
+import './utils/dayjsPlugins'
 // import { enabledNetworkInspect } from './utils/enabledNetworkInspect'
 import { asyncStoragePersister, queryClient } from './utils/query'
 import tw from './utils/tw'
@@ -55,6 +54,7 @@ function App() {
         <PersistQueryClientProvider
           client={queryClient}
           persistOptions={{ persister: asyncStoragePersister }}
+          onSuccess={SplashScreen.hideAsync}
         >
           <SafeAreaProvider>
             <Suspense>

diff --git a/components/CollapsibleTabView.tsx b/components/CollapsibleTabView.tsx
@@ -0,0 +1,62 @@
+// TODO
+import { ReactNode, RefObject, createRef, useState } from 'react'
+import { Animated, ScrollView, ScrollViewProps, View } from 'react-native'
+import {
+  Route,
+  SceneRendererProps,
+  TabBar,
+  TabView,
+  TabViewProps,
+} from 'react-native-tab-view'
+
+export interface CollapsibleTabView<T extends Route>
+  extends Omit<TabViewProps<T>, 'renderScene'> {
+  renderHeader: () => ReactNode
+  renderScene: (
+    sceneProps: SceneRendererProps & {
+      route: T
+      scrollViewProps: {
+        ref: RefObject<ScrollView>
+        contentContainerStyle: ScrollViewProps
+      }
+    }
+  ) => ReactNode
+}
+
+export function CollapsibleTabView<T extends Route>({
+  renderTabBar = tabBarProps => <TabBar {...tabBarProps} />,
+  renderHeader,
+  renderScene,
+  navigationState,
+  ...props
+}: CollapsibleTabView<T>) {
+  //   const [headerHeight, setHeaderHeight] = useState(0)
+
+  const [refs] = useState<Record<string, RefObject<ScrollView>>>({})
+
+  return (
+    <TabView
+      {...props}
+      navigationState={navigationState}
+      renderTabBar={tabBarProps => (
+        <Animated.View>
+          <View pointerEvents="box-none">{renderHeader()}</View>
+
+          <View pointerEvents="box-none">{renderTabBar(tabBarProps)}</View>
+        </Animated.View>
+      )}
+      renderScene={sceneProps => {
+        const scrollViewProps = {
+          ref:
+            refs[sceneProps.route.key] ||
+            (refs[sceneProps.route.key] = createRef<ScrollView>()),
+          contentContainerStyle: {},
+        }
+        return renderScene({
+          scrollViewProps,
+          ...sceneProps,
+        })
+      }}
+    />
+  )
+}
diff --git a/components/DebouncePressable.tsx → components/DebouncedPressable.tsx b/components/DebouncePressable.tsx → components/DebouncedPressable.tsx
@@ -9,7 +9,7 @@ const debouncePress = debounce(invoke, 500, {
   trailing: false,
 })
 
-const DebouncePressable: typeof Pressable = forwardRef((props, ref) => {
+const DebouncedPressable: typeof Pressable = forwardRef((props, ref) => {
   return (
     <Pressable
       ref={ref}
@@ -19,4 +19,4 @@ const DebouncePressable: typeof Pressable = forwardRef((props, ref) => {
   )
 })
 
-export default DebouncePressable
+export default DebouncedPressable
diff --git a/components/Empty.tsx b/components/Empty.tsx
@@ -0,0 +1,46 @@
+import { Text, View, ViewStyle } from 'react-native'
+import Svg, { Ellipse, G, Path } from 'react-native-svg'
+
+import { getFontSize } from '@/jotai/fontSacleAtom'
+import tw from '@/utils/tw'
+
+export default function Empty({
+  description = '暂无数据',
+  style,
+}: {
+  description?: string
+  style?: ViewStyle
+}) {
+  return (
+    <View style={tw.style(`py-32 items-center`, style)}>
+      <Svg width={64} height={41}>
+        <G transform="translate(0 1)" fill="none" fillRule="evenodd">
+          <Ellipse
+            fill={tw.color(`text-[#f5f5f5] dark:text-[#272727]`)}
+            cx={32}
+            cy={33}
+            rx={32}
+            ry={7}
+          />
+          <G
+            fillRule="nonzero"
+            stroke={tw.color(`text-[#d9d9d9] dark:text-[#3e3e3e]`)}
+          >
+            <Path d="M55 12.76 44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" />
+            <Path
+              d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+              fill={tw.color(`text-[#fafafa] dark:text-[#1d1d1d]`)}
+            />
+          </G>
+        </G>
+      </Svg>
+      <Text
+        style={tw`text-[rgba(0,0,0,.25)] dark:text-[rgba(255,255,255,.25)] ${getFontSize(
+          5
+        )} mt-2`}
+      >
+        {description}
+      </Text>
+    </View>
+  )
+}
diff --git a/components/Html/CodeRenderer.tsx b/components/Html/CodeRenderer.tsx
@@ -39,39 +39,24 @@ const CodeRenderer: CustomBlockRenderer = ({ tnode, style }) => {
 
   const colorScheme = useAtomValue(colorSchemeAtom)
 
-  const baseStyle = tw.style(getFontSize(5))
-
-  const Wrap = hasHtmlTag ? ScrollView : View
+  const WrapView = hasHtmlTag ? ScrollView : View
 
   return (
-    <Wrap
+    <WrapView
       horizontal
       nestedScrollEnabled
-      style={tw.style(style, `bg-[#fafafa] dark:bg-[#282c34] rounded p-2`)}
+      style={tw.style(style, `bg-[#fafafa] dark:bg-[#282c34] rounded`)}
     >
       <RenderHTML
         contentWidth={width}
-        baseStyle={tw.style(`text-[#383a42] dark:text-[#abb2bf]`, {
-          ...baseStyle,
-          lineHeight: (baseStyle.lineHeight as number) - 4,
-        })}
+        baseStyle={tw.style(
+          `text-[#383a42] dark:text-[#abb2bf] px-3 ${getFontSize(
+            hasHtmlTag ? 6 : 5
+          )}`
+        )}
         tagsStyles={{
           pre: tw`my-2`,
-          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`),
-          },
           em: {
             fontStyle: 'italic',
           },
@@ -82,7 +67,7 @@ const CodeRenderer: CustomBlockRenderer = ({ tnode, style }) => {
         source={{ html }}
         renderers={{ _TEXT_: TextRenderer }}
       />
-    </Wrap>
+    </WrapView>
   )
 }
 

diff --git a/components/Html/index.tsx b/components/Html/index.tsx
@@ -18,7 +18,7 @@ import { colorSchemeAtom } from '@/jotai/themeAtom'
 import { RootStackParamList } from '@/types'
 import { baseURL } from '@/utils/request/baseURL'
 import tw from '@/utils/tw'
-import { openURL, resolveUrl } from '@/utils/url'
+import { openURL, resolveURL } from '@/utils/url'
 
 import CodeRenderer from './CodeRenderer'
 import { HtmlContext } from './HtmlContext'
@@ -155,7 +155,7 @@ function Html({
         renderersProps={{
           a: {
             onPress: async (_, href: string) => {
-              const resolvedURI = resolveUrl(href)
+              const resolvedURI = resolveURL(href)
 
               if (resolvedURI.startsWith(baseURL)) {
                 if (inModalScreen) {

diff --git a/components/ListItem.tsx b/components/ListItem.tsx
@@ -4,7 +4,7 @@ import { PressableProps, Text } from 'react-native'
 import { getFontSize } from '@/jotai/fontSacleAtom'
 import tw from '@/utils/tw'
 
-import DebouncePressable from './DebouncePressable'
+import DebouncedPressable from './DebouncedPressable'
 
 export default function ListItem({
   label,
@@ -21,7 +21,7 @@ export default function ListItem({
 }) {
   const fontSize = (tw.style(getFontSize(3)).fontSize as string) + 1
   return (
-    <DebouncePressable
+    <DebouncedPressable
       style={({ pressed }) =>
         tw.style(
           `px-4 h-[56px] flex-row items-center`,
@@ -41,6 +41,6 @@ export default function ListItem({
       </Text>
 
       {action}
-    </DebouncePressable>
+    </DebouncedPressable>
   )
 }
diff --git a/components/LoadingIndicator.tsx b/components/LoadingIndicator.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { ActivityIndicatorProps, ViewStyle } from 'react-native'
+import { ActivityIndicatorProps, Platform, ViewStyle } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 
 import tw from '@/utils/tw'
@@ -8,7 +8,7 @@ import StyledActivityIndicator from './StyledActivityIndicator'
 
 export default function LoadingIndicator({
   style,
-  size = 'large',
+  size = Platform.OS === 'ios' ? 'small' : 'large',
 }: {
   style?: ViewStyle
   size?: ActivityIndicatorProps['size']

diff --git a/components/NavBar.tsx b/components/NavBar.tsx
@@ -57,9 +57,12 @@ export default function NavBar({
             children
           ) : (
             <Text
-              style={tw.style(`text-tint-primary ${getFontSize(4)} font-bold`, {
-                color: tintColor,
-              })}
+              style={tw.style(
+                `text-tint-primary ${getFontSize(4)} font-semibold`,
+                {
+                  color: tintColor,
+                }
+              )}
             >
               {title}
             </Text>

diff --git a/components/Profile.tsx b/components/Profile.tsx
@@ -1,6 +1,5 @@
 import {
   Feather,
-  Ionicons,
   MaterialCommunityIcons,
   SimpleLineIcons,
 } from '@expo/vector-icons'
@@ -101,20 +100,6 @@ function Profile() {
         navigation.navigate('Notifications')
       },
     },
-    {
-      label: '最近浏览',
-      value: 'RecentTopic',
-      icon: (
-        <MaterialCommunityIcons
-          color={tw.color(`text-tint-primary`)}
-          size={24}
-          name={'clock-check-outline'}
-        />
-      ),
-      onPress: () => {
-        navigation.navigate('RecentTopic')
-      },
-    },
   ]
 
   return (
@@ -218,30 +203,30 @@ function Profile() {
           />
 
           <ListItem
-            label="节点导航"
+            label="最近浏览"
             icon={
-              <Feather
+              <MaterialCommunityIcons
                 color={tw.color(`text-tint-primary`)}
                 size={24}
-                name="navigation"
+                name={'clock-check-outline'}
               />
             }
             onPress={() => {
-              navigation.navigate('NavNodes')
+              navigation.navigate('RecentTopic')
             }}
           />
 
           <ListItem
-            label="社区排行"
+            label="节点导航"
             icon={
-              <Ionicons
+              <Feather
                 color={tw.color(`text-tint-primary`)}
                 size={24}
-                name={'md-analytics-outline'}
+                name="navigation"
               />
             }
             onPress={() => {
-              navigation.navigate('Rank')
+              navigation.navigate('NavNodes')
             }}
           />
 

diff --git a/components/QuerySuspense.tsx b/components/QuerySuspense.tsx
@@ -16,7 +16,9 @@ import LoadingIndicator from './LoadingIndicator'
 import StyledButton from './StyledButton'
 
 export type QuerySuspenseProps = Partial<ErrorBoundaryProps> & {
-  Loading?: FC
+  LoadingComponent?: FC
+  loadingRender?: () => ReactNode
+  loading?: ReactNode
   children?: ReactNode
 }
 
@@ -65,7 +67,9 @@ export function FallbackComponent({
 }
 
 export const QuerySuspense: React.FC<QuerySuspenseProps> = ({
-  Loading = LoadingIndicator,
+  LoadingComponent,
+  loadingRender,
+  loading,
   children,
   ...rest
 }) => {
@@ -82,7 +86,19 @@ export const QuerySuspense: React.FC<QuerySuspenseProps> = ({
           }
           {...rest}
         >
-          <Suspense fallback={<Loading />}>{children}</Suspense>
+          <Suspense
+            fallback={
+              LoadingComponent ? (
+                <LoadingComponent />
+              ) : loadingRender ? (
+                loadingRender()
+              ) : (
+                loading ?? <LoadingIndicator />
+              )
+            }
+          >
+            {children}
+          </Suspense>
         </ErrorBoundary>
       )}
     </QueryErrorResetBoundary>