blob: 989d3f7390595144af972237d726e0e0e2bff201 (
plain)
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
|
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: true,
}
constructor(props) {
super(props)
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 })
}
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 })
}
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(currentIndex)}>
{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={currentIndex === index}
/>
))}
<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 }) => {
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>
<div className="artist-detail-name">
{artist.name}
</div>
<div className="artist-location">{artist.location}</div>
</div>
)
}
|
