-
Notifications
You must be signed in to change notification settings - Fork 395
/
CreateDocumentPreview.js
95 lines (88 loc) · 2.81 KB
/
CreateDocumentPreview.js
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
/* eslint-disable complexity */
import PropTypes from 'prop-types'
import React from 'react'
import styles from './styles/CreateDocumentPreview.css'
import {IntentLink} from 'part:@sanity/base/router'
import Ink from 'react-ink'
const fieldProp = PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func])
class CreateDocumentPreview extends React.PureComponent {
static propTypes = {
title: fieldProp,
subtitle: fieldProp,
description: fieldProp,
media: fieldProp,
icon: PropTypes.func,
isPlaceholder: PropTypes.bool,
params: PropTypes.shape({
template: PropTypes.string
}),
onClick: PropTypes.func,
mediaDimensions: PropTypes.shape({
width: PropTypes.number,
height: PropTypes.number,
fit: PropTypes.oneOf(['clip', 'crop', 'fill', 'fillmax', 'max', 'scale', 'min']),
aspect: PropTypes.number
})
}
static defaultProps = {
title: 'Untitled',
subtitle: undefined,
params: undefined,
icon: undefined,
media: undefined,
mediaDimensions: {width: 80, height: 80, aspect: 1, fit: 'crop'}
}
render() {
const {
title,
subtitle,
media = this.props.icon,
isPlaceholder,
mediaDimensions,
description,
params
} = this.props
if (isPlaceholder || !params) {
return (
<div className={styles.placeholder}>
<div className={styles.heading}>
<h2 className={styles.title}>Loading…</h2>
<h3 className={styles.subtitle}>Loading…</h3>
</div>
{media !== false && <div className={styles.media} />}
</div>
)
}
return (
<IntentLink
intent="create"
params={params}
className={styles.root}
title={subtitle ? `Create new ${title} (${subtitle})` : `Create new ${title}`}
onClick={this.props.onClick}
>
{media !== false && (
<div className={styles.media}>
{typeof media === 'function' && media({dimensions: mediaDimensions, layout: 'default'})}
{typeof media === 'string' && <div className={styles.mediaString}>{media}</div>}
{React.isValidElement(media) && media}
</div>
)}
<div className={styles.heading}>
<h2 className={styles.title}>
{typeof title !== 'function' && title}
{typeof title === 'function' && title({layout: 'default'})}
</h2>
{subtitle && (
<h3 className={styles.subtitle}>
{(typeof subtitle === 'function' && subtitle({layout: 'default'})) || subtitle}
</h3>
)}
</div>
{description && <p className={styles.description}>{description}</p>}
<Ink duration={1000} opacity={0.1} radius={200} />
</IntentLink>
)
}
}
export default CreateDocumentPreview