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

feat: fixes and formatter

Browse Source
This commit is contained in:
Leon
2026-01-12 16:01:32 +01:00
parent 85c6084351
commit 11e632acff
353 changed files with 23315 additions and 27361 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Input.js
+64 -76
View File
@@ -1,30 +1,22 @@
import { useState } from "react";
import {
Image,
InputAccessoryView,
Keyboard,
Pressable,
Text,
TextInput,
View,
} from "react-native";
import { useState } from 'react'
import { Image, InputAccessoryView, Keyboard, Pressable, Text, TextInput, View } from 'react-native'
// 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 { icons } from "../assets";
import { Fonts, Palette, Style, gutters } from "../styles";
import { FONT_FAMILY } from "../styles/Fonts";
import { icons } from '../assets'
import { Fonts, Palette, Style, gutters } from '../styles'
import { FONT_FAMILY } from '../styles/Fonts'
import { BlurView } from "expo-blur";
import EyeSlashSVG from "../assets/UI/EyeSlashSVG";
import EyeSVG from "../assets/UI/EyeSVG";
import { GOOGLE_API_KEY } from "../data/keys";
import { isWeb } from "../hooks/useLayoutType";
import { BlurView } from 'expo-blur'
import EyeSlashSVG from '../assets/UI/EyeSlashSVG'
import EyeSVG from '../assets/UI/EyeSVG'
import { GOOGLE_API_KEY } from '../data/keys'
import { isWeb } from '../hooks/useLayoutType'
const Input = ({
inputRef = null,
label = "",
placeholder = "",
label = '',
placeholder = '',
containerStyle = {},
textInputStyle = {},
@@ -34,48 +26,46 @@ 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 [isFocused, setIsFocused] = useState(false)
const [showPassword, setShowPassword] = useState(false)
const isDefaultLayout = layout === "default";
const isDefaultLayout = layout === 'default'
const mainColor =
theme === "radioactiv" ? Palette.radioactivGreen : Palette.primary;
const mainColor = theme === 'radioactiv' ? Palette.radioactivGreen : Palette.primary
const isRoundedRectangle =
["textarea", "coinAmount"].includes(type) || layout === "default";
const isRoundedRectangle = ['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,
});
})
const ContainerView = isBlur ? BlurView : View;
const ContainerView = isBlur ? BlurView : View
const resolvedKeyboardType =
textInputProps?.keyboardType ??
(isNumeric ? "numeric" : type === "email" ? "email-address" : "default");
(isNumeric ? 'numeric' : type === 'email' ? 'email-address' : 'default')
return (
<>
<View
style={{
width: "100%",
width: '100%',
...containerStyle,
gap: 4,
}}
@@ -106,11 +96,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,
}
: {}),
@@ -120,68 +110,66 @@ const Input = ({
borderBottomColor: mainColor,
borderBottomWidth: 1,
}),
...(borderType === "dashed"
...(borderType === 'dashed'
? {
borderStyle: "dashed",
borderColor: isFocused
? Palette.primary
: Palette.transparentPrimary,
borderStyle: 'dashed',
borderColor: isFocused ? Palette.primary : Palette.transparentPrimary,
borderWidth: 1,
}
: {}),
width: "100%",
width: '100%',
}}
>
{type === "search" ? (
{type === 'search' ? (
<Image
source={icons.search}
style={[Style.iconDefault, { marginRight: 10 }]}
resizeMode="contain"
/>
) : null}
{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'
? {
autoCapitalize: "none",
autoCompleteType: "email",
textContentType: "emailAddress",
autoCapitalize: 'none',
autoCompleteType: 'email',
textContentType: 'emailAddress',
}
: {})}
keyboardType={resolvedKeyboardType}
@@ -190,21 +178,21 @@ const Input = ({
{...textInputProps}
/>
)}
{type === "password" ? (
{type === 'password' ? (
<Pressable onPress={() => setShowPassword(!showPassword)}>
{showPassword ? <EyeSVG /> : <EyeSlashSVG />}
</Pressable>
) : null}
</ContainerView>
{type === "autoCompleteAddress" &&
{type === 'autoCompleteAddress' &&
places?.[0]?.description &&
places?.[0]?.description !== value &&
places.map((place, index) => (
<Pressable
key={index}
onPress={() => {
setValue(place?.description);
setValue(place?.description)
}}
style={{
...Style.containerSpaceBetween,
@@ -216,19 +204,19 @@ const Input = ({
...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,
@@ -245,7 +233,7 @@ const Input = ({
</InputAccessoryView>
)}
</>
);
};
)
}
export { Input };
export { Input }