mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 17:40:23 +03:00
Code Issues Projects Releases Packages Wiki Activity

Updated TagsSelector to be a functional component

Browse source
This commit is contained in:
Alejandro Celaya 2020-05-31 11:19:53 +02:00
parent ebe649aaac
commit 11f9c7c507
1 changed files with 21 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/tags/helpers/TagsSelector.js
View file

@ -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,
@ -16,18 +15,14 @@ const TagsSelector = (colorGenerator) => class TagsSelector extends React.Compon
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;