You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
69 lines
1.6 KiB
69 lines
1.6 KiB
import PropTypes from 'prop-types';
|
|
import React, { Component } from 'react';
|
|
import ReactTags from 'react-tag-autocomplete';
|
|
import classNames from 'classnames';
|
|
import { kinds } from 'Helpers/Props';
|
|
import styles from './TagInput.css';
|
|
|
|
class TextTagInput extends Component {
|
|
|
|
//
|
|
// Render
|
|
|
|
render() {
|
|
const {
|
|
tags,
|
|
allowNew,
|
|
kind,
|
|
placeholder,
|
|
onTagAdd,
|
|
onTagDelete
|
|
} = this.props;
|
|
|
|
const tagInputClassNames = {
|
|
root: styles.container,
|
|
rootFocused: styles.containerFocused,
|
|
selected: styles.selectedTagContainer,
|
|
selectedTag: classNames(styles.selectedTag, styles[kind]),
|
|
search: styles.searchInputContainer,
|
|
searchInput: styles.searchInput,
|
|
suggestions: styles.suggestions,
|
|
suggestionActive: styles.suggestionActive,
|
|
suggestionDisabled: styles.suggestionDisabled
|
|
};
|
|
|
|
return (
|
|
<ReactTags
|
|
classNames={tagInputClassNames}
|
|
tags={tags}
|
|
allowNew={allowNew}
|
|
minQueryLength={1}
|
|
placeholder={placeholder}
|
|
handleAddition={onTagAdd}
|
|
handleDelete={onTagDelete}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
const tagShape = {
|
|
id: PropTypes.string.isRequired,
|
|
name: PropTypes.string.isRequired
|
|
};
|
|
|
|
TextTagInput.propTypes = {
|
|
tags: PropTypes.arrayOf(PropTypes.shape(tagShape)).isRequired,
|
|
allowNew: PropTypes.bool.isRequired,
|
|
kind: PropTypes.string.isRequired,
|
|
placeholder: PropTypes.string,
|
|
onTagAdd: PropTypes.func.isRequired,
|
|
onTagDelete: PropTypes.func.isRequired
|
|
};
|
|
|
|
TextTagInput.defaultProps = {
|
|
allowNew: true,
|
|
kind: kinds.INFO
|
|
};
|
|
|
|
export default TextTagInput;
|