react-native-xenon
Version:
A powerful in-app debugging tool for React Native.
88 lines (87 loc) • 2.61 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = NetworkPanelItem;
var _react = require("react");
var _reactNative = require("react-native");
var _reactNativeUrlPolyfill = require("react-native-url-polyfill");
var _utils = require("../../../core/utils");
var _colors = _interopRequireDefault(require("../../../theme/colors"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function NetworkPanelItem({
method,
name,
duration,
status,
onPress
}) {
const requestPath = (0, _react.useMemo)(() => {
if (!name) return '[failed]';
try {
const url = new _reactNativeUrlPolyfill.URL(name);
const suffixUrl = url.pathname + url.search;
if (suffixUrl === '/') return url.host;
return suffixUrl;
} catch (error) {
return name;
}
}, [name]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
onPress: onPress,
style: styles.container,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.column,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
numberOfLines: 1,
style: styles.text,
children: (0, _utils.formatRequestMethod)(method)
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: [styles.column, styles.pathColumn],
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
numberOfLines: 1,
style: styles.text,
children: requestPath
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: [styles.column, styles.durationColumn],
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
numberOfLines: 1,
style: styles.text,
children: (0, _utils.formatRequestDuration)(duration)
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.column,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
numberOfLines: 1,
style: styles.text,
children: (0, _utils.formatRequestStatusCode)(status)
})
})]
});
}
const styles = _reactNative.StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row'
},
pathColumn: {
flex: 5
},
durationColumn: {
flex: 2
},
column: {
flex: 1.5,
flexShrink: 1,
padding: 8,
paddingRight: 0
},
text: {
color: _colors.default.black,
fontSize: 14
}
});
//# sourceMappingURL=NetworkPanelItem.js.map