57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
import * as React from "react"
|
|
import BaseWidget, { IWidgetProps, IWidgetState } from "../widgets/BaseWidget"
|
|
import _ from "lodash"
|
|
import { DragSource, DragSourceConnector, DragSourceMonitor } from "react-dnd"
|
|
import { IContainerProps } from "./ContainerComponent"
|
|
|
|
export interface IDraggableProps extends IContainerProps {
|
|
connectDragSource: Function
|
|
isDragging?: boolean
|
|
}
|
|
|
|
class DraggableComponent extends React.Component<
|
|
IDraggableProps,
|
|
IWidgetState
|
|
> {
|
|
render() {
|
|
return this.props.connectDragSource(
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
left: this.props.style
|
|
? this.props.style.xPosition + this.props.style.xPositionUnit
|
|
: 0,
|
|
top: this.props.style
|
|
? this.props.style.yPosition + this.props.style.yPositionUnit
|
|
: 0
|
|
}}
|
|
>
|
|
{this.props.children}
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
const widgetSource = {
|
|
beginDrag(props: IWidgetProps) {
|
|
return {
|
|
widgetId: props.widgetId,
|
|
widgetType: props.widgetType
|
|
}
|
|
}
|
|
}
|
|
|
|
const widgetType = (props: IWidgetProps) => {
|
|
return props.widgetType
|
|
}
|
|
|
|
function collect(connect: DragSourceConnector, monitor: DragSourceMonitor) {
|
|
return {
|
|
connectDragSource: connect.dragSource(),
|
|
isDragging: monitor.isDragging()
|
|
}
|
|
}
|
|
|
|
export default DragSource(widgetType, widgetSource, collect)(DraggableComponent)
|