From 07d3c8316c7807b80c78695258ee3f9de0d53ac0 Mon Sep 17 00:00:00 2001
From: Alf Eaton <eaton.alf@gmail.com>
Date: Fri, 1 Sep 2017 10:39:00 +0100
Subject: [PATCH] Use TextField instead of Tags
---
.../src/components/Metadata.js | 16 +++--
.../src/components/Suggestions.js | 27 +++++---
.../src/components/Suggestions.local.css | 1 +
.../component-submit/src/lib/validators.js | 62 +++++++++++++------
packages/xpub-ui/src/atoms/TextField.js | 5 +-
.../xpub-ui/src/atoms/TextField.local.css | 11 ++++
packages/xpub-ui/src/index.js | 1 +
7 files changed, 86 insertions(+), 37 deletions(-)
diff --git a/packages/component-submit/src/components/Metadata.js b/packages/component-submit/src/components/Metadata.js
index 288156a66..8e70bfb5d 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 7308de2f6..2a618dbaf 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 c92c65cac..b4d223bc6 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 8f53233a4..f2fc48789 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 6afd46ae9..8aad7d3ee 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 f80c5e48a..0ea16c51e 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 b98447d74..3ed466791 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 */
--
GitLab