react-native-xenon/lib/module/ui/components/search-bar/SearchBar.js

A powerful in-app debugging tool for React Native.

"use strict";

import { useContext, useState } from 'react';
import { Keyboard, Platform, StyleSheet, TextInput, View } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { MainContext } from "../../../contexts/index.js";
import refs, { DebuggerVisibility } from "../../../core/refs.js";
import colors from "../../../theme/colors.js";
import icons from "../../../theme/icons.js";
import Icon from "../common/Icon.js";
import Touchable from "../common/Touchable.js";
import SafeArea from "../common/SafeArea.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const ICON_SIZE = 20;
export default function SearchBar({
  style,
  ...props
}) {
  const {
    debuggerState: {
      searchQuery
    },
    setDebuggerState
  } = useContext(MainContext);
  const [value, setValue] = useState(searchQuery);
  const onHideSearchInput = () => {
    Keyboard.dismiss();
    refs.debugger.current?.setCurrentIndex(DebuggerVisibility.Panel);
  };
  const onClear = () => {
    setValue('');
  };
  const onSubmitEditing = ({
    nativeEvent: {
      text
    }
  }) => {
    setDebuggerState(draft => {
      draft.searchQuery = text;
    });
    refs.debugger.current?.setCurrentIndex(DebuggerVisibility.Panel);
  };
  return /*#__PURE__*/_jsx(View, {
    style: [styles.container, style],
    ...props,
    children: /*#__PURE__*/_jsxs(SafeAreaProvider, {
      children: [/*#__PURE__*/_jsxs(View, {
        style: styles.barView,
        children: [/*#__PURE__*/_jsx(SafeArea, {
          inset: "top"
        }), /*#__PURE__*/_jsxs(View, {
          style: styles.inputWrapper,
          children: [/*#__PURE__*/_jsx(Icon, {
            source: icons.search,
            size: ICON_SIZE
          }), /*#__PURE__*/_jsx(TextInput, {
            autoCapitalize: "none",
            autoCorrect: false,
            inputMode: "search",
            returnKeyType: "search",
            selectionColor: colors.black,
            ref: refs.searchInput,
            autoFocus: true,
            style: styles.input,
            value: value,
            onChangeText: setValue,
            placeholder: "Search...",
            placeholderTextColor: colors.gray,
            onSubmitEditing: onSubmitEditing
          }), !!value.length && /*#__PURE__*/_jsx(Touchable, {
            hitSlop: 8,
            onPress: onClear,
            children: /*#__PURE__*/_jsx(Icon, {
              source: icons.close,
              size: ICON_SIZE,
              color: colors.black
            })
          })]
        })]
      }), /*#__PURE__*/_jsx(Touchable, {
        onPress: onHideSearchInput,
        style: styles.background,
        children: /*#__PURE__*/_jsx(View, {})
      })]
    })
  });
}
const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    ...(Platform.OS === 'android' ? {
      zIndex: 9999
    } : {}),
    backgroundColor: colors.black + '80' // 80 for 50% opacity
  },
  barView: {
    backgroundColor: colors.lightGray,
    padding: 8
  },
  background: {
    flex: 1
  },
  inputWrapper: {
    backgroundColor: colors.white,
    borderRadius: 8,
    paddingHorizontal: 8,
    columnGap: 8,
    flexDirection: 'row',
    alignItems: 'center',
    height: 40
  },
  input: {
    height: '100%',
    padding: 0,
    margin: 0,
    lineHeight: 20,
    fontSize: 16,
    color: colors.black,
    flex: 1
  }
});
//# sourceMappingURL=SearchBar.js.map