mirror of https://github.com/msgbyte/tailchat
feat(rn): 增加服务器选择入口
moonrailgun
2 years ago
parent
a15e1270a0
commit
f8a4055628
@ -0,0 +1,37 @@
|
||||
import React from 'react';
|
||||
import { Alert, ScrollView, StyleSheet } from 'react-native';
|
||||
import { ServerCard } from './components/ServerCard';
|
||||
import { useServerStore } from './store/server';
|
||||
|
||||
export const Entry: React.FC = React.memo(() => {
|
||||
const { serverList, selectServer } = useServerStore();
|
||||
|
||||
return (
|
||||
<ScrollView style={styles.root}>
|
||||
{serverList.map((serverInfo, i) => {
|
||||
return (
|
||||
<ServerCard
|
||||
key={`${i}#${serverInfo.url}`}
|
||||
style={styles.item}
|
||||
name={serverInfo.name ?? serverInfo.url}
|
||||
url={serverInfo.url}
|
||||
onPress={() => selectServer(serverInfo)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
<ServerCard name={'添加服务器'} onPress={() => Alert.alert('暂不支持')} />
|
||||
</ScrollView>
|
||||
);
|
||||
});
|
||||
Entry.displayName = 'Entry';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
root: {
|
||||
height: '100%',
|
||||
padding: 20,
|
||||
},
|
||||
item: {
|
||||
marginBottom: 8,
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,48 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
StyleProp,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
ViewStyle,
|
||||
} from 'react-native';
|
||||
|
||||
interface ServerCardProps {
|
||||
style?: StyleProp<ViewStyle>;
|
||||
name: string;
|
||||
url?: string;
|
||||
onPress?: () => void;
|
||||
}
|
||||
export const ServerCard: React.FC<ServerCardProps> = React.memo((props) => {
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={[styles.root, props.style]}
|
||||
onPress={props.onPress}
|
||||
>
|
||||
<Text style={styles.name}>{props.name}</Text>
|
||||
|
||||
{props.url && <Text style={styles.url}>{props.url}</Text>}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
});
|
||||
ServerCard.displayName = 'ServerCard';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
root: {
|
||||
height: 56,
|
||||
padding: 8,
|
||||
backgroundColor: 'white',
|
||||
borderRadius: 4,
|
||||
borderColor: '#ccc',
|
||||
borderWidth: 1,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
name: {
|
||||
fontSize: 16,
|
||||
textAlign: 'center',
|
||||
},
|
||||
url: {
|
||||
color: '#999',
|
||||
textAlign: 'center',
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,41 @@
|
||||
import { create } from 'zustand';
|
||||
import { immer } from 'zustand/middleware/immer';
|
||||
|
||||
interface ServerInfo {
|
||||
name?: string;
|
||||
version?: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
interface ServerStoreState {
|
||||
selectedServerInfo: ServerInfo | null;
|
||||
serverList: ServerInfo[];
|
||||
addServer: (url: string) => void;
|
||||
selectServer: (serverInfo: ServerInfo) => void;
|
||||
}
|
||||
|
||||
const defaultServerList: ServerInfo[] = [
|
||||
{
|
||||
name: 'Tailchat Nightly',
|
||||
url: 'https://nightly.paw.msgbyte.com/',
|
||||
},
|
||||
];
|
||||
|
||||
export const useServerStore = create<ServerStoreState>()(
|
||||
immer((set) => ({
|
||||
serverList: defaultServerList,
|
||||
selectedServerInfo: null,
|
||||
addServer: (url: string) => {
|
||||
set((state) => {
|
||||
state.serverList.push({
|
||||
url,
|
||||
});
|
||||
});
|
||||
},
|
||||
selectServer: (serverInfo: ServerInfo) => {
|
||||
set({
|
||||
selectedServerInfo: serverInfo,
|
||||
});
|
||||
},
|
||||
}))
|
||||
);
|
||||
Loading…
Reference in New Issue