From f0756258a43c65c49e93f4284b326be13f25a37d Mon Sep 17 00:00:00 2001
From: Mihail Hagiu <mihail.hagiu@thinslices.com>
Date: Tue, 16 Oct 2018 09:27:21 +0300
Subject: [PATCH] feat(SubmitRevision): Styleguide for DetailsAndAuthors and
ManuscriptFiles
---
.../submissionRevision/DetailsAndAuthors.js | 108 +++++++++---------
.../submissionRevision/DetailsAndAuthors.md | 16 ++-
.../src/submissionRevision/ManuscriptFiles.js | 68 +++++++++++
.../src/submissionRevision/ManuscriptFiles.md | 21 ++++
.../src/submissionRevision/index.js | 1 +
5 files changed, 157 insertions(+), 57 deletions(-)
create mode 100644 packages/component-faraday-ui/src/submissionRevision/ManuscriptFiles.js
create mode 100644 packages/component-faraday-ui/src/submissionRevision/ManuscriptFiles.md
diff --git a/packages/component-faraday-ui/src/submissionRevision/DetailsAndAuthors.js b/packages/component-faraday-ui/src/submissionRevision/DetailsAndAuthors.js
index 55ab4431b..7003c65c0 100644
--- a/packages/component-faraday-ui/src/submissionRevision/DetailsAndAuthors.js
+++ b/packages/component-faraday-ui/src/submissionRevision/DetailsAndAuthors.js
@@ -14,6 +14,7 @@ import {
import { Menu, TextField, ValidatedField } from '@pubsweet/ui'
import { th } from '@pubsweet/ui-toolkit'
import styled from 'styled-components'
+import { ContextualBox } from '../'
const Empty = () => <div />
@@ -30,62 +31,65 @@ const DetailsAndAuthors = ({
manuscriptTypes,
getTooltipContent,
isAuthorsFetching,
- setAuthorEditIndex,
+ onAuthorEdit,
+ fragment,
...rest
}) => (
- <Root>
- <Row mb={3}>
- <Item data-test-id="submission-title" flex={3} mr={1} vertical>
- <Label required>MANUSCRIPT TITLE</Label>
- <ValidatedField
- component={TextField}
- name="metadata.title"
- validate={[required]}
- />
- </Item>
- <ItemOverrideAlert data-test-id="submission-type" vertical>
- <Label required>MANUSCRIPT TYPE</Label>
- <ValidatedField
- component={input => (
- <Menu
- options={manuscriptTypes}
- {...input}
- placeholder="Please select"
- />
- )}
- name="metadata.type"
- validate={[required]}
- />
- </ItemOverrideAlert>
- </Row>
+ <ContextualBox label="Details and Authors" transparent>
+ <Root>
+ <Row mb={3}>
+ <Item data-test-id="submission-title" flex={3} mr={1} vertical>
+ <Label required>MANUSCRIPT TITLE</Label>
+ <ValidatedField
+ component={TextField}
+ name="metadata.title"
+ validate={[required]}
+ />
+ </Item>
+ <ItemOverrideAlert data-test-id="submission-type" vertical>
+ <Label required>MANUSCRIPT TYPE</Label>
+ <ValidatedField
+ component={input => (
+ <Menu
+ options={manuscriptTypes}
+ {...input}
+ placeholder="Please select"
+ />
+ )}
+ name="metadata.type"
+ validate={[required]}
+ />
+ </ItemOverrideAlert>
+ </Row>
- <RowOverrideAlert mb={2}>
- <Item data-test-id="submission-abstract" vertical>
- <Label required>ABSTRACT</Label>
- <ValidatedField
- component={Textarea}
- minHeight={15}
- name="metadata.abstract"
- validate={[required]}
- />
- </Item>
- </RowOverrideAlert>
+ <RowOverrideAlert mb={2}>
+ <Item data-test-id="submission-abstract" vertical>
+ <Label required>ABSTRACT</Label>
+ <ValidatedField
+ component={Textarea}
+ minHeight={15}
+ name="metadata.abstract"
+ validate={[required]}
+ />
+ </Item>
+ </RowOverrideAlert>
- <Field component={Empty} name="authors" />
- <WizardAuthors
- addAuthor={addAuthor}
- authors={get(version, 'authors', [])}
- changeForm={changeForm}
- deleteAuthor={deleteAuthor}
- error={authorsError}
- isAuthorEdit={isAuthorEdit}
- isAuthorsFetching={isAuthorsFetching}
- journal={journal}
- onAuthorEdit={setAuthorEditIndex}
- project={project}
- version={version}
- />
- </Root>
+ <Field component={Empty} name="authors" />
+ <WizardAuthors
+ addAuthor={addAuthor}
+ authors={get(fragment, 'authors', [])}
+ changeForm={changeForm}
+ deleteAuthor={deleteAuthor}
+ error={authorsError}
+ isAuthorEdit={isAuthorEdit}
+ isAuthorsFetching={isAuthorsFetching}
+ journal={journal}
+ onAuthorEdit={onAuthorEdit}
+ project={project}
+ version={version}
+ />
+ </Root>
+ </ContextualBox>
)
const Root = styled.div`
diff --git a/packages/component-faraday-ui/src/submissionRevision/DetailsAndAuthors.md b/packages/component-faraday-ui/src/submissionRevision/DetailsAndAuthors.md
index a5b8d6b0d..5f2c9dec3 100644
--- a/packages/component-faraday-ui/src/submissionRevision/DetailsAndAuthors.md
+++ b/packages/component-faraday-ui/src/submissionRevision/DetailsAndAuthors.md
@@ -1,9 +1,12 @@
```js
-const { compose, withProps } = require('recompose')
+const { compose, withProps, withHandlers } = require('recompose')
const { connect } = require('react-redux')
-const { reduxForm, getFormValues } = require('redux-form')
+const { reduxForm, getFormValues, change } = require('redux-form')
const Wrapper = compose(
+ withHandlers({
+ onAuthorEdit: props => () => console.log('Edit author')
+ }),
withProps({
manuscriptTypes: [
{
@@ -149,12 +152,15 @@ const Wrapper = compose(
}),
connect(state => ({
formValues: getFormValues('styleguide')(state),
- })),
+ }),
+ {
+ changeForm: change
+ }),
reduxForm({
form: 'styleguide',
}),
-)(({ formValues }) => (
- <DetailsAndAuthors />
+)(( props ) => (
+ <DetailsAndAuthors {...props}/>
))
;<Wrapper />
```
diff --git a/packages/component-faraday-ui/src/submissionRevision/ManuscriptFiles.js b/packages/component-faraday-ui/src/submissionRevision/ManuscriptFiles.js
new file mode 100644
index 000000000..15b222423
--- /dev/null
+++ b/packages/component-faraday-ui/src/submissionRevision/ManuscriptFiles.js
@@ -0,0 +1,68 @@
+import React from 'react'
+import { get } from 'lodash'
+import { Field } from 'redux-form'
+import styled from 'styled-components'
+import { Icon } from '@pubsweet/ui'
+import { Row, Text, WizardFiles } from 'pubsweet-component-faraday-ui'
+import { th } from '@pubsweet/ui-toolkit'
+import { ContextualBox } from '../'
+
+const Empty = () => <div />
+
+const ManuscriptFiles = ({
+ token,
+ version,
+ project,
+ changeForm,
+ deleteFile,
+ uploadFile,
+ filesError,
+ getSignedUrl,
+}) => (
+ <ContextualBox label="Manuscript Files" transparent>
+ <Root>
+ <Row justify="flex-start" mb={2}>
+ <Text secondary>
+ Drag & drop files in the specific section or click{' '}
+ <CustomIcon secondary size={2}>
+ plus
+ </CustomIcon>{' '}
+ to upload. Use the{' '}
+ <CustomIcon secondary size={2}>
+ menu
+ </CustomIcon>{' '}
+ icon to reorder or move files to a different type.
+ </Text>
+ </Row>
+ <Field component={Empty} name="files" />
+ <WizardFiles
+ changeForm={changeForm}
+ deleteFile={deleteFile}
+ files={get(version, 'files', {})}
+ getSignedUrl={getSignedUrl}
+ project={project}
+ token={token}
+ uploadFile={uploadFile}
+ version={version}
+ />
+ {filesError && (
+ <Row justify="flex-start" mt={1}>
+ <Text error>{filesError}</Text>
+ </Row>
+ )}
+ </Root>
+ </ContextualBox>
+)
+
+export default ManuscriptFiles
+
+// #region styled-components
+const Root = styled.div`
+ border-left: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
+ padding-left: calc(${th('gridUnit')} * 1);
+`
+
+const CustomIcon = styled(Icon)`
+ vertical-align: sub;
+`
+// #endregion
diff --git a/packages/component-faraday-ui/src/submissionRevision/ManuscriptFiles.md b/packages/component-faraday-ui/src/submissionRevision/ManuscriptFiles.md
new file mode 100644
index 000000000..42a8e2120
--- /dev/null
+++ b/packages/component-faraday-ui/src/submissionRevision/ManuscriptFiles.md
@@ -0,0 +1,21 @@
+```js
+const { compose, withHandlers } = require('recompose')
+const { connect } = require('react-redux')
+const { reduxForm, getFormValues } = require('redux-form')
+
+const Wrapper = compose(
+ withHandlers({
+ uploadFile: props => file => Promise.resolve(file),
+ deleteFile: props => file => console.log('Deleted', file),
+ }),
+ connect(state => ({
+ formValues: getFormValues('styleguide')(state),
+ })),
+ reduxForm({
+ form: 'styleguide',
+ }),
+)(( props ) => (
+ <ManuscriptFiles {...props} />
+))
+;<Wrapper />
+```
\ No newline at end of file
diff --git a/packages/component-faraday-ui/src/submissionRevision/index.js b/packages/component-faraday-ui/src/submissionRevision/index.js
index ed09fd3ab..dd442a2f7 100644
--- a/packages/component-faraday-ui/src/submissionRevision/index.js
+++ b/packages/component-faraday-ui/src/submissionRevision/index.js
@@ -1,2 +1,3 @@
export { default as ResponseToReviewer } from './ResponseToReviewer'
+export { default as ManuscriptFiles } from './ManuscripFiles'
export { default as DetailsAndAuthors } from './DetailsAndAuthors'
--
GitLab