[components] Adding support for new media in block preview (#477)

sanity-io · Jan 10, 2018 · 1492ab1 · 1492ab1
1 parent bf737e9
commit 1492ab1
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/packages/@sanity/base/src/preview/SanityDefaultPreview.js b/packages/@sanity/base/src/preview/SanityDefaultPreview.js
@@ -55,7 +55,7 @@ export default class SanityDefaultPreview extends React.PureComponent {
     const imageUrl = value.imageUrl
     if (imageUrl) {
       const assetUrl = assetUrlBuilder(imageUrl, {dimensions})
-      return <img src={assetUrl} alt={value.title} />
+      return <img src={assetUrl} alt={value.title} style={{objectFit: 'cover', height: '100%', width: '100%'}} />
     }
 
     if (!media) {

diff --git a/packages/@sanity/components/src/previews/BlockPreview.js b/packages/@sanity/components/src/previews/BlockPreview.js
@@ -2,18 +2,20 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import styles from 'part:@sanity/components/previews/block-style'
 
+const fieldProp = PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func])
+
 export default class BlockPreview extends React.PureComponent {
   static propTypes = {
     title: PropTypes.string,
     subtitle: PropTypes.string,
     description: PropTypes.string,
-    me: PropTypes.func,
     mediaDimensions: PropTypes.shape({
       width: PropTypes.number,
       height: PropTypes.number,
       fit: PropTypes.oneOf(['clip', 'crop', 'clamp']),
       aspect: PropTypes.number,
     }),
+    media: fieldProp,
     children: PropTypes.func,
     type: PropTypes.shape({
       title: PropTypes.string,
@@ -35,7 +37,7 @@ export default class BlockPreview extends React.PureComponent {
       subtitle,
       description,
       mediaDimensions,
-      renderMedia,
+      media,
       children,
       type
     } = this.props
@@ -48,9 +50,21 @@ export default class BlockPreview extends React.PureComponent {
           {type.title || type.name}
         </div>
         {
-          renderMedia && (
-            <div className={styles.media}>
-              {renderMedia(mediaDimensions)}
+          media && (
+            <div className={`${styles.media}`}>
+              {
+                typeof media === 'function' && (
+                  media({dimensions: mediaDimensions, layout: 'default'})
+                )
+              }
+              {
+                typeof media === 'string' && (
+                  <div className={styles.mediaString}>{media}</div>
+                )
+              }
+              {
+                typeof media === 'object' && media
+              }
             </div>
           )
         }