mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2025-01-10 18:27:25 +03:00
Merge pull request #467 from acelaya-forks/feature/comma-separated-tags
Feature/comma separated tags
This commit is contained in:
commit
590393dcfd
3 changed files with 14 additions and 4 deletions
|
@ -7,6 +7,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|||
## [Unreleased]
|
||||
### Added
|
||||
* [#460](https://github.com/shlinkio/shlink-web-client/pull/460) Added dynamic title on hover for tags with a very long title.
|
||||
* [#462](https://github.com/shlinkio/shlink-web-client/pull/462) Now it is possible to paste multiple comma-separated tags in the tags selector, making all of them to be added as individual tags.
|
||||
|
||||
### Changed
|
||||
* *Nothing*
|
||||
|
|
|
@ -44,13 +44,18 @@ const TagsSelector = (colorGenerator: ColorGenerator) => (
|
|||
addOnBlur
|
||||
placeholderText={placeholder}
|
||||
minQueryLength={1}
|
||||
delimiters={[ 'Enter', 'Tab', ',' ]}
|
||||
onDelete={(removedTagIndex) => {
|
||||
const tagsCopy = [ ...selectedTags ];
|
||||
|
||||
tagsCopy.splice(removedTagIndex, 1);
|
||||
onChange(tagsCopy);
|
||||
}}
|
||||
onAddition={({ name: newTag }) => onChange([ ...selectedTags, newTag.toLowerCase() ])}
|
||||
onAddition={({ name: newTag }) => onChange(
|
||||
// * Avoid duplicated tags (thanks to the Set),
|
||||
// * Split any of the new tags by comma, allowing to paste multiple comma-separated tags at once.
|
||||
[ ...new Set([ ...selectedTags, ...newTag.toLowerCase().split(',') ]) ],
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -49,10 +49,14 @@ describe('<TagsSelector />', () => {
|
|||
]);
|
||||
});
|
||||
|
||||
it('invokes onChange when new tags are added', () => {
|
||||
wrapper.simulate('addition', { name: 'The-New-Tag' });
|
||||
it.each([
|
||||
[ 'The-New-Tag', [ ...tags, 'the-new-tag' ]],
|
||||
[ 'comma,separated,tags', [ ...tags, 'comma', 'separated', 'tags' ]],
|
||||
[ 'foo', tags ],
|
||||
])('invokes onChange when new tags are added', (newTag, expectedTags) => {
|
||||
wrapper.simulate('addition', { name: newTag });
|
||||
|
||||
expect(onChange).toHaveBeenCalledWith([ ...tags, 'the-new-tag' ]);
|
||||
expect(onChange).toHaveBeenCalledWith(expectedTags);
|
||||
});
|
||||
|
||||
it.each([
|
||||
|
|
Loading…
Reference in a new issue