From 54d7475a6449b773c74a0e79454bb7b8666b6b66 Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munteanu@thinslices.com>
Date: Wed, 17 Jan 2018 14:34:51 +0200
Subject: [PATCH] Add customizable drag handler to sortable list
---
.../src/components/AuthorList.js | 28 +++++++----
.../src/components/AuthorList.local.scss | 16 +++++++
.../src/components/SortableList.js | 47 +++++++++----------
.../src/components/SortableList.local.scss | 5 --
.../app/config/journal/submit-wizard.js | 1 -
packages/xpub-faraday/config/default.js | 2 +-
6 files changed, 60 insertions(+), 39 deletions(-)
delete mode 100644 packages/component-wizard/src/components/SortableList.local.scss
diff --git a/packages/component-wizard/src/components/AuthorList.js b/packages/component-wizard/src/components/AuthorList.js
index 264be4159..5b180b4c4 100644
--- a/packages/component-wizard/src/components/AuthorList.js
+++ b/packages/component-wizard/src/components/AuthorList.js
@@ -1,7 +1,7 @@
import React from 'react'
import { get } from 'lodash'
import classnames from 'classnames'
-import { TextField, Menu } from '@pubsweet/ui'
+import { TextField, Menu, Icon } from '@pubsweet/ui'
import { compose, withState, withHandlers } from 'recompose'
import classes from './AuthorList.local.scss'
@@ -67,6 +67,14 @@ const Label = ({ label, value }) => (
</div>
)
+const DragHandle = () => (
+ <div className={classnames(classes['drag-handle'])}>
+ <Icon>chevron_up</Icon>
+ <Icon size={16}>menu</Icon>
+ <Icon>chevron_down</Icon>
+ </div>
+)
+
const Author = ({
firstName,
middleName,
@@ -74,24 +82,23 @@ const Author = ({
email,
affiliation,
isDragging,
- children,
+ dragHandle,
}) => (
<div className={classnames(classes.author)}>
- <span className={classnames(classes.title)}>Author</span>
- {!isDragging && (
+ {dragHandle}
+ <div className={classnames(classes.container)}>
+ <span className={classnames(classes.title)}>Author</span>
<div className={classnames(classes.row)}>
<Label label="First name" value={firstName} />
<Label label="Middle name" value={middleName} />
<Label label="Last name" value={lastName} />
</div>
- )}
- {!isDragging && (
<div className={classnames(classes.row)}>
<Label label="Email" value={email} />
<Label label="Affiliation" value={affiliation} />
<Label label="Affiliation" value={affiliation} />
</div>
- )}
+ </div>
</div>
)
@@ -102,7 +109,12 @@ const Authors = ({ author, authors, moveAuthor, addAuthor, editAuthor }) => (
author={author}
editAuthor={editAuthor}
/>
- <SortableList items={authors} listItem={Author} moveItem={moveAuthor} />
+ <SortableList
+ dragHandle={DragHandle}
+ items={authors}
+ listItem={Author}
+ moveItem={moveAuthor}
+ />
</div>
)
diff --git a/packages/component-wizard/src/components/AuthorList.local.scss b/packages/component-wizard/src/components/AuthorList.local.scss
index 56e988847..353731088 100644
--- a/packages/component-wizard/src/components/AuthorList.local.scss
+++ b/packages/component-wizard/src/components/AuthorList.local.scss
@@ -5,6 +5,13 @@
.author {
border: 1px solid #444;
+ display: flex;
+ flex-direction: row;
+ margin-bottom: 10px;
+
+ .container {
+ flex: 1;
+ }
.title {
font-size: 16px;
@@ -43,3 +50,12 @@
font-weight: 500;
}
}
+
+.drag-handle {
+ align-items: center;
+ border-right: 1px solid #444;
+ cursor: move;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
diff --git a/packages/component-wizard/src/components/SortableList.js b/packages/component-wizard/src/components/SortableList.js
index 95453bec0..8538168cc 100644
--- a/packages/component-wizard/src/components/SortableList.js
+++ b/packages/component-wizard/src/components/SortableList.js
@@ -2,9 +2,6 @@ import React from 'react'
import { compose } from 'recompose'
import { findDOMNode } from 'react-dom'
import { DragSource, DropTarget } from 'react-dnd'
-import classnames from 'classnames'
-import { Icon } from '@pubsweet/ui'
-import classes from './SortableList.local.scss'
const itemSource = {
beginDrag(props) {
@@ -41,33 +38,34 @@ const itemTarget = {
},
}
-const DragHandle = () => (
- <div className={classnames(classes['drag-handle'])}>
- <Icon>chevron_up</Icon>
- <Icon>chevron_down</Icon>
- </div>
-)
-
const Item = ({
connectDragPreview,
connectDragSource,
connectDropTarget,
listItem,
+ dragHandle,
...rest
}) =>
- connectDragPreview(
- <div style={{ display: 'flex' }}>
- {connectDragSource(
- <div className={classnames(classes['drag-handle'])}>
- <Icon>chevron_up</Icon>
- <Icon>chevron_down</Icon>
- </div>,
- )}
- {connectDropTarget(
- <div style={{ flex: 1 }}>{React.createElement(listItem, rest)}</div>,
- )}
- </div>,
- )
+ dragHandle
+ ? connectDragPreview(
+ connectDropTarget(
+ <div style={{ flex: 1 }}>
+ {React.createElement(listItem, {
+ ...rest,
+ dragHandle: connectDragSource(
+ <div style={{ display: 'flex' }}>
+ {React.createElement(dragHandle)}
+ </div>,
+ ),
+ })}
+ </div>,
+ ),
+ )
+ : connectDropTarget(
+ connectDragSource(
+ <div style={{ flex: 1 }}>{React.createElement(listItem, rest)}</div>,
+ ),
+ )
const DecoratedItem = compose(
DropTarget('item', itemTarget, (connect, monitor) => ({
@@ -81,10 +79,11 @@ const DecoratedItem = compose(
})),
)(Item)
-const SortableList = ({ items, moveItem, listItem }) => (
+const SortableList = ({ items, moveItem, listItem, dragHandle }) => (
<div>
{items.map((item, i) => (
<DecoratedItem
+ dragHandle={dragHandle}
index={i}
key={item.name || Math.random()}
listItem={listItem}
diff --git a/packages/component-wizard/src/components/SortableList.local.scss b/packages/component-wizard/src/components/SortableList.local.scss
deleted file mode 100644
index 41607ab0e..000000000
--- a/packages/component-wizard/src/components/SortableList.local.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.drag-handle {
- display: flex;
- flex-direction: column;
- justify-content: center;
-}
diff --git a/packages/xpub-faraday/app/config/journal/submit-wizard.js b/packages/xpub-faraday/app/config/journal/submit-wizard.js
index 9b138d17e..4a9fcf0d9 100644
--- a/packages/xpub-faraday/app/config/journal/submit-wizard.js
+++ b/packages/xpub-faraday/app/config/journal/submit-wizard.js
@@ -113,7 +113,6 @@ export default {
label: 'Conflict of interest details',
validate: [required, min3Chars],
},
- {},
],
},
{
diff --git a/packages/xpub-faraday/config/default.js b/packages/xpub-faraday/config/default.js
index ac142cf19..36f785c36 100644
--- a/packages/xpub-faraday/config/default.js
+++ b/packages/xpub-faraday/config/default.js
@@ -24,7 +24,7 @@ module.exports = {
'pubsweet-client': {
API_ENDPOINT: '/api',
'login-redirect': '/',
- 'redux-log': true,
+ 'redux-log': false,
theme: process.env.PUBSWEET_THEME,
},
'mail-transport': {
--
GitLab