86 lines
2.9 KiB
TypeScript
86 lines
2.9 KiB
TypeScript
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
|
// See LICENSE.txt for license information.
|
|
|
|
import React, {useMemo} from 'react';
|
|
import {StyleProp, StyleSheet, useWindowDimensions, View, ViewStyle} from 'react-native';
|
|
import {TouchableOpacity} from 'react-native-gesture-handler';
|
|
import Animated from 'react-native-reanimated';
|
|
import {SafeAreaView, Edge, useSafeAreaInsets} from 'react-native-safe-area-context';
|
|
|
|
import CompassIcon from '@components/compass_icon';
|
|
import FormattedText from '@components/formatted_text';
|
|
import {useDefaultHeaderHeight} from '@hooks/header';
|
|
import {changeOpacity} from '@utils/theme';
|
|
import {typography} from '@utils/typography';
|
|
|
|
type Props = {
|
|
index: number;
|
|
onClose: () => void;
|
|
style: StyleProp<ViewStyle>;
|
|
total: number;
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
alignItems: 'center',
|
|
backgroundColor: '#000',
|
|
borderBottomColor: changeOpacity('#fff', 0.4),
|
|
borderBottomWidth: 1,
|
|
flexDirection: 'row',
|
|
},
|
|
icon: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
height: '100%',
|
|
},
|
|
title: {
|
|
...typography('Heading', 300),
|
|
color: 'white',
|
|
},
|
|
});
|
|
|
|
const edges: Edge[] = ['left', 'right'];
|
|
const AnimatedSafeAreaView = Animated.createAnimatedComponent(SafeAreaView);
|
|
|
|
const Header = ({index, onClose, style, total}: Props) => {
|
|
const insets = useSafeAreaInsets();
|
|
const {width} = useWindowDimensions();
|
|
const height = useDefaultHeaderHeight() - insets.top;
|
|
const {top} = useSafeAreaInsets();
|
|
const topContainerStyle = useMemo(() => [{height: top, backgroundColor: '#000'}], [top]);
|
|
const containerStyle = useMemo(() => [styles.container, {height}], [height]);
|
|
const iconStyle = useMemo(() => [{width: height}, styles.icon], [height]);
|
|
const titleStyle = useMemo(() => ({width: width - (height * 2)}), [height, width]);
|
|
const titleValue = useMemo(() => ({index: index + 1, total}), [index, total]);
|
|
|
|
return (
|
|
<AnimatedSafeAreaView
|
|
edges={edges}
|
|
style={style}
|
|
>
|
|
<Animated.View style={topContainerStyle}/>
|
|
<Animated.View style={containerStyle}>
|
|
<TouchableOpacity
|
|
onPress={onClose}
|
|
style={iconStyle}
|
|
>
|
|
<CompassIcon
|
|
color='white'
|
|
name='close'
|
|
size={24}
|
|
/>
|
|
</TouchableOpacity>
|
|
<View style={titleStyle}>
|
|
<FormattedText
|
|
id='mobile.gallery.title'
|
|
defaultMessage='{index} of {total}'
|
|
style={styles.title}
|
|
values={titleValue}
|
|
/>
|
|
</View>
|
|
</Animated.View>
|
|
</AnimatedSafeAreaView>
|
|
);
|
|
};
|
|
|
|
export default Header;
|