@bacons/expo-metro-runtime
Version:
Tools for making experimental Metro bundler features work
163 lines • 6.21 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ErrorToast = void 0;
/**
* Copyright (c) Evan Bacon.
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
const react_1 = __importDefault(require("react"));
const react_2 = require("react");
const react_views_1 = require("@bacons/react-views");
const LogBoxData = __importStar(require("../Data/LogBoxData"));
const LogBoxMessage_1 = require("../UI/LogBoxMessage");
const LogBoxStyle = __importStar(require("../UI/LogBoxStyle"));
function ErrorToast(props) {
const { totalLogCount, level, log } = props;
// Eagerly symbolicate so the stack is available when pressing to inspect.
(0, react_2.useEffect)(() => {
LogBoxData.symbolicateLogLazy("stack", log);
LogBoxData.symbolicateLogLazy("component", log);
}, [log]);
return (react_1.default.createElement(react_views_1.View, { style: toastStyles.container },
react_1.default.createElement(react_views_1.Pressable, { style: { flex: 1 }, onPress: props.onPressOpen }, ({ hovered, pressed }) => (react_1.default.createElement(react_views_1.View, { style: [
toastStyles.press,
{
transitionDuration: "150ms",
backgroundColor: pressed
? "#323232"
: hovered
? "#111111"
: LogBoxStyle.getBackgroundColor(),
},
] },
react_1.default.createElement(Count, { count: totalLogCount, level: level }),
react_1.default.createElement(Message, { message: log.message }),
react_1.default.createElement(Dismiss, { onPress: props.onPressDismiss }))))));
}
exports.ErrorToast = ErrorToast;
function Count({ count, level }) {
return (react_1.default.createElement(react_views_1.View, { style: [countStyles.inside, countStyles[level]] },
react_1.default.createElement(react_views_1.Text, { style: countStyles.text }, count <= 1 ? "!" : count)));
}
function Message({ message }) {
return (react_1.default.createElement(react_views_1.Text, { numberOfLines: 1, selectable: false, style: messageStyles.text }, message && (react_1.default.createElement(LogBoxMessage_1.LogBoxMessage, { plaintext: true, message: message, style: messageStyles.substitutionText }))));
}
function Dismiss({ onPress }) {
return (react_1.default.createElement(react_views_1.Pressable, { style: {
marginLeft: 5,
}, hitSlop: {
top: 12,
right: 10,
bottom: 12,
left: 10,
}, onPress: onPress }, ({ hovered, pressed }) => (react_1.default.createElement(react_views_1.View, { style: [
dismissStyles.press,
hovered && { opacity: 0.8 },
pressed && { opacity: 0.5 },
] },
react_1.default.createElement(react_views_1.Image, { source: require("@bacons/expo-metro-runtime/assets/close.png"), style: dismissStyles.image })))));
}
const countStyles = react_views_1.StyleSheet.create({
warn: {
backgroundColor: LogBoxStyle.getWarningColor(1),
},
error: {
backgroundColor: LogBoxStyle.getErrorColor(1),
},
log: {
backgroundColor: LogBoxStyle.getLogColor(1),
},
inside: {
marginRight: 8,
minWidth: 22,
aspectRatio: 1,
paddingHorizontal: 4,
borderRadius: 11,
justifyContent: "center",
alignItems: "center",
},
text: {
color: LogBoxStyle.getTextColor(1),
fontSize: 14,
lineHeight: 18,
textAlign: "center",
fontWeight: "600",
textShadowColor: LogBoxStyle.getBackgroundColor(0.8),
textShadowOffset: { width: 0, height: 0 },
textShadowRadius: 3,
},
});
const messageStyles = react_views_1.StyleSheet.create({
text: {
paddingLeft: 8,
color: LogBoxStyle.getTextColor(1),
flex: 1,
fontSize: 14,
lineHeight: 22,
},
substitutionText: {
color: LogBoxStyle.getTextColor(0.6),
},
});
const dismissStyles = react_views_1.StyleSheet.create({
press: {
backgroundColor: "#323232",
height: 20,
width: 20,
borderRadius: 25,
alignItems: "center",
justifyContent: "center",
},
image: {
height: 8,
width: 8,
},
});
const toastStyles = react_views_1.StyleSheet.create({
container: {
height: 48,
justifyContent: "center",
marginBottom: 4,
},
press: {
borderWidth: 1,
borderRadius: 8,
overflow: "hidden",
flexDirection: "row",
alignItems: "center",
borderColor: "#323232",
backgroundColor: LogBoxStyle.getBackgroundColor(),
flex: 1,
paddingHorizontal: 12,
},
});
//# sourceMappingURL=ErrorToast.js.map