/**
* 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 * as React from 'react';
import Image from '../../Image/Image';
import StyleSheet from '../../StyleSheet/StyleSheet';
import Text from '../../Text/Text';
import View from '../../Components/View/View';
import LogBoxButton from './LogBoxButton';
import * as LogBoxStyle from './LogBoxStyle';
import LogBoxLog from '../Data/LogBoxLog';
import LogBoxMessage from './LogBoxMessage';
import * as LogBoxData from '../Data/LogBoxData';
type Props = $ReadOnly<{|
log: LogBoxLog,
totalLogCount: number,
level: 'warn' | 'error',
onPressOpen: () => void,
onPressDismiss: () => void,
|}>;
function LogBoxLogNotification(props: Props): React.Node {
const {totalLogCount, level, log} = props;
// Eagerly symbolicate so the stack is available when pressing to inspect.
React.useEffect(() => {
LogBoxData.symbolicateLogLazy(log);
}, [log]);
return (
);
}
function CountBadge(props) {
return (
{/* $FlowFixMe(>=0.114.0) This suppression was added when fixing the type
* of `StyleSheet.create`. Remove this comment to see the error. */}
{props.count <= 1 ? '!' : props.count}
);
}
function Message(props) {
return (
{props.message && (
)}
);
}
function DismissButton(props) {
return (
);
}
const countStyles = StyleSheet.create({
warn: {
backgroundColor: LogBoxStyle.getWarningColor(1),
},
error: {
backgroundColor: LogBoxStyle.getErrorColor(1),
},
log: {
backgroundColor: LogBoxStyle.getLogColor(1),
},
outside: {
padding: 2,
borderRadius: 25,
backgroundColor: '#fff',
marginRight: 8,
},
inside: {
minWidth: 18,
paddingLeft: 4,
paddingRight: 4,
borderRadius: 25,
fontWeight: '600',
},
text: {
color: LogBoxStyle.getTextColor(1),
fontSize: 14,
lineHeight: 18,
textAlign: 'center',
fontWeight: '600',
textShadowColor: LogBoxStyle.getBackgroundColor(0.4),
textShadowOffset: {width: 0, height: 0},
textShadowRadius: 3,
},
});
const messageStyles = StyleSheet.create({
container: {
alignSelf: 'stretch',
flexGrow: 1,
flexShrink: 1,
flexBasis: 'auto',
borderLeftColor: LogBoxStyle.getTextColor(0.2),
borderLeftWidth: 1,
paddingLeft: 8,
},
text: {
color: LogBoxStyle.getTextColor(1),
flex: 1,
fontSize: 14,
lineHeight: 22,
},
substitutionText: {
color: LogBoxStyle.getTextColor(0.6),
},
});
const dismissStyles = StyleSheet.create({
container: {
alignSelf: 'center',
flexDirection: 'row',
flexGrow: 0,
flexShrink: 0,
flexBasis: 'auto',
marginLeft: 5,
},
press: {
height: 20,
width: 20,
borderRadius: 25,
alignSelf: 'flex-end',
alignItems: 'center',
justifyContent: 'center',
},
image: {
height: 8,
width: 8,
tintColor: LogBoxStyle.getBackgroundColor(1),
},
});
const toastStyles = StyleSheet.create({
container: {
height: 48,
position: 'relative',
width: '100%',
justifyContent: 'center',
marginTop: 0.5,
backgroundColor: LogBoxStyle.getTextColor(1),
},
press: {
height: 48,
position: 'relative',
width: '100%',
justifyContent: 'center',
marginTop: 0.5,
paddingHorizontal: 12,
},
content: {
alignItems: 'flex-start',
flexDirection: 'row',
borderRadius: 8,
flexGrow: 0,
flexShrink: 0,
flexBasis: 'auto',
},
});
export default LogBoxLogNotification;