From 8197ff9b45e729d240205a5177e037be88d954c0 Mon Sep 17 00:00:00 2001
From: Bogdan Cochior <bogdan.cochior@thinslices.com>
Date: Wed, 29 Aug 2018 16:26:34 +0300
Subject: [PATCH] refactor(manuscript-files): extract one file section into a
separate component
---
.../manuscriptDetails/ManuscriptFileList.js | 101 ++++--------------
.../ManuscriptFileSection.js | 29 +++++
.../ManuscriptFileSection.md | 28 +++++
.../src/manuscriptDetails/index.js | 1 +
4 files changed, 80 insertions(+), 79 deletions(-)
create mode 100644 packages/component-faraday-ui/src/manuscriptDetails/ManuscriptFileSection.js
create mode 100644 packages/component-faraday-ui/src/manuscriptDetails/ManuscriptFileSection.md
diff --git a/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptFileList.js b/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptFileList.js
index 3d139b5c2..1e2661c51 100644
--- a/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptFileList.js
+++ b/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptFileList.js
@@ -1,5 +1,5 @@
import React, { Fragment } from 'react'
-import { Text, FileItem, Item, Row } from 'pubsweet-component-faraday-ui'
+import { ManuscriptFileSection } from 'pubsweet-component-faraday-ui'
import { withFilePreview, withFileDownload } from '../helpers'
@@ -10,84 +10,27 @@ const ManuscriptFileList = ({
...rest
}) => (
<Fragment>
- {!!manuscripts.length && (
- <Fragment>
- <Text labelLine mb={1} mt={1}>
- MAIN MANUSCRIPT
- </Text>
- <Row justify="flex-start" mb={1}>
- {manuscripts.map(file => (
- <Item
- alignItems="flex-start"
- flex={0}
- key={file.id}
- mr={1}
- vertical
- >
- <FileItem
- item={file}
- onDownload={downloadFile}
- onPreview={previewFile}
- {...rest}
- mb={1}
- />
- </Item>
- ))}
- </Row>
- </Fragment>
- )}
- {!!supplementary.length && (
- <Fragment>
- <Text labelLine mb={1} mt={2}>
- SUPPLEMENTARY FILES
- </Text>
- <Row justify="flex-start" mb={1}>
- {supplementary.map(file => (
- <Item
- alignItems="flex-start"
- flex={0}
- key={file.id}
- mr={1}
- vertical
- >
- <FileItem
- item={file}
- onDownload={downloadFile}
- onPreview={previewFile}
- {...rest}
- mb={1}
- />
- </Item>
- ))}
- </Row>
- </Fragment>
- )}
- {!!coverLetter.length && (
- <Fragment>
- <Text labelLine mb={1} mt={2}>
- COVER LETTER
- </Text>
- <Row justify="flex-start" mb={1}>
- {coverLetter.map(file => (
- <Item
- alignItems="flex-start"
- flex={0}
- key={file.id}
- mr={1}
- vertical
- >
- <FileItem
- item={file}
- onDownload={downloadFile}
- onPreview={previewFile}
- {...rest}
- mb={1}
- />
- </Item>
- ))}
- </Row>
- </Fragment>
- )}
+ <ManuscriptFileSection
+ label="MAIN MANUSCRIPT"
+ list={manuscripts}
+ onDownload={downloadFile}
+ onPreview={previewFile}
+ {...rest}
+ />
+ <ManuscriptFileSection
+ label="SUPPLEMENTARY FILES"
+ list={supplementary}
+ onDownload={downloadFile}
+ onPreview={previewFile}
+ {...rest}
+ />
+ <ManuscriptFileSection
+ label="COVER LETTER"
+ list={coverLetter}
+ onDownload={downloadFile}
+ onPreview={previewFile}
+ {...rest}
+ />
</Fragment>
)
diff --git a/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptFileSection.js b/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptFileSection.js
new file mode 100644
index 000000000..8b0976d54
--- /dev/null
+++ b/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptFileSection.js
@@ -0,0 +1,29 @@
+import React, { Fragment } from 'react'
+import { Text, FileItem, Item, Row } from 'pubsweet-component-faraday-ui'
+
+const ManuscriptFileSection = ({ list = [], label = '', ...rest }) => (
+ <Fragment>
+ {!!list.length && (
+ <Fragment>
+ <Text labelLine mb={1} mt={1}>
+ {label}
+ </Text>
+ <Row justify="flex-start" mb={1}>
+ {list.map(file => (
+ <Item
+ alignItems="flex-start"
+ flex={0}
+ key={file.id}
+ mr={1}
+ vertical
+ >
+ <FileItem item={file} {...rest} mb={1} />
+ </Item>
+ ))}
+ </Row>
+ </Fragment>
+ )}
+ </Fragment>
+)
+
+export default ManuscriptFileSection
diff --git a/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptFileSection.md b/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptFileSection.md
new file mode 100644
index 000000000..5435a7764
--- /dev/null
+++ b/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptFileSection.md
@@ -0,0 +1,28 @@
+Manuscript file section that appears in ManuscriptFilesList
+
+```js
+const files = {
+ supplementary: [
+ {
+ id:
+ '8dca903a-05b9-45ab-89b9-9cb99a9a29c6/02db6c5e-2938-45ac-a5ee-67ae63919bb2',
+ name: 'Supplementary File 1.jpg',
+ size: 59621,
+ originalName: 'Supplementary File 1.jpg',
+ },
+ {
+ id:
+ '8dca903a-05b9-45ab-89b9-9cb99a9a29c6/5e69e3d9-7f9d-4e8d-b649-6e6a45658d75',
+ name: 'Supplementary File 2.docx',
+ size: 476862,
+ originalName: 'Supplementary File 2.docx',
+ },
+ ]
+}
+;<ManuscriptFileSection
+ list={files.supplementary}
+ label="Supplementary files"
+ onDownload={() => alert('downloading')}
+ onPreview={() => alert('No preview')}
+/>
+```
diff --git a/packages/component-faraday-ui/src/manuscriptDetails/index.js b/packages/component-faraday-ui/src/manuscriptDetails/index.js
index ec99d00ce..1f43bd9bb 100644
--- a/packages/component-faraday-ui/src/manuscriptDetails/index.js
+++ b/packages/component-faraday-ui/src/manuscriptDetails/index.js
@@ -3,4 +3,5 @@ export { default as ManuscriptVersion } from './ManuscriptVersion'
export { default as ManuscriptHeader } from './ManuscriptHeader'
export { default as ManuscriptMetadata } from './ManuscriptMetadata'
export { default as ManuscriptFileList } from './ManuscriptFileList'
+export { default as ManuscriptFileSection } from './ManuscriptFileSection'
export { default as ManuscriptAssignHE } from './ManuscriptAssignHE'
--
GitLab