-
Notifications
You must be signed in to change notification settings - Fork 394
/
DefaultSource.tsx
126 lines (123 loc) · 3.42 KB
/
DefaultSource.tsx
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
import React from 'react'
import ImageIcon from 'react-icons/lib/md/image'
import client from 'part:@sanity/base/client'
import Button from 'part:@sanity/components/buttons/default'
import Dialog from 'part:@sanity/components/dialogs/fullscreen'
import styles from './styles/SelectAsset.css'
import AssetWidget from './Asset'
import {AssetFromSource} from './ImageInput'
const PER_PAGE = 200
type Asset = {
_id: string
url: string
}
type Props = {
onSelect: (arg0: AssetFromSource[]) => void
onClose: () => void
selectedAssets: Asset[]
selectionType: boolean
}
function createQuery(start = 0, end = PER_PAGE) {
return `
*[_type == "sanity.imageAsset"] | order(_updatedAt desc) [${start}...${end}] {
_id,
url,
metadata {dimensions}
}
`
}
type State = {
assets: Array<Asset>
isLastPage: boolean
isLoading: boolean
}
class DefaultSource extends React.Component<Props, State> {
state = {
assets: [],
isLastPage: false,
isLoading: false
}
pageNo = 0
fetchPage(pageNo: number) {
const start = pageNo * PER_PAGE
const end = start + PER_PAGE
this.setState({isLoading: true})
return client.fetch(createQuery(start, end)).then(result => {
this.setState(prevState => ({
isLastPage: result.length < PER_PAGE,
assets: prevState.assets.concat(result),
isLoading: false
}))
})
}
handleDeleteFinished = id => {
this.setState(prevState => ({
assets: prevState.assets.filter(asset => asset._id !== id)
}))
}
componentDidMount() {
this.fetchPage(this.pageNo)
}
select(id) {
const selected = this.state.assets.find(doc => doc._id === id)
if (selected) {
this.props.onSelect([{kind: 'assetDocumentId', value: id}])
}
}
handleItemClick = (event: React.SyntheticEvent<any>) => {
event.preventDefault()
this.select(event.currentTarget.getAttribute('data-id'))
}
handleItemKeyPress = (event: React.KeyboardEvent) => {
if (event.key === 'Enter') {
event.preventDefault()
this.select(event.currentTarget.getAttribute('data-id'))
}
}
handleClose = () => {
if (this.props.onClose) {
this.props.onClose()
}
}
handleFetchNextPage = () => {
this.fetchPage(++this.pageNo)
}
render() {
const {selectedAssets} = this.props
const {assets, isLastPage, isLoading} = this.state
return (
<Dialog title="Select image" onClose={this.handleClose} isOpen>
<div className={styles.root}>
<div className={styles.imageList}>
{assets.map(asset => (
<AssetWidget
key={asset._id}
asset={asset}
isSelected={selectedAssets.some(selected => selected._id === asset._id)}
onClick={this.handleItemClick}
onKeyPress={this.handleItemKeyPress}
onDeleteFinished={this.handleDeleteFinished}
/>
))}
</div>
{!isLoading && assets.length === 0 && (
<div className={styles.noAssets}>No images found</div>
)}
<div className={styles.loadMore}>
{!isLastPage && (
<Button onClick={this.handleFetchNextPage} loading={isLoading}>
Load more
</Button>
)}
</div>
</div>
</Dialog>
)
}
}
export default {
name: 'sanity-default',
title: 'Uploaded images',
component: DefaultSource,
icon: ImageIcon
}