diff --git a/packages/component-submit/src/components/Metadata.js b/packages/component-submit/src/components/Metadata.js index 288156a660cf6fd3b319eef5ab0642f2ab67c646..8e70bfb5d19b294288559c484a9ca5f888313650 100644 --- a/packages/component-submit/src/components/Metadata.js +++ b/packages/component-submit/src/components/Metadata.js @@ -1,9 +1,9 @@ import React from 'react' import { FormSection, Field } from 'redux-form' import { AbstractEditor, TitleEditor } from 'xpub-edit' -import { CheckboxGroup, Menu, Tags, ValidatedField } from 'xpub-ui' +import { CheckboxGroup, Menu, TextField, ValidatedField } from 'xpub-ui' import classes from './Metadata.local.css' -import { required, minChars, maxChars, minSize } from '../lib/validators' +import { join, required, minChars, maxChars, minSize, split } from '../lib/validators' const Metadata = ({ journal, validators }) => ( <FormSection name="metadata"> @@ -42,11 +42,13 @@ const Metadata = ({ journal, validators }) => ( <Field name="authors" required + format={join()} + parse={split()} validate={[minSize(1)]} component={props => <ValidatedField {...props.meta}> - <Tags - placeholder="Enter an author…" + <TextField + placeholder="Enter author names…" {...props.input}/> </ValidatedField> }/> @@ -57,11 +59,13 @@ const Metadata = ({ journal, validators }) => ( <Field name="keywords" required + format={join()} + parse={split()} validate={[minSize(1)]} component={props => <ValidatedField {...props.meta}> - <Tags - placeholder="Enter a keyword…" + <TextField + placeholder="Enter keywords…" {...props.input}/> </ValidatedField> }/> diff --git a/packages/component-submit/src/components/Suggestions.js b/packages/component-submit/src/components/Suggestions.js index 7308de2f6f0c11b3407edd6e2ed682c6337fd1d6..2a618dbaffe1a4f51d7bc994a6b812739c40546d 100644 --- a/packages/component-submit/src/components/Suggestions.js +++ b/packages/component-submit/src/components/Suggestions.js @@ -1,6 +1,7 @@ import React from 'react' import { FormSection, Field } from 'redux-form' -import { Tags, ValidatedField } from 'xpub-ui' +import { TextField, ValidatedField } from 'xpub-ui' +import { join, split } from '../lib/validators' import classes from './Suggestions.local.css' const Suggestions = () => ( @@ -16,10 +17,12 @@ const Suggestions = () => ( <Field name="suggested" + format={join()} + parse={split()} component={props => <ValidatedField {...props.meta}> - <Tags - placeholder="Add a reviewer" + <TextField + placeholder="Add reviewer names" {...props.input}/> </ValidatedField> }/> @@ -30,10 +33,12 @@ const Suggestions = () => ( <Field name="opposed" + format={join()} + parse={split()} component={props => <ValidatedField {...props.meta}> - <Tags - placeholder="Add a reviewer" + <TextField + placeholder="Add reviewer names" {...props.input}/> </ValidatedField> }/> @@ -52,10 +57,12 @@ const Suggestions = () => ( <Field name="suggested" + format={join()} + parse={split()} component={props => <ValidatedField {...props.meta}> - <Tags - placeholder="Add an editor" + <TextField + placeholder="Add editor names" {...props.input}/> </ValidatedField> }/> @@ -66,10 +73,12 @@ const Suggestions = () => ( <Field name="opposed" + format={join()} + parse={split()} component={props => <ValidatedField {...props.meta}> - <Tags - placeholder="Add an editor" + <TextField + placeholder="Add editor names" {...props.input}/> </ValidatedField> }/> diff --git a/packages/component-submit/src/components/Suggestions.local.css b/packages/component-submit/src/components/Suggestions.local.css index c92c65cac05571fcfa5b662723ff1a2a91c22ef7..b4d223bc65ba528911a09be42097f2c45b0fa3f1 100644 --- a/packages/component-submit/src/components/Suggestions.local.css +++ b/packages/component-submit/src/components/Suggestions.local.css @@ -9,4 +9,5 @@ .legend { font-weight: bold; + margin-right: 10px; } diff --git a/packages/component-submit/src/lib/validators.js b/packages/component-submit/src/lib/validators.js index 8f53233a4165ee4ea4b51621954fd6b68263b163..f2fc48789a9f1e650af5986a944a5374dcc04d54 100644 --- a/packages/component-submit/src/lib/validators.js +++ b/packages/component-submit/src/lib/validators.js @@ -1,35 +1,57 @@ import striptags from 'striptags' -export const required = value => { - if (!value) return 'This is required' +export const split = (separator = ',') => value => { + return value ? value.split(separator) : [] +} - return undefined +export const join = (separator = ',') => value => { + return value ? value.join(separator) : value } -export const minChars = min => value => { - const text = striptags(value) +export const required = value => { + return value ? undefined : 'Required' +} - if (!text || text.length < min) { - return `Enter at least ${min} characters` - } +export const minChars = min => { + const message = `Enter at least ${min} characters` - return undefined -} + return value => { + const text = striptags(value) -export const maxChars = max => value => { - const text = striptags(value) + if (!text || text.length < min) { + return message + } - if (!text || text.length > max) { - return `Enter no more than ${max} characters` + return undefined } - - return undefined } -export const minSize = min => value => { - if (!value || value.length < min) { - return `Enter at least ${min} ${min === 1 ? 'item' : 'items'}` +export const maxChars = max => { + const message = `Enter no more than ${max} characters` + + return value => { + const text = striptags(value) + + if (!text || text.length > max) { + return message + } + + return undefined } +} + +export const minSize = min => { + const message = `Enter at least ${min} ${min === 1 ? 'item' : 'items'}` - return undefined + return value => { + if (!value) { + return message + } + + if (value.length < min) { + return message + } + + return undefined + } } diff --git a/packages/xpub-ui/src/atoms/TextField.js b/packages/xpub-ui/src/atoms/TextField.js index 6afd46ae934d9f4c4f672d5f62100cfbd0a04115..8aad7d3eec172d755af060502c342bee9628a2e6 100644 --- a/packages/xpub-ui/src/atoms/TextField.js +++ b/packages/xpub-ui/src/atoms/TextField.js @@ -1,14 +1,15 @@ import React from 'react' import classes from './TextField.local.css' -const TextField = ({ label, name, required, type = 'text', value, onChange }) => ( +const TextField = ({ label, name, placeholder, required, type = 'text', value, onChange }) => ( <label className={classes.root}> - <span className={classes.text}>{label}</span> + {label && <span className={classes.text}>{label}</span>} <input className={classes.input} name={name} type={type} value={value} + placeholder={placeholder} required={required} onChange={onChange}/> </label> diff --git a/packages/xpub-ui/src/atoms/TextField.local.css b/packages/xpub-ui/src/atoms/TextField.local.css index f80c5e48ae351f6fb90ce6844dbb9a71ada1b800..0ea16c51e3504c3ace249ecef42a6f352144e42b 100644 --- a/packages/xpub-ui/src/atoms/TextField.local.css +++ b/packages/xpub-ui/src/atoms/TextField.local.css @@ -1,3 +1,14 @@ +.root { + display: flex; + align-items: center; +} + .text { margin-right: 10px; } + +.input { + flex: 1; + font-size: inherit; + padding: 0.5em; +} diff --git a/packages/xpub-ui/src/index.js b/packages/xpub-ui/src/index.js index b98447d749fff42e720d4b7618bc590bf0648e3b..3ed466791fd6a5260b421a4132e3d3ed9c02f49c 100644 --- a/packages/xpub-ui/src/index.js +++ b/packages/xpub-ui/src/index.js @@ -5,6 +5,7 @@ export { default as Icon } from './atoms/Icon' export { default as Menu } from './atoms/Menu' export { default as Radio } from './atoms/Radio' export { default as Tags } from './atoms/Tags' +export { default as TextField } from './atoms/TextField' export { default as ValidatedField } from './atoms/ValidatedField' /* molecules */