Added provision for adding multiple tags by using commas
This commit is contained in:
parent
c88bb04f08
commit
8c4c5709c6
5 changed files with 37 additions and 24 deletions
|
@ -3,7 +3,7 @@ import React, { useState } from 'react';
|
|||
import { Form, FormField } from 'component/common/form';
|
||||
import Button from 'component/button';
|
||||
import SelectAsset from 'component/selectAsset';
|
||||
import TagSelect from 'component/tagsSelect';
|
||||
import TagsSelect from 'component/tagsSelect';
|
||||
import * as PAGES from 'constants/pages';
|
||||
|
||||
type Props = {
|
||||
|
@ -182,7 +182,7 @@ function ChannelForm(props: Props) {
|
|||
disabled={false}
|
||||
onChange={text => setParams({ ...params, description: text })}
|
||||
/>
|
||||
<TagSelect
|
||||
<TagsSelect
|
||||
title={__('Add Tags')}
|
||||
suggestMature
|
||||
help={__('The better your tags are, the easier it will be for people to discover your channel.')}
|
||||
|
|
|
@ -6,7 +6,7 @@ import Button from 'component/button';
|
|||
import ChannelSection from 'component/selectChannel';
|
||||
import classnames from 'classnames';
|
||||
import UnsupportedOnWeb from 'component/common/unsupported-on-web';
|
||||
import TagSelect from 'component/tagsSelect';
|
||||
import TagsSelect from 'component/tagsSelect';
|
||||
import PublishText from 'component/publishText';
|
||||
import PublishPrice from 'component/publishPrice';
|
||||
import PublishFile from 'component/publishFile';
|
||||
|
@ -130,7 +130,7 @@ function PublishForm(props: Props) {
|
|||
<PublishText disabled={formDisabled} />
|
||||
<Card actions={<SelectThumbnail />} />
|
||||
|
||||
<TagSelect
|
||||
<TagsSelect
|
||||
title={__('Add Tags')}
|
||||
suggestMature
|
||||
help={__('The better your tags are, the easier it will be for people to discover your content.')}
|
||||
|
|
|
@ -34,7 +34,12 @@ export default function TagsSearch(props: Props) {
|
|||
tags.unshift({ name: newTag });
|
||||
}
|
||||
|
||||
const doesTagMatch = name => (newTag ? name.toLowerCase().includes(newTag.toLowerCase()) : true);
|
||||
const doesTagMatch = name => {
|
||||
let nextTag;
|
||||
nextTag = newTag.substr(newTag.lastIndexOf(',') + 1, newTag.length);
|
||||
nextTag = newTag.substr(newTag.lastIndexOf(' ') + 1, newTag.length);
|
||||
return newTag ? name.toLowerCase().includes(nextTag.toLowerCase()) : true;
|
||||
};
|
||||
// Make sure there are no duplicates, then trim
|
||||
const suggestedTagsSet = new Set(tags.map(tag => tag.name));
|
||||
const suggestedTags = Array.from(suggestedTagsSet)
|
||||
|
@ -51,32 +56,40 @@ export default function TagsSearch(props: Props) {
|
|||
|
||||
function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
const trimmedTag = newTag.trim();
|
||||
let tags = newTag.trim();
|
||||
|
||||
if (trimmedTag.length === 0) {
|
||||
if (tags.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
setNewTag('');
|
||||
if (onSelect) {
|
||||
onSelect({ name: trimmedTag });
|
||||
} else {
|
||||
if (!unfollowedTags.map(({ name }) => name).includes(trimmedTag)) {
|
||||
doAddTag(trimmedTag);
|
||||
}
|
||||
|
||||
if (!followedTags.map(({ name }) => name).includes(trimmedTag)) {
|
||||
doToggleTagFollow(trimmedTag);
|
||||
tags = tags.split(',').map(newTag => newTag.trim());
|
||||
tags.forEach(tag => {
|
||||
if (onSelect) {
|
||||
onSelect({ name: tag });
|
||||
} else {
|
||||
if (!unfollowedTags.map(({ name }) => name).includes(tag)) {
|
||||
doAddTag(tag);
|
||||
}
|
||||
|
||||
if (!followedTags.map(({ name }) => name).includes(tag)) {
|
||||
doToggleTagFollow(tag);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleTagClick(tag) {
|
||||
if (onSelect) {
|
||||
onSelect({ name: tag });
|
||||
} else {
|
||||
doToggleTagFollow(tag);
|
||||
}
|
||||
function handleTagClick(tags) {
|
||||
tags = tags.split(',').map(newTag => newTag.trim());
|
||||
|
||||
tags.forEach(tag => {
|
||||
if (onSelect) {
|
||||
onSelect({ name: tag });
|
||||
} else {
|
||||
doToggleTagFollow(tag);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
@ -23,7 +23,7 @@ type Props = {
|
|||
placeholder?: string,
|
||||
};
|
||||
|
||||
export default function TagSelect(props: Props) {
|
||||
export default function TagsSelect(props: Props) {
|
||||
const {
|
||||
showClose,
|
||||
followedTags,
|
||||
|
|
|
@ -792,4 +792,4 @@
|
|||
"Create": "Create",
|
||||
"You have no rewards available.": "You have no rewards available.",
|
||||
"URL does not include name.": "URL does not include name."
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue