From 34dcab22145ac4853bd665c4a9a9799fe61ca7d2 Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munteanu@thinslices.com>
Date: Tue, 23 Jan 2018 13:49:13 +0200
Subject: [PATCH] Move SortableList into new components-faraday package
---
packages/components-faraday/package.json | 19 +++
.../src/components/SortableList/README.md | 0
.../components/SortableList/SortableList.js | 132 ++++++++++++++++++
.../src/components/index.js | 1 +
packages/components-faraday/src/index.js | 5 +
packages/components-faraday/webpack.config.js | 3 +
6 files changed, 160 insertions(+)
create mode 100644 packages/components-faraday/package.json
create mode 100644 packages/components-faraday/src/components/SortableList/README.md
create mode 100644 packages/components-faraday/src/components/SortableList/SortableList.js
create mode 100644 packages/components-faraday/src/components/index.js
create mode 100644 packages/components-faraday/src/index.js
create mode 100644 packages/components-faraday/webpack.config.js
diff --git a/packages/components-faraday/package.json b/packages/components-faraday/package.json
new file mode 100644
index 000000000..3d216b81d
--- /dev/null
+++ b/packages/components-faraday/package.json
@@ -0,0 +1,19 @@
+{
+ "name": "pubsweet-components-faraday",
+ "version": "0.0.1",
+ "main": "src",
+ "license": "MIT",
+ "dependencies": {
+ "@pubsweet/ui": "^0.1.1",
+ "moment": "^2.20.1",
+ "prop-types": "^15.5.10",
+ "react": "^15.6.1",
+ "react-dnd": "^2.5.4",
+ "react-dnd-html5-backend": "^2.5.4",
+ "react-dom": "^15.6.1",
+ "react-router-dom": "^4.2.2",
+ "recompose": "^0.26.0",
+ "redux": "^3.6.0",
+ "redux-form": "^7.0.3"
+ }
+}
diff --git a/packages/components-faraday/src/components/SortableList/README.md b/packages/components-faraday/src/components/SortableList/README.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/components-faraday/src/components/SortableList/SortableList.js b/packages/components-faraday/src/components/SortableList/SortableList.js
new file mode 100644
index 000000000..0d5066903
--- /dev/null
+++ b/packages/components-faraday/src/components/SortableList/SortableList.js
@@ -0,0 +1,132 @@
+import React from 'react'
+import { compose } from 'recompose'
+import { findDOMNode } from 'react-dom'
+import HTML5Backend from 'react-dnd-html5-backend'
+import { DragSource, DropTarget, DragDropContext } from 'react-dnd'
+
+const itemSource = {
+ beginDrag(props) {
+ return { index: props.index }
+ },
+}
+
+const itemTarget = {
+ hover({ moveItem, index }, monitor, component) {
+ const dragIndex = monitor.getItem().index
+ const hoverIndex = index
+
+ // Don't replace items with themselves
+ if (dragIndex === hoverIndex) {
+ return
+ }
+
+ const hoverBoundingRect = findDOMNode(component).getBoundingClientRect() // eslint-disable-line
+ const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2
+ const clientOffset = monitor.getClientOffset()
+ const hoverClientY = clientOffset.y - hoverBoundingRect.top
+
+ if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+ return
+ }
+
+ if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+ return
+ }
+ if (typeof moveItem === 'function') {
+ moveItem(dragIndex, hoverIndex)
+ }
+ monitor.getItem().index = hoverIndex
+ },
+ drop({ dropItem }) {
+ if (dropItem && typeof dropItem === 'function') dropItem()
+ },
+}
+
+const Item = ({
+ connectDragPreview,
+ connectDragSource,
+ connectDropTarget,
+ listItem,
+ dragHandle,
+ isEditing,
+ ...rest
+}) =>
+ 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) => ({
+ connectDropTarget: connect.dropTarget(),
+ isOver: monitor.isOver(),
+ })),
+ DragSource('item', itemSource, (connect, monitor) => ({
+ connectDragSource: connect.dragSource(),
+ connectDragPreview: connect.dragPreview(),
+ isDragging: monitor.isDragging(),
+ })),
+)(Item)
+
+const SortableList = ({
+ items,
+ moveItem,
+ listItem,
+ dragHandle,
+ editItem,
+ ...rest
+}) => {
+ console.log('Sortablelist', rest)
+ return (
+ <div>
+ {items.map((item, i) => (
+ <DecoratedItem
+ dragHandle={dragHandle}
+ index={i}
+ isEditing={rest.editedAuthor !== -1}
+ key={item.name || Math.random()}
+ listItem={listItem}
+ moveItem={moveItem}
+ {...item}
+ {...rest}
+ />
+ ))}
+ </div>
+ )
+}
+
+// helper function for sortable lists
+SortableList.moveItem = (items, dragIndex, hoverIndex) => {
+ if (dragIndex <= hoverIndex) {
+ return [
+ ...items.slice(0, dragIndex),
+ items[hoverIndex],
+ items[dragIndex],
+ ...items.slice(hoverIndex + 1),
+ ]
+ }
+ return [
+ ...items.slice(0, hoverIndex),
+ items[dragIndex],
+ items[hoverIndex],
+ ...items.slice(dragIndex + 1),
+ ]
+}
+
+export default DragDropContext(HTML5Backend)(SortableList)
diff --git a/packages/components-faraday/src/components/index.js b/packages/components-faraday/src/components/index.js
new file mode 100644
index 000000000..24c30260c
--- /dev/null
+++ b/packages/components-faraday/src/components/index.js
@@ -0,0 +1 @@
+export { default as SortableList } from './SortableList/SortableList'
diff --git a/packages/components-faraday/src/index.js b/packages/components-faraday/src/index.js
new file mode 100644
index 000000000..8d52f148e
--- /dev/null
+++ b/packages/components-faraday/src/index.js
@@ -0,0 +1,5 @@
+module.exports = {
+ client: {
+ components: [() => require('./components')],
+ },
+}
diff --git a/packages/components-faraday/webpack.config.js b/packages/components-faraday/webpack.config.js
new file mode 100644
index 000000000..4aa149ad2
--- /dev/null
+++ b/packages/components-faraday/webpack.config.js
@@ -0,0 +1,3 @@
+const webpackConfig = require('xpub-styleguide/src/webpack-config')
+
+module.exports = webpackConfig(__dirname)
--
GitLab