[desk-tool] Fix styling of referring documents list (#266)

sanity-io · Oct 12, 2017 · 0a3e01a · 0a3e01a
1 parent a5c888f
commit 0a3e01a
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 46 deletions.
diff --git a/packages/@sanity/desk-tool/src/components/ConfirmDelete.js b/packages/@sanity/desk-tool/src/components/ConfirmDelete.js
@@ -3,10 +3,9 @@ import React from 'react'
 import Dialog from 'part:@sanity/components/dialogs/fullscreen'
 import Spinner from 'part:@sanity/components/loading/spinner'
 
-import {List as DefaultList, Item as DefaultItem} from 'part:@sanity/components/lists/default'
 import enhanceWithReferringDocuments from './enhanceWithReferringDocuments'
-import ReferringDocumentLink from './ReferringDocumentLink'
 import DocTitle from './DocTitle'
+import ReferringDocumentsList from './ReferringDocumentsList'
 
 export default enhanceWithReferringDocuments(class ConfirmDelete extends React.PureComponent {
   static propTypes = {
@@ -68,13 +67,7 @@ export default enhanceWithReferringDocuments(class ConfirmDelete extends React.P
               to be removed from
               the following document{referringDocuments.length > 1 && 's'}:
             </p>
-            <DefaultList>
-              {referringDocuments.map(document => (
-                <DefaultItem key={document._id}>
-                  <ReferringDocumentLink document={document} />
-                </DefaultItem>
-              ))}
-            </DefaultList>
+            <ReferringDocumentsList documents={referringDocuments} />
           </div>
         )}
         {!isCheckingReferringDocuments && !hasReferringDocuments && (

diff --git a/packages/@sanity/desk-tool/src/components/ConfirmUnpublish.js b/packages/@sanity/desk-tool/src/components/ConfirmUnpublish.js
@@ -3,10 +3,9 @@ import React from 'react'
 import Dialog from 'part:@sanity/components/dialogs/fullscreen'
 import Spinner from 'part:@sanity/components/loading/spinner'
 
-import {List as DefaultList, Item as DefaultItem} from 'part:@sanity/components/lists/default'
 import enhanceWithReferringDocuments from './enhanceWithReferringDocuments'
-import ReferringDocumentLink from './ReferringDocumentLink'
 import DocTitle from './DocTitle'
+import ReferringDocumentsList from './ReferringDocumentsList'
 
 export default enhanceWithReferringDocuments(class ConfirmDelete extends React.PureComponent {
   static propTypes = {
@@ -65,13 +64,7 @@ export default enhanceWithReferringDocuments(class ConfirmDelete extends React.P
               to be removed from
               the following document{referringDocuments.length > 1 && 's'}:
             </p>
-            <DefaultList>
-              {referringDocuments.map(document => (
-                <DefaultItem key={document._id}>
-                  <ReferringDocumentLink document={document} />
-                </DefaultItem>
-              ))}
-            </DefaultList>
+            <ReferringDocumentsList documents={referringDocuments} />
           </div>
         )}
         {!isCheckingReferringDocuments && !hasReferringDocuments && (

diff --git a/packages/@sanity/desk-tool/src/components/ReferringDocumentLink.js b/packages/@sanity/desk-tool/src/components/ReferringDocumentLink.js
diff --git a/packages/@sanity/desk-tool/src/components/ReferringDocumentsList.js b/packages/@sanity/desk-tool/src/components/ReferringDocumentsList.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {List as DefaultList, Item as DefaultItem} from 'part:@sanity/components/lists/default'
+import styles from './styles/ReferringDocumentsList.css'
+import Preview from 'part:@sanity/base/preview'
+import {IntentLink} from 'part:@sanity/base/router'
+import schema from 'part:@sanity/base/schema'
+
+export default function ReferringDocumentsList(props) {
+  const {documents} = props
+  return (
+    <DefaultList className={styles.root}>
+      {documents.map(document => {
+        const schemaType = schema.get(document._type)
+        return (
+          <DefaultItem className={styles.item} key={document._id}>
+            {schemaType
+              ? (
+                <IntentLink className={styles.link} intent="edit" params={{id: document._id, type: document._type}}>
+                  <Preview value={document} type={schemaType} />
+                </IntentLink>
+              )
+              : <div>A document of the unknown type <em>{document._type}</em></div>
+            }
+          </DefaultItem>
+        )
+      })}
+    </DefaultList>
+  )
+}
+
+ReferringDocumentsList.propTypes = {
+  documents: PropTypes.arrayOf(PropTypes.shape({
+    _id: PropTypes.string,
+    _type: PropTypes.string
+  }))
+}
diff --git a/packages/@sanity/desk-tool/src/components/styles/ReferringDocumentLink.css b/packages/@sanity/desk-tool/src/components/styles/ReferringDocumentLink.css
diff --git a/packages/@sanity/desk-tool/src/components/styles/ReferringDocumentsList.css b/packages/@sanity/desk-tool/src/components/styles/ReferringDocumentsList.css
@@ -0,0 +1,11 @@
+
+.root {
+  composes: root from 'part:@sanity/components/lists/default-style';
+}
+.item {
+  composes: lineBetween from 'part:@sanity/components/lists/default-item-style';
+  padding: 1px 0;
+}
+.link {
+  color: inherit;
+}