@100mslive/react-native-room-kit/lib/module/components/Participants/ParticipantsSeachInput.js

100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.

import * as React from 'react';
import { StyleSheet, Platform } from 'react-native';
import { useHMSRoomColorPalette, useHMSRoomStyle } from '../../hooks-util';
import { SearchIcon } from '../../Icons';
import { HMSTextInput } from '../HMSTextInput';
import { TestIds } from '../../utils/constants';
export const ParticipantsSearchInput = ({
  searchText,
  setSearchText
}) => {
  const {
    on_surface_medium: onSurfaceMediumColor
  } = useHMSRoomColorPalette();
  const textInputStyle = useHMSRoomStyle(theme => ({
    backgroundColor: theme.palette.surface_default,
    borderColor: theme.palette.surface_default
  }));
  return /*#__PURE__*/React.createElement(HMSTextInput, {
    testID: TestIds.search_participant_input,
    value: searchText,
    onChangeText: setSearchText,
    placeholder: "Search for participants",
    style: styles.input,
    containerStyle: [styles.textInputContainer, textInputStyle],
    focusedContainerStyle: [styles.focusedTextInputContainer, textInputStyle],
    placeholderTextColor: onSurfaceMediumColor,
    leftIcon: /*#__PURE__*/React.createElement(SearchIcon, {
      style: styles.searchIcon
    })
  });
};
const styles = StyleSheet.create({
  focusedTextInputContainer: {
    borderWidth: 1
  },
  textInputContainer: {
    borderWidth: 1,
    flex: 0,
    height: 40,
    paddingLeft: 8,
    paddingRight: 8
  },
  input: {
    fontSize: 14,
    lineHeight: Platform.OS === 'android' ? 20 : undefined,
    letterSpacing: 0.25
  },
  searchIcon: {
    marginRight: 8,
    alignSelf: 'center'
  }
});
//# sourceMappingURL=ParticipantsSeachInput.js.map