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

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

"use strict";

import React from 'react';
import { Text, View, TextInput, StyleSheet, Image, TouchableHighlight } from 'react-native';
import { Autocomplete } from "./Autocomplete.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export class TagInput extends React.Component {
  input = /*#__PURE__*/React.createRef();
  focus() {
    this.input.current?.focus();
  }
  blur() {
    this.input.current?.blur();
  }
  clear() {
    this.input.current?.clear();
  }
  isFocused() {
    return this.input.current?.isFocused();
  }
  setNativeProps(nativeProps) {
    this.input.current?.setNativeProps(nativeProps);
  }
  renderLabel = (text, style) => {
    return /*#__PURE__*/_jsx(Text, {
      style: style,
      children: text
    });
  };
  renderLeftElement = (element, style) => {
    return /*#__PURE__*/_jsx(View, {
      style: StyleSheet.flatten([styles.leftElement, style]),
      children: element
    });
  };
  renderRightElement = (element, style) => {
    return /*#__PURE__*/_jsx(View, {
      style: StyleSheet.flatten([styles.rightElement, style]),
      children: element
    });
  };
  onChangeText = (text, tags, updateState, keysForTags) => {
    const keysStr = keysForTags || ' ';
    if (text.includes(keysStr)) {
      if (text === keysStr) {
        return;
      }
      const tempTag = text.replace(keysStr, '').trim();

      // Avoid adding empty tags or duplicates
      if (tempTag && !tags.tagsArray.includes(tempTag)) {
        const tempArray = [...tags.tagsArray, tempTag];
        const tempObject = {
          tag: '',
          tagsArray: tempArray
        };
        updateState(tempObject);
      }
      return this.input.current?.clear();
    }
    const tempObject = {
      tag: text,
      tagsArray: tags.tagsArray
    };
    return updateState(tempObject);
  };
  deleteTag = (tagToDelete, tags, updateState) => {
    const tempArray = [...tags.tagsArray];
    tempArray.splice(tagToDelete, 1);
    const tempObject = {
      tag: tags.tag,
      tagsArray: tempArray
    };
    updateState(tempObject);
  };
  render() {
    const {
      containerStyle,
      disabled,
      disabledInputStyle,
      inputContainerStyle,
      leftElement,
      leftElementContainerStyle,
      rightElement,
      rightElementContainerStyle,
      inputStyle,
      label,
      labelStyle,
      tags,
      tagStyle,
      tagTextStyle,
      tagsViewStyle,
      updateState,
      keysForTag,
      deleteIconStyles,
      customElement,
      suggestions = [],
      // Autocomplete props
      maxSuggestions,
      caseSensitive,
      autocompleteContainerStyle,
      autocompleteSuggestionItemStyle,
      autocompleteSuggestionTextStyle,
      showAutocompleteBorder,
      highlightMatchedText,
      renderSuggestion,
      renderTag,
      renderDeleteButton
    } = this.props;
    const props = this.props;
    return /*#__PURE__*/_jsxs(View, {
      style: StyleSheet.flatten([styles.container, containerStyle]),
      children: [label ? this.renderLabel(label, StyleSheet.flatten([styles.labelStyle, labelStyle])) : null, /*#__PURE__*/_jsxs(View, {
        style: StyleSheet.flatten(StyleSheet.flatten([styles.inputContainer, inputContainerStyle])),
        children: [leftElement ? this.renderLeftElement(leftElement, leftElementContainerStyle) : null, /*#__PURE__*/_jsx(TextInput, {
          underlineColorAndroid: "transparent",
          editable: !disabled,
          ref: this.input,
          style: StyleSheet.flatten([styles.input, tags.tag ? styles.hasValue : null, inputStyle, disabled && styles.disabledInput, disabled && disabledInputStyle]),
          ...props,
          value: tags.tag,
          onChangeText: text => this.onChangeText(text, tags, updateState, keysForTag)
        }), Boolean(tags.tag && suggestions?.length > 0) && /*#__PURE__*/_jsx(Autocomplete, {
          suggestions: suggestions,
          text: tags.tag,
          maxSuggestions: maxSuggestions,
          caseSensitive: caseSensitive,
          containerStyle: autocompleteContainerStyle,
          suggestionItemStyle: autocompleteSuggestionItemStyle,
          suggestionTextStyle: autocompleteSuggestionTextStyle,
          showBorder: showAutocompleteBorder,
          highlightMatchedText: highlightMatchedText,
          renderSuggestion: renderSuggestion,
          onSuggestionPress: suggestion => {
            const tempArray = [...tags.tagsArray];
            if (!tempArray.includes(suggestion)) {
              tempArray.push(suggestion);
              updateState({
                tag: '',
                tagsArray: tempArray
              });
              this.input.current?.clear();
            }
          }
        }), rightElement ? this.renderRightElement(rightElement, rightElementContainerStyle) : null]
      }), customElement, /*#__PURE__*/_jsx(View, {
        style: StyleSheet.flatten([styles.tagsView, tagsViewStyle]),
        children: tags.tagsArray.map((item, count) => {
          if (renderTag) {
            return /*#__PURE__*/_jsx(React.Fragment, {
              children: renderTag(item, count, () => this.deleteTag(count, tags, updateState))
            }, count);
          }
          return /*#__PURE__*/_jsxs(View, {
            style: StyleSheet.flatten([styles.tag, tagStyle]),
            children: [/*#__PURE__*/_jsx(Text, {
              style: StyleSheet.flatten([styles.tagText, tagTextStyle]),
              children: item
            }), renderDeleteButton ? renderDeleteButton(() => this.deleteTag(count, tags, updateState), item, count) : /*#__PURE__*/_jsx(TouchableHighlight, {
              style: styles.close,
              onPress: () => this.deleteTag(count, tags, updateState),
              children: /*#__PURE__*/_jsx(Image, {
                source: require('./close.png'),
                style: StyleSheet.flatten([styles.deleteIcon, deleteIconStyles])
              })
            })]
          }, count);
        })
      })]
    });
  }
}
const styles = StyleSheet.create({
  container: {
    width: '100%',
    minHeight: 3,
    position: 'relative',
    zIndex: 0
  },
  disabledInput: {
    opacity: 0.5
  },
  inputContainer: {
    flexDirection: 'row',
    height: 60
  },
  leftElement: {
    height: 40,
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 10
  },
  rightElement: {
    height: 40,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 10
  },
  input: {
    color: 'black',
    fontSize: 18,
    flex: 1,
    minHeight: 40,
    borderRadius: 10,
    paddingHorizontal: 10
  },
  tagsView: {
    marginTop: 10,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    flexWrap: 'wrap'
  },
  tag: {
    flexDirection: 'row',
    minHeight: 26,
    borderRadius: 13,
    backgroundColor: '#979797',
    minWidth: 40,
    maxWidth: 120,
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 5,
    margin: 5,
    borderWidth: 0.5,
    borderColor: 'gray'
  },
  tagText: {
    marginHorizontal: 5,
    marginRight: 23
  },
  close: {
    position: 'absolute',
    right: 5
  },
  labelStyle: {
    fontSize: 12,
    marginTop: 12,
    marginBottom: 10
  },
  deleteIcon: {
    width: 20,
    height: 20,
    opacity: 0.5,
    marginLeft: 5
  },
  hasValue: {
    borderBottomLeftRadius: 0,
    borderBottomRightRadius: 0
  }
});
//# sourceMappingURL=TagInput.js.map