From 9bcb4f4b3897db8a8c83dab9945ada42249e3148 Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munteanu@thinslices.com>
Date: Wed, 17 Jan 2018 14:58:53 +0200
Subject: [PATCH] Add dashed drop zone for sortable items
---
.../src/components/AuthorList.js | 18 +++++++++++++++---
.../src/components/AuthorList.local.scss | 8 ++++++++
2 files changed, 23 insertions(+), 3 deletions(-)
diff --git a/packages/component-wizard/src/components/AuthorList.js b/packages/component-wizard/src/components/AuthorList.js
index 5b180b4c4..d95d35391 100644
--- a/packages/component-wizard/src/components/AuthorList.js
+++ b/packages/component-wizard/src/components/AuthorList.js
@@ -83,10 +83,22 @@ const Author = ({
affiliation,
isDragging,
dragHandle,
+ isOver,
+ ...rest
}) => (
- <div className={classnames(classes.author)}>
- {dragHandle}
- <div className={classnames(classes.container)}>
+ <div
+ className={classnames({
+ [classes.author]: true,
+ [classes.dashed]: isOver,
+ })}
+ >
+ {!isOver && dragHandle}
+ <div
+ className={classnames({
+ [classes.container]: true,
+ [classes.hide]: isOver,
+ })}
+ >
<span className={classnames(classes.title)}>Author</span>
<div className={classnames(classes.row)}>
<Label label="First name" value={firstName} />
diff --git a/packages/component-wizard/src/components/AuthorList.local.scss b/packages/component-wizard/src/components/AuthorList.local.scss
index 353731088..72d0be631 100644
--- a/packages/component-wizard/src/components/AuthorList.local.scss
+++ b/packages/component-wizard/src/components/AuthorList.local.scss
@@ -3,6 +3,14 @@
flex-direction: row;
}
+.hide {
+ opacity: 0;
+}
+
+.dashed {
+ border: 1px dashed #444 !important;
+}
+
.author {
border: 1px solid #444;
display: flex;
--
GitLab