mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 09:30:31 +03:00
Updated TagsSelector to be a functional component
This commit is contained in:
parent
ebe649aaac
commit
11f9c7c507
1 changed files with 21 additions and 24 deletions
|
@ -1,4 +1,4 @@
|
|||
import React from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
import TagsInput from 'react-tagsinput';
|
||||
import PropTypes from 'prop-types';
|
||||
import Autosuggest from 'react-autosuggest';
|
||||
|
@ -6,8 +6,7 @@ import { identity } from 'ramda';
|
|||
import TagBullet from './TagBullet';
|
||||
import './TagsSelector.scss';
|
||||
|
||||
const TagsSelector = (colorGenerator) => class TagsSelector extends React.Component {
|
||||
static propTypes = {
|
||||
const propTypes = {
|
||||
tags: PropTypes.arrayOf(PropTypes.string).isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
listTags: PropTypes.func,
|
||||
|
@ -15,19 +14,15 @@ const TagsSelector = (colorGenerator) => class TagsSelector extends React.Compon
|
|||
tagsList: PropTypes.shape({
|
||||
tags: PropTypes.arrayOf(PropTypes.string),
|
||||
}),
|
||||
};
|
||||
static defaultProps = {
|
||||
placeholder: 'Add tags to the URL',
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
const { listTags } = this.props;
|
||||
};
|
||||
|
||||
const TagsSelector = (colorGenerator) => {
|
||||
const TagsSelectorComp = ({ tags, onChange, listTags, tagsList, placeholder = 'Add tags to the URL' }) => {
|
||||
useEffect(() => {
|
||||
listTags();
|
||||
}
|
||||
}, []);
|
||||
|
||||
render() {
|
||||
const { tags, onChange, placeholder, tagsList } = this.props;
|
||||
// eslint-disable-next-line
|
||||
const renderTag = ({ tag, key, disabled, onRemove, classNameRemove, getTagDisplayValue, ...other }) => (
|
||||
<span key={key} style={{ backgroundColor: colorGenerator.getColorForKey(tag) }} {...other}>
|
||||
{getTagDisplayValue(tag)}
|
||||
|
@ -40,7 +35,6 @@ const TagsSelector = (colorGenerator) => class TagsSelector extends React.Compon
|
|||
method === 'enter' ? e.preventDefault() : otherProps.onChange(e);
|
||||
};
|
||||
|
||||
// eslint-disable-next-line no-extra-parens
|
||||
const inputValue = (otherProps.value && otherProps.value.trim().toLowerCase()) || '';
|
||||
const inputLength = inputValue.length;
|
||||
const suggestions = tagsList.tags.filter((state) => state.toLowerCase().slice(0, inputLength) === inputValue);
|
||||
|
@ -75,13 +69,16 @@ const TagsSelector = (colorGenerator) => class TagsSelector extends React.Compon
|
|||
onlyUnique
|
||||
renderTag={renderTag}
|
||||
renderInput={renderAutocompleteInput}
|
||||
|
||||
// FIXME Workaround to be able to add tags on Android
|
||||
addOnBlur
|
||||
onChange={onChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
TagsSelectorComp.propTypes = propTypes;
|
||||
|
||||
return TagsSelectorComp;
|
||||
};
|
||||
|
||||
export default TagsSelector;
|
||||
|
|
Loading…
Reference in a new issue