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
|
import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { toArray } from '../util'
const parseTypes = {
string: s => s.toLowerCase(),
number: s => parseInt((s || '0').replace(/,/g, '').trim()),
}
const sortTypes = {
string: (a,b) => a[0].localeCompare(b[0]),
number: (a,b) => a[0] - b[0],
}
const sortOptions = [
{ field: 'title', title: 'Name', type: 'string' },
{ field: 'year', title: 'Year', type: 'number' },
{ field: 'purpose', title: 'Purpose', type: 'string' },
// { field: 'images', title: 'Images', type: 'number', reversed: true },
]
class DatasetListContainer extends Component {
state = {
sort: sortOptions[0],
reversed: false,
displayField: 'year',
}
constructor(){
super()
const parent = document.querySelector('.dataset-intro .dataset-list')
this.parent = parent
this.els = toArray(parent.children)
}
sortBy(order){
let { sort, reversed, displayField } = this.state
if (sort === order) reversed = !reversed
else reversed = !!order.reversed
const parseFn = parseTypes[order.type]
const sortFn = sortTypes[order.type]
let els = this.els
.map(el => [
parseFn(el.querySelector('.' + order.field).innerText),
el,
])
.sort(sortFn)
// .map(pair => pair[1])
// console.log(els)
els = els.map(pair => pair[1])
if (reversed) els.reverse()
if (order.field === 'title') {
// displayField = 'year'
} else {
displayField = order.field
}
els.forEach(el => {
this.parent.removeChild(el)
this.parent.appendChild(el)
const viz = el.querySelector('.visible')
if (viz) {
viz.classList.remove('visible')
}
el.querySelector('.' + displayField).classList.add('visible')
})
this.setState({ sort: order, reversed, displayField })
}
render() {
const { payload } = this.props
// console.log(payload)
return (
<div className='dataset-list'>
<ul className='sort-options'>
{sortOptions.map(order =>
<li
key={order.field}
className={order.field === this.state.sort.field ? 'active' : ''}
onClick={() => this.sortBy(order)}>
{order.title}
</li>
)}
</ul>
</div>
)
}
}
export default DatasetListContainer
|
