[add] Scaffold redesign
This commit is contained in:
mathysPaul
@@ -10,6 +10,7 @@ interface ButtonProps {
|
||||
onPress?: () => Promise<void>;
|
||||
isDisabled?: boolean;
|
||||
icon?: Icon;
|
||||
iconVariant?: 'Bold' | 'Outline';
|
||||
iconImage?: string;
|
||||
type?: 'filled' | 'outlined' | 'menu';
|
||||
}
|
||||
@@ -22,6 +23,7 @@ const ButtonBase: React.FC<ButtonProps> = ({
|
||||
icon,
|
||||
iconImage,
|
||||
type = 'filled',
|
||||
iconVariant = 'Outline',
|
||||
}) => {
|
||||
const { colors } = useTheme();
|
||||
const [loading, setLoading] = useState(false);
|
||||
@@ -60,10 +62,10 @@ const ButtonBase: React.FC<ButtonProps> = ({
|
||||
const styleMenu = StyleSheet.create({
|
||||
Default: {
|
||||
scale: 1,
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 4.65,
|
||||
elevation: 8,
|
||||
backgroundColor: 'rgba(16,16,20,0.5)',
|
||||
shadowOpacity: 0,
|
||||
shadowRadius: 0,
|
||||
elevation: 0,
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
onHover: {
|
||||
scale: 1.01,
|
||||
@@ -112,9 +114,18 @@ const ButtonBase: React.FC<ButtonProps> = ({
|
||||
color={type === 'outlined' ? '#6075F9' : '#FFFFFF'}
|
||||
/>
|
||||
) : (
|
||||
<View style={styles.content}>
|
||||
<View
|
||||
style={[
|
||||
styles.content,
|
||||
type === 'menu' ? { justifyContent: 'flex-start' } : {},
|
||||
]}
|
||||
>
|
||||
{icon && (
|
||||
<MyIcon size={'18'} color={type === 'outlined' ? '#6075F9' : '#FFFFFF'} />
|
||||
<MyIcon
|
||||
size={'18'}
|
||||
color={type === 'outlined' ? '#6075F9' : '#FFFFFF'}
|
||||
variant={iconVariant}
|
||||
/>
|
||||
)}
|
||||
{iconImage && <Image source={{ uri: iconImage }} style={styles.icon} />}
|
||||
{title && <Text style={styles.text}>{title}</Text>}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
|
||||
import InteractiveBase from './InteractiveBase';
|
||||
import { Checkbox, useTheme, Text } from 'native-base';
|
||||
import { useTheme, Text } from 'native-base';
|
||||
import { AddSquare, TickSquare } from 'iconsax-react-native';
|
||||
|
||||
interface CheckboxProps {
|
||||
@@ -12,13 +12,7 @@ interface CheckboxProps {
|
||||
style?: StyleProp<ViewStyle>;
|
||||
}
|
||||
|
||||
const CheckboxBase: React.FC<CheckboxProps> = ({
|
||||
title,
|
||||
color,
|
||||
style,
|
||||
check,
|
||||
setCheck,
|
||||
}) => {
|
||||
const CheckboxBase: React.FC<CheckboxProps> = ({ title, color, style, check, setCheck }) => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<InteractiveBase
|
||||
@@ -29,13 +23,22 @@ const CheckboxBase: React.FC<CheckboxProps> = ({
|
||||
}}
|
||||
>
|
||||
<View style={styles.content}>
|
||||
{
|
||||
check ?
|
||||
<TickSquare size="24" color={color ? color : theme.colors.primary[400]} variant="Bold"/>
|
||||
: <AddSquare size="24" color={color ? color : theme.colors.primary[400]} variant="Outline"/>
|
||||
|
||||
}
|
||||
<Text style={styles.text} selectable={false}>{title}</Text>
|
||||
{check ? (
|
||||
<TickSquare
|
||||
size="24"
|
||||
color={color ? color : theme.colors.primary[400]}
|
||||
variant="Bold"
|
||||
/>
|
||||
) : (
|
||||
<AddSquare
|
||||
size="24"
|
||||
color={color ? color : theme.colors.primary[400]}
|
||||
variant="Outline"
|
||||
/>
|
||||
)}
|
||||
<Text style={styles.text} selectable={false}>
|
||||
{title}
|
||||
</Text>
|
||||
</View>
|
||||
</InteractiveBase>
|
||||
);
|
||||
@@ -84,8 +87,8 @@ const styles = StyleSheet.create({
|
||||
paddingVertical: 5,
|
||||
},
|
||||
text: {
|
||||
paddingLeft: 10
|
||||
}
|
||||
paddingLeft: 10,
|
||||
},
|
||||
});
|
||||
|
||||
export default CheckboxBase;
|
||||
|
||||
@@ -0,0 +1,266 @@
|
||||
import { View, Image } from 'react-native';
|
||||
import { Divider, Text, ScrollView, Flex, Row, Popover, Heading, Button } from 'native-base';
|
||||
import useColorScheme from '../../hooks/colorScheme';
|
||||
import { useQuery, useQueries } from '../../Queries';
|
||||
import API from '../../API';
|
||||
import Song from '../../models/Song';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import ButtonBase from './ButtonBase';
|
||||
import {
|
||||
Cup,
|
||||
Discover,
|
||||
Icon,
|
||||
LogoutCurve,
|
||||
Music,
|
||||
SearchNormal1,
|
||||
Setting2,
|
||||
User,
|
||||
} from 'iconsax-react-native';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { LoadingView } from '../Loading';
|
||||
import { translate } from '../../i18n/i18n';
|
||||
import { unsetAccessToken } from '../../state/UserSlice';
|
||||
import { useNavigation } from '../../Navigation';
|
||||
import Spacer from './Spacer';
|
||||
|
||||
const menu: {
|
||||
title: string;
|
||||
icon: Icon;
|
||||
link: string;
|
||||
}[] = [
|
||||
{ title: 'Discovery', icon: Discover, link: 'HomeNew' },
|
||||
{ title: 'Profile', icon: User, link: 'User' },
|
||||
{ title: 'Music', icon: Music, link: 'Home' },
|
||||
{ title: 'Search', icon: SearchNormal1, link: 'Search' },
|
||||
{ title: 'LeaderBoard', icon: Cup, link: 'Score' },
|
||||
];
|
||||
|
||||
type ScaffoldCCProps = {
|
||||
children?: React.ReactNode;
|
||||
routeName: string;
|
||||
};
|
||||
|
||||
const ScaffoldCC = (props: ScaffoldCCProps) => {
|
||||
const navigation = useNavigation();
|
||||
const userQuery = useQuery(API.getUserInfo);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
if (!userQuery.data || userQuery.isLoading) {
|
||||
return <LoadingView />;
|
||||
}
|
||||
const user = userQuery.data;
|
||||
const colorScheme = useColorScheme();
|
||||
const icon =
|
||||
colorScheme == 'light'
|
||||
? require('../../assets/icon_light.png')
|
||||
: require('../../assets/icon_dark.png');
|
||||
const playHistoryQuery = useQuery(API.getUserPlayHistory);
|
||||
const songHistory = useQueries(
|
||||
playHistoryQuery.data?.map(({ songID }) => API.getSong(songID)) ?? []
|
||||
);
|
||||
|
||||
return (
|
||||
<Flex style={{ flex: 1 }}>
|
||||
<View style={{ height: '100%', flexDirection: 'row', overflow: 'hidden' }}>
|
||||
<View
|
||||
style={{
|
||||
display: 'flex',
|
||||
width: '300px',
|
||||
height: '100vh',
|
||||
maxHeight: '100vh',
|
||||
padding: '32px',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-start',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<View style={{ width: '100%' }}>
|
||||
<Row>
|
||||
<Image
|
||||
source={{ uri: icon }}
|
||||
style={{
|
||||
aspectRatio: 1,
|
||||
width: '40px',
|
||||
height: 'auto',
|
||||
marginRight: '10px',
|
||||
}}
|
||||
/>
|
||||
<Spacer width="xs" />
|
||||
<Text fontSize={'2xl'} selectable={false}>
|
||||
Chromacase
|
||||
</Text>
|
||||
</Row>
|
||||
<Spacer height="xl" />
|
||||
<View style={{ width: '100%' }}>
|
||||
{menu.map((value) => (
|
||||
<View key={'key-menu-link-' + value.title}>
|
||||
<ButtonBase
|
||||
style={{ width: '100%' }}
|
||||
type="menu"
|
||||
icon={value.icon}
|
||||
title={value.title}
|
||||
isDisabled={props.routeName === value.link}
|
||||
iconVariant={
|
||||
props.routeName === value.link ? 'Bold' : 'Outline'
|
||||
}
|
||||
onPress={async () =>
|
||||
navigation.navigate(value.link as never)
|
||||
}
|
||||
/>
|
||||
<Spacer />
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
<View style={{ width: '100%' }}>
|
||||
<Divider />
|
||||
<Spacer />
|
||||
<Text
|
||||
bold
|
||||
style={{
|
||||
paddingHorizontal: '16px',
|
||||
paddingVertical: '10px',
|
||||
fontSize: 20,
|
||||
}}
|
||||
>
|
||||
Recently played
|
||||
</Text>
|
||||
{songHistory.length === 0 && (
|
||||
<Text
|
||||
style={{
|
||||
paddingHorizontal: '16px',
|
||||
paddingVertical: '10px',
|
||||
}}
|
||||
>
|
||||
No songs played yet
|
||||
</Text>
|
||||
)}
|
||||
{songHistory
|
||||
.map((h) => h.data)
|
||||
.filter((data): data is Song => data !== undefined)
|
||||
.filter(
|
||||
(song, i, array) =>
|
||||
array.map((s) => s.id).findIndex((id) => id == song.id) == i
|
||||
)
|
||||
.slice(0, 4)
|
||||
.map((histoItem, index) => (
|
||||
<View
|
||||
key={'tab-navigation-other-' + index}
|
||||
style={{
|
||||
paddingHorizontal: '16px',
|
||||
paddingVertical: '10px',
|
||||
}}
|
||||
>
|
||||
<Text numberOfLines={1}>{histoItem.name}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
<Spacer />
|
||||
<View style={{ width: '100%' }}>
|
||||
<Divider />
|
||||
<Spacer />
|
||||
<ButtonBase
|
||||
style={{ width: '100%' }}
|
||||
title="Settings"
|
||||
icon={Setting2}
|
||||
type="menu"
|
||||
isDisabled={props.routeName === 'Settings'}
|
||||
iconVariant={props.routeName === 'Settings' ? 'Bold' : 'Outline'}
|
||||
onPress={async () => navigation.navigate('Settings')}
|
||||
/>
|
||||
<Spacer />
|
||||
{!user.isGuest && (
|
||||
<ButtonBase
|
||||
style={{ width: '100%' }}
|
||||
icon={LogoutCurve}
|
||||
title={translate('signOutBtn')}
|
||||
type="menu"
|
||||
onPress={async () => {
|
||||
dispatch(unsetAccessToken());
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{user.isGuest && (
|
||||
<Popover
|
||||
trigger={(triggerProps) => (
|
||||
<ButtonBase {...triggerProps}>
|
||||
{translate('signOutBtn')}
|
||||
</ButtonBase>
|
||||
)}
|
||||
>
|
||||
<Popover.Content>
|
||||
<Popover.Arrow />
|
||||
<Popover.Body>
|
||||
<Heading size="md" mb={2}>
|
||||
{translate('Attention')}
|
||||
</Heading>
|
||||
<Text>
|
||||
{translate(
|
||||
'YouAreCurrentlyConnectedWithAGuestAccountWarning'
|
||||
)}
|
||||
</Text>
|
||||
<Button.Group variant="ghost" space={2}>
|
||||
<Button
|
||||
onPress={() => dispatch(unsetAccessToken())}
|
||||
colorScheme="red"
|
||||
>
|
||||
{translate('signOutBtn')}
|
||||
</Button>
|
||||
<Button
|
||||
onPress={() => {
|
||||
navigation.navigate('Login');
|
||||
}}
|
||||
colorScheme="green"
|
||||
>
|
||||
{translate('signUpBtn')}
|
||||
</Button>
|
||||
</Button.Group>
|
||||
</Popover.Body>
|
||||
</Popover.Content>
|
||||
</Popover>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
<ScrollView
|
||||
style={{ flex: 1, maxHeight: '100vh' }}
|
||||
contentContainerStyle={{ flex: 1 }}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: 'rgba(16,16,20,0.5)',
|
||||
flex: 1,
|
||||
margin: 8,
|
||||
padding: 20,
|
||||
borderRadius: 12,
|
||||
minHeight: 'fit-content',
|
||||
}}
|
||||
>
|
||||
{props.children}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
<LinearGradient
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
colors={['#101014', '#6075F9']}
|
||||
style={{
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
minHeight: 'fit-content',
|
||||
minWidth: 'fit-content',
|
||||
flex: 1,
|
||||
position: 'absolute',
|
||||
zIndex: -2,
|
||||
}}
|
||||
/>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default ScaffoldCC;
|
||||
@@ -0,0 +1,31 @@
|
||||
import { View } from 'native-base';
|
||||
|
||||
type SpacerProps = {
|
||||
width?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
||||
height?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
||||
};
|
||||
|
||||
const Spacer = ({ width = 'md', height = 'md' }: SpacerProps) => {
|
||||
const str2size = (str: string) => {
|
||||
switch (str) {
|
||||
case 'xs':
|
||||
return 8;
|
||||
case 'sm':
|
||||
return 16;
|
||||
case 'md':
|
||||
return 20;
|
||||
case 'lg':
|
||||
return 32;
|
||||
case 'xl':
|
||||
return 40;
|
||||
case '2xl':
|
||||
return 80;
|
||||
default:
|
||||
return 20;
|
||||
}
|
||||
};
|
||||
|
||||
return <View style={{ height: str2size(height), width: str2size(width) }}></View>;
|
||||
};
|
||||
|
||||
export default Spacer;
|
||||
Reference in New Issue
Block a user