[field] Update FileFieldDiff to use components

sanity-io · Oct 6, 2020 · da00126 · da00126
1 parent dd8f7d0
commit da00126
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 68 deletions.
diff --git a/packages/@sanity/field/src/types/file/diff/FileFieldDiff.css b/packages/@sanity/field/src/types/file/diff/FileFieldDiff.css
@@ -4,24 +4,12 @@
   /*  */
 }
 
-.annotation {
-  border-radius: var(--border-radius-small);
-
-  @nest &[data-action='removed'] {
-    text-decoration: line-through;
-  }
-}
-
-.fileDiff {
-  @nest &[data-diff-layout='double'] {
-    display: grid;
-    grid-template-columns: 1fr auto 1fr;
-  }
+.card {
+  display: block;
 }
 
 .sizeDiff {
   display: inline-block;
-  font-size: 13px;
   padding: 0 4px;
   background: var(--component-bg);
   border-radius: var(--border-radius-small);

diff --git a/packages/@sanity/field/src/types/file/diff/FileFieldDiff.tsx b/packages/@sanity/field/src/types/file/diff/FileFieldDiff.tsx
@@ -1,15 +1,18 @@
-import * as React from 'react'
 import FileIcon from 'part:@sanity/base/file-icon'
-import {useRefValue} from '../../../diff/hooks'
-import {MetaInfo, FromToArrow} from '../../../diff/components'
+import React from 'react'
 import {
-  ChangeList,
   DiffComponent,
+  DiffCard,
   DiffTooltip,
-  ObjectDiff,
-  useDiffAnnotationColor
+  FromTo,
+  MetaInfo,
+  ChangeList,
+  ObjectDiff
 } from '../../../diff'
+import {useRefValue} from '../../../diff/hooks'
+import {getSizeDiff} from './helpers'
 import {File, FileAsset} from './types'
+
 import styles from './FileFieldDiff.css'
 
 export const FileFieldDiff: DiffComponent<ObjectDiff<File>> = ({diff, schemaType}) => {
@@ -29,56 +32,41 @@ export const FileFieldDiff: DiffComponent<ObjectDiff<File>> = ({diff, schemaType
 
   const didAssetChange = changedFields.includes('asset')
 
-  const color = useDiffAnnotationColor(diff, 'asset._ref')
-  const style = color ? {background: color.background, color: color.text} : {}
-
   // Sizes in MB TODO: improve. Apple uses 1000^2
   const prevSize = prev?.size && prev.size / 1000 / 1000
   const nextSize = next?.size && next.size / 1000 / 1000
-
   const pctDiff = getSizeDiff(prevSize, nextSize)
 
   const roundedPrevSize = prevSize ? prevSize.toFixed(2) : undefined
   const roundedNextSize = nextSize ? nextSize.toFixed(2) : undefined
 
+  const from = prev && (
+    <DiffCard as="del" className={styles.card} diff={diff} path="asset._ref">
+      <MetaInfo title={prev.originalFilename || 'Untitled'} icon={FileIcon}>
+        <span>{`${roundedPrevSize}MB`}</span>
+      </MetaInfo>
+    </DiffCard>
+  )
+
+  const to = next && (
+    <DiffCard as="ins" className={styles.card} diff={diff} path="asset._ref">
+      <MetaInfo title={next.originalFilename || 'Untitled'} icon={FileIcon}>
+        <span>{`${roundedNextSize}MB`}</span>
+        {pctDiff !== 0 && (
+          <div className={styles.sizeDiff} data-number={pctDiff > 0 ? 'positive' : 'negative'}>
+            {pctDiff > 0 && '+'}
+            {pctDiff}%
+          </div>
+        )}
+      </MetaInfo>
+    </DiffCard>
+  )
+
   return (
     <div className={styles.root}>
       {didAssetChange && (
         <DiffTooltip diff={diff} path="asset._ref">
-          <div className={styles.fileDiff} data-diff-layout={prev && next ? 'double' : 'single'}>
-            {prev && (
-              <div
-                className={styles.annotation}
-                style={style}
-                data-action={didAssetChange ? 'removed' : 'changed'}
-              >
-                <MetaInfo title={prev.originalFilename || 'Untitled'} icon={FileIcon}>
-                  <span>{`${roundedPrevSize}MB`}</span>
-                </MetaInfo>
-              </div>
-            )}
-            {prev && next && <FromToArrow />}
-            {next && (
-              <div
-                className={styles.annotation}
-                style={style}
-                data-action={didAssetChange ? 'added' : 'changed'}
-              >
-                <MetaInfo title={next.originalFilename || 'Untitled'} icon={FileIcon}>
-                  <span>{`${roundedNextSize}MB`}</span>
-                  {pctDiff !== 0 && (
-                    <div
-                      className={styles.sizeDiff}
-                      data-number={pctDiff > 0 ? 'positive' : 'negative'}
-                    >
-                      {pctDiff > 0 && '+'}
-                      {pctDiff}%
-                    </div>
-                  )}
-                </MetaInfo>
-              </div>
-            )}
-          </div>
+          <FromTo from={from} layout="grid" to={to} />
         </DiffTooltip>
       )}
 
@@ -90,13 +78,3 @@ export const FileFieldDiff: DiffComponent<ObjectDiff<File>> = ({diff, schemaType
     </div>
   )
 }
-
-function getSizeDiff(prev: number | undefined, next: number | undefined): number {
-  if (!prev || !next) {
-    return 0
-  }
-
-  const increase = next - prev
-  const pct = Math.round((increase / prev) * 100)
-  return pct
-}
diff --git a/packages/@sanity/field/src/types/file/diff/helpers.ts b/packages/@sanity/field/src/types/file/diff/helpers.ts
@@ -0,0 +1,10 @@
+export function getSizeDiff(prev: number | undefined, next: number | undefined): number {
+  if (!prev || !next) {
+    return 0
+  }
+
+  const increase = next - prev
+  const pct = Math.round((increase / prev) * 100)
+
+  return pct
+}