GT2/Ejectable/node_modules/react-native/Libraries/LogBox/UI/LogBoxInspectorHeader.js

169 lines
4.2 KiB
JavaScript

/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow strict-local
* @format
*/
'use strict';
import Image from '../../Image/Image';
import Platform from '../../Utilities/Platform';
import * as React from 'react';
import StyleSheet from '../../StyleSheet/StyleSheet';
import Text from '../../Text/Text';
import View from '../../Components/View/View';
import StatusBar from '../../Components/StatusBar/StatusBar';
import LogBoxButton from './LogBoxButton';
import * as LogBoxStyle from './LogBoxStyle';
import type {LogLevel} from '../Data/LogBoxLog';
type Props = $ReadOnly<{|
onSelectIndex: (selectedIndex: number) => void,
selectedIndex: number,
total: number,
level: LogLevel,
|}>;
function LogBoxInspectorHeader(props: Props): React.Node {
if (props.level === 'syntax') {
return (
<View style={[styles.safeArea, styles[props.level]]}>
<View style={styles.header}>
<View style={styles.title}>
<Text style={styles.titleText}>Failed to compile</Text>
</View>
</View>
</View>
);
}
const prevIndex =
props.selectedIndex - 1 < 0 ? props.total - 1 : props.selectedIndex - 1;
const nextIndex =
props.selectedIndex + 1 > props.total - 1 ? 0 : props.selectedIndex + 1;
const titleText = `Log ${props.selectedIndex + 1} of ${props.total}`;
return (
<View style={[styles.safeArea, styles[props.level]]}>
<View style={styles.header}>
<LogBoxInspectorHeaderButton
disabled={props.total <= 1}
level={props.level}
image={require('./LogBoxImages/chevron-left.png')}
onPress={() => props.onSelectIndex(prevIndex)}
/>
<View style={styles.title}>
<Text style={styles.titleText}>{titleText}</Text>
</View>
<LogBoxInspectorHeaderButton
disabled={props.total <= 1}
level={props.level}
image={require('./LogBoxImages/chevron-right.png')}
onPress={() => props.onSelectIndex(nextIndex)}
/>
</View>
</View>
);
}
const backgroundForLevel = (level: LogLevel) =>
({
warn: {
default: 'transparent',
pressed: LogBoxStyle.getWarningDarkColor(),
},
error: {
default: 'transparent',
pressed: LogBoxStyle.getErrorDarkColor(),
},
fatal: {
default: 'transparent',
pressed: LogBoxStyle.getFatalDarkColor(),
},
syntax: {
default: 'transparent',
pressed: LogBoxStyle.getFatalDarkColor(),
},
}[level]);
function LogBoxInspectorHeaderButton(
props: $ReadOnly<{|
disabled: boolean,
image: number,
level: LogLevel,
onPress?: ?() => void,
|}>,
): React.Node {
return (
<LogBoxButton
backgroundColor={backgroundForLevel(props.level)}
onPress={props.disabled ? null : props.onPress}
style={headerStyles.button}>
{props.disabled ? null : (
<Image source={props.image} style={headerStyles.buttonImage} />
)}
</LogBoxButton>
);
}
const headerStyles = StyleSheet.create({
button: {
alignItems: 'center',
aspectRatio: 1,
justifyContent: 'center',
marginTop: 5,
marginRight: 6,
marginLeft: 6,
marginBottom: -8,
borderRadius: 3,
},
buttonImage: {
height: 14,
width: 8,
tintColor: LogBoxStyle.getTextColor(),
},
});
const styles = StyleSheet.create({
syntax: {
backgroundColor: LogBoxStyle.getFatalColor(),
},
fatal: {
backgroundColor: LogBoxStyle.getFatalColor(),
},
warn: {
backgroundColor: LogBoxStyle.getWarningColor(),
},
error: {
backgroundColor: LogBoxStyle.getErrorColor(),
},
header: {
flexDirection: 'row',
height: Platform.select({
android: 48,
ios: 44,
}),
},
title: {
alignItems: 'center',
flex: 1,
justifyContent: 'center',
},
titleText: {
color: LogBoxStyle.getTextColor(),
fontSize: 16,
fontWeight: '600',
includeFontPadding: false,
lineHeight: 20,
},
safeArea: {
paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 40,
},
});
export default LogBoxInspectorHeader;