Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-23 15:09:33 +01:00
Code Issues Packages Projects Releases Wiki Activity

add search input in main header

Browse Source
This commit is contained in:
ammarahm-ed
2020-11-14 10:08:37 +05:00
parent 276f349556
commit c51b82fd83
1 changed files with 50 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
apps/mobile/src/components/Header/index.js
View File

@@ -3,22 +3,19 @@ import {ActivityIndicator, Platform, StyleSheet, View} from 'react-native';
import * as Animatable from 'react-native-animatable';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {useTracked} from '../../provider';
import {
eSendEvent,
eSubscribeEvent,
eUnSubscribeEvent,
} from '../../services/EventManager';
import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
import NavigationService from '../../services/Navigation';
import {dWidth} from '../../utils';
import {ActionIcon} from '../ActionIcon';
import {HeaderMenu} from './HeaderMenu';
import {HeaderTitle} from './HeaderTitle';
import {SIZE} from '../../utils/SizeUtils';
import {HeaderLeftMenu} from './HeaderLeftMenu';
import {eScrollEvent} from '../../utils/Events';
import {SIZE} from '../../utils/SizeUtils';
import {ActionIcon} from '../ActionIcon';
import {SearchInput} from '../SearchInput';
import {HeaderLeftMenu} from './HeaderLeftMenu';
import {HeaderTitle} from './HeaderTitle';
export const Header = ({root}) => {
const [state] = useTracked();
const {colors, syncing} = state;
const {colors, syncing, currentScreen} = state;
const insets = useSafeAreaInsets();
const [hide, setHide] = useState(false);
@@ -47,13 +44,28 @@ export const Header = ({root}) => {
overflow: 'hidden',
borderBottomWidth: 1,
borderBottomColor: hide ? 'transparent' : colors.nav,
justifyContent: 'center',
},
]}>
<View style={styles.leftBtnContainer}>
<HeaderLeftMenu />
{Platform.OS === 'android' ? <HeaderTitle root={root} /> : null}
{Platform.OS === 'android' && currentScreen !== 'search' ? (
<HeaderTitle root={root} />
) : null}
</View>
{Platform.OS !== 'android' ? <HeaderTitle root={root} /> : null}
{Platform.OS !== 'android' && currentScreen !== 'search' ? (
<HeaderTitle root={root} />
) : null}
{currentScreen === 'search' ? (
<View
style={{
width: '80%',
}}>
<SearchInput />
</View>
) : null}
<Animatable.View
transition={['opacity']}
@@ -75,19 +87,31 @@ export const Header = ({root}) => {
<ActivityIndicator size={25} color={colors.accent} />
</Animatable.View>
<View style={styles.rightBtnContainer}>
<ActionIcon
onPress={() => {
if (!hideHeader) return;
setHideHeader(false);
eSendEvent('showSearch');
}}
name="magnify"
size={SIZE.xxxl}
color={colors.pri}
style={styles.rightBtn}
/>
</View>
{currentScreen === 'search' ? (
<View style={styles.rightBtnContainer}>
<ActionIcon
onPress={async () => {
NavigationService.navigate('Search');
}}
name="tune"
size={SIZE.xxxl}
color={colors.pri}
style={styles.rightBtn}
/>
</View>
) : (
<View style={styles.rightBtnContainer}>
<ActionIcon
onPress={async () => {
NavigationService.navigate('Search');
}}
name="magnify"
size={SIZE.xxxl}
color={colors.pri}
style={styles.rightBtn}
/>
</View>
)}
</View>
);
};