drop hover

Author: seraphimrose

app/action/entity.js

@@ -5,4 +5,10 @@ export const addList = createAction("Add a new list", data => fromJS(data))
 
 export const addCard = createAction("Add a new card", data => fromJS(data))
 
-export const removeCard = createAction("Remove a card", data => fromJS(data))
+export const removeCard = createAction("Remove a card", data => fromJS(data))
+
+export const moveCard = createAction("Move a card", data => fromJS(data))
+
+export const addSlot = createAction("Add a slot", data => fromJS(data))
+
+export const removeSlot = createAction("Remove a slot", data => fromJS(data))

app/component/card/index.js

@@ -2,8 +2,9 @@ import React, { Component } from 'react'
 import Tooltip from 'antd/lib/tooltip'
 import Icon from 'antd/lib/icon'
 import { DragSource, DropTarget } from 'react-dnd';
+import { findDOMNode } from 'react-dom'
 
-import { removeCard } from 'action/entity'
+import { removeCard, addSlot, removeSlot } from 'action/entity'
 import style from './card.css'
 
 const cardDragSource = {
@@ -15,7 +16,35 @@ const cardDragSource = {
 }
 
 const cardDropTarget = {
+	hover(props, monitor, component) {
+		if (props.index === monitor.getItem().index) {
+			return ;
+		}
+		const target = findDOMNode(component).getBoundingClientRect();
+		const targetMiddleY = (target.bottom - target.top) / 2;
+		const cursor = monitor.getClientOffset();
+
+		const cur = props.list.get('card')
+		const ind = cur.indexOf(props.index)
+
+		props.board.get('list').forEach(v => {
+			props.dispatch(removeSlot({
+				listIndex: v
+			}))
+		})
 
+		if (cursor.y < targetMiddleY) {
+			props.dispatch(addSlot({
+				listIndex: props.listIndex,
+				'new': cur.splice(ind, 0, 'slot')
+			}))
+		} else {
+			props.dispatch(addSlot({
+				listIndex: props.listIndex,
+				'new': cur.splice(ind + 1, 0, 'slot')
+			}))
+		}
+	}
 }
 
 function dragCollect(connect, monitor) {
@@ -40,6 +69,7 @@ export default class Card extends Component {
 
 	render() {
 		const {
+			list,
 			card,
 			tag,
 			member,

app/component/list/index.js

@@ -111,13 +111,17 @@ export default class List extends Component {
 						style={{width: 270}}
 					>
 						{list.get('card').map(value => (
-							<Card
-								{...this.props}
-								key={value}
-								index={value}
-								listIndex={index}
-								card={card.get(value)}
-							/>
+							value !== 'slot' ? (
+								<Card
+									{...this.props}
+									key={value}
+									index={value}
+									listIndex={index}
+									card={card.get(value)}
+								/>
+							) : (
+								<div className={style.slot}></div>
+							)
 						))}
 					</Scrollbars>
 					{this.state.isAdding ? (

app/component/list/list.css

@@ -13,6 +13,15 @@
 		padding-bottom: 5px;
 	}
 
+	:local(.slot) {
+		width: 260px;
+		height: 100px;
+		margin-bottom: 8px;
+		background: #ccc;
+		border-radius: 5px;
+		box-shadow: 1px 1px 1px 1px #777;
+	}
+
 	:local(.new) {
 		width: 260px;
 		padding: 6px;

app/reducer/entity.js

@@ -9,9 +9,22 @@ const initialState = fromJS(entity)
 export default createReducer({
 	[actions.addList]: (state, data) => state.mergeDeep(data),
 	[actions.addCard]: (state, data) => state.mergeDeep(data),
-	[actions.removeCard]: (state, key) => (
-		state//.deleteIn(['card', key.get('index')]) // <-- unnecessary?
-			.deleteIn(['list', key.get('listIndex'), 'card',
-					state.getIn(['list', key.get('listIndex'), 'card']).indexOf(key.get('index'))])
-	)
+
+	[actions.removeCard]: (state, data) =>
+		state//.deleteIn(['card', data.get('index')]) // <-- unnecessary?
+			.deleteIn(['list', data.get('listIndex'), 'card',
+				state.getIn(['list', data.get('listIndex'), 'card']).indexOf(data.get('index'))]),
+
+	[actions.addSlot]: (state, data) =>
+		state.setIn(['list', data.get('listIndex'), 'card'], data.get('new')),
+	[actions.removeSlot]: (state, data) => {
+		const index = state.getIn(['list', data.get('listIndex'), 'card']).indexOf('slot')
+		return index !== -1 ? state.deleteIn(['list', data.get('listIndex'), 'card', index]) : state
+	},
+
+
+	[actions.moveCard]: (state, data) =>
+		state.deleteIn(['list', data.get('fromListIndex'), 'card',
+			state.getIn(['list', data.get('fromListIndex'), 'card']).indexOf(data.get('index'))])
+			.setIn(['list', data.get('toListIndex'), 'card'], data.get('new'))
 }, initialState)