mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-10-22 20:46:11 +03:00
Code Issues Projects Releases Packages Wiki Activity

Use ReactTags.suggestionsTransform to enforce at least 1 char

Browse source
This commit is contained in:
Alejandro Celaya 2023-08-12 13:50:10 +02:00
parent 94ba244ae1
commit 3436b52c06
1 changed files with 8 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
shlink-web-component/src/tags/helpers/TagsSelector.tsx
View file

@ -24,12 +24,13 @@ const toTagSuggestion = (tag: string): TagSuggestion => ({ label: tag, value: ta
export const TagsSelector = (colorGenerator: ColorGenerator) => (
{ selectedTags, onChange, placeholder, listTags, tagsList, allowNew = true }: TagsSelectorConnectProps,
) => {
const shortUrlCreation = useSetting('shortUrlCreation');
useEffect(() => {
listTags();
}, []);
const shortUrlCreation = useSetting('shortUrlCreation');
const searchMode = shortUrlCreation?.tagFilteringMode ?? 'startsWith';
const ReactTagsTag = ({ tag, onClick: deleteTag }: TagRendererProps) => (
<Tag colorGenerator={colorGenerator} text={tag.label} clearable className="react-tags__tag" onClose={deleteTag} />
);
@ -49,16 +50,17 @@ export const TagsSelector = (colorGenerator: ColorGenerator) => (
allowNew={allowNew}
// addOnBlur TODO Implement manually
placeholderText={placeholder ?? 'Add tags to the URL'}
onShouldExpand={(value) => value.length > 1}
delimiterKeys={['Enter', 'Tab', ',']}
suggestionsTransform={
searchMode === 'includes'
? (query, suggestions) => suggestions.filter(({ label }) => label.includes(query))
: undefined
(query, suggestions) => {
const searchTerm = query.toLowerCase().trim();
return searchTerm.length < 1 ? [] : suggestions.filter(
({ label }) => (searchMode === 'includes' ? label.includes(searchTerm) : label.startsWith(searchTerm)),
);
}
}
onDelete={(removedTagIndex) => {
const tagsCopy = [...selectedTags];
tagsCopy.splice(removedTagIndex, 1);
onChange(tagsCopy);
}}