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
|
import React, { Component } from 'react'
import actions from 'site/actions'
import "./artists.css"
import { ARTISTS, ARTIST_ORDER } from "site/projects/museum/constants"
import { ArrowLeft, ArrowRight } from "site/projects/museum/icons"
export default class Artists extends Component {
state = {
currentIndex: 0,
detail: false,
}
constructor(props) {
super(props)
this.ref = React.createRef()
this.showArtist = this.showArtist.bind(this)
this.previousArtist = this.previousArtist.bind(this)
this.nextArtist = this.nextArtist.bind(this)
}
componentDidMount() {
actions.site.interact()
}
showArtist(currentIndex) {
this.setState({ detail: true, currentIndex })
this.scrollToTop()
}
previousArtist() {
this.go(-1)
}
nextArtist() {
this.go(1)
}
go(step) {
const currentIndex = (this.state.currentIndex + step + ARTIST_ORDER.length) % ARTIST_ORDER.length
this.setState({ currentIndex })
this.scrollToTop()
}
scrollToTop() {
setTimeout(() => {
Array.from(this.ref.current.querySelectorAll(".artist-content")).forEach(el => {
el.scrollTo(0, 0)
})
}, 0)
}
render() {
const { currentIndex, detail } = this.state
return (
<div className="page page-artists">
<div className="artist-list">
<div className="artists-heading">ARTISTS</div>
{ARTIST_ORDER.map((key, index) => {
const artist = ARTISTS[key]
return (
<div key={key} className="artist-big-name" onClick={() => this.showArtist(index)}>
{artist.name}
</div>
)
})}
</div>
<div className={detail ? "artist-gallery visible" : "artist-gallery"}>
{ARTIST_ORDER.map((key, index) => (
<ArtistDetail
artist={ARTISTS[key]}
key={key}
index={index}
isCurrent={detail && currentIndex === index}
onClose={() => this.setState({ detail: false })}
/>
))}
<div className="nav-arrow arrow-left" onClick={this.previousArtist}>{ArrowLeft}</div>
<div className="nav-arrow arrow-right" onClick={this.nextArtist}>{ArrowRight}</div>
</div>
</div>
)
}
}
const ArtistDetail = ({ artist, index, isCurrent, onClose }) => {
return (
<div className={isCurrent ? "artist-detail visible" : "artist-detail"}>
<div className="artist-right" style={{ backgroundImage: `url(${artist.image})`}} />
<div className="artist-content">
<div className="artist-left">
<span dangerouslySetInnerHTML={{ __html: artist.bio }} />
</div>
<div className="artist-right">
<span dangerouslySetInnerHTML={{ __html: artist.statement }} />
</div>
</div>
<div className="artist-detail-name" onClick={onClose}>
{artist.name}
</div>
<div className="artist-location">{artist.location}</div>
</div>
)
}
|
