start refacto home and fix description
This commit is contained in:
Thomas Demirdjian
@@ -0,0 +1,172 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { Pressable, Text, View } from "react-native";
|
||||
import { Asset } from "expo-asset";
|
||||
|
||||
import { videos } from "../assets";
|
||||
|
||||
const overlayStyle = {
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
backgroundColor: "black",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
zIndex: 9999,
|
||||
};
|
||||
|
||||
const videoStyle = {
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
objectFit: "cover",
|
||||
};
|
||||
|
||||
const closeButtonStyle = {
|
||||
position: "absolute",
|
||||
top: 50,
|
||||
right: 20,
|
||||
backgroundColor: "#00000080",
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 14,
|
||||
borderRadius: 20,
|
||||
borderWidth: 1,
|
||||
borderColor: "#FFFFFF55",
|
||||
cursor: "pointer",
|
||||
};
|
||||
|
||||
const closeTextStyle = {
|
||||
color: "#FFF",
|
||||
fontSize: 14,
|
||||
};
|
||||
|
||||
const resolveModuleUri = async (module) => {
|
||||
const asset = Asset.fromModule(module);
|
||||
|
||||
if (!asset.localUri && !asset.uri) {
|
||||
await asset.downloadAsync();
|
||||
}
|
||||
|
||||
return asset.localUri ?? asset.uri ?? null;
|
||||
};
|
||||
|
||||
const FullscreenIntroVideo = ({ url, visible = true, onClose }) => {
|
||||
const videoRef = useRef(null);
|
||||
const [uri, setUri] = useState(null);
|
||||
const [muted, setMuted] = useState(false);
|
||||
|
||||
const resolvedSource = useMemo(() => url ?? videos.test, [url]);
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
|
||||
const assignUri = (nextUri) => {
|
||||
if (isMounted) {
|
||||
setMuted(false);
|
||||
setUri(nextUri);
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof resolvedSource === "string") {
|
||||
assignUri(resolvedSource);
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}
|
||||
|
||||
const load = async () => {
|
||||
try {
|
||||
const nextUri = await resolveModuleUri(resolvedSource);
|
||||
assignUri(nextUri);
|
||||
} catch {
|
||||
if (isMounted) {
|
||||
setUri(null);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
load();
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, [resolvedSource]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!visible) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const video = videoRef.current;
|
||||
|
||||
if (!video || !uri) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const handleEnded = () => onClose?.();
|
||||
video.addEventListener("ended", handleEnded);
|
||||
|
||||
video.currentTime = 0;
|
||||
const attemptPlay = () => {
|
||||
const result = video.play();
|
||||
|
||||
if (result?.catch) {
|
||||
result.catch((error) => {
|
||||
if (error?.name === "NotAllowedError" && !muted) {
|
||||
setMuted(true);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
attemptPlay();
|
||||
|
||||
return () => {
|
||||
video.pause();
|
||||
video.removeEventListener("ended", handleEnded);
|
||||
};
|
||||
}, [muted, onClose, uri, visible]);
|
||||
|
||||
useEffect(() => {
|
||||
const video = videoRef.current;
|
||||
|
||||
if (!video || !muted) {
|
||||
return;
|
||||
}
|
||||
|
||||
const result = video.play();
|
||||
|
||||
if (result?.catch) {
|
||||
result.catch(() => {});
|
||||
}
|
||||
}, [muted]);
|
||||
|
||||
if (!visible) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<View pointerEvents="box-none" style={overlayStyle}>
|
||||
{uri ? (
|
||||
<video
|
||||
ref={videoRef}
|
||||
src={uri}
|
||||
style={videoStyle}
|
||||
playsInline
|
||||
autoPlay
|
||||
loop={false}
|
||||
muted={muted}
|
||||
controls={false}
|
||||
/>
|
||||
) : null}
|
||||
<Pressable onPress={() => onClose?.()} style={closeButtonStyle}>
|
||||
<Text style={closeTextStyle}>Passer la vidéo</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default FullscreenIntroVideo;
|
||||
@@ -1,4 +1,4 @@
|
||||
import { View, Text, Pressable, Image } from "react-native";
|
||||
import { View, Text, Pressable, Image, FlatList } from "react-native";
|
||||
import React from "react";
|
||||
import { LinearGradient } from "./LinearGradient/LinearGradient";
|
||||
import { Palette, Style } from "../styles";
|
||||
@@ -15,7 +15,11 @@ const GradientButton = ({
|
||||
disabled = false,
|
||||
}) => {
|
||||
return (
|
||||
<Pressable onPress={onPress} disabled={disabled} style={{ ...containerStyle, opacity: disabled ? 0.6 : 1 }}>
|
||||
<Pressable
|
||||
onPress={onPress}
|
||||
disabled={disabled}
|
||||
style={{ ...containerStyle, opacity: disabled ? 0.6 : 1 }}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={colors}
|
||||
style={{
|
||||
|
||||
+74
-101
@@ -7,23 +7,23 @@ import {
|
||||
Image,
|
||||
Keyboard,
|
||||
Platform,
|
||||
} from 'react-native';
|
||||
import { useState } from 'react';
|
||||
} from "react-native";
|
||||
import { useState } from "react";
|
||||
// import CountryPicker, { DARK_THEME } from "react-native-country-picker-modal";
|
||||
import usePlaceApi from 'react-native-minuit/src/hooks/usePlacesApi';
|
||||
import usePlaceApi from "react-native-minuit/src/hooks/usePlacesApi";
|
||||
|
||||
import { art, icons } from '../assets';
|
||||
import { Fonts, Palette, Style, gutters } from '../styles';
|
||||
import { FONT_FAMILY, fontTypeList } from '../styles/Fonts';
|
||||
import { art, icons } from "../assets";
|
||||
import { Fonts, Palette, Style, gutters } from "../styles";
|
||||
import { FONT_FAMILY, fontTypeList } from "../styles/Fonts";
|
||||
|
||||
import { isWeb } from '../hooks/useLayoutType';
|
||||
import { GOOGLE_API_KEY } from '../data/keys';
|
||||
import { BlurView } from 'expo-blur';
|
||||
import { isWeb } from "../hooks/useLayoutType";
|
||||
import { GOOGLE_API_KEY } from "../data/keys";
|
||||
import { BlurView } from "expo-blur";
|
||||
|
||||
const Input = ({
|
||||
inputRef = null,
|
||||
label = '',
|
||||
placeholder = '',
|
||||
label = "",
|
||||
placeholder = "",
|
||||
|
||||
containerStyle = {},
|
||||
textInputStyle = {},
|
||||
@@ -33,36 +33,35 @@ const Input = ({
|
||||
|
||||
textInputProps = {},
|
||||
|
||||
type = 'default', // "default" | "password" | "textarea" | "coinAmount" | "countryPicker" | "autoCompleteAddress"
|
||||
theme = 'default', // "default" | "radioactiv" | "dashed"
|
||||
type = "default", // "default" | "password" | "textarea" | "coinAmount" | "countryPicker" | "autoCompleteAddress"
|
||||
theme = "default", // "default" | "radioactiv" | "dashed"
|
||||
|
||||
borderType = 'none', // "solid" | "dashed" | "none"
|
||||
borderType = "none", // "solid" | "dashed" | "none"
|
||||
|
||||
layout = 'default', // "default" | "line"
|
||||
layout = "default", // "default" | "line"
|
||||
|
||||
isNumeric = false,
|
||||
isBlur = false,
|
||||
}) => {
|
||||
const [isFocused, setIsFocused] = useState(false);
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [showCountryPicker, setShowCountryPicker] = useState(false);
|
||||
|
||||
const isDefaultLayout = layout === 'default';
|
||||
const isDefaultLayout = layout === "default";
|
||||
|
||||
const mainColor =
|
||||
theme === 'radioactiv' ? Palette.radioactivGreen : Palette.primary;
|
||||
theme === "radioactiv" ? Palette.radioactivGreen : Palette.primary;
|
||||
|
||||
const isRoundedRectangle =
|
||||
['textarea', 'coinAmount'].includes(type) || layout === 'default';
|
||||
["textarea", "coinAmount"].includes(type) || layout === "default";
|
||||
|
||||
const inputAccessoryViewID = 'uniqueID';
|
||||
const inputAccessoryViewID = "uniqueID";
|
||||
|
||||
const { places } = usePlaceApi({
|
||||
query: type === 'autoCompleteAddress' ? value : '',
|
||||
query: type === "autoCompleteAddress" ? value : "",
|
||||
apiKey: GOOGLE_API_KEY, // Your Google API Key
|
||||
queryFields: 'formatted_address,geometry,name,address_components',
|
||||
queryCountries: ['fr'],
|
||||
language: 'fr-FR',
|
||||
queryFields: "formatted_address,geometry,name,address_components",
|
||||
queryCountries: ["fr"],
|
||||
language: "fr-FR",
|
||||
minChars: 2,
|
||||
});
|
||||
|
||||
@@ -72,23 +71,25 @@ const Input = ({
|
||||
<>
|
||||
<View
|
||||
style={{
|
||||
width: '100%',
|
||||
width: "100%",
|
||||
...containerStyle,
|
||||
gap: 4,
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
{label?.length > 0 && (
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueRegular,
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
<ContainerView
|
||||
tint='dark'
|
||||
tint="dark"
|
||||
// experimentalBlurMethod={
|
||||
// Platform.OS !== "ios" ? "dimezisBlurView" : "none"
|
||||
// }
|
||||
@@ -101,11 +102,11 @@ const Input = ({
|
||||
? {
|
||||
paddingVertical: 10,
|
||||
backgroundColor:
|
||||
type === 'coinAmount'
|
||||
type === "coinAmount"
|
||||
? Palette.transparentRadioactivGreen
|
||||
: Palette.glass,
|
||||
height: type === 'textarea' ? 150 : 50,
|
||||
overflow: 'hidden',
|
||||
height: type === "textarea" ? 150 : 50,
|
||||
overflow: "hidden",
|
||||
borderRadius: 12,
|
||||
}
|
||||
: {}),
|
||||
@@ -115,127 +116,95 @@ const Input = ({
|
||||
borderBottomColor: mainColor,
|
||||
borderBottomWidth: 1,
|
||||
}),
|
||||
...(borderType === 'dashed'
|
||||
...(borderType === "dashed"
|
||||
? {
|
||||
borderStyle: 'dashed',
|
||||
borderStyle: "dashed",
|
||||
borderColor: isFocused
|
||||
? Palette.primary
|
||||
: Palette.transparentPrimary,
|
||||
borderWidth: 1,
|
||||
}
|
||||
: {}),
|
||||
width: '100%',
|
||||
}}>
|
||||
{type === 'search' ? (
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
{type === "search" ? (
|
||||
<Image
|
||||
source={icons.search}
|
||||
style={[Style.iconDefault, { marginRight: 10 }]}
|
||||
resizeMode='contain'
|
||||
resizeMode="contain"
|
||||
/>
|
||||
) : null}
|
||||
{/* {type === "countryPicker" ? (
|
||||
<CountryPicker
|
||||
countryCode={value}
|
||||
onSelect={(country) => {
|
||||
console.log(country);
|
||||
setValue(country.cca2);
|
||||
}}
|
||||
visible={showCountryPicker}
|
||||
theme={{
|
||||
...DARK_THEME,
|
||||
primaryColor: Palette.primary,
|
||||
backgroundColor: Palette.darkPurple,
|
||||
...fontTypeList.default,
|
||||
}}
|
||||
closeButtonImage={icons.arrowRight}
|
||||
closeButtonStyle={[Style.mirrorHorizontal]}
|
||||
withEmoji={true}
|
||||
withFilter={true}
|
||||
withAlphaFilter={false}
|
||||
withCountryNameButton={true}
|
||||
containerButtonStyle={{ padding: 0, margin: 0 }}
|
||||
translation="fra"
|
||||
placeholder={"Sélectionnez un pays"}
|
||||
countryName={value}
|
||||
preferredCountries={["FR", "BE", "CH", "LU", "CA", "US", "GB"]}
|
||||
filterProps={{
|
||||
placeholder: "Rechercher un pays",
|
||||
style: {
|
||||
...Fonts({}),
|
||||
},
|
||||
}}
|
||||
/>
|
||||
) : */}
|
||||
{type !== 'countryPicker' && (
|
||||
{type !== "countryPicker" && (
|
||||
<TextInput
|
||||
ref={inputRef}
|
||||
placeholder={placeholder}
|
||||
placeholderTextColor={Palette.gray}
|
||||
value={value}
|
||||
onChangeText={setValue}
|
||||
multiline={type === 'textarea'}
|
||||
editable={type !== 'countryPicker'}
|
||||
multiline={type === "textarea"}
|
||||
editable={type !== "countryPicker"}
|
||||
onFocus={() => setIsFocused(true)}
|
||||
onBlur={() => setIsFocused(false)}
|
||||
style={{
|
||||
width: '100%',
|
||||
width: "100%",
|
||||
...(isRoundedRectangle
|
||||
? {
|
||||
height: '100%',
|
||||
height: "100%",
|
||||
flex: 1,
|
||||
textAlignVertical: type === 'textarea' ? 'top' : 'center',
|
||||
textAlignVertical: type === "textarea" ? "top" : "center",
|
||||
}
|
||||
: { textAlign: 'center' }),
|
||||
: { textAlign: "center" }),
|
||||
fontSize: 14,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
...(isWeb
|
||||
? {
|
||||
lineHeight: 'auto',
|
||||
lineHeight: "auto",
|
||||
}
|
||||
: {}),
|
||||
...textInputStyle,
|
||||
}}
|
||||
{...(type === 'password'
|
||||
{...(type === "password"
|
||||
? {
|
||||
secureTextEntry: !showPassword,
|
||||
autoCapitalize: 'none',
|
||||
autoCompleteType: 'password',
|
||||
textContentType: 'password',
|
||||
autoCapitalize: "none",
|
||||
autoCompleteType: "password",
|
||||
textContentType: "password",
|
||||
}
|
||||
: {})}
|
||||
{...(type === 'email'
|
||||
{...(type === "email"
|
||||
? {
|
||||
keyboardType: 'email-address',
|
||||
autoCapitalize: 'none',
|
||||
autoCompleteType: 'email',
|
||||
textContentType: 'emailAddress',
|
||||
keyboardType: "email-address",
|
||||
autoCapitalize: "none",
|
||||
autoCompleteType: "email",
|
||||
textContentType: "emailAddress",
|
||||
}
|
||||
: {})}
|
||||
keyboardType={isNumeric ? 'numeric' : 'default'}
|
||||
keyboardAppearance='dark'
|
||||
keyboardType={isNumeric ? "numeric" : "default"}
|
||||
keyboardAppearance="dark"
|
||||
inputAccessoryViewID={inputAccessoryViewID}
|
||||
{...textInputProps}
|
||||
/>
|
||||
)}
|
||||
{type === 'password' ? (
|
||||
{type === "password" ? (
|
||||
<Pressable onPress={() => setShowPassword(!showPassword)}>
|
||||
<Image
|
||||
source={icons.eye}
|
||||
style={[Style.iconDefault]}
|
||||
resizeMode='contain'
|
||||
resizeMode="contain"
|
||||
/>
|
||||
</Pressable>
|
||||
) : type === 'coinAmount' ? (
|
||||
) : type === "coinAmount" ? (
|
||||
<Image
|
||||
source={art.coin}
|
||||
style={[Style.iconDefault]}
|
||||
resizeMode='contain'
|
||||
resizeMode="contain"
|
||||
/>
|
||||
) : null}
|
||||
</ContainerView>
|
||||
|
||||
{type === 'autoCompleteAddress' &&
|
||||
{type === "autoCompleteAddress" &&
|
||||
places?.[0]?.description &&
|
||||
places?.[0]?.description !== value &&
|
||||
places.map((place, index) => (
|
||||
@@ -247,32 +216,36 @@ const Input = ({
|
||||
style={{
|
||||
...Style.containerSpaceBetween,
|
||||
marginBottom: index !== places.length - 1 ? gutters / 2 : 0,
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
...Fonts({}),
|
||||
}}>
|
||||
{place?.description || '-'}
|
||||
}}
|
||||
>
|
||||
{place?.description || "-"}
|
||||
</Text>
|
||||
</Pressable>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{(type === 'textarea' || isNumeric) && !isWeb && (
|
||||
{(type === "textarea" || isNumeric) && !isWeb && (
|
||||
<InputAccessoryView nativeID={inputAccessoryViewID}>
|
||||
<Pressable
|
||||
onPress={() => Keyboard.dismiss()}
|
||||
style={{
|
||||
...Style.containerRow,
|
||||
justifyContent: 'flex-end',
|
||||
justifyContent: "flex-end",
|
||||
backgroundColor: Palette.transparentPrimary,
|
||||
padding: gutters,
|
||||
paddingVertical: gutters / 2,
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
...Fonts({ color: Palette.primary }),
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
Fermer
|
||||
</Text>
|
||||
</Pressable>
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
import { View, Text, StyleSheet, Platform } from 'react-native';
|
||||
import React from 'react';
|
||||
import BorderGradient from '../BorderGradient/BorderGradient';
|
||||
import { BlurView } from 'expo-blur';
|
||||
import { responsiveHeight } from 'react-native-responsive-dimensions';
|
||||
import { useKeyboard } from '@react-native-community/hooks';
|
||||
import { isWeb } from '../../hooks/useLayoutType';
|
||||
import { View, StyleSheet, Platform } from "react-native";
|
||||
import React from "react";
|
||||
import BorderGradient from "../BorderGradient/BorderGradient";
|
||||
import { BlurView } from "expo-blur";
|
||||
import { responsiveHeight } from "react-native-responsive-dimensions";
|
||||
import { useKeyboard } from "@react-native-community/hooks";
|
||||
|
||||
const ItemContainer = ({
|
||||
height = responsiveHeight(40),
|
||||
@@ -18,7 +17,7 @@ const ItemContainer = ({
|
||||
return (
|
||||
<BorderGradient
|
||||
gradientProps={{
|
||||
colors: ['#FFFFFF00', '#FFFFFF'],
|
||||
colors: ["#FFFFFF00", "#FFFFFF"],
|
||||
start: { x: 0.3, y: 0 },
|
||||
end: { x: 1, y: 1 },
|
||||
...gradientProps,
|
||||
@@ -32,15 +31,17 @@ const ItemContainer = ({
|
||||
: height,
|
||||
|
||||
...style,
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<View style={styles.blurContainer}>
|
||||
<BlurView
|
||||
intensity={Platform.OS !== 'ios' ? 80 : 40}
|
||||
tint={isWeb ? 'light' : 'dark'}
|
||||
intensity={Platform.select({
|
||||
ios: 40,
|
||||
android: 60,
|
||||
web: 30,
|
||||
})}
|
||||
tint={"dark"}
|
||||
style={{ flex: 1, padding: 6 }}
|
||||
// experimentalBlurMethod={
|
||||
// Platform.OS !== "ios" ? "dimezisBlurView" : "none"
|
||||
// }
|
||||
>
|
||||
{children}
|
||||
</BlurView>
|
||||
@@ -55,7 +56,7 @@ const styles = StyleSheet.create({
|
||||
borderGradientStyle: {
|
||||
borderWidth: 1,
|
||||
borderRadius: 20,
|
||||
shadowColor: '#000',
|
||||
shadowColor: "#000",
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 2,
|
||||
@@ -67,7 +68,7 @@ const styles = StyleSheet.create({
|
||||
blurContainer: {
|
||||
flex: 1,
|
||||
borderRadius: 20,
|
||||
overflow: 'hidden',
|
||||
overflow: "hidden",
|
||||
zIndex: 1,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { View, Text, StyleSheet, Platform } from "react-native";
|
||||
import { View, StyleSheet } from "react-native";
|
||||
import React, { useState } from "react";
|
||||
import BorderGradient from "../BorderGradient/BorderGradient";
|
||||
import { responsiveHeight } from "react-native-responsive-dimensions";
|
||||
@@ -46,7 +46,7 @@ const ItemContainer = ({
|
||||
}}
|
||||
>
|
||||
<BlurView
|
||||
intensity={Platform.OS !== "ios" ? 10 : 40}
|
||||
intensity={30}
|
||||
tint="dark"
|
||||
style={{
|
||||
padding: 6,
|
||||
@@ -55,9 +55,6 @@ const ItemContainer = ({
|
||||
alignSelf: "center",
|
||||
height: "99.2%",
|
||||
}}
|
||||
// experimentalBlurMethod={
|
||||
// Platform.OS !== "ios" ? "dimezisBlurView" : "none"
|
||||
// }
|
||||
>
|
||||
{children}
|
||||
</BlurView>
|
||||
|
||||
@@ -0,0 +1,375 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||||
import {
|
||||
FlatList,
|
||||
Image,
|
||||
Pressable,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { BlurView } from "expo-blur";
|
||||
import { icons, img } from "../../assets";
|
||||
import { Palette } from "../../styles";
|
||||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||||
import GradientButton from "../GradientButton";
|
||||
|
||||
const BUTTON_BLUR_INTENSITY = 20;
|
||||
const ROW_BLUR_INTENSITY = 5;
|
||||
const ROW_BLUR_SELECTED_INTENSITY = 45;
|
||||
|
||||
const defaultFormatDate = (timestamp) => {
|
||||
try {
|
||||
const value = timestamp?.toDate ? timestamp.toDate() : timestamp;
|
||||
const date = value ? new Date(value) : null;
|
||||
if (!date || Number.isNaN(date.getTime())) {
|
||||
return "";
|
||||
}
|
||||
const day = date.getDate().toString().padStart(2, "0");
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, "0");
|
||||
return `${day}/${month}`;
|
||||
} catch (error) {
|
||||
console.warn("ProjectDropDown: unable to format date", error);
|
||||
return "";
|
||||
}
|
||||
};
|
||||
|
||||
const ProjectDropDown = ({
|
||||
style,
|
||||
projects = [],
|
||||
selectedProject,
|
||||
onSelectProject,
|
||||
onModifyProject,
|
||||
onCreateProject,
|
||||
formatDate = defaultFormatDate,
|
||||
}) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [triggerLayout, setTriggerLayout] = useState(null);
|
||||
|
||||
const normalizedProjects = Array.isArray(projects) ? projects : [];
|
||||
const isDisabled = normalizedProjects.length === 0;
|
||||
|
||||
const currentProject = selectedProject?.id
|
||||
? selectedProject
|
||||
: normalizedProjects[0] || null;
|
||||
|
||||
const dropdownProjects = currentProject
|
||||
? normalizedProjects.filter((project) => {
|
||||
if (!project) return false;
|
||||
if (currentProject.id && project.id) {
|
||||
return project.id !== currentProject.id;
|
||||
}
|
||||
return project !== currentProject;
|
||||
})
|
||||
: normalizedProjects;
|
||||
|
||||
const toggleDropdown = () => {
|
||||
if (isDisabled) {
|
||||
return;
|
||||
}
|
||||
setIsOpen((prev) => !prev);
|
||||
};
|
||||
|
||||
const closeDropdown = () => setIsOpen(false);
|
||||
|
||||
const handleSelect = (project) => {
|
||||
if (!project?.id) return;
|
||||
onSelectProject?.(project);
|
||||
closeDropdown();
|
||||
};
|
||||
|
||||
const handleModify = (project, topPosition) => {
|
||||
if (!project?.id) return;
|
||||
onModifyProject?.(project, topPosition);
|
||||
};
|
||||
|
||||
const handleCreate = () => {
|
||||
onCreateProject?.();
|
||||
closeDropdown();
|
||||
};
|
||||
|
||||
const dropdownWidth = useMemo(
|
||||
() => triggerLayout?.width || 0,
|
||||
[triggerLayout],
|
||||
);
|
||||
|
||||
return (
|
||||
<View style={[styles.container, style]}>
|
||||
{isOpen ? (
|
||||
<Pressable style={styles.backdrop} onPress={closeDropdown} />
|
||||
) : null}
|
||||
|
||||
<View
|
||||
style={styles.triggerWrapper}
|
||||
onLayout={(event) => setTriggerLayout(event.nativeEvent.layout)}
|
||||
>
|
||||
<BlurView
|
||||
intensity={BUTTON_BLUR_INTENSITY}
|
||||
tint="dark"
|
||||
style={[
|
||||
styles.dropdownBlur,
|
||||
isDisabled && styles.dropdownBlurDisabled,
|
||||
isOpen && styles.dropdownBlurHidden,
|
||||
]}
|
||||
>
|
||||
<ProjectRow
|
||||
isTitle={true}
|
||||
isOpen={isOpen}
|
||||
project={currentProject}
|
||||
formatDate={formatDate}
|
||||
onSelect={toggleDropdown}
|
||||
/>
|
||||
</BlurView>
|
||||
|
||||
{isOpen && (
|
||||
<BlurView
|
||||
intensity={BUTTON_BLUR_INTENSITY}
|
||||
tint="dark"
|
||||
style={[
|
||||
styles.dropdownOverlayBlur,
|
||||
{
|
||||
width: dropdownWidth || "100%",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<ProjectRow
|
||||
isTitle={true}
|
||||
isOpen={isOpen}
|
||||
project={currentProject}
|
||||
formatDate={formatDate}
|
||||
onSelect={toggleDropdown}
|
||||
/>
|
||||
|
||||
<View style={styles.dropdownOverlayContent}>
|
||||
<FlatList
|
||||
data={dropdownProjects}
|
||||
keyExtractor={(project, index) =>
|
||||
project?.id || project?.title || `project-${index}`
|
||||
}
|
||||
ItemSeparatorComponent={() => <View style={{ height: 10 }} />}
|
||||
renderItem={({ item: project }) => (
|
||||
<ProjectRow
|
||||
project={project}
|
||||
formatDate={formatDate}
|
||||
isSelected={currentProject?.id === project?.id}
|
||||
onSelect={handleSelect}
|
||||
onModify={handleModify}
|
||||
/>
|
||||
)}
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerStyle={styles.dropdownListContent}
|
||||
style={styles.dropdownList}
|
||||
/>
|
||||
<GradientButton
|
||||
containerStyle={styles.createButtonContainer}
|
||||
title="Commencer à créer"
|
||||
onPress={handleCreate}
|
||||
/>
|
||||
</View>
|
||||
</BlurView>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectDropDown;
|
||||
|
||||
const ProjectRow = ({
|
||||
project,
|
||||
formatDate,
|
||||
isSelected,
|
||||
onSelect,
|
||||
onModify,
|
||||
isTitle = false,
|
||||
isOpen,
|
||||
}) => {
|
||||
const rowRef = useRef(null);
|
||||
const [layout, setLayout] = useState(null);
|
||||
const [menuPos, setMenuPos] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (!layout) return;
|
||||
const top = (layout?.y || 0) + 45;
|
||||
setMenuPos(top);
|
||||
}, [layout]);
|
||||
|
||||
const onPressMenu = () => {
|
||||
if (!project?.id) return;
|
||||
|
||||
if (rowRef?.current?.measureInWindow) {
|
||||
try {
|
||||
rowRef.current.measureInWindow((x, y) => {
|
||||
const top = (y || 0) + 45;
|
||||
setMenuPos(top);
|
||||
onModify?.(project, top);
|
||||
});
|
||||
return;
|
||||
} catch (error) {
|
||||
// Fallback to layout-derived position
|
||||
}
|
||||
}
|
||||
|
||||
onModify?.(project, menuPos);
|
||||
};
|
||||
const coverUri =
|
||||
project?.coverUrl ||
|
||||
project?.coverUri ||
|
||||
(typeof project?.cover === "string" ? project.cover : project?.cover?.uri);
|
||||
const title = project?.title || "Sans titre";
|
||||
const formattedDate = formatDate(project?.updatedAt || project?.createdAt);
|
||||
|
||||
return (
|
||||
<Pressable
|
||||
ref={rowRef}
|
||||
onPress={() => onSelect(project)}
|
||||
onLayout={(event) => setLayout(event.nativeEvent.layout)}
|
||||
style={styles.projectRowPressable}
|
||||
>
|
||||
<Image
|
||||
source={coverUri ? { uri: coverUri } : img.placeholder}
|
||||
style={styles.projectImage}
|
||||
/>
|
||||
<BlurView
|
||||
intensity={
|
||||
isSelected ? ROW_BLUR_SELECTED_INTENSITY : ROW_BLUR_INTENSITY
|
||||
}
|
||||
tint="dark"
|
||||
style={styles.projectInfo}
|
||||
>
|
||||
<View style={styles.projectTexts}>
|
||||
<Text style={styles.projectTitle} numberOfLines={1}>
|
||||
{title}
|
||||
</Text>
|
||||
<Text style={styles.projectSubtitle} numberOfLines={1}>
|
||||
{formattedDate ? `Modifié le ${formattedDate}` : "MusicLand"}
|
||||
</Text>
|
||||
</View>
|
||||
{isTitle ? (
|
||||
<Image
|
||||
source={icons.chevronDown}
|
||||
style={[styles.chevron, isOpen && styles.chevronOpen]}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
) : (
|
||||
<Pressable
|
||||
hitSlop={8}
|
||||
onPress={(event) => {
|
||||
event.stopPropagation?.();
|
||||
onPressMenu();
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
source={icons.threeDots}
|
||||
style={styles.moreIcon}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
</Pressable>
|
||||
)}
|
||||
</BlurView>
|
||||
</Pressable>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
maxWidth: 450,
|
||||
position: "relative",
|
||||
},
|
||||
dropdownBlur: {
|
||||
borderRadius: 15,
|
||||
padding: 8,
|
||||
position: "relative",
|
||||
},
|
||||
dropdownBlurDisabled: {
|
||||
opacity: 0.6,
|
||||
},
|
||||
dropdownBlurHidden: {
|
||||
opacity: 0,
|
||||
pointerEvents: "none",
|
||||
},
|
||||
triggerWrapper: {
|
||||
position: "relative",
|
||||
zIndex: 3,
|
||||
},
|
||||
dropdownOverlayBlur: {
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
borderRadius: 16,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 8,
|
||||
gap: 9,
|
||||
maxHeight: 400,
|
||||
zIndex: 4,
|
||||
elevation: 4,
|
||||
},
|
||||
dropdownOverlayContent: {
|
||||
maxHeight: 260,
|
||||
width: "100%",
|
||||
gap: 12,
|
||||
},
|
||||
dropdownList: {
|
||||
maxHeight: 220,
|
||||
width: "100%",
|
||||
},
|
||||
dropdownListContent: {
|
||||
paddingBottom: 4,
|
||||
},
|
||||
createButtonContainer: {
|
||||
width: 200,
|
||||
alignSelf: "center",
|
||||
},
|
||||
chevron: {
|
||||
width: 18,
|
||||
height: 18,
|
||||
tintColor: Palette.white,
|
||||
transform: [{ rotate: "0deg" }],
|
||||
},
|
||||
chevronOpen: {
|
||||
transform: [{ rotate: "180deg" }],
|
||||
},
|
||||
backdrop: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
zIndex: 1,
|
||||
backgroundColor: "transparent",
|
||||
},
|
||||
projectRowPressable: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 5,
|
||||
width: "100%",
|
||||
},
|
||||
projectInfo: {
|
||||
flex: 1,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
paddingHorizontal: 18,
|
||||
paddingVertical: 12,
|
||||
borderRadius: 10,
|
||||
},
|
||||
projectImage: {
|
||||
width: 60,
|
||||
height: 60,
|
||||
borderRadius: 8,
|
||||
},
|
||||
projectTexts: {
|
||||
flex: 1,
|
||||
gap: 4,
|
||||
},
|
||||
projectTitle: {
|
||||
fontSize: 15,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterSemiBold,
|
||||
},
|
||||
projectSubtitle: {
|
||||
fontSize: 13,
|
||||
color: "rgba(255, 255, 255, 0.7)",
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
},
|
||||
moreIcon: {
|
||||
width: 18,
|
||||
height: 18,
|
||||
tintColor: Palette.white,
|
||||
transform: [{ rotate: "90deg" }],
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,68 @@
|
||||
import React from "react";
|
||||
import { Alert, Pressable, Platform, Text } from "react-native";
|
||||
import { BlurView } from "expo-blur";
|
||||
import { Palette } from "../styles";
|
||||
import { FONT_FAMILY } from "../styles/Fonts";
|
||||
import { icons } from "../assets";
|
||||
import { Image } from "expo-image";
|
||||
|
||||
export default function ShareBtnWeb({ style }) {
|
||||
const handleShare = () => {
|
||||
const shareUrl =
|
||||
typeof window !== "undefined" ? window.location.href : undefined;
|
||||
if (typeof navigator !== "undefined" && navigator.share) {
|
||||
navigator
|
||||
.share({
|
||||
title: "MusicLand",
|
||||
text: "Découvre mon expérience sur MusicLand",
|
||||
...(shareUrl ? { url: shareUrl } : {}),
|
||||
})
|
||||
.catch(() => {
|
||||
Alert.alert("Partage", "Le partage a été annulé.");
|
||||
});
|
||||
return;
|
||||
}
|
||||
Alert.alert("Partage", "Fonctionnalité disponible prochainement.");
|
||||
};
|
||||
|
||||
return (
|
||||
<Pressable
|
||||
style={{
|
||||
...style,
|
||||
}}
|
||||
onPress={handleShare}
|
||||
>
|
||||
<BlurView
|
||||
intensity={Platform.OS === "web" ? 35 : 30}
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 12,
|
||||
paddingHorizontal: 24,
|
||||
paddingVertical: 12,
|
||||
borderRadius: 999,
|
||||
backgroundColor: "rgba(255, 255, 255, 0.1)",
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterMedium,
|
||||
}}
|
||||
>
|
||||
Partager l'expérience
|
||||
</Text>
|
||||
<Image
|
||||
source={icons.share}
|
||||
style={{
|
||||
width: 18,
|
||||
height: 18,
|
||||
tintColor: Palette.white,
|
||||
}}
|
||||
contentFit="contain"
|
||||
/>
|
||||
</BlurView>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user