feat: pick folder

android/app/src/main/java/fun/upup/musicfree/utils/UtilsModule.java

@@ -1,38 +1,33 @@
 package fun.upup.musicfree.utils;
 
-import android.widget.Toast;
 import android.app.Activity;
+import android.widget.Toast;
 
-import com.facebook.react.bridge.NativeModule;
 import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.ReactContextBaseJavaModule;
 import com.facebook.react.bridge.ReactMethod;
 
-import java.util.Map;
-import java.util.HashMap;
-
 
 public class UtilsModule extends ReactContextBaseJavaModule {
-  private static ReactApplicationContext reactContext;
+    private static ReactApplicationContext reactContext;
 
-  private static final String DURATION_SHORT_KEY = "SHORT";
-  private static final String DURATION_LONG_KEY = "LONG";
+    private static final String DURATION_SHORT_KEY = "SHORT";
+    private static final String DURATION_LONG_KEY = "LONG";
 
-  public UtilsModule(ReactApplicationContext context) {
-    super(context);
-    reactContext = context;
-  }
+    public UtilsModule(ReactApplicationContext context) {
+        super(context);
+        reactContext = context;
+    }
 
-   @Override
-  public String getName() {
-    return "NativeUtils";
-  }
+    @Override
+    public String getName() {
+        return "NativeUtils";
+    }
 
-   @ReactMethod
-  public void show(String message, int duration) {
-    Toast.makeText(getReactApplicationContext(), message, duration).show();
-  }
+    @ReactMethod
+    public void show(String message, int duration) {
+        Toast.makeText(getReactApplicationContext(), message, duration).show();
+    }
 
   @ReactMethod
   public void exitApp() {

src/components/base/ComplexAppBar.tsx

@@ -16,7 +16,7 @@ interface IComplexAppBarProps {
     onSearchPress?: () => void;
     menuOptions?: IMenuOption[];
 }
-export default function AppBarWithSearch(props: IComplexAppBarProps) {
+export default function ComplexAppBar(props: IComplexAppBarProps) {
     const navigation = useNavigation();
     const {title, onSearchPress, menuOptions = []} = props;
     const {colors} = useTheme();
@@ -38,37 +38,45 @@ export default function AppBarWithSearch(props: IComplexAppBarProps) {
                 }}
             />
             <Appbar.Content title={title} />
-            <Appbar.Action icon="magnify" onPress={onSearchPress} />
-            <Menu
-                contentStyle={[
-                    style.menuContent,
-                    {backgroundColor: colors.primary},
-                ]}
-                onDismiss={onDismissMenu}
-                visible={isMenuVisible}
-                anchor={
-                    <Appbar.Action
-                        color="white"
-                        icon="dots-vertical"
-                        onPress={onShowMenu}
-                    />
-                }>
-                {menuOptions.map(_ =>
-                    _.show === false ? (
-                        <></>
-                    ) : (
-                        <Menu.Item
-                            key={`menu-${_.title}`}
-                            icon={_.icon}
-                            title={_.title}
-                            onPress={() => {
-                                _?.onPress?.();
-                                setMenuVisible(false);
-                            }}
+            {onSearchPress ? (
+                <Appbar.Action icon="magnify" onPress={onSearchPress} />
+            ) : (
+                <></>
+            )}
+            {menuOptions.length !== 0 ? (
+                <Menu
+                    contentStyle={[
+                        style.menuContent,
+                        {backgroundColor: colors.primary},
+                    ]}
+                    onDismiss={onDismissMenu}
+                    visible={isMenuVisible}
+                    anchor={
+                        <Appbar.Action
+                            color="white"
+                            icon="dots-vertical"
+                            onPress={onShowMenu}
                         />
-                    ),
-                )}
-            </Menu>
+                    }>
+                    {menuOptions.map(_ =>
+                        _.show === false ? (
+                            <></>
+                        ) : (
+                            <Menu.Item
+                                key={`menu-${_.title}`}
+                                icon={_.icon}
+                                title={_.title}
+                                onPress={() => {
+                                    _?.onPress?.();
+                                    setMenuVisible(false);
+                                }}
+                            />
+                        ),
+                    )}
+                </Menu>
+            ) : (
+                <></>
+            )}
         </Appbar.Header>
     );
 }

src/native/utils/index.ts

@@ -2,6 +2,7 @@ import {NativeModules} from 'react-native';
 
 interface INativeUtils {
     exitApp: () => void;
+    // getRealPath: (filePath: string) => Promise<string>;
 }
 
 const NativeUtils = NativeModules.NativeUtils;

src/pages/localMusic/index.tsx

@@ -1,21 +1,17 @@
 import React from 'react';
 import {StyleSheet} from 'react-native';
 import rpx from '@/utils/rpx';
-import {useNavigation, useTheme} from '@react-navigation/native';
-import {Appbar} from 'react-native-paper';
-import ThemeText from '@/components/base/themeText';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import StatusBar from '@/components/base/statusBar';
 import LocalMusicList from './localMusicList';
 import MusicBar from '@/components/musicBar';
 import {useEffect} from 'react';
 import Download from '@/core/download';
+import ComplexAppBar from '@/components/base/ComplexAppBar';
+import DocumentPicker from 'react-native-document-picker';
+import Toast from '@/utils/toast';
 
 export default function LocalMusic() {
-    const navigation = useNavigation();
-
-    const {colors} = useTheme();
-
     useEffect(() => {
         Download.setup();
     }, []);
@@ -23,22 +19,26 @@ export default function LocalMusic() {
     return (
         <SafeAreaView style={style.wrapper}>
             <StatusBar />
-            <Appbar style={[style.appbar, {backgroundColor: colors.primary}]}>
-                <Appbar.BackAction
-                    color={colors.text}
-                    onPress={() => {
-                        navigation.goBack();
-                    }}
-                />
-                <Appbar.Header style={style.header}>
-                    <ThemeText
-                        style={style.header}
-                        fontSize="title"
-                        fontWeight="semibold">
-                        本地音乐
-                    </ThemeText>
-                </Appbar.Header>
-            </Appbar>
+            <ComplexAppBar
+                title="本地音乐"
+                menuOptions={[
+                    {
+                        icon: 'magnify',
+                        title: '从文件夹导入',
+                        async onPress() {
+                            try {
+                                const dir =
+                                    await DocumentPicker.pickDirectory();
+                                console.log(dir);
+                                // todo: 读取文件夹
+                            } catch (e) {
+                                console.log(e);
+                                Toast.warn('导入失败');
+                            }
+                        },
+                    },
+                ]}
+            />
             <LocalMusicList />
             <MusicBar />
         </SafeAreaView>
@@ -50,12 +50,4 @@ const style = StyleSheet.create({
         width: rpx(750),
         flex: 1,
     },
-    appbar: {
-        shadowColor: 'transparent',
-        backgroundColor: '#2b333eaa',
-    },
-    header: {
-        backgroundColor: 'transparent',
-        shadowColor: 'transparent',
-    },
 });

src/pages/sheetDetail/components/navBar.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {useNavigation, useRoute} from '@react-navigation/native';
-import AppBarWithSearch from '@/components/base/appBarWithSearch';
+import ComplexAppBar from '@/components/base/ComplexAppBar';
 import MusicSheet from '@/core/musicSheet';
 import {ROUTE_PATH} from '@/entry/router';
 import useDialog from '@/components/dialogs/useDialog';
@@ -14,7 +14,7 @@ export default function () {
     const {showDialog} = useDialog();
 
     return (
-        <AppBarWithSearch
+        <ComplexAppBar
             title="歌单"
             onSearchPress={() => {
                 navigation.navigate(ROUTE_PATH.SEARCH_MUSIC_LIST, {