Skip to content

GitLab

Commit a276c4c1 authored by Lourenço Souza's avatar Lourenço Souza
Browse files

criando o header do mapa com integração com a FlightInformationModal

parent 90de7cbf
Hide whitespace changes
Inline Side-by-side
Showing
with 137 additions and 40 deletions
+137 -40
src/components/Header/header.tsx
View file @ a276c4c1
import React from 'react';
import React, { useContext, useState } from 'react';
import { useDrawerStatus } from '@react-navigation/drawer';
import { Context } from '../../context/AuthContext';
import FloatingButton from '../floatingButton/floatingButton';
import Bar from "../Bar/bar";
import { HeaderContainer, HeaderContent, ItemBox, TextValues } from './styles';
import FlightInformationModal from '../flightInformationModal/flightInformationModal'
import getTextTranslation from '../../globalization/dictionary';
import { HeaderContainer, HeaderContent, ItemBox, ItemClickableBox, TextWithBackground, TextValues } from './styles';
import { COLORS, FONTS } from '../../constants/theme'
type Props = {
......@@ -11,7 +14,15 @@ type Props = {
};
export default function Header({ navigation, type }: Props) {
const { language } = useContext(Context);
const isDrawerOpen = useDrawerStatus() === 'open';
const [isModalVisible, setIsModalVisible] = useState(false);
/*
* Abaixo temos uma séria de constantes que precisam ser populadas com dados vindos da API de voo
* Por enquanto essas constantes estao sendo chumbadas no codigo!!!
*/
const [flightId, setFlightId] = useState('AD4036');
const [hour, sethour] = useState('11:30');
const profileButton = {
onPress: () => {
......@@ -24,29 +35,14 @@ export default function Header({ navigation, type }: Props) {
buttonColor: 'white',
iconName: 'user-circle',
iconColor: 'black',
width: '60%',
height: '75%'
width: '100%',
height: '95%'
};
function renderStatusBar() {
return <Bar />;
}
function renderIcon() {
return (
<FloatingButton
onPress={profileButton.onPress}
buttonColor={profileButton.buttonColor}
iconName={profileButton.iconName}
iconColor={profileButton.iconColor}
width={profileButton.width}
height={profileButton.height}
iconSize={50}
elevation={0}
/>
);
}
/* ALTERAR A FUNCAO DE VOLTAR NA ARROW */
function renderGoBack() {
return (
......@@ -69,13 +65,6 @@ export default function Header({ navigation, type }: Props) {
);
}
function homeHeader() {
return (
<>
<ItemBox width='75%' height='100%' alignItens='flex-start' justifyContent='center' />
</>
);
}
function initialMapHeader() {
return (
......@@ -83,17 +72,53 @@ export default function Header({ navigation, type }: Props) {
<ItemBox width='10%' height='100%' alignItens='flex-start' justifyContent='center' marginRight='20%' >
{renderGoBack()}
</ItemBox>
<ItemBox width='40%' height='100%' alignItens='flex-start' justifyContent='center' marginRight='5%' >
<ItemBox width='40%' height='100%' alignItens='flex-start' justifyContent='center' marginRight='13%' >
{renderPageTitle()}
</ItemBox>
</>
);
}
function flighNumber() {
return (
<ItemBox width='50%' height='100%' flexDirection='column' alignItems='flex-start' justifyContent='center'>
<TextValues color={COLORS.black} font={FONTS.bold} fontSize='18px'>
{getTextTranslation('10027', language)}
<TextValues color={COLORS.primary} font={FONTS.bold} fontSize='18px' >{flightId}</TextValues>
</TextValues>
<TextValues color={COLORS.gray} font={FONTS.bold} fontSize='14px'>{getTextTranslation('10028', language)}</TextValues>
</ItemBox >
);
}
function flightHour() {
return (
<ItemBox width='35%' height='90%' flexDirection='column' alignItems='center' justifyContent='center'>
<TextWithBackground width='100%' height='100%' backgroundColor={COLORS.primary} borderRadius='10px' >
<TextValues color={COLORS.white} font={FONTS.bold} fontSize='20px' >{hour}</TextValues>
</TextWithBackground>
</ItemBox>
);
}
function mapHeader() {
return (
<>
<ItemBox width='70%' height='70%' alignItens='flex-start' justifyContent='center' borderRadius='20px' marginRight='5%' backgroundColor={COLORS.white} />
<FlightInformationModal isVisible={isModalVisible} onClose={() => setIsModalVisible(false)} onRedirect={() => console.log('voltei pra home')} />
<ItemClickableBox width='78%' height='70%' alignItens='center' justifyContent='center' borderRadius='15px' marginRight='5%' backgroundColor={COLORS.white} onPress={() => setIsModalVisible(true)} >
<ItemBox width='95%' height='70%' flexDirection='row' alignItens='center' justifyContent='space-between' borderRadius='10px' paddingLeft='1%' paddingRight='1%'>
{flighNumber()}
{flightHour()}
</ItemBox>
</ItemClickableBox>
</>
);
}
function homeHeader() {
return (
<>
<ItemBox width='83%' height='100%' alignItens='flex-start' justifyContent='center' />
</>
);
}
......@@ -109,11 +134,26 @@ export default function Header({ navigation, type }: Props) {
}
}
function renderIcon() {
return (
<FloatingButton
onPress={profileButton.onPress}
buttonColor={profileButton.buttonColor}
iconName={profileButton.iconName}
iconColor={profileButton.iconColor}
width={profileButton.width}
height={profileButton.height}
iconSize={58}
elevation={0}
/>
);
}
function header() {
return (
<ItemBox flexDirection='row' width='100%' height='100%' alignItens='center' justifyContent='flex-start' >
{switchHeaderType()}
<ItemBox width='25%' height='80%' alignItens='flex-end' justifyContent='center' >
<ItemBox width='17%' height='70%' alignItens='flex-start' justifyContent='center' >
{renderIcon()}
</ItemBox>
</ItemBox>
......
src/components/Header/styles.tsx
View file @ a276c4c1
import styled from 'styled-components/native';
import { COLORS } from '../../constants/theme'
import { COLORS, FONTS } from '../../constants/theme'
export const HeaderContainer: any = styled.View`
width: 100%;
......@@ -44,6 +44,64 @@ export const ItemBox: any = styled.View<{
background-color: ${(props) => props?.backgroundColor || 'transparent'};
`
export const ItemClickableBox: any = styled.TouchableOpacity<{
flexDirection: string;
width: string;
height: string;
alignItens: string;
justifyContent: string;
marginTop: string;
marginBottom: string;
marginRight: string;
marginLeft: string;
paddingTop: string;
paddingBottom: string;
borderRadius: string;
backgroundColor: string;
}>`
flex-direction: ${(props) => props?.flexDirection || 'column'};
width: ${(props) => props?.width || '50%'};
height: ${(props) => props?.height || '50%'};
align-items: ${(props) => props?.alignItens || 'flex-start'};
justify-content: ${(props) => props?.justifyContent || 'flex-start'};
margin-top: ${(props) => props?.marginTop || '0%'};
margin-bottom: ${(props) => props?.marginBottom || '0%'};
margin-right: ${(props) => props?.marginRight || '0%'};
margin-left: ${(props) => props?.marginLeft || '0%'};
padding-top: ${(props) => props?.paddingTop || '0%'};
padding-bottom: ${(props) => props?.paddingBottom || '0%'};
border-radius: ${(props) => props?.borderRadius || '0'};
background-color: ${(props) => props?.backgroundColor || 'transparent'};
`
export const TextWithBackground: any = styled.View<{
backgroundColor: string;
borderColor: string;
borderWidth: string;
borderRadius: string;
width: string;
height: string;
marginTop: string;
marginBottom: string;
paddingRight: string;
paddingLeft: string;
paddingTop: string;
paddingBottom: string;
}>`
align-items: center;
justify-content: center;
width: ${(props) => props?.width || '10%'};
height: ${(props) => props?.height || '10%'};
background-color: ${(props) => props?.backgroundColor || COLORS.white};
border-color: ${(props) => props?.borderColor || 'rgba(255, 255, 255, 0)'};
border-width: ${(props) => props?.borderWidth || '0px'};
border-radius: ${(props) => props?.borderRadius || '0px'};
margin-top: ${(props) => props?.marginTop || '0%'};
margin-bottom: ${(props) => props?.marginBottom || '0%'};
padding-right: ${(props) => props?.paddingRight || '0%'};
padding-left: ${(props) => props?.paddingLeft || '0%'};
`;
export const TextValues: any = styled.Text<{
color: string;
font: string;
......
src/components/flightInformationModal/flightInformationModal.tsx
View file @ a276c4c1
......@@ -32,7 +32,7 @@ export default function FlightInformationModal({ isVisible, onClose, onRedirect
return (
<TextWithBackground width='75%' height='100%' backgroundColor={COLORS.white} borderColor={COLORS.primary} borderWidth='2px' borderRadius='10px'>
< TextValues color={COLORS.primary} font={FONTS.bold} fontSize='16px' >
{getTextTranslation('10024', language)}
{getTextTranslation('10034', language)}
<TextValues color={COLORS.green} font={FONTS.bold} fontSize='18px'>{status}</TextValues>
</TextValues >
</TextWithBackground >
......@@ -47,26 +47,26 @@ export default function FlightInformationModal({ isVisible, onClose, onRedirect
</ItensContent>
<ItensContent width='100%' height='20%' flexDirection='row' alignItems='center' justifyContent='center' >
<ItensBox flexDirection='column' alignItems='center' justifyContent='center'>
<TextValues color={COLORS.black} font={FONTS.bold} fontSize='16px'>{getTextTranslation('10019', language)}</TextValues>
<TextValues color={COLORS.black} font={FONTS.bold} fontSize='16px'>{getTextTranslation('10029', language)}</TextValues>
<TextValues color={COLORS.black} font={FONTS.regular} fontSize='16px'>{gate}</TextValues>
</ItensBox>
<ItensBox flexDirection='column' alignItems='center' justifyContent='center' >
<TextValues color={COLORS.black} font={FONTS.bold} fontSize='16px'>{getTextTranslation('10020', language)}</TextValues>
<TextValues color={COLORS.black} font={FONTS.bold} fontSize='16px'>{getTextTranslation('10030', language)}</TextValues>
<TextValues color={COLORS.black} font={FONTS.regular} fontSize='16px'>{date}</TextValues>
</ItensBox>
<ItensBox flexDirection='column' alignItems='center' justifyContent='center'>
<TextValues color={COLORS.black} font={FONTS.bold} fontSize='16px'>{getTextTranslation('10021', language)}</TextValues>
<TextValues color={COLORS.black} font={FONTS.bold} fontSize='16px'>{getTextTranslation('10031', language)}</TextValues>
<TextValues color={COLORS.black} font={FONTS.regular} fontSize='16px'>{hour}</TextValues>
</ItensBox>
</ItensContent>
<ItensContent width='100%' height='45%' flexDirection='column' alignItems='center' justifyContent='flex-start' marginTop='2.5%'>
<ItensBox flexDirection='column' alignItems='center' justifyContent='center'>
<TextValues color={COLORS.black} font={FONTS.bold} fontSize='16px'>{getTextTranslation('10022', language)}</TextValues>
<TextValues color={COLORS.black} font={FONTS.bold} fontSize='16px'>{getTextTranslation('10032', language)}</TextValues>
<TextValues color={COLORS.black} font={FONTS.regular} fontSize='16px'>{origin}</TextValues>
</ItensBox>
<AntDesign name="arrowdown" size={24} color={COLORS.primary} />
<ItensBox flexDirection='column' alignItems='center' justifyContent='center'>
<TextValues color={COLORS.black} font={FONTS.bold} fontSize='16px'>{getTextTranslation('10023', language)}</TextValues>
<TextValues color={COLORS.black} font={FONTS.bold} fontSize='16px'>{getTextTranslation('10033', language)}</TextValues>
<TextValues color={COLORS.black} font={FONTS.regular} fontSize='16px'>{destiny}</TextValues>
</ItensBox>
</ItensContent>
......@@ -84,10 +84,10 @@ export default function FlightInformationModal({ isVisible, onClose, onRedirect
return (
<ItensContent width='50%' height='100%' flexDirection='column' alignItems='flex-start' justifyContent='center'>
<TextValues color={COLORS.black} font={FONTS.bold} fontSize='18px'>
{getTextTranslation('10017', language)}
{getTextTranslation('10027', language)}
<TextValues color={COLORS.primary} font={FONTS.bold} fontSize='18px' >{flightId}</TextValues>
</TextValues>
<TextValues color={COLORS.gray} font={FONTS.bold} fontSize='14px'>{getTextTranslation('10018', language)}</TextValues>
<TextValues color={COLORS.gray} font={FONTS.bold} fontSize='14px'>{getTextTranslation('10028', language)}</TextValues>
</ItensContent >
)
}
......
src/components/flightInformationModal/styles.tsx
View file @ a276c4c1
import styled from 'styled-components/native';
import { COLORS, FONTS } from '../../constants/theme';
// para ajustar a posicao da modal quando a tela do mapa estiver pronta, basta apenas alterar o valor do PADDING-TOP para ajustar a abertura dela!!!!!!!
export const MainOuterContainer: any = styled.View`
flex: 1;
align-items: center;
justify-content: flex-start;
padding-top: 12%;
padding-top: 3.5%;
background-color: 'rgba(0, 0, 0, 0.45)';
`;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment