From 8cebf4e58444b439e1490b6626ed177fcd4cac94 Mon Sep 17 00:00:00 2001 From: mattdimegs Date: Thu, 29 Aug 2024 22:04:58 -0400 Subject: [PATCH 1/2] Update Tested Registration - Needs CSS --- app/helpers.jsx | 144 ++++++++++++++++++++++++++++++++++----- app/register.jsx | 19 +++--- components/Container.tsx | 20 ++++++ components/Row.tsx | 24 +++++++ package-lock.json | 10 --- package.json | 1 - 6 files changed, 180 insertions(+), 38 deletions(-) create mode 100644 components/Container.tsx create mode 100644 components/Row.tsx diff --git a/app/helpers.jsx b/app/helpers.jsx index eab6d35..d15e9e4 100644 --- a/app/helpers.jsx +++ b/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 = ({ - label, - icon, +export const TestLoginDropDownInput = ({ + label, + isOpen, + setOpen, selectedValue, onValueChange, - items, + menu }) => { return ( - + {label} - - {items.map((provider) => { - return - })} - - + { + // LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut) + LayoutAnimation.configureNext(LayoutAnimation.create(200, 'easeInEaseOut', 'opacity')) + isOpen ? setOpen(false) : setOpen(true); + }}> + + + + {selectedValue ? providerConversion[selectedValue] : menu.placeholder} + + + {isOpen && + {menu.dropdownList.map((subMenu, index) => ( + + + {subMenu.label} + + + ))} + } + + ) } \ No newline at end of file diff --git a/app/register.jsx b/app/register.jsx index b07e0fa..7ed4398 100644 --- a/app/register.jsx +++ b/app/register.jsx @@ -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} /> - { + return ( + {children} + ) +}; \ No newline at end of file diff --git a/components/Row.tsx b/components/Row.tsx new file mode 100644 index 0000000..f6b0424 --- /dev/null +++ b/components/Row.tsx @@ -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 ( + + {children} + + ) +}; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index efa38ac..61207e4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 8017cf3..20b8c86 100644 --- a/package.json +++ b/package.json @@ -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", From f977a2acf965cfe748fdc3ad0e36a7f5d74cd6f3 Mon Sep 17 00:00:00 2001 From: Matt DiMeglio Date: Fri, 30 Aug 2024 01:56:58 -0400 Subject: [PATCH 2/2] Register Dropdown Menu Contents Added Checkmark for Selected Fixed Spacing Added Borders --- app/{helpers.jsx => generalHelpers.jsx} | 95 ++++++++++++++++++------- app/login.jsx | 2 +- app/register.jsx | 7 +- 3 files changed, 74 insertions(+), 30 deletions(-) rename app/{helpers.jsx => generalHelpers.jsx} (71%) diff --git a/app/helpers.jsx b/app/generalHelpers.jsx similarity index 71% rename from app/helpers.jsx rename to app/generalHelpers.jsx index d15e9e4..8c3f822 100644 --- a/app/helpers.jsx +++ b/app/generalHelpers.jsx @@ -1,12 +1,9 @@ import styled from 'styled-components'; -import Constants from 'expo-constants'; -import { View, Text, LayoutAnimation, Image, TextInput, TouchableOpacity, TouchableNativeFeedback } from 'react-native'; +import { View, Text, LayoutAnimation, Image, TextInput, TouchableOpacity, TouchableNativeFeedback, ScrollView } from 'react-native'; import { Ionicons } from '@expo/vector-icons'; import { Row } from '../components/Row'; import { Container } from '../components/Container'; -const StatusBarHeight = Constants.statusBarHeight; - export const StyledContainer = styled.View` flex: 1; padding: 25px; @@ -66,6 +63,19 @@ export const RightIcon = styled.TouchableOpacity` z-index: 1; `; +export const DropdownArrow = styled.TouchableOpacity` + right: 15px; + position: absolute; + z-index: 1; +`; + +export const SelectedCheckmark = styled.View` + right: 4px; + top: 4px; + position: absolute; + z-index: 1; +`; + export const StyledButton = styled.TouchableOpacity` padding: 15px; background-color: red; @@ -229,7 +239,7 @@ export const LoginTextInput = ({ ) } -export const TestLoginDropDownInput = ({ +export const RegisterDropdownInput = ({ label, isOpen, setOpen, @@ -243,18 +253,18 @@ export const TestLoginDropDownInput = ({ { - // LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut) - LayoutAnimation.configureNext(LayoutAnimation.create(200, 'easeInEaseOut', 'opacity')) + LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); + LayoutAnimation.configureNext(LayoutAnimation.create(200, 'easeInEaseOut', 'opacity')); isOpen ? setOpen(false) : setOpen(true); }}> {selectedValue ? providerConversion[selectedValue] : menu.placeholder} + { + LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); + LayoutAnimation.configureNext(LayoutAnimation.create(200, 'easeInEaseOut', 'opacity')); + isOpen ? setOpen(false) : setOpen(true); + }} + > + + - {isOpen && - {menu.dropdownList.map((subMenu, index) => ( - - - {subMenu.label} - - - ))} - } + {isOpen && + {menu.dropdownList.map((subMenu, index) => { + return ( + { + onValueChange(subMenu.value); + LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); + LayoutAnimation.configureNext(LayoutAnimation.create(200, 'easeInEaseOut', 'opacity')); + setOpen(false); + }} + > + + {subMenu.label} + {selectedValue === subMenu.value && + + + + } + + + ) + })} + } ) diff --git a/app/login.jsx b/app/login.jsx index 82b60ee..6f186c3 100644 --- a/app/login.jsx +++ b/app/login.jsx @@ -19,7 +19,7 @@ import { ExtraText, TextLinkContent, LoginTextInput -} from './helpers.jsx'; +} from './generalHelpers.jsx'; export default function TabLayout() { const [hidePassword, setHidePassword] = useState(true); diff --git a/app/register.jsx b/app/register.jsx index 7ed4398..9e952e1 100644 --- a/app/register.jsx +++ b/app/register.jsx @@ -18,9 +18,8 @@ import { ButtonText, MessageBox, LoginTextInput, - LoginDropdownInput, - TestLoginDropDownInput, -} from './helpers.jsx'; + RegisterDropdownInput, +} from './generalHelpers.jsx'; export default function Register() { @@ -109,7 +108,7 @@ export default function Register() { keyboardType="number-pad" maxLength={14} /> -