react-native-xenon/lib/module/ui/components/panels/ConsolePanel.js

A powerful in-app debugging tool for React Native.

"use strict";

import { useCallback, useContext, useMemo } from 'react';
import { FlatList, StyleSheet } from 'react-native';
import { MainContext } from "../../../contexts/index.js";
import { CONSOLE_ITEM_HEIGHT } from "../../../core/constants.js";
import { formatLogMessage } from "../../../core/utils.js";
import { DebuggerPanel } from "../../../types/index.js";
import Empty from "../common/Empty.js";
import ConsolePanelItem from "../items/ConsolePanelItem.js";
import { jsx as _jsx } from "react/jsx-runtime";
export default function ConsolePanel({
  style,
  ref
}) {
  const {
    debuggerState: {
      searchQuery
    },
    consoleInterceptor: {
      logMessages
    },
    setDebuggerState
  } = useContext(MainContext);
  const data = useMemo(() => {
    let result = [...logMessages];
    if (searchQuery) {
      result = logMessages.filter(item => formatLogMessage(item?.values ?? []).toLowerCase().includes(searchQuery.toLowerCase()));
    }
    return result.reverse();
  }, [logMessages, searchQuery]);
  const renderItem = useCallback(({
    item
  }) => /*#__PURE__*/_jsx(ConsolePanelItem, {
    ...item,
    onPress: () => {
      setDebuggerState(draft => {
        draft.detailsData = {
          type: DebuggerPanel.Console,
          data: item,
          selectedTab: 'logMessage',
          beautified: false
        };
      });
    }
  }), [setDebuggerState]);
  const getItemLayout = useCallback((_, index) => ({
    length: CONSOLE_ITEM_HEIGHT,
    offset: CONSOLE_ITEM_HEIGHT * index,
    index
  }), []);
  return /*#__PURE__*/_jsx(FlatList, {
    ref: ref,
    inverted: !!data.length,
    data: data,
    renderItem: renderItem,
    keyExtractor: (_, index) => index.toString(),
    style: [styles.container, style],
    contentContainerStyle: data.length ? styles.contentContainer : undefined,
    ListEmptyComponent: /*#__PURE__*/_jsx(Empty, {
      children: "No logs yet"
    }),
    getItemLayout: getItemLayout
  });
}
const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  contentContainer: {
    padding: 8
  }
});
//# sourceMappingURL=ConsolePanel.js.map