From 6504c5b3409a9fd91bc4d8367c976ac5eda1cd92 Mon Sep 17 00:00:00 2001
From: Bogdan Cochior <bogdan.cochior@thinslices.com>
Date: Thu, 23 Aug 2018 13:59:37 +0300
Subject: [PATCH] feat(details): add preview file
---
.../src/ManuscriptDetailsTop.js | 21 +++++++---
.../component-faraday-ui/src/PreviewFile.js | 38 +++++++++++++++++++
.../component-faraday-ui/src/PreviewFile.md | 7 ++++
.../src/gridItems/Item.js | 3 +-
packages/component-faraday-ui/src/index.js | 1 +
.../src/components/ManuscriptLayout.js | 2 +
.../components/Dashboard/DashboardFilters.js | 4 +-
7 files changed, 68 insertions(+), 8 deletions(-)
create mode 100644 packages/component-faraday-ui/src/PreviewFile.js
create mode 100644 packages/component-faraday-ui/src/PreviewFile.md
diff --git a/packages/component-faraday-ui/src/ManuscriptDetailsTop.js b/packages/component-faraday-ui/src/ManuscriptDetailsTop.js
index b8409fd1d..beb249fab 100644
--- a/packages/component-faraday-ui/src/ManuscriptDetailsTop.js
+++ b/packages/component-faraday-ui/src/ManuscriptDetailsTop.js
@@ -1,29 +1,40 @@
import React from 'react'
+import { get } from 'lodash'
import {
Row,
Item,
+ Text,
ActionLink,
IconButton,
DownloadZipFiles,
+ PreviewFile,
ManuscriptVersion,
- Text,
} from 'pubsweet-component-faraday-ui'
import { DateParser } from '@pubsweet/ui'
-const ManuscriptDetailsTop = ({ history, collection = {}, fragment = {} }) => (
+const ManuscriptDetailsTop = ({
+ history,
+ getSignedUrl,
+ collection = {},
+ fragment = {},
+}) => (
<Row alignItems="center" mb={1}>
- <Item alignItems="center" justify="flex-start">
+ <Item justify="flex-start">
<ActionLink icon="arrow-left" onClick={() => history.push('/')}>
Dashboard
</ActionLink>
</Item>
- <Item alignItems="center" justify="flex-end">
+ <Item justify="flex-end">
+ <PreviewFile
+ file={get(fragment, 'files.manuscripts[0]', {})}
+ getSignedUrl={getSignedUrl}
+ />
<DownloadZipFiles
archiveName={`ID-${collection.customId}`}
collectionId={collection.id}
fragmentId={fragment.id}
>
- <IconButton icon="download" />
+ <IconButton icon="download" iconSize={2} mr={3} secondary />
</DownloadZipFiles>
<DateParser durationThreshold={0} timestamp={fragment.submitted || ''}>
{timestamp => <Text mr={1}>Updated on {timestamp}</Text>}
diff --git a/packages/component-faraday-ui/src/PreviewFile.js b/packages/component-faraday-ui/src/PreviewFile.js
new file mode 100644
index 000000000..0160f3990
--- /dev/null
+++ b/packages/component-faraday-ui/src/PreviewFile.js
@@ -0,0 +1,38 @@
+import React, { Fragment } from 'react'
+import { last } from 'lodash'
+import { withProps, withHandlers, compose } from 'recompose'
+
+import { IconButton } from './'
+import { withFilePreview } from './helpers'
+
+const hasPreview = (name = '') => {
+ const extension = last(name.split('.')).toLocaleLowerCase()
+ return ['pdf', 'png', 'jpg'].includes(extension)
+}
+
+const PreviewFile = ({ onPreview, hasPreview }) => (
+ <Fragment>
+ {hasPreview && (
+ <IconButton
+ icon="eye"
+ iconSize={2}
+ ml={1}
+ mr={1}
+ onClick={onPreview}
+ secondary
+ />
+ )}
+ </Fragment>
+)
+
+export default compose(
+ withFilePreview,
+ withProps(({ file: { name } }) => ({
+ hasPreview: hasPreview(name),
+ })),
+ withHandlers({
+ onPreview: ({ previewFile, file }) => () => {
+ typeof previewFile === 'function' && previewFile(file)
+ },
+ }),
+)(PreviewFile)
diff --git a/packages/component-faraday-ui/src/PreviewFile.md b/packages/component-faraday-ui/src/PreviewFile.md
new file mode 100644
index 000000000..4bf363a9d
--- /dev/null
+++ b/packages/component-faraday-ui/src/PreviewFile.md
@@ -0,0 +1,7 @@
+Preview file in browser if possible
+
+```js
+const file = {};
+
+<PreviewFile file={file} />
+```
diff --git a/packages/component-faraday-ui/src/gridItems/Item.js b/packages/component-faraday-ui/src/gridItems/Item.js
index ff1e97565..282ec34e7 100644
--- a/packages/component-faraday-ui/src/gridItems/Item.js
+++ b/packages/component-faraday-ui/src/gridItems/Item.js
@@ -11,6 +11,7 @@ export default styled.div.attrs({
flex: ${({ flex }) => (isNumber(flex) ? flex : 1)};
flex-direction: ${({ vertical }) => (vertical ? 'column' : 'row')};
justify-content: ${({ justify }) => justify || 'initial'};
- align-items: ${({ alignItems }) => alignItems || 'flex-start'};
+ align-items: ${({ alignItems }) => alignItems || 'center'};
+
${marginHelper};
`
diff --git a/packages/component-faraday-ui/src/index.js b/packages/component-faraday-ui/src/index.js
index 118583283..a8aafac48 100644
--- a/packages/component-faraday-ui/src/index.js
+++ b/packages/component-faraday-ui/src/index.js
@@ -21,6 +21,7 @@ export { default as Tag } from './Tag'
export { default as Text } from './Text'
export { default as WizardAuthors } from './WizardAuthors'
export { default as WizardFiles } from './WizardFiles'
+export { default as PreviewFile } from './PreviewFile'
export { default as DownloadZipFiles } from './DownloadZipFiles'
// Manuscript Details
diff --git a/packages/component-manuscript/src/components/ManuscriptLayout.js b/packages/component-manuscript/src/components/ManuscriptLayout.js
index f9a91d8c5..b35e7a4a1 100644
--- a/packages/component-manuscript/src/components/ManuscriptLayout.js
+++ b/packages/component-manuscript/src/components/ManuscriptLayout.js
@@ -6,6 +6,7 @@ import { Text, ManuscriptDetailsTop, Row } from 'pubsweet-component-faraday-ui'
const ManuscriptLayout = ({
journal,
history,
+ getSignedUrl,
currentUser,
editorInChief,
canMakeRevision,
@@ -20,6 +21,7 @@ const ManuscriptLayout = ({
<ManuscriptDetailsTop
collection={project}
fragment={version}
+ getSignedUrl={getSignedUrl}
history={history}
/>
<Row justify="flex-start">Aici header</Row>
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardFilters.js b/packages/components-faraday/src/components/Dashboard/DashboardFilters.js
index e6270636c..11218a836 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardFilters.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardFilters.js
@@ -12,7 +12,7 @@ const DashboardFilters = ({
<Text mr={1} pb={1} secondary>
Filters
</Text>
- <Item flex={0} mr={1} vertical>
+ <Item alignItems="flex-start" flex={0} mr={1} vertical>
<Label>Priority</Label>
<Menu
inline
@@ -21,7 +21,7 @@ const DashboardFilters = ({
value={getDefaultFilterValue('priority')}
/>
</Item>
- <Item flex={0} vertical>
+ <Item alignItems="flex-start" flex={0} vertical>
<Label>Order</Label>
<Menu
inline
--
GitLab