Added provision for adding multiple tags by using commas

This commit is contained in:
Pranab Singh 2019-10-09 02:10:10 +05:30 committed by Sean Yesmunt
parent c88bb04f08
commit 8c4c5709c6
5 changed files with 37 additions and 24 deletions

View file

@ -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.')}

View file

@ -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.')}

View file

@ -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 (

View file

@ -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,

View file

@ -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."
} }