mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 09:30:31 +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) => ( export const TagsSelector = (colorGenerator: ColorGenerator) => (
{ selectedTags, onChange, placeholder, listTags, tagsList, allowNew = true }: TagsSelectorConnectProps, { selectedTags, onChange, placeholder, listTags, tagsList, allowNew = true }: TagsSelectorConnectProps,
) => { ) => {
const shortUrlCreation = useSetting('shortUrlCreation');
useEffect(() => { useEffect(() => {
listTags(); listTags();
}, []); }, []);
const shortUrlCreation = useSetting('shortUrlCreation');
const searchMode = shortUrlCreation?.tagFilteringMode ?? 'startsWith'; const searchMode = shortUrlCreation?.tagFilteringMode ?? 'startsWith';
const ReactTagsTag = ({ tag, onClick: deleteTag }: TagRendererProps) => ( const ReactTagsTag = ({ tag, onClick: deleteTag }: TagRendererProps) => (
<Tag colorGenerator={colorGenerator} text={tag.label} clearable className="react-tags__tag" onClose={deleteTag} /> <Tag colorGenerator={colorGenerator} text={tag.label} clearable className="react-tags__tag" onClose={deleteTag} />
); );
@ -49,16 +50,17 @@ export const TagsSelector = (colorGenerator: ColorGenerator) => (
allowNew={allowNew} allowNew={allowNew}
// addOnBlur TODO Implement manually // addOnBlur TODO Implement manually
placeholderText={placeholder ?? 'Add tags to the URL'} placeholderText={placeholder ?? 'Add tags to the URL'}
onShouldExpand={(value) => value.length > 1}
delimiterKeys={['Enter', 'Tab', ',']} delimiterKeys={['Enter', 'Tab', ',']}
suggestionsTransform={ suggestionsTransform={
searchMode === 'includes' (query, suggestions) => {
? (query, suggestions) => suggestions.filter(({ label }) => label.includes(query)) const searchTerm = query.toLowerCase().trim();
: undefined return searchTerm.length < 1 ? [] : suggestions.filter(
({ label }) => (searchMode === 'includes' ? label.includes(searchTerm) : label.startsWith(searchTerm)),
);
}
} }
onDelete={(removedTagIndex) => { onDelete={(removedTagIndex) => {
const tagsCopy = [...selectedTags]; const tagsCopy = [...selectedTags];
tagsCopy.splice(removedTagIndex, 1); tagsCopy.splice(removedTagIndex, 1);
onChange(tagsCopy); onChange(tagsCopy);
}} }}