Mo Elzubeir
70 lines
1.5 KiB
JavaScript
70 lines
1.5 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { TYPES } from '../../../../../../redux/modules/appState/sidebar'
|
|
import { Interpolate } from 'react-i18next'
|
|
import { DragSource } from 'react-dnd'
|
|
|
|
const source = {
|
|
beginDrag (props, monitor, component) {
|
|
setTimeout(() => {
|
|
component.setState({
|
|
isDragging: true
|
|
})
|
|
}, 0)
|
|
return {
|
|
type: TYPES.CLIP_ARTICLE
|
|
}
|
|
},
|
|
|
|
endDrag (props, monitor, component) {
|
|
component.setState({
|
|
isDragging: false
|
|
})
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Specifies which props to inject into component from Drag n Drop.
|
|
*/
|
|
function collect (connect) {
|
|
return {
|
|
// Call this function inside render()
|
|
// to let React DnD handle the drag events:
|
|
connectDragSource: connect.dragSource()
|
|
}
|
|
}
|
|
|
|
export class ClipDragSource extends React.Component {
|
|
|
|
static propTypes = {
|
|
articles: PropTypes.array.isRequired,
|
|
connectDragSource: PropTypes.func.isRequired
|
|
};
|
|
|
|
constructor (props) {
|
|
super(props)
|
|
this.state = {
|
|
isDragging: false
|
|
}
|
|
}
|
|
|
|
render () {
|
|
|
|
const style = {
|
|
visibility: this.state.isDragging ? 'hidden' : 'visible'
|
|
}
|
|
|
|
return this.props.connectDragSource(
|
|
<div className="draggable-item" style={style}>
|
|
<span className="drag-handle" />
|
|
<Interpolate
|
|
i18nKey='searchTab.clipPopup.clippedArticles'
|
|
count={this.props.articles.length}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default DragSource(TYPES.CLIP_ARTICLE, source, collect)(ClipDragSource)
|