react-native-input-tag/lib/module/common/components/Autocomplete.js

Versatile and user-friendly component designed to simplify the process of entering and managing tags within a React Native application.

"use strict";

import { FlatList, StyleSheet, TouchableOpacity, Text, View } from 'react-native';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function Autocomplete(props) {
  const {
    text,
    suggestions = [],
    onSuggestionPress,
    maxSuggestions = 5,
    caseSensitive = false,
    containerStyle,
    suggestionItemStyle,
    suggestionTextStyle,
    showBorder = true,
    highlightMatchedText = false,
    renderSuggestion
  } = props;
  const filteredSuggestions = suggestions.filter(suggestion => {
    const searchText = caseSensitive ? text : text.toLowerCase();
    const suggestionText = caseSensitive ? suggestion : suggestion.toLowerCase();
    return suggestionText.includes(searchText) && suggestionText !== searchText && text.trim() !== '';
  }).slice(0, maxSuggestions);
  if (filteredSuggestions.length === 0) {
    return null;
  }
  const handleSuggestionPress = suggestion => {
    onSuggestionPress?.(suggestion);
  };
  const renderSuggestionText = suggestion => {
    if (!highlightMatchedText) {
      return /*#__PURE__*/_jsx(Text, {
        style: [styles.textStyle, suggestionTextStyle],
        children: suggestion
      });
    }
    const searchText = caseSensitive ? text : text.toLowerCase();
    const suggestionText = caseSensitive ? suggestion : suggestion.toLowerCase();
    const index = suggestionText.indexOf(searchText);
    if (index === -1) {
      return /*#__PURE__*/_jsx(Text, {
        style: [styles.textStyle, suggestionTextStyle],
        children: suggestion
      });
    }
    const beforeMatch = suggestion.substring(0, index);
    const match = suggestion.substring(index, index + text.length);
    const afterMatch = suggestion.substring(index + text.length);
    return /*#__PURE__*/_jsxs(Text, {
      style: [styles.textStyle, suggestionTextStyle],
      children: [beforeMatch, /*#__PURE__*/_jsx(Text, {
        style: styles.highlightedText,
        children: match
      }), afterMatch]
    });
  };
  return /*#__PURE__*/_jsx(View, {
    style: [styles.container, containerStyle],
    children: /*#__PURE__*/_jsx(FlatList, {
      data: filteredSuggestions,
      keyExtractor: (item, index) => `${item}-${index}`,
      showsVerticalScrollIndicator: false,
      renderItem: ({
        item,
        index
      }) => {
        // Check if custom render function is provided
        if (renderSuggestion) {
          const isHighlighted = highlightMatchedText && (caseSensitive ? item : item.toLowerCase()).includes(caseSensitive ? text : text.toLowerCase());
          return /*#__PURE__*/_jsx(View, {
            children: renderSuggestion(item, index, isHighlighted, () => handleSuggestionPress(item))
          });
        }

        // Default rendering
        return /*#__PURE__*/_jsx(TouchableOpacity, {
          style: [styles.suggestionItems, suggestionItemStyle, !showBorder && styles.noBorder, index === filteredSuggestions.length - 1 && styles.lastItem],
          onPress: () => handleSuggestionPress(item),
          accessibilityRole: "button",
          accessibilityLabel: `Select suggestion: ${item}`,
          children: renderSuggestionText(item)
        });
      }
    })
  });
}
const styles = StyleSheet.create({
  container: {
    padding: 10,
    backgroundColor: '#fff',
    borderBottomLeftRadius: 10,
    borderBottomRightRadius: 10,
    opacity: 1,
    flex: 1,
    position: 'absolute',
    width: '100%',
    zIndex: 1000,
    top: 40,
    maxHeight: 200,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.1,
    shadowRadius: 3.84,
    elevation: 5
  },
  textStyle: {
    textTransform: 'capitalize',
    fontSize: 14,
    color: '#333'
  },
  suggestionItems: {
    minHeight: 40,
    backgroundColor: '#f0f0f0',
    justifyContent: 'center',
    paddingHorizontal: 10,
    paddingVertical: 8,
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0'
  },
  noBorder: {
    borderBottomWidth: 0
  },
  lastItem: {
    borderBottomWidth: 0
  },
  highlightedText: {
    fontWeight: 'bold',
    color: '#007bff',
    backgroundColor: '#e3f2fd'
  }
});
//# sourceMappingURL=Autocomplete.js.map