start refacto home and fix description
This commit is contained in:
Thomas Demirdjian
+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>
|
||||
|
||||
Reference in New Issue
Block a user