zdam-egzamin-zawodowy
/
mobile-app
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add Menu

This commit is contained in:
Dawid Wysokiński 2021-04-10 15:28:57 +02:00
parent 1fd7164b88
commit 95f0e7402e
3 changed files with 73 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/common/Menu/Menu.tsx Normal file
View File

@ -0,0 +1,53 @@
import React from 'react';
import { EMAIL, WEBSITE } from 'config/app';
import { ActionSheet, Icon, NativeBase } from 'native-base';
import { Linking, StyleSheet } from 'react-native';
export interface MenuProps
extends Omit<NativeBase.Icon, 'onPress' | 'type' | 'name'> {}
const OPTIONS = ['Strona internetowa', 'Kontakt', 'Anuluj'];
const WEBSITE_OPT_INDEX = 0;
const CONTACT_OPT_INDEX = 1;
const CANCEL_OPT_INDEX = OPTIONS.length - 1;
const Menu = ({ style, ...rest }: MenuProps) => {
const showMenu = () => {
ActionSheet.show(
{
options: OPTIONS,
cancelButtonIndex: CANCEL_OPT_INDEX,
},
index => {
switch (index) {
case WEBSITE_OPT_INDEX:
Linking.openURL(WEBSITE);
break;
case CONTACT_OPT_INDEX:
Linking.openURL(`mailto:${EMAIL}`);
break;
}
},
);
};
return (
<Icon
type="Feather"
name="more-vertical"
fontSize={30}
style={[styles.icon, style]}
onPress={showMenu}
{...rest}
/>
);
};
const styles = StyleSheet.create({
icon: {
color: 'white',
},
});
export default Menu;

20
src/screens/HomeScreen/components/Header/Header.tsx
View File

@ -1,8 +1,9 @@
import React, { useState, useRef, useEffect } from 'react';
import { useDebounce } from 'react-use';
import { Keyboard, TextInput } from 'react-native';
import { Icon, Input, Item, Header as NBHeader } from 'native-base';
import { Keyboard, StyleSheet, TextInput } from 'react-native';
import { Icon, Input, Item, Header as NBHeader, View } from 'native-base';
import Menu from 'common/Menu/Menu';
export interface HeaderProps {
onSearch?: (search: string) => void;
@ -33,7 +34,7 @@ const Header = ({ onSearch }: HeaderProps) => {
}, []);
return (
<NBHeader searchBar rounded hasSegment>
<NBHeader searchBar rounded hasSegment style={styles.header}>
<Item>
<Icon name="ios-search" />
<Input
@ -43,9 +44,20 @@ const Header = ({ onSearch }: HeaderProps) => {
ref={inputRef}
/>
</Item>
<Icon name="ios-search" />
<View>
<Menu style={styles.menu} />
</View>
</NBHeader>
);
};
const styles = StyleSheet.create({
header: {
alignItems: 'center',
},
menu: {
marginLeft: 10,
},
});
export default Header;

5
src/screens/TestScreen/components/Header/Header.tsx
View File

@ -10,6 +10,7 @@ import {
Header as NBHeader,
Right,
} from 'native-base';
import Menu from 'common/Menu/Menu';
export interface HeaderProps {
title: string;
@ -28,7 +29,9 @@ const Header = ({ title }: HeaderProps) => {
<Body>
<Title>{title}</Title>
</Body>
<Right />
<Right>
<Menu />
</Right>
</NBHeader>
);
};