fix pressing enter on channel edit page for adding tags
This commit is contained in:
zxawry
Sean Yesmunt
parent
aa69b227bd
commit
66c6ec1626
1 changed files with 99 additions and 101 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
// @flow
|
// @flow
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { Form, FormField } from 'component/common/form';
|
import { 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 TagsSelect from 'component/tagsSelect';
|
import TagsSelect from 'component/tagsSelect';
|
||||||
|
|
@ -98,110 +98,108 @@ function ChannelForm(props: Props) {
|
||||||
setParams({ ...params, coverUrl });
|
setParams({ ...params, coverUrl });
|
||||||
updateCover(coverUrl);
|
updateCover(coverUrl);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleSubmit = () => {
|
||||||
|
updateChannel(params);
|
||||||
|
setEditing(false);
|
||||||
|
};
|
||||||
// TODO clear and bail after submit
|
// TODO clear and bail after submit
|
||||||
return (
|
return (
|
||||||
<section className={'card--section'}>
|
<section className={'card--section'}>
|
||||||
<Form
|
<SelectAsset
|
||||||
onSubmit={() => {
|
onUpdate={v => handleThumbnailChange(v)}
|
||||||
updateChannel(params);
|
currentValue={params.thumbnailUrl}
|
||||||
setEditing(false);
|
assetName={'Thumbnail'}
|
||||||
|
recommended={'(300 x 300)'}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<SelectAsset
|
||||||
|
onUpdate={v => handleCoverChange(v)}
|
||||||
|
currentValue={params.coverUrl}
|
||||||
|
assetName={'Cover'}
|
||||||
|
recommended={'(1000 x 160)'}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
type="text"
|
||||||
|
name="channel_title2"
|
||||||
|
label={__('Title')}
|
||||||
|
placeholder={__('Titular Title')}
|
||||||
|
disabled={false}
|
||||||
|
value={params.title}
|
||||||
|
onChange={e => setParams({ ...params, title: e.target.value })}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
className="form-field--price-amount"
|
||||||
|
type="number"
|
||||||
|
name="content_bid2"
|
||||||
|
step="any"
|
||||||
|
label={__('Deposit (LBC)')}
|
||||||
|
postfix="LBC"
|
||||||
|
value={params.amount}
|
||||||
|
error={bidError}
|
||||||
|
min="0.0"
|
||||||
|
disabled={false}
|
||||||
|
onChange={event => handleBidChange(parseFloat(event.target.value))}
|
||||||
|
placeholder={0.1}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
type="text"
|
||||||
|
name="channel_website2"
|
||||||
|
label={__('Website')}
|
||||||
|
placeholder={__('aprettygoodsite.com')}
|
||||||
|
disabled={false}
|
||||||
|
value={params.website}
|
||||||
|
onChange={e => setParams({ ...params, website: e.target.value })}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
type="text"
|
||||||
|
name="content_email2"
|
||||||
|
label={__('Email')}
|
||||||
|
placeholder={__('yourstruly@example.com')}
|
||||||
|
disabled={false}
|
||||||
|
value={params.email}
|
||||||
|
onChange={e => setParams({ ...params, email: e.target.value })}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
type="markdown"
|
||||||
|
name="content_description2"
|
||||||
|
label={__('Description')}
|
||||||
|
placeholder={__('Description of your content')}
|
||||||
|
value={params.description}
|
||||||
|
disabled={false}
|
||||||
|
onChange={text => setParams({ ...params, description: text })}
|
||||||
|
/>
|
||||||
|
<TagsSelect
|
||||||
|
title={__('Add Tags')}
|
||||||
|
suggestMature
|
||||||
|
disableAutoFocus
|
||||||
|
help={__('The better your tags are, the easier it will be for people to discover your channel.')}
|
||||||
|
empty={__('No tags added')}
|
||||||
|
placeholder={__('Add a tag')}
|
||||||
|
onSelect={newTags => {
|
||||||
|
newTags.forEach(newTag => {
|
||||||
|
if (!params.tags.map(savedTag => savedTag.name).includes(newTag.name)) {
|
||||||
|
setParams({ ...params, tags: [...params.tags, newTag] });
|
||||||
|
} else {
|
||||||
|
// If it already exists and the user types it in, remove it
|
||||||
|
setParams({ ...params, tags: params.tags.filter(tag => tag.name !== newTag.name) });
|
||||||
|
}
|
||||||
|
});
|
||||||
}}
|
}}
|
||||||
>
|
onRemove={clickedTag => {
|
||||||
<SelectAsset
|
const newTags = params.tags.slice().filter(tag => tag.name !== clickedTag.name);
|
||||||
onUpdate={v => handleThumbnailChange(v)}
|
setParams({ ...params, tags: newTags });
|
||||||
currentValue={params.thumbnailUrl}
|
}}
|
||||||
assetName={'Thumbnail'}
|
tagsChosen={params.tags || []}
|
||||||
recommended={'(300 x 300)'}
|
/>
|
||||||
/>
|
<div className={'card__actions'}>
|
||||||
|
<Button button="primary" label={__('Submit')} onClick={handleSubmit} />
|
||||||
<SelectAsset
|
<Button button="link" label={__('Cancel')} navigate={`$/${PAGES.CHANNELS}`} />
|
||||||
onUpdate={v => handleCoverChange(v)}
|
</div>
|
||||||
currentValue={params.coverUrl}
|
|
||||||
assetName={'Cover'}
|
|
||||||
recommended={'(1000 x 160)'}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FormField
|
|
||||||
type="text"
|
|
||||||
name="channel_title2"
|
|
||||||
label={__('Title')}
|
|
||||||
placeholder={__('Titular Title')}
|
|
||||||
disabled={false}
|
|
||||||
value={params.title}
|
|
||||||
onChange={e => setParams({ ...params, title: e.target.value })}
|
|
||||||
/>
|
|
||||||
<FormField
|
|
||||||
className="form-field--price-amount"
|
|
||||||
type="number"
|
|
||||||
name="content_bid2"
|
|
||||||
step="any"
|
|
||||||
label={__('Deposit (LBC)')}
|
|
||||||
postfix="LBC"
|
|
||||||
value={params.amount}
|
|
||||||
error={bidError}
|
|
||||||
min="0.0"
|
|
||||||
disabled={false}
|
|
||||||
onChange={event => handleBidChange(parseFloat(event.target.value))}
|
|
||||||
placeholder={0.1}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FormField
|
|
||||||
type="text"
|
|
||||||
name="channel_website2"
|
|
||||||
label={__('Website')}
|
|
||||||
placeholder={__('aprettygoodsite.com')}
|
|
||||||
disabled={false}
|
|
||||||
value={params.website}
|
|
||||||
onChange={e => setParams({ ...params, website: e.target.value })}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FormField
|
|
||||||
type="text"
|
|
||||||
name="content_email2"
|
|
||||||
label={__('Email')}
|
|
||||||
placeholder={__('yourstruly@example.com')}
|
|
||||||
disabled={false}
|
|
||||||
value={params.email}
|
|
||||||
onChange={e => setParams({ ...params, email: e.target.value })}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FormField
|
|
||||||
type="markdown"
|
|
||||||
name="content_description2"
|
|
||||||
label={__('Description')}
|
|
||||||
placeholder={__('Description of your content')}
|
|
||||||
value={params.description}
|
|
||||||
disabled={false}
|
|
||||||
onChange={text => setParams({ ...params, description: text })}
|
|
||||||
/>
|
|
||||||
<TagsSelect
|
|
||||||
title={__('Add Tags')}
|
|
||||||
suggestMature
|
|
||||||
disableAutoFocus
|
|
||||||
help={__('The better your tags are, the easier it will be for people to discover your channel.')}
|
|
||||||
empty={__('No tags added')}
|
|
||||||
placeholder={__('Add a tag')}
|
|
||||||
onSelect={newTags => {
|
|
||||||
newTags.forEach(newTag => {
|
|
||||||
if (!params.tags.map(savedTag => savedTag.name).includes(newTag.name)) {
|
|
||||||
setParams({ ...params, tags: [...params.tags, newTag] });
|
|
||||||
} else {
|
|
||||||
// If it already exists and the user types it in, remove it
|
|
||||||
setParams({ ...params, tags: params.tags.filter(tag => tag.name !== newTag.name) });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
onRemove={clickedTag => {
|
|
||||||
const newTags = params.tags.slice().filter(tag => tag.name !== clickedTag.name);
|
|
||||||
setParams({ ...params, tags: newTags });
|
|
||||||
}}
|
|
||||||
tagsChosen={params.tags || []}
|
|
||||||
/>
|
|
||||||
<div className={'card__actions'}>
|
|
||||||
<Button button="primary" label={__('Submit')} type="submit" />
|
|
||||||
<Button button="link" label={__('Cancel')} navigate={`$/${PAGES.CHANNELS}`} />
|
|
||||||
</div>
|
|
||||||
</Form>
|
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue