mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 17:40:23 +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 TagsInput from 'react-tagsinput';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import Autosuggest from 'react-autosuggest';
|
import Autosuggest from 'react-autosuggest';
|
||||||
|
@ -6,8 +6,7 @@ import { identity } from 'ramda';
|
||||||
import TagBullet from './TagBullet';
|
import TagBullet from './TagBullet';
|
||||||
import './TagsSelector.scss';
|
import './TagsSelector.scss';
|
||||||
|
|
||||||
const TagsSelector = (colorGenerator) => class TagsSelector extends React.Component {
|
const propTypes = {
|
||||||
static propTypes = {
|
|
||||||
tags: PropTypes.arrayOf(PropTypes.string).isRequired,
|
tags: PropTypes.arrayOf(PropTypes.string).isRequired,
|
||||||
onChange: PropTypes.func.isRequired,
|
onChange: PropTypes.func.isRequired,
|
||||||
listTags: PropTypes.func,
|
listTags: PropTypes.func,
|
||||||
|
@ -15,19 +14,15 @@ const TagsSelector = (colorGenerator) => class TagsSelector extends React.Compon
|
||||||
tagsList: PropTypes.shape({
|
tagsList: PropTypes.shape({
|
||||||
tags: PropTypes.arrayOf(PropTypes.string),
|
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();
|
listTags();
|
||||||
}
|
}, []);
|
||||||
|
|
||||||
render() {
|
// eslint-disable-next-line
|
||||||
const { tags, onChange, placeholder, tagsList } = this.props;
|
|
||||||
const renderTag = ({ tag, key, disabled, onRemove, classNameRemove, getTagDisplayValue, ...other }) => (
|
const renderTag = ({ tag, key, disabled, onRemove, classNameRemove, getTagDisplayValue, ...other }) => (
|
||||||
<span key={key} style={{ backgroundColor: colorGenerator.getColorForKey(tag) }} {...other}>
|
<span key={key} style={{ backgroundColor: colorGenerator.getColorForKey(tag) }} {...other}>
|
||||||
{getTagDisplayValue(tag)}
|
{getTagDisplayValue(tag)}
|
||||||
|
@ -40,7 +35,6 @@ const TagsSelector = (colorGenerator) => class TagsSelector extends React.Compon
|
||||||
method === 'enter' ? e.preventDefault() : otherProps.onChange(e);
|
method === 'enter' ? e.preventDefault() : otherProps.onChange(e);
|
||||||
};
|
};
|
||||||
|
|
||||||
// eslint-disable-next-line no-extra-parens
|
|
||||||
const inputValue = (otherProps.value && otherProps.value.trim().toLowerCase()) || '';
|
const inputValue = (otherProps.value && otherProps.value.trim().toLowerCase()) || '';
|
||||||
const inputLength = inputValue.length;
|
const inputLength = inputValue.length;
|
||||||
const suggestions = tagsList.tags.filter((state) => state.toLowerCase().slice(0, inputLength) === inputValue);
|
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
|
onlyUnique
|
||||||
renderTag={renderTag}
|
renderTag={renderTag}
|
||||||
renderInput={renderAutocompleteInput}
|
renderInput={renderAutocompleteInput}
|
||||||
|
|
||||||
// FIXME Workaround to be able to add tags on Android
|
// FIXME Workaround to be able to add tags on Android
|
||||||
addOnBlur
|
addOnBlur
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
|
TagsSelectorComp.propTypes = propTypes;
|
||||||
|
|
||||||
|
return TagsSelectorComp;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default TagsSelector;
|
export default TagsSelector;
|
||||||
|
|
Loading…
Reference in a new issue