Update Tested Registration - Needs CSS
This commit is contained in:
mattdimegs
parent
ef3ea05489
commit
8cebf4e584
6 changed files with 180 additions and 38 deletions
142
app/helpers.jsx
142
app/helpers.jsx
|
|
@ -1,9 +1,9 @@
|
|||
import styled from 'styled-components';
|
||||
import Constants from 'expo-constants';
|
||||
import { View, Text, Image, TextInput, TouchableOpacity } from 'react-native';
|
||||
import { View, Text, LayoutAnimation, Image, TextInput, TouchableOpacity, TouchableNativeFeedback } from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { Picker } from '@react-native-picker/picker';
|
||||
import { Children } from 'react';
|
||||
import { Row } from '../components/Row';
|
||||
import { Container } from '../components/Container';
|
||||
|
||||
const StatusBarHeight = Constants.statusBarHeight;
|
||||
|
||||
|
|
@ -117,6 +117,82 @@ export const TextLinkContent = styled.Text`
|
|||
font-size: 15px;
|
||||
`
|
||||
|
||||
const ProviderDropdown = styled.TouchableOpacity`
|
||||
background-color: #E5E7EB;
|
||||
padding: 15px 55px 15px 55px;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
height: 60px;
|
||||
margin-vertical: 3px;
|
||||
margin-bottom: 10px;
|
||||
`
|
||||
|
||||
export const providerMenu = {
|
||||
menuName: 'providerList',
|
||||
placeholder: 'Select Provider',
|
||||
iconColor: 'red',
|
||||
iconName: 'globe-outline',
|
||||
dropdownList: [
|
||||
{ label: 'AllTel', value: 'alltel' },
|
||||
{ label: 'AT&T', value: 'att' },
|
||||
{ label: 'AT&T MMS', value: 'attmms' },
|
||||
{ label: 'Boost', value: 'boost' },
|
||||
{ label: 'Boost MMS', value: 'boostmms' },
|
||||
{ label: 'C Spire', value: 'c' },
|
||||
{ label: 'Consumer Cellular', value: 'consumer' },
|
||||
{ label: 'Cricket', value: 'cricket' },
|
||||
{ label: 'Cricket MMS', value: 'cricketmms' },
|
||||
{ label: 'Google Fi', value: 'googlefi' },
|
||||
{ label: 'Mint Mobile', value: 'mint' },
|
||||
{ label: 'MetroPCS', value: 'metro' },
|
||||
{ label: 'Optimum', value: 'optimum' },
|
||||
{ label: 'Republic Wireless', value: 'republic' },
|
||||
{ label: 'Spectrum', value: 'spectrum' },
|
||||
{ label: 'Sprint', value: 'sprint' },
|
||||
{ label: 'Sprint MMS', value: 'sprintmms' },
|
||||
{ label: 'Ting', value: 'ting' },
|
||||
{ label: 'T-Mobile', value: 'tmobile' },
|
||||
{ label: 'TracFone', value: 'tracfone' },
|
||||
{ label: 'US Cellular', value: 'us' },
|
||||
{ label: 'US Cellular MMS', value: 'usmms' },
|
||||
{ label: 'Verizon', value: 'verizon' },
|
||||
{ label: 'Verizon MMS', value: 'verizonmms' },
|
||||
{ label: 'VerizonBiz', value: 'verizonbiz' },
|
||||
{ label: 'Virgin', value: 'virgin' },
|
||||
{ label: 'Virgin MMS', value: 'virginmms' },
|
||||
]
|
||||
}
|
||||
|
||||
const providerConversion = {
|
||||
alltel: 'AllTel',
|
||||
att: 'AT&T',
|
||||
attmms: 'AT&T MMS',
|
||||
boost: 'Boost',
|
||||
boostmms: 'Boost MMS',
|
||||
c: 'C Spire',
|
||||
consumer: 'Consumer Cellular',
|
||||
cricket: 'Cricket',
|
||||
cricketmms: 'Cricket MMS',
|
||||
googlefi: 'Google Fi',
|
||||
mint: 'Mint Mobile',
|
||||
metro: 'MetroPCS',
|
||||
optimum: 'Optimum',
|
||||
republic: 'Republic Wireless',
|
||||
spectrum: 'Spectrum',
|
||||
sprint: 'Sprint',
|
||||
sprintmms: 'Sprint MMS',
|
||||
ting: 'Ting',
|
||||
tmobile: 'T-Mobile',
|
||||
tracfone: 'TracFone',
|
||||
us: 'US Cellular',
|
||||
usmms: 'US Cellular MMS',
|
||||
verizon: 'Verizon',
|
||||
verizonmms: 'Verizon MMS',
|
||||
verizonbiz: 'VerizonBiz',
|
||||
virgin: 'Virgin',
|
||||
virginmms: 'Virgin MMS',
|
||||
}
|
||||
|
||||
export const PageHeader = ({
|
||||
children
|
||||
}) => {
|
||||
|
|
@ -153,24 +229,58 @@ export const LoginTextInput = ({
|
|||
)
|
||||
}
|
||||
|
||||
export const LoginDropdownInput = ({
|
||||
export const TestLoginDropDownInput = ({
|
||||
label,
|
||||
icon,
|
||||
isOpen,
|
||||
setOpen,
|
||||
selectedValue,
|
||||
onValueChange,
|
||||
items,
|
||||
menu
|
||||
}) => {
|
||||
return (
|
||||
<View>
|
||||
<Container>
|
||||
<StyledInputLabel>{label}</StyledInputLabel>
|
||||
<Picker
|
||||
selectedValue={selectedValue}
|
||||
onValueChange={onValueChange}
|
||||
>
|
||||
{items.map((provider) => {
|
||||
return <Picker.Item label={provider.label} value={provider.value} key={provider.value} />
|
||||
})}
|
||||
</Picker>
|
||||
</View>
|
||||
<TouchableOpacity activeOpacity={0.8} key={`${menu.menuName}2`}
|
||||
style={{
|
||||
backgroundColor: '#E5E7EB',
|
||||
// marginHorizontal: constant.SPACING / 1.7,
|
||||
// marginVertical: constant.SPACING / 2.5,
|
||||
borderRadius: '5px',
|
||||
}}
|
||||
onPress={() => {
|
||||
// LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
|
||||
LayoutAnimation.configureNext(LayoutAnimation.create(200, 'easeInEaseOut', 'opacity'))
|
||||
isOpen ? setOpen(false) : setOpen(true);
|
||||
}}>
|
||||
<Row style={{
|
||||
// paddingHorizontal: constant.SPACING / 1.5,
|
||||
// paddingVertical: constant.SPACING / 1.2,
|
||||
}}>
|
||||
<Ionicons
|
||||
name={menu.iconName}
|
||||
size={30}
|
||||
color={menu.iconColor}
|
||||
/>
|
||||
<Text style={{
|
||||
// fontSize: constant.textFontSize,
|
||||
// paddingHorizontal: constant.SPACING
|
||||
}}>
|
||||
{selectedValue ? providerConversion[selectedValue] : menu.placeholder}
|
||||
</Text>
|
||||
</Row>
|
||||
{isOpen && <View style={{ borderRadius: '5px', backgroundColor: '#E5E7EB' }}>
|
||||
{menu.dropdownList.map((subMenu, index) => (
|
||||
<TouchableNativeFeedback key={index}>
|
||||
<View style={{
|
||||
// paddingHorizontal: constant.SPACING,
|
||||
// paddingVertical: constant.SPACING / 1.5,
|
||||
}}>
|
||||
<Text>{subMenu.label}</Text>
|
||||
</View>
|
||||
</TouchableNativeFeedback>
|
||||
))}
|
||||
</View>}
|
||||
</TouchableOpacity>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
|
@ -6,6 +6,7 @@ import { useFormik } from 'formik';
|
|||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import {
|
||||
providerMenu,
|
||||
PageHeader,
|
||||
StyledContainer,
|
||||
InnerContainer,
|
||||
|
|
@ -17,21 +18,17 @@ import {
|
|||
ButtonText,
|
||||
MessageBox,
|
||||
LoginTextInput,
|
||||
LoginDropdownInput
|
||||
LoginDropdownInput,
|
||||
TestLoginDropDownInput,
|
||||
} from './helpers.jsx';
|
||||
|
||||
const providers = [
|
||||
{label: 'Verizon', value: 'verizon'},
|
||||
{label: 'AT&T', value: 'att'},
|
||||
{label: 'T-Mobile', value: 'tmobile'}
|
||||
]
|
||||
|
||||
|
||||
export default function Register() {
|
||||
|
||||
const [providerDropdownOpen, setProviderDropdownOpen] = useState(false);
|
||||
const [hidePassword, setHidePassword] = useState(true);
|
||||
const [registerButtonDisabled, setRegisterButtonDisabled] = useState(true);
|
||||
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
firstName: '',
|
||||
|
|
@ -112,11 +109,13 @@ export default function Register() {
|
|||
keyboardType="number-pad"
|
||||
maxLength={14}
|
||||
/>
|
||||
<LoginDropdownInput
|
||||
<TestLoginDropDownInput
|
||||
label="Cellular Provider"
|
||||
isOpen={providerDropdownOpen}
|
||||
setOpen={setProviderDropdownOpen}
|
||||
selectedValue={formik.values.provider}
|
||||
onValueChange={formik.handleChange('provider')}
|
||||
items={providers}
|
||||
menu={providerMenu}
|
||||
/>
|
||||
<LoginTextInput
|
||||
label="Email Address"
|
||||
|
|
|
|||
20
components/Container.tsx
Normal file
20
components/Container.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import { View, ViewStyle } from "react-native";
|
||||
|
||||
interface ContainerProps {
|
||||
children?: React.ReactNode;
|
||||
backgroundColor?: string;
|
||||
style?: ViewStyle;
|
||||
}
|
||||
export const Container = ({
|
||||
children,
|
||||
backgroundColor,
|
||||
style,
|
||||
}: ContainerProps) => {
|
||||
return (
|
||||
<View style={[
|
||||
{ flex: 1 },
|
||||
{ backgroundColor },
|
||||
style
|
||||
]}>{children}</View>
|
||||
)
|
||||
};
|
||||
24
components/Row.tsx
Normal file
24
components/Row.tsx
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import { View, ViewStyle } from "react-native";
|
||||
import { ReactNode } from "react";
|
||||
|
||||
interface RowProps {
|
||||
children?: ReactNode | ReactNode[];
|
||||
backgroundColor?: string;
|
||||
style?: ViewStyle | ViewStyle[];
|
||||
}
|
||||
|
||||
export const Row = ({
|
||||
children,
|
||||
backgroundColor,
|
||||
style,
|
||||
}: RowProps) => {
|
||||
return (
|
||||
<View style={[
|
||||
{ flexDirection: 'row', alignItems: 'center' },
|
||||
{ backgroundColor },
|
||||
style
|
||||
]}>
|
||||
{children}
|
||||
</View>
|
||||
)
|
||||
};
|
||||
10
package-lock.json
generated
10
package-lock.json
generated
|
|
@ -9,7 +9,6 @@
|
|||
"version": "1.0.1",
|
||||
"dependencies": {
|
||||
"@expo/vector-icons": "^14.0.2",
|
||||
"@react-native-picker/picker": "2.7.5",
|
||||
"@react-navigation/native": "^6.0.2",
|
||||
"expo": "~51.0.24",
|
||||
"expo-constants": "~16.0.2",
|
||||
|
|
@ -5892,15 +5891,6 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-native-picker/picker": {
|
||||
"version": "2.7.5",
|
||||
"resolved": "https://registry.npmjs.org/@react-native-picker/picker/-/picker-2.7.5.tgz",
|
||||
"integrity": "sha512-vhMaOLkXSUb+YKVbukMJToU4g+89VMhBG2U9+cLYF8X8HtFRidrHjohGqT8/OyesDuKIXeLIP+UFYI9Q9CRA9Q==",
|
||||
"peerDependencies": {
|
||||
"react": "*",
|
||||
"react-native": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-native/assets-registry": {
|
||||
"version": "0.74.85",
|
||||
"resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.74.85.tgz",
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@expo/vector-icons": "^14.0.2",
|
||||
"@react-native-picker/picker": "2.7.5",
|
||||
"@react-navigation/native": "^6.0.2",
|
||||
"expo": "~51.0.24",
|
||||
"expo-constants": "~16.0.2",
|
||||
|
|
|
|||
Loading…
Reference in a new issue