From 79d622f856629987ea25ee90b0d9579026344c3d Mon Sep 17 00:00:00 2001
From: Bogdan Cochior <bogdan.cochior@thinslices.com>
Date: Tue, 21 Aug 2018 17:50:33 +0300
Subject: [PATCH] feat(dashboard): allow authorsList to show tooltip
---
.../component-faraday-ui/src/AuthorTag.md | 4 +++
.../component-faraday-ui/src/AuthorTagList.js | 12 +++++--
.../component-faraday-ui/src/AuthorTagList.md | 31 +++++++++++++++++
.../src/AuthorWithTooltip.js | 34 +++++++++++++++++++
.../src/ManuscriptCard.js | 2 +-
.../component-faraday-ui/src/WizardAuthors.js | 2 +-
packages/component-faraday-ui/src/index.js | 1 +
7 files changed, 82 insertions(+), 4 deletions(-)
create mode 100644 packages/component-faraday-ui/src/AuthorWithTooltip.js
diff --git a/packages/component-faraday-ui/src/AuthorTag.md b/packages/component-faraday-ui/src/AuthorTag.md
index 9e6a5cdad..2678e9dc9 100644
--- a/packages/component-faraday-ui/src/AuthorTag.md
+++ b/packages/component-faraday-ui/src/AuthorTag.md
@@ -3,12 +3,14 @@ An author tag.
```js
const authors = [
{
+ id: 1,
email: 'john.doe@gmail.com',
firstName: 'John',
lastName: 'Doe',
isSubmitting: true,
},
{
+ id: 2,
email: 'michael.felps@gmail.com',
firstName: 'Michael',
lastName: 'Felps',
@@ -16,9 +18,11 @@ const authors = [
isCorresponding: true,
},
{
+ id: 3,
email: 'barrack.obama@gmail.com',
firstName: 'Barrack',
lastName: 'Obama',
+ affiliation: 'US Presidency'
},
];
diff --git a/packages/component-faraday-ui/src/AuthorTagList.js b/packages/component-faraday-ui/src/AuthorTagList.js
index 20e5a3bf4..1792cd7b3 100644
--- a/packages/component-faraday-ui/src/AuthorTagList.js
+++ b/packages/component-faraday-ui/src/AuthorTagList.js
@@ -2,16 +2,24 @@ import React from 'react'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
-import AuthorTag from './AuthorTag'
+import { AuthorTag, AuthorWithTooltip } from 'pubsweet-component-faraday-ui'
const AuthorTagList = ({
authors = [],
+ tooltip = false,
separator = ',',
authorKey = 'email',
}) => (
<Root>
{authors
- .map(a => <AuthorTag author={a} key={a[authorKey]} />)
+ .map(
+ a =>
+ tooltip ? (
+ <AuthorWithTooltip author={a} key={a[authorKey]} />
+ ) : (
+ <AuthorTag author={a} key={a[authorKey]} />
+ ),
+ )
.reduce(
(prev, curr, index) =>
index === 0
diff --git a/packages/component-faraday-ui/src/AuthorTagList.md b/packages/component-faraday-ui/src/AuthorTagList.md
index cbd7729f4..f948cc048 100644
--- a/packages/component-faraday-ui/src/AuthorTagList.md
+++ b/packages/component-faraday-ui/src/AuthorTagList.md
@@ -3,12 +3,14 @@ A list of author tags. Used on manuscript card and details.
```js
const authors = [
{
+ id: 1,
email: 'john.doe@gmail.com',
firstName: 'John',
lastName: 'Doe',
isSubmitting: true,
},
{
+ id: 2,
email: 'michael.felps@gmail.com',
firstName: 'Michael',
lastName: 'Felps',
@@ -16,15 +18,44 @@ const authors = [
isCorresponding: true,
},
{
+ id: 3,
email: 'barrack.obama@gmail.com',
firstName: 'Barrack',
lastName: 'Obama',
+ affiliation: 'US Presidency'
},
]
;<AuthorTagList authors={authors} />
```
+A list of author tags with tooltip
+
+```js
+const authors = [
+ {
+ email: 'john.doe@gmail.com',
+ firstName: 'John',
+ lastName: 'Doe',
+ isSubmitting: true,
+ },
+ {
+ email: 'michael.felps@gmail.com',
+ firstName: 'Michael',
+ lastName: 'Felps',
+ isSubmitting: true,
+ isCorresponding: true,
+ },
+ {
+ email: 'barrack.obama@gmail.com',
+ firstName: 'Barrack',
+ lastName: 'Obama',
+ },
+]
+
+;<AuthorTagList authors={authors} tooltip />
+```
+
Use a different separator and key for mapping the authors.
```js
diff --git a/packages/component-faraday-ui/src/AuthorWithTooltip.js b/packages/component-faraday-ui/src/AuthorWithTooltip.js
new file mode 100644
index 000000000..2d273d506
--- /dev/null
+++ b/packages/component-faraday-ui/src/AuthorWithTooltip.js
@@ -0,0 +1,34 @@
+import React, { Fragment } from 'react'
+import 'react-tippy/dist/tippy.css'
+import { Tooltip } from 'react-tippy'
+import { ThemeProvider, withTheme } from 'styled-components'
+import { Text, Row, AuthorTag } from 'pubsweet-component-faraday-ui'
+
+const AuthorTooltip = ({ author = {}, key, theme }) => (
+ <ThemeProvider theme={theme}>
+ <Fragment>
+ <Row mt={1}>
+ <AuthorTag author={author} key={key} />
+ </Row>
+ <Row>
+ <Text>{author.email}</Text>
+ </Row>
+ <Row>
+ <Text>{author.affiliation}</Text>
+ </Row>
+ </Fragment>
+ </ThemeProvider>
+)
+
+const AuthorWithTooltip = ({ theme, ...rest }) => (
+ <Tooltip
+ arrow
+ html={<AuthorTooltip theme={theme} {...rest} />}
+ position="bottom"
+ theme="light"
+ >
+ <AuthorTag {...rest} />
+ </Tooltip>
+)
+
+export default withTheme(AuthorWithTooltip)
diff --git a/packages/component-faraday-ui/src/ManuscriptCard.js b/packages/component-faraday-ui/src/ManuscriptCard.js
index c0c9117eb..74c9f3e4b 100644
--- a/packages/component-faraday-ui/src/ManuscriptCard.js
+++ b/packages/component-faraday-ui/src/ManuscriptCard.js
@@ -38,7 +38,7 @@ const ManuscriptCard = ({
</Row>
{authors.length > 0 && (
<Row alignItems="center" justify="flex-start" mb={1}>
- <AuthorTagList authors={authors} />
+ <AuthorTagList authors={authors} tooltip />
</Row>
)}
<Row alignItems="center" justify="flex-start" mb={1}>
diff --git a/packages/component-faraday-ui/src/WizardAuthors.js b/packages/component-faraday-ui/src/WizardAuthors.js
index b7a6a4d0a..c5cb13fe3 100644
--- a/packages/component-faraday-ui/src/WizardAuthors.js
+++ b/packages/component-faraday-ui/src/WizardAuthors.js
@@ -15,7 +15,7 @@ import {
} from './'
const WizardAuthors = ({
- authors,
+ authors = [],
moveAuthor,
addNewAuthor,
setAuthorEdit,
diff --git a/packages/component-faraday-ui/src/index.js b/packages/component-faraday-ui/src/index.js
index 1d7348d28..d07117a35 100644
--- a/packages/component-faraday-ui/src/index.js
+++ b/packages/component-faraday-ui/src/index.js
@@ -19,6 +19,7 @@ export { default as SortableList } from './SortableList'
export { default as Tag } from './Tag'
export { default as Text } from './Text'
export { default as WizardAuthors } from './WizardAuthors'
+export { default as AuthorWithTooltip } from './AuthorWithTooltip'
export * from './styledHelpers'
--
GitLab