update
This commit is contained in:
Philip Cesar Garay
@@ -0,0 +1,48 @@
|
||||
import { View, Text, Pressable } from "react-native";
|
||||
import React from "react";
|
||||
import { Palette, Style } from "../styles";
|
||||
import { size } from "../styles/Style";
|
||||
import { FONT_FAMILY } from "../styles/Fonts";
|
||||
|
||||
const AppCheckbox = ({ onPress, selected, label }) => {
|
||||
return (
|
||||
<Pressable
|
||||
style={{
|
||||
...Style.containerRow,
|
||||
gap: 6,
|
||||
}}
|
||||
onPress={onPress}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
...size({ size: 17 }),
|
||||
...Style.containerCenter,
|
||||
borderWidth: 1,
|
||||
borderRadius: 100,
|
||||
borderColor: Palette.white,
|
||||
}}
|
||||
>
|
||||
{selected && (
|
||||
<View
|
||||
style={{
|
||||
...size({ size: 9 }),
|
||||
borderRadius: 100,
|
||||
backgroundColor: Palette.white,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 16,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueRegular,
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
</Pressable>
|
||||
);
|
||||
};
|
||||
|
||||
export default AppCheckbox;
|
||||
@@ -0,0 +1,163 @@
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
FlatList,
|
||||
Pressable,
|
||||
Image,
|
||||
Dimensions,
|
||||
TextInput,
|
||||
} from "react-native";
|
||||
import React, { useRef, useState } from "react";
|
||||
import AppActionSheet from "../AppActionSheet";
|
||||
import AppCheckbox from "../AppCheckbox";
|
||||
import { Palette } from "../../styles";
|
||||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||||
import { icons } from "../../assets";
|
||||
import Style, { size } from "../../styles/Style";
|
||||
import SwiperFlatList from "react-native-swiper-flatlist";
|
||||
import GradientButton from "../GradientButton";
|
||||
import { SheetManager } from "react-native-actions-sheet";
|
||||
|
||||
const PLAYLIST = ["Ménage", "Voiture", "Roadtrip"];
|
||||
|
||||
const { width } = Dimensions.get("window");
|
||||
|
||||
const PlaylistModal = () => {
|
||||
const scrollRef = useRef(null);
|
||||
const [selected, setSelected] = useState("");
|
||||
const [playlist, setPlaylist] = useState("");
|
||||
|
||||
return (
|
||||
<AppActionSheet id="Playlist">
|
||||
<SwiperFlatList
|
||||
style={{ width, left: -14 }}
|
||||
ref={scrollRef}
|
||||
disableGesture
|
||||
>
|
||||
<View style={{ width, paddingHorizontal: 14 }}>
|
||||
<View style={{ gap: 20 }}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 22,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterSemiBold,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Ajouter ce titre à une playlist
|
||||
</Text>
|
||||
<FlatList
|
||||
data={PLAYLIST}
|
||||
contentContainerStyle={{ gap: 20 }}
|
||||
ListHeaderComponent={
|
||||
<Pressable
|
||||
style={{
|
||||
...Style.containerRow,
|
||||
gap: 10,
|
||||
}}
|
||||
onPress={() =>
|
||||
scrollRef.current.scrollToIndex({
|
||||
index: 1,
|
||||
animated: true,
|
||||
})
|
||||
}
|
||||
>
|
||||
<Image source={icons.add} style={size({ size: 15 })} />
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 16,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueRegular,
|
||||
}}
|
||||
>
|
||||
Créer une nouvelle playlist
|
||||
</Text>
|
||||
</Pressable>
|
||||
}
|
||||
renderItem={({ item }) => (
|
||||
<AppCheckbox
|
||||
label={item}
|
||||
onPress={() => setSelected(item)}
|
||||
selected={selected === item}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<GradientButton
|
||||
title="Valider"
|
||||
containerStyle={{
|
||||
width: "80%",
|
||||
alignSelf: "center",
|
||||
}}
|
||||
onPress={() => SheetManager.hide("Playlist")}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<View style={{ width, paddingHorizontal: 14 }}>
|
||||
<View style={{ gap: 20 }}>
|
||||
<Pressable
|
||||
onPress={() => {
|
||||
scrollRef.current.scrollToIndex({
|
||||
index: 0,
|
||||
animated: true,
|
||||
});
|
||||
setPlaylist("");
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: Palette.gray,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueRegular,
|
||||
}}
|
||||
>
|
||||
Annuler
|
||||
</Text>
|
||||
</Pressable>
|
||||
<View style={{ ...Style.containerCenter, gap: 14 }}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 20,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueMedium,
|
||||
}}
|
||||
>
|
||||
Nommer la playlist
|
||||
</Text>
|
||||
<TextInput
|
||||
style={{
|
||||
paddingVertical: 6,
|
||||
borderBottomWidth: 1,
|
||||
borderColor: Palette.white,
|
||||
fontSize: 20,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueRegular,
|
||||
minWidth: "30%",
|
||||
maxWidth: "80%",
|
||||
}}
|
||||
value={playlist}
|
||||
onChangeText={setPlaylist}
|
||||
textAlign="center"
|
||||
/>
|
||||
</View>
|
||||
<GradientButton
|
||||
title="Créer la playlist"
|
||||
containerStyle={{
|
||||
width: "80%",
|
||||
alignSelf: "center",
|
||||
}}
|
||||
onPress={() => {
|
||||
scrollRef.current.scrollToIndex({
|
||||
index: 0,
|
||||
animated: true,
|
||||
});
|
||||
setPlaylist("");
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</SwiperFlatList>
|
||||
</AppActionSheet>
|
||||
);
|
||||
};
|
||||
|
||||
export default PlaylistModal;
|
||||
@@ -62,7 +62,7 @@ const MusicDetails = () => {
|
||||
resizeMode="contain"
|
||||
/>
|
||||
</Pressable>
|
||||
<Pressable>
|
||||
<Pressable onPress={() => SheetManager.show("Playlist")}>
|
||||
<Image
|
||||
source={icons.check}
|
||||
style={{ ...size({ size: 24 }) }}
|
||||
|
||||
@@ -7,6 +7,7 @@ import { responsiveHeight } from "react-native-responsive-dimensions";
|
||||
import { BlurView } from "expo-blur";
|
||||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||||
import Style, { size } from "../../styles/Style";
|
||||
import AppCheckbox from "../../components/AppCheckbox";
|
||||
|
||||
const LANGUAGE = ["Anglais", "Français", "Chinois", "Japonais", "Coreen"];
|
||||
|
||||
@@ -48,43 +49,12 @@ const Language = () => {
|
||||
</Text>
|
||||
<View style={{ gap: 12 }}>
|
||||
{LANGUAGE.map((item, index) => (
|
||||
<Pressable
|
||||
<AppCheckbox
|
||||
key={index}
|
||||
style={{
|
||||
...Style.containerRow,
|
||||
gap: 6,
|
||||
}}
|
||||
label={item}
|
||||
onPress={() => setSelected(item)}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
...size({ size: 17 }),
|
||||
...Style.containerCenter,
|
||||
borderWidth: 1,
|
||||
borderRadius: 100,
|
||||
borderColor: Palette.white,
|
||||
}}
|
||||
>
|
||||
{selected === item && (
|
||||
<View
|
||||
style={{
|
||||
...size({ size: 9 }),
|
||||
borderRadius: 100,
|
||||
backgroundColor: Palette.white,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 16,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueRegular,
|
||||
}}
|
||||
>
|
||||
{item}
|
||||
</Text>
|
||||
</Pressable>
|
||||
selected={selected === item}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
</BlurView>
|
||||
|
||||
@@ -4,11 +4,13 @@ import ProfileSettingsModal from "../components/modal/ProfileSettingsModal";
|
||||
import DeleteAccountModal from "../components/modal/DeleteAccountModal";
|
||||
import DeletePlaybackModal from "../components/modal/DeletePlaybackModal";
|
||||
import DeleteAudioModal from "../components/modal/DeleteAudioModal";
|
||||
import PlaylistModal from "../components/modal/PlaylistModal";
|
||||
|
||||
registerSheet("Delete", DeleteModal);
|
||||
registerSheet("ProfileSettings", ProfileSettingsModal);
|
||||
registerSheet("DeleteAccount", DeleteAccountModal);
|
||||
registerSheet("DeletePlayback", DeletePlaybackModal);
|
||||
registerSheet("DeleteAudio", DeleteAudioModal);
|
||||
registerSheet("Playlist", PlaylistModal);
|
||||
|
||||
export {};
|
||||
|
||||
Reference in New Issue
Block a user