[field] Fix DiffAnnotation and DiffAnnotationTooltip after ergonomic …

…refactor
sanity-io · Oct 6, 2020 · 40eff2d · 40eff2d
1 parent 62e27f7
commit 40eff2d
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 17 deletions.
diff --git a/packages/@sanity/field/src/diff/annotations/AnnotatedStringDiff.tsx b/packages/@sanity/field/src/diff/annotations/AnnotatedStringDiff.tsx
@@ -1,9 +1,7 @@
-import {useUserColorManager} from '@sanity/base/user-color'
 import * as React from 'react'
 import {StringDiffSegment, StringDiff} from '../../types'
 import {DiffAnnotation} from '../annotations'
 import styles from './AnnotatedStringDiff.css'
-import {getAnnotationColor} from './helpers'
 
 function FormattedPreviewText({
   isFirstSegment,
@@ -36,8 +34,6 @@ export function AnnotatedStringDiffSegment({
   isLastSegment: boolean
   segment: StringDiffSegment
 }): React.ReactElement {
-  const userColorManager = useUserColorManager()
-
   const text = (
     <FormattedPreviewText
       isFirstSegment={isFirstSegment}
@@ -47,31 +43,25 @@ export function AnnotatedStringDiffSegment({
   )
 
   if (segment.action === 'added') {
-    const color = getAnnotationColor(userColorManager, segment.annotation)
-
     return (
       <DiffAnnotation
         annotation={segment.annotation}
         as="ins"
         className={styles.add}
         description="Added by"
-        style={{background: color.background, color: color.text}}
       >
         {text}
       </DiffAnnotation>
     )
   }
 
   if (segment.action === 'removed') {
-    const color = getAnnotationColor(userColorManager, segment.annotation)
-
     return (
       <DiffAnnotation
         annotation={segment.annotation}
         as="del"
         className={styles.remove}
         description="Removed by"
-        style={{background: color.background, color: color.text}}
       >
         {text}
       </DiffAnnotation>

diff --git a/packages/@sanity/field/src/diff/annotations/DiffAnnotation.tsx b/packages/@sanity/field/src/diff/annotations/DiffAnnotation.tsx
@@ -1,7 +1,8 @@
+import {useUserColorManager} from '@sanity/base/user-color'
 import * as React from 'react'
 import {Annotation, Diff, Path} from '../../types'
 import {DiffAnnotationTooltip} from './DiffAnnotationTooltip'
-import {getAnnotationAtPath} from './helpers'
+import {getAnnotationAtPath, getAnnotationColor} from './helpers'
 
 export interface AnnotationProps {
   annotation: Annotation | undefined | null
@@ -20,23 +21,32 @@ interface BaseAnnotationProps {
 export type DiffAnnotationProps = (AnnotationProps | AnnotatedDiffProps) & BaseAnnotationProps
 
 export function DiffAnnotation(props: DiffAnnotationProps & React.HTMLProps<HTMLElement>) {
+  const userColorManager = useUserColorManager()
+
   if ('diff' in props) {
-    const {as = 'span', children, description, diff, path, ...restProps} = props
-    const annotation = getAnnotationAtPath(diff, path || [])
+    const {as = 'span', children, description, diff, path = [], ...restProps} = props
+    const annotation = getAnnotationAtPath(diff, path)
+    const color = getAnnotationColor(userColorManager, annotation)
 
     return (
       <DiffAnnotationTooltip
         {...restProps}
         as={as}
         annotation={annotation}
         description={description}
+        style={{background: color.background, color: color.text}}
       >
         {children}
       </DiffAnnotationTooltip>
     )
   }
 
   const {children, ...restProps} = props
+  const color = getAnnotationColor(userColorManager, restProps.annotation)
 
-  return <DiffAnnotationTooltip {...restProps}>{children}</DiffAnnotationTooltip>
+  return (
+    <DiffAnnotationTooltip {...restProps} style={{background: color.background, color: color.text}}>
+      {children}
+    </DiffAnnotationTooltip>
+  )
 }
diff --git a/packages/@sanity/field/src/diff/annotations/DiffAnnotationTooltip.tsx b/packages/@sanity/field/src/diff/annotations/DiffAnnotationTooltip.tsx
@@ -15,9 +15,26 @@ export type DiffAnnotationTooltipProps = (AnnotationProps | AnnotatedDiffProps)
 export function DiffAnnotationTooltip(
   props: DiffAnnotationTooltipProps & React.HTMLProps<HTMLElement>
 ): React.ReactElement {
-  const {as = 'div', children, description, ...restProps} = props
-  const annotation =
-    'diff' in props ? getAnnotationAtPath(props.diff, props.path || []) : props.annotation
+  if ('diff' in props) {
+    const {as = 'div', children, description, diff, path, ...restProps} = props
+    const annotation = getAnnotationAtPath(diff, path || [])
+
+    if (!annotation) {
+      return createElement(as, restProps, children)
+    }
+
+    const content = (
+      <DiffAnnotationTooltipContent description={description} annotations={[annotation]} />
+    )
+
+    return (
+      <Tooltip content={content} placement="top" portal>
+        {createElement(as, restProps, children)}
+      </Tooltip>
+    )
+  }
+
+  const {as = 'div', annotation, children, description, ...restProps} = props
 
   if (!annotation) {
     return createElement(as, restProps, children)