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 { Form, FormField } from 'component/common/form';
|
||||||
import Button from 'component/button';
|
import Button from 'component/button';
|
||||||
import SelectAsset from 'component/selectAsset';
|
import SelectAsset from 'component/selectAsset';
|
||||||
import TagSelect from 'component/tagsSelect';
|
import TagsSelect from 'component/tagsSelect';
|
||||||
import * as PAGES from 'constants/pages';
|
import * as PAGES from 'constants/pages';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
@ -182,7 +182,7 @@ function ChannelForm(props: Props) {
|
||||||
disabled={false}
|
disabled={false}
|
||||||
onChange={text => setParams({ ...params, description: text })}
|
onChange={text => setParams({ ...params, description: text })}
|
||||||
/>
|
/>
|
||||||
<TagSelect
|
<TagsSelect
|
||||||
title={__('Add Tags')}
|
title={__('Add Tags')}
|
||||||
suggestMature
|
suggestMature
|
||||||
help={__('The better your tags are, the easier it will be for people to discover your channel.')}
|
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 ChannelSection from 'component/selectChannel';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
import UnsupportedOnWeb from 'component/common/unsupported-on-web';
|
import UnsupportedOnWeb from 'component/common/unsupported-on-web';
|
||||||
import TagSelect from 'component/tagsSelect';
|
import TagsSelect from 'component/tagsSelect';
|
||||||
import PublishText from 'component/publishText';
|
import PublishText from 'component/publishText';
|
||||||
import PublishPrice from 'component/publishPrice';
|
import PublishPrice from 'component/publishPrice';
|
||||||
import PublishFile from 'component/publishFile';
|
import PublishFile from 'component/publishFile';
|
||||||
|
@ -130,7 +130,7 @@ function PublishForm(props: Props) {
|
||||||
<PublishText disabled={formDisabled} />
|
<PublishText disabled={formDisabled} />
|
||||||
<Card actions={<SelectThumbnail />} />
|
<Card actions={<SelectThumbnail />} />
|
||||||
|
|
||||||
<TagSelect
|
<TagsSelect
|
||||||
title={__('Add Tags')}
|
title={__('Add Tags')}
|
||||||
suggestMature
|
suggestMature
|
||||||
help={__('The better your tags are, the easier it will be for people to discover your content.')}
|
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 });
|
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
|
// Make sure there are no duplicates, then trim
|
||||||
const suggestedTagsSet = new Set(tags.map(tag => tag.name));
|
const suggestedTagsSet = new Set(tags.map(tag => tag.name));
|
||||||
const suggestedTags = Array.from(suggestedTagsSet)
|
const suggestedTags = Array.from(suggestedTagsSet)
|
||||||
|
@ -51,32 +56,40 @@ export default function TagsSearch(props: Props) {
|
||||||
|
|
||||||
function handleSubmit(e) {
|
function handleSubmit(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const trimmedTag = newTag.trim();
|
let tags = newTag.trim();
|
||||||
|
|
||||||
if (trimmedTag.length === 0) {
|
if (tags.length === 0) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
setNewTag('');
|
setNewTag('');
|
||||||
if (onSelect) {
|
|
||||||
onSelect({ name: trimmedTag });
|
|
||||||
} else {
|
|
||||||
if (!unfollowedTags.map(({ name }) => name).includes(trimmedTag)) {
|
|
||||||
doAddTag(trimmedTag);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!followedTags.map(({ name }) => name).includes(trimmedTag)) {
|
tags = tags.split(',').map(newTag => newTag.trim());
|
||||||
doToggleTagFollow(trimmedTag);
|
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) {
|
function handleTagClick(tags) {
|
||||||
if (onSelect) {
|
tags = tags.split(',').map(newTag => newTag.trim());
|
||||||
onSelect({ name: tag });
|
|
||||||
} else {
|
tags.forEach(tag => {
|
||||||
doToggleTagFollow(tag);
|
if (onSelect) {
|
||||||
}
|
onSelect({ name: tag });
|
||||||
|
} else {
|
||||||
|
doToggleTagFollow(tag);
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -23,7 +23,7 @@ type Props = {
|
||||||
placeholder?: string,
|
placeholder?: string,
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function TagSelect(props: Props) {
|
export default function TagsSelect(props: Props) {
|
||||||
const {
|
const {
|
||||||
showClose,
|
showClose,
|
||||||
followedTags,
|
followedTags,
|
||||||
|
|
|
@ -792,4 +792,4 @@
|
||||||
"Create": "Create",
|
"Create": "Create",
|
||||||
"You have no rewards available.": "You have no rewards available.",
|
"You have no rewards available.": "You have no rewards available.",
|
||||||
"URL does not include name.": "URL does not include name."
|
"URL does not include name.": "URL does not include name."
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue