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
|
import { h, withVar, mount, Html, Rx } from 'lib/rx'
import * as Book from 'book'
import * as Modal from 'view/components/modal'
export function view(books: Rx<Array<Book.Book>>): Html {
return h('div',
{ className: 'g-Books' },
withVar<Book.Book | undefined>(undefined, (focusBook, updateFocusBook) => [
focusBook.map(book => book && bookDetailModal({
book,
onClose: () => updateFocusBook(_ => undefined)
})),
books.map(bs => bs.map(book => viewBook({
book,
onSelect: (book) => updateFocusBook(_ => book)
})))
])
)
}
interface ViewBookParams {
book: Book.Book
onSelect: (book: Book.Book) => void
}
function viewBook({ book, onSelect }: ViewBookParams): Html {
return h('button',
{ className: 'g-Book' },
h('img',
{ src: book.cover,
className: 'g-Book__Image',
onclick: () => onSelect(book)
}
)
)
}
interface BookDetailModalParams {
book: Book.Book
onClose: () => void
}
function bookDetailModal({ book, onClose }: BookDetailModalParams): Html {
return Modal.view({
content: h('div',
{ className: 'g-BookDetail' },
h('div',
h('div', { className: 'g-BookDetail__Title' }, `${book.title}, ${book.date}`),
book.subtitle && h('div', { className: 'g-BookDetail__Subtitle' }, book.subtitle),
book.authors.join(', '),
h('div',
{ className: 'g-BookDetail__Genres' },
book.genres.length > 1 ? 'Genres : ' : 'Genre : ',
book.genres.join(', ')
)
),
h('img', { src: book.cover })
),
onClose
})
}
|
