mirror of
https://github.com/lidarr/lidarr.git
synced 2025-07-10 07:13:47 -07:00
New: Plugin support
This commit is contained in:
parent
91f06801ca
commit
f15f7b48a3
171 changed files with 3277 additions and 839 deletions
|
@ -0,0 +1,188 @@
|
|||
import classNames from 'classnames';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import { DragSource, DropTarget } from 'react-dnd';
|
||||
import { findDOMNode } from 'react-dom';
|
||||
import { DOWNLOAD_PROTOCOL_ITEM } from 'Helpers/dragTypes';
|
||||
import DownloadProtocolItem from './DownloadProtocolItem';
|
||||
import styles from './DownloadProtocolItemDragSource.css';
|
||||
|
||||
const downloadProtocolItemDragSource = {
|
||||
beginDrag(props) {
|
||||
const {
|
||||
index,
|
||||
protocol,
|
||||
name,
|
||||
allowed,
|
||||
delay
|
||||
} = props;
|
||||
|
||||
return {
|
||||
index,
|
||||
protocol,
|
||||
name,
|
||||
allowed,
|
||||
delay
|
||||
};
|
||||
},
|
||||
|
||||
endDrag(props, monitor, component) {
|
||||
props.onDownloadProtocolItemDragEnd(monitor.didDrop());
|
||||
}
|
||||
};
|
||||
|
||||
const downloadProtocolItemDropTarget = {
|
||||
hover(props, monitor, component) {
|
||||
const {
|
||||
index: dragIndex
|
||||
} = monitor.getItem();
|
||||
|
||||
const dropIndex = props.index;
|
||||
|
||||
// Use childNodeIndex to select the correct node to get the middle of so
|
||||
// we don't bounce between above and below causing rapid setState calls.
|
||||
const childNodeIndex = component.props.isOverCurrent && component.props.isDraggingUp ? 1 :0;
|
||||
const componentDOMNode = findDOMNode(component).children[childNodeIndex];
|
||||
const hoverBoundingRect = componentDOMNode.getBoundingClientRect();
|
||||
const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
|
||||
const clientOffset = monitor.getClientOffset();
|
||||
const hoverClientY = clientOffset.y - hoverBoundingRect.top;
|
||||
|
||||
// If we're hovering over a child don't trigger on the parent
|
||||
if (!monitor.isOver({ shallow: true })) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Don't show targets for dropping on self
|
||||
if (dragIndex === dropIndex) {
|
||||
return;
|
||||
}
|
||||
|
||||
let dropPosition = null;
|
||||
|
||||
// Determine drop position based on position over target
|
||||
if (hoverClientY > hoverMiddleY) {
|
||||
dropPosition = 'below';
|
||||
} else if (hoverClientY < hoverMiddleY) {
|
||||
dropPosition = 'above';
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
|
||||
props.onDownloadProtocolItemDragMove({
|
||||
dragIndex,
|
||||
dropIndex,
|
||||
dropPosition
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
function collectDragSource(connect, monitor) {
|
||||
return {
|
||||
connectDragSource: connect.dragSource(),
|
||||
isDragging: monitor.isDragging()
|
||||
};
|
||||
}
|
||||
|
||||
function collectDropTarget(connect, monitor) {
|
||||
return {
|
||||
connectDropTarget: connect.dropTarget(),
|
||||
isOver: monitor.isOver(),
|
||||
isOverCurrent: monitor.isOver({ shallow: true })
|
||||
};
|
||||
}
|
||||
|
||||
class DownloadProtocolItemDragSource extends Component {
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
const {
|
||||
protocol,
|
||||
name,
|
||||
allowed,
|
||||
delay,
|
||||
index,
|
||||
isDragging,
|
||||
isDraggingUp,
|
||||
isDraggingDown,
|
||||
isOverCurrent,
|
||||
connectDragSource,
|
||||
connectDropTarget,
|
||||
onDownloadProtocolItemFieldChange
|
||||
} = this.props;
|
||||
|
||||
const isBefore = !isDragging && isDraggingUp && isOverCurrent;
|
||||
const isAfter = !isDragging && isDraggingDown && isOverCurrent;
|
||||
|
||||
return connectDropTarget(
|
||||
<div
|
||||
className={classNames(
|
||||
styles.downloadProtocolItemDragSource,
|
||||
isBefore && styles.isDraggingUp,
|
||||
isAfter && styles.isDraggingDown
|
||||
)}
|
||||
>
|
||||
{
|
||||
isBefore &&
|
||||
<div
|
||||
className={classNames(
|
||||
styles.downloadProtocolItemPlaceholder,
|
||||
styles.downloadProtocolItemPlaceholderBefore
|
||||
)}
|
||||
/>
|
||||
}
|
||||
|
||||
<DownloadProtocolItem
|
||||
protocol={protocol}
|
||||
name={name}
|
||||
allowed={allowed}
|
||||
delay={delay}
|
||||
index={index}
|
||||
isDragging={isDragging}
|
||||
isOverCurrent={isOverCurrent}
|
||||
connectDragSource={connectDragSource}
|
||||
onDownloadProtocolItemFieldChange={onDownloadProtocolItemFieldChange}
|
||||
/>
|
||||
|
||||
{
|
||||
isAfter &&
|
||||
<div
|
||||
className={classNames(
|
||||
styles.downloadProtocolItemPlaceholder,
|
||||
styles.downloadProtocolItemPlaceholderAfter
|
||||
)}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
DownloadProtocolItemDragSource.propTypes = {
|
||||
protocol: PropTypes.string.isRequired,
|
||||
name: PropTypes.string.isRequired,
|
||||
allowed: PropTypes.bool.isRequired,
|
||||
delay: PropTypes.number.isRequired,
|
||||
index: PropTypes.number.isRequired,
|
||||
isDragging: PropTypes.bool,
|
||||
isDraggingUp: PropTypes.bool,
|
||||
isDraggingDown: PropTypes.bool,
|
||||
isOverCurrent: PropTypes.bool,
|
||||
connectDragSource: PropTypes.func,
|
||||
connectDropTarget: PropTypes.func,
|
||||
onDownloadProtocolItemFieldChange: PropTypes.func.isRequired,
|
||||
onDownloadProtocolItemDragMove: PropTypes.func.isRequired,
|
||||
onDownloadProtocolItemDragEnd: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default DropTarget(
|
||||
DOWNLOAD_PROTOCOL_ITEM,
|
||||
downloadProtocolItemDropTarget,
|
||||
collectDropTarget
|
||||
)(DragSource(
|
||||
DOWNLOAD_PROTOCOL_ITEM,
|
||||
downloadProtocolItemDragSource,
|
||||
collectDragSource
|
||||
)(DownloadProtocolItemDragSource));
|
Loading…
Add table
Add a link
Reference in a new issue