leonm/musicland
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add - layout web

Browse Source
This commit is contained in:
Victor
2025-09-17 16:03:50 +02:00
parent 2ef16e4be7
commit 3acfea7551
13 changed files with 290 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Input.js
+98 -106
View File
@@ -7,23 +7,23 @@ import {
Image,
Keyboard,
Platform,
} 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";
} 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 { 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,12 +33,12 @@ 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,
@@ -47,22 +47,22 @@ const Input = ({
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,25 +72,23 @@ 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"
// }
@@ -103,11 +101,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,
}
: {}),
@@ -117,27 +115,25 @@ 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" ? (
{/* {type === "countryPicker" ? (
<CountryPicker
countryCode={value}
onSelect={(country) => {
@@ -169,77 +165,77 @@ const Input = ({
},
}}
/>
) : (
<TextInput
ref={inputRef}
placeholder={placeholder}
placeholderTextColor={Palette.gray}
value={value}
onChangeText={setValue}
multiline={type === "textarea"}
editable={type !== "countryPicker"}
onFocus={() => setIsFocused(true)}
onBlur={() => setIsFocused(false)}
style={{
width: "100%",
...(isRoundedRectangle
? {
height: "100%",
flex: 1,
textAlignVertical: type === "textarea" ? "top" : "center",
}
: { textAlign: "center" }),
fontSize: 14,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
...(isWeb
? {
lineHeight: "auto",
}
: {}),
...textInputStyle,
}}
{...(type === "password"
) : */}
(
<TextInput
ref={inputRef}
placeholder={placeholder}
placeholderTextColor={Palette.gray}
value={value}
onChangeText={setValue}
multiline={type === 'textarea'}
editable={type !== 'countryPicker'}
onFocus={() => setIsFocused(true)}
onBlur={() => setIsFocused(false)}
style={{
width: '100%',
...(isRoundedRectangle
? {
secureTextEntry: !showPassword,
autoCapitalize: "none",
autoCompleteType: "password",
textContentType: "password",
height: '100%',
flex: 1,
textAlignVertical: type === 'textarea' ? 'top' : 'center',
}
: {})}
{...(type === "email"
: { textAlign: 'center' }),
fontSize: 14,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
...(isWeb
? {
keyboardType: "email-address",
autoCapitalize: "none",
autoCompleteType: "email",
textContentType: "emailAddress",
lineHeight: 'auto',
}
: {})}
keyboardType={isNumeric ? "numeric" : "default"}
keyboardAppearance="dark"
inputAccessoryViewID={inputAccessoryViewID}
{...textInputProps}
/>
: {}),
...textInputStyle,
}}
{...(type === 'password'
? {
secureTextEntry: !showPassword,
autoCapitalize: 'none',
autoCompleteType: 'password',
textContentType: 'password',
}
: {})}
{...(type === 'email'
? {
keyboardType: 'email-address',
autoCapitalize: 'none',
autoCompleteType: 'email',
textContentType: 'emailAddress',
}
: {})}
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) => (
@@ -251,36 +247,32 @@ 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>
src/config/initialGlobalState.js
+3 -1
View File
@@ -1,10 +1,12 @@
import { Palette } from "../styles";
import { Palette } from '../styles';
export default {
currentUID: null,
currentUserData: null,
currentUserRoles: [],
webBackgroundImg: null,
_config: {
colors: {
primary: Palette.primary,
src/layouts/AppLayout.js
+53 -19
View File
@@ -1,41 +1,75 @@
import { View } from "react-native";
import { Motion } from "@legendapp/motion";
import { View, Image } from 'react-native';
import { useGlobal } from 'reactn';
import { Motion } from '@legendapp/motion';
import useLayoutType from "../hooks/useLayoutType";
import useLayoutType from '../hooks/useLayoutType';
import Home from "../screens/Home";
import Home from '../screens/Home';
import { Style } from "../styles";
import { Palette, Style } from '../styles';
import { background as backgrounds } from '../assets';
export default ({ currentUID = null, children }) => {
const { isWeb = false } = useLayoutType();
const sharedPanelStyle = {
...(isWeb ? {} : {}),
};
// Web: full-screen background with a centered content area (30% width)
const [webBackgroundImg] = useGlobal('webBackgroundImg');
const mainContainer = {
flex: 1,
...(isWeb ? { maxHeight: "100svh" } : {}),
};
if (isWeb) {
return (
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
minHeight: '100svh',
position: 'relative',
}}>
{/* Full-viewport background for web */}
<Image
source={webBackgroundImg || backgrounds.homeBG}
resizeMode='cover'
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
}}
/>
{/* Centered content column (phone-like width) */}
<View
style={{
width: '30%',
minWidth: 360,
maxWidth: 520,
height: '100svh',
backgroundColor: 'transparent',
}}>
<View style={{ flex: 1 }}>{children}</View>
</View>
</View>
);
}
// Native / non-web: original layout
const sharedPanelStyle = {};
return (
<View
style={{
...mainContainer,
flexDirection: "row-reverse",
}}
>
flex: 1,
flexDirection: 'row-reverse',
}}>
<View
style={{
flex: 2,
position: "relative",
position: 'relative',
...Style.defaultBorder,
borderTopWidth: 0,
borderBottomWidth: 0,
...sharedPanelStyle,
}}
>
}}>
{children}
</View>
</View>
src/layouts/Page.js
+41 -31
View File
@@ -1,20 +1,21 @@
/* eslint-disable react/display-name */
import React, { useState } from "reactn";
import { Image, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Motion } from "@legendapp/motion";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import React, { useState, useEffect } from 'reactn';
import { setGlobal } from 'reactn';
import { Image, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Motion } from '@legendapp/motion';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import { responsiveHeight } from "../actions/responsiveSizes.js";
import { responsiveHeight } from '../actions/responsiveSizes.js';
import { Fonts, gutters } from "../styles";
import { Fonts, gutters } from '../styles';
import BaseHeader from "../components/BaseHeader";
import NavigateHeader from "../components/NavigateHeader";
import BaseHeader from '../components/BaseHeader';
import NavigateHeader from '../components/NavigateHeader';
import { isDesktop, isWeb } from "../hooks/useLayoutType.js";
import { useUserData } from "../providers/UserDataProvider.js";
import { background } from "../assets/index.js";
import { isDesktop, isWeb } from '../hooks/useLayoutType.js';
import { useUserData } from '../providers/UserDataProvider.js';
import { background } from '../assets/index.js';
export default ({
children,
@@ -22,11 +23,11 @@ export default ({
topStickyContent = null,
bottomStickyContent = null,
title = "",
title = '',
rightComponent = null,
containerType = "SAFE_AREA_VIEW",
headerType = "BASE",
containerType = 'SAFE_AREA_VIEW',
headerType = 'BASE',
containerStyle = {},
headerStyle = {},
@@ -44,7 +45,7 @@ export default ({
const [scrollPosition, setScrollPosition] = useState(0);
const PageContainer =
containerType === "SAFE_AREA_VIEW" ? SafeAreaView : View;
containerType === 'SAFE_AREA_VIEW' ? SafeAreaView : View;
const ContentContainer = scrollEnabled ? KeyboardAwareScrollView : View;
@@ -53,28 +54,38 @@ export default ({
setScrollPosition(position);
};
// On web, push the background image to a global so AppLayout can render
// a full-screen background behind the phone frame. We avoid rendering
// the per-screen background inside the phone on web to prevent duplication.
useEffect(() => {
if (isWeb && backgroundImg) {
setGlobal({ webBackgroundImg: backgroundImg });
}
}, [isWeb, backgroundImg]);
return (
<>
<Image
source={backgroundImg}
style={{ width: "100%", height: "100%", position: "absolute" }}
/>
{!isWeb && (
<Image
source={backgroundImg}
style={{ width: '100%', height: '100%', position: 'absolute' }}
/>
)}
<PageContainer
{...(containerType === "SAFE_AREA_VIEW" ? { edges: ["top"] } : {})}
{...(containerType === 'SAFE_AREA_VIEW' ? { edges: ['top'] } : {})}
style={{
height: "100%",
height: '100%',
paddingTop: isWeb ? gutters / 2 : 0,
padding: gutters,
paddingBottom: 0,
...(isWeb ? { maxHeight: "100vh" } : {}),
...(isWeb ? { maxHeight: '100vh', width: '100%' } : {}),
...(!currentUID && isDesktop
? { maxWidth: 500, alignSelf: "center" }
? { maxWidth: 500, alignSelf: 'center' }
: {}),
...containerStyle,
}}
>
{headerType !== "NONE" ? (
headerType === "BASE" ? (
}}>
{headerType !== 'NONE' ? (
headerType === 'BASE' ? (
<BaseHeader containerStyle={{ ...headerStyle }} />
) : (
<NavigateHeader
@@ -98,10 +109,9 @@ export default ({
scrollEventThrottle: 80,
showsVerticalScrollIndicator: false,
contentContainerStyle: { paddingBottom: responsiveHeight(55) },
keyboardDismissMode: "on-drag",
keyboardDismissMode: 'on-drag',
}
: {})}
>
: {})}>
{children}
</ContentContainer>
</PageContainer>
src/navigation/ChatStack.js
+9
View File
@@ -1,4 +1,5 @@
import React from "react";
import { Platform } from "react-native";
import { createStackNavigator } from "@react-navigation/stack";
import { Palette } from "../styles";
@@ -6,6 +7,8 @@ import { Routes } from "./Routes";
import Chat from "../screens/Chat";
const isWeb = Platform.OS === "web";
const screenOptions = {
headerShown: false,
cardOverlayEnabled: true,
@@ -14,6 +17,12 @@ const screenOptions = {
},
headerTitleAlign: "center",
headerBackTitleVisible: false,
...(isWeb
? {
animationEnabled: false,
gestureEnabled: false,
}
: {}),
};
const HomeStack = createStackNavigator();
src/navigation/HomeStack.js
+9
View File
@@ -1,4 +1,5 @@
import React from "react";
import { Platform } from "react-native";
import { createStackNavigator } from "@react-navigation/stack";
import { Palette } from "../styles";
@@ -7,6 +8,8 @@ import { Routes } from "./Routes";
import Home from "../screens/Home";
import CreateSongs from "../screens/CreateSongs";
const isWeb = Platform.OS === "web";
const screenOptions = {
headerShown: false,
cardOverlayEnabled: true,
@@ -15,6 +18,12 @@ const screenOptions = {
},
headerTitleAlign: "center",
headerBackTitleVisible: false,
...(isWeb
? {
animationEnabled: false,
gestureEnabled: false,
}
: {}),
};
const HomeStack = createStackNavigator();
src/navigation/MainStack.js
+10
View File
@@ -1,4 +1,5 @@
import React from "react";
import { Platform } from "react-native";
import { createStackNavigator } from "@react-navigation/stack";
import { Palette } from "../styles";
import { Routes } from "./Routes";
@@ -59,6 +60,8 @@ import CreatePseudo from "../screens/CreatePseudo";
import { ChooseCoverType } from "../screens/cover/ChooseCoverType";
import ValidateCover from "../screens/cover/ValidateCover";
const isWeb = Platform.OS === "web";
const screenOptions = {
headerShown: false,
cardOverlayEnabled: true,
@@ -68,6 +71,13 @@ const screenOptions = {
headerTitleStyle: {},
headerTitleAlign: "center",
headerBackTitleVisible: false,
...(isWeb
? {
// Avoid web-specific pointerEvents issues by disabling animations/gestures
animationEnabled: false,
gestureEnabled: false,
}
: {}),
};
const MainStack = createStackNavigator();
src/navigation/SettingsStack.js
+9
View File
@@ -1,4 +1,5 @@
import React from "react";
import { Platform } from "react-native";
import { createStackNavigator } from "@react-navigation/stack";
import { Palette } from "../styles";
@@ -8,6 +9,8 @@ import ProjectSettings from "../screens/ProjectSettings";
import AccountSettings from "../screens/AccountSettings";
import Settings from "../screens/Profile/Settings";
const isWeb = Platform.OS === "web";
const screenOptions = {
headerShown: false,
cardOverlayEnabled: true,
@@ -16,6 +19,12 @@ const screenOptions = {
},
headerTitleAlign: "center",
headerBackTitleVisible: false,
...(isWeb
? {
animationEnabled: false,
gestureEnabled: false,
}
: {}),
};
const HomeStack = createStackNavigator();
src/navigation/TaskStack.js
+9
View File
@@ -1,4 +1,5 @@
import React from "react";
import { Platform } from "react-native";
import { createStackNavigator } from "@react-navigation/stack";
import { Palette } from "../styles";
@@ -6,6 +7,8 @@ import { Routes } from "./Routes";
import Tasks from "../screens/Tasks";
const isWeb = Platform.OS === "web";
const screenOptions = {
headerShown: false,
cardOverlayEnabled: true,
@@ -14,6 +17,12 @@ const screenOptions = {
},
headerTitleAlign: "center",
headerBackTitleVisible: false,
...(isWeb
? {
animationEnabled: false,
gestureEnabled: false,
}
: {}),
};
const HomeStack = createStackNavigator();