1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
import React, { Component } from 'react'
// import { Link } from 'react-router-dom'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { ReactSortable } from "react-sortablejs"
// import actions from '../../../actions'
import * as tileActions from '../../tile/tile.actions'
import * as pageActions from '../../page/page.actions'
const DOUBLE_CLICK_THRESHOLD = 250
class TileList extends Component {
state = {
tiles: [],
didDoubleClick: false,
lastTargetId: 0,
lastTimeStamp: 0,
}
// store doubleclick state as a class property because ReactSortable calls setState promiscuously
didDoubleClick = false
componentDidMount(prevProps) {
const { tiles } = this.props.page.show.res
this.setState({ tiles })
}
componentDidUpdate(prevProps, prevState) {
const { tiles, didDoubleClick } = this.state
if (prevState.tiles.length && !pageActions.isSameTileOrder(tiles, prevState.tiles)) {
this.props.pageActions.setTileSortOrder(tiles)
}
if (didDoubleClick) {
this.setState({ didDoubleClick: false })
}
}
componentWillUnmount() {
console.log('will unmount', this.state)
}
handleChoose(e) {
const { lastTargetId, lastTimeStamp } = this.state
if (lastTimeStamp
&& parseInt(e.item.dataset.id) === lastTargetId
&& (e.timeStamp - lastTimeStamp) < DOUBLE_CLICK_THRESHOLD
) {
console.log('selected', lastTargetId)
this.didDoubleClick = true
this.props.pageActions.showEditTileForm(lastTargetId)
} else {
this.setState({
lastTargetId: parseInt(e.item.dataset.id),
lastTimeStamp: e.timeStamp,
})
}
}
handleUpdate(newTiles) {
if (this.didDoubleClick) return
this.setState({ tiles: newTiles })
}
render() {
const { tiles } = this.state
return (
<div className='box tileList'>
<ReactSortable
list={tiles}
setList={newTiles => this.handleUpdate(newTiles)}
onChoose={e => this.handleChoose(e)}
>
{tiles.map(tile => (
tile.type === 'image'
? <TileListImage key={tile.id} tile={tile} />
: <TileListText key={tile.id} tile={tile} />
))}
</ReactSortable>
</div>
)
}
}
const TileListImage = ({ tile }) => (
<div className='row' data-id={tile.id}>
<div className='thumb' style={{ backgroundImage: 'url(' + tile.settings.url + ')' }} />
</div>
)
const TileListText = ({ tile }) => (
<div className='row' data-id={tile.id}>
<span className='snippet'>{tile.settings.content.substr(0, 100)}</span>
</div>
)
const mapStateToProps = state => ({
graph: state.graph,
page: state.page,
})
const mapDispatchToProps = dispatch => ({
tileActions: bindActionCreators({ ...tileActions }, dispatch),
pageActions: bindActionCreators({ ...pageActions }, dispatch),
})
export default connect(mapStateToProps, mapDispatchToProps)(TileList)
|
