[field] Improve use of PopoverDialog

sanity-io · Oct 6, 2020 · 7b47c7c · 7b47c7c
1 parent 838467b
commit 7b47c7c
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 38 deletions.
diff --git a/packages/@sanity/field/src/diff/components/FieldChange.tsx b/packages/@sanity/field/src/diff/components/FieldChange.tsx
@@ -28,8 +28,7 @@ export function FieldChange({change}: {change: FieldChangeNode}) {
   const docOperations = useDocumentOperation(documentId, schemaType.name) as OperationsAPI
   const [confirmRevertOpen, setConfirmRevertOpen] = React.useState(false)
   const [revertHovered, setRevertHovered] = useState(false)
-
-  const [revertContainerElement, setRevertContainerElement] = useState<HTMLDivElement | null>(null)
+  const [revertButtonElement, setRevertButtonElement] = useState<HTMLDivElement | null>(null)
 
   const handleRevertChanges = useCallback(() => {
     undoChange(change, rootDiff, docOperations)
@@ -81,11 +80,12 @@ export function FieldChange({change}: {change: FieldChangeNode}) {
 
           {isComparingCurrent && (
             <>
-              <div className={styles.revertChangesButtonContainer} ref={setRevertContainerElement}>
+              <div className={styles.revertChangesButtonContainer}>
                 <RevertChangesButton
                   onClick={handleRevertChangesConfirm}
                   onMouseEnter={handleRevertButtonMouseEnter}
                   onMouseLeave={handleRevertButtonMouseLeave}
+                  ref={setRevertButtonElement}
                   selected={confirmRevertOpen}
                 />
               </div>
@@ -105,7 +105,8 @@ export function FieldChange({change}: {change: FieldChangeNode}) {
                     }
                   ]}
                   onAction={handleConfirmDialogAction}
-                  referenceElement={revertContainerElement}
+                  // portal
+                  referenceElement={revertButtonElement}
                   size="small"
                 >
                   Are you sure you want to revert the changes?

diff --git a/packages/@sanity/field/src/diff/components/GroupChange.tsx b/packages/@sanity/field/src/diff/components/GroupChange.tsx
@@ -32,7 +32,7 @@ export function GroupChange({change: group}: {change: GroupChangeNode}): React.R
   const [hoverRef, isHoveringRevert] = useHover<HTMLDivElement>()
   const docOperations = useDocumentOperation(documentId, schemaType.name) as OperationsAPI
   const [confirmRevertOpen, setConfirmRevertOpen] = useState(false)
-  const [revertContainerElement, setRevertContainerElement] = useState<HTMLDivElement | null>(null)
+  const [revertButtonElement, setRevertButtonElement] = useState<HTMLDivElement | null>(null)
 
   const handleRevertChanges = useCallback(() => undoChange(group, rootDiff, docOperations), [
     group,
@@ -52,10 +52,10 @@ export function GroupChange({change: group}: {change: GroupChangeNode}): React.R
     if (action.action) action.action()
   }, [])
 
-  const setRevertContainerRef = useCallback(
+  const setRevertButtonRef = useCallback(
     (el: HTMLDivElement | null) => {
       hoverRef.current = el
-      setRevertContainerElement(el)
+      setRevertButtonElement(el)
     },
     [hoverRef]
   )
@@ -70,9 +70,10 @@ export function GroupChange({change: group}: {change: GroupChangeNode}): React.R
 
       {isComparingCurrent && (
         <>
-          <div ref={setRevertContainerRef} className={styles.revertChangesButtonContainer}>
+          <div className={styles.revertChangesButtonContainer}>
             <RevertChangesButton
               onClick={handleRevertChangesConfirm}
+              ref={setRevertButtonRef}
               selected={confirmRevertOpen}
             />
           </div>
@@ -92,7 +93,8 @@ export function GroupChange({change: group}: {change: GroupChangeNode}): React.R
                 }
               ]}
               onAction={handleConfirmDialogAction}
-              referenceElement={revertContainerElement}
+              // portal
+              referenceElement={revertButtonElement}
               size="small"
             >
               Are you sure you want to revert the changes?

diff --git a/packages/@sanity/field/src/diff/components/RevertChangesButton.tsx b/packages/@sanity/field/src/diff/components/RevertChangesButton.tsx
@@ -1,24 +1,27 @@
 import classNames from 'classnames'
-import React from 'react'
+import React, {forwardRef} from 'react'
 import UndoIcon from 'part:@sanity/base/undo-icon'
 
 import styles from './RevertChangesButton.css'
 
-export function RevertChangesButton(
-  props: Omit<React.HTMLProps<HTMLButtonElement>, 'type'>
-): React.ReactElement {
-  const {className, selected, ...restProps} = props
+export const RevertChangesButton = forwardRef(
+  (props: Omit<React.HTMLProps<HTMLButtonElement>, 'type'>, ref): React.ReactElement => {
+    const {className, selected, ...restProps} = props
 
-  return (
-    <button
-      {...restProps}
-      className={classNames(styles.root, selected && styles.selected, className)}
-      type="button"
-    >
-      <span className={styles.iconContainer}>
-        <UndoIcon />
-      </span>
-      <span className={styles.text}>Revert changes</span>
-    </button>
-  )
-}
+    return (
+      <button
+        {...restProps}
+        className={classNames(styles.root, selected && styles.selected, className)}
+        ref={ref as any}
+        type="button"
+      >
+        <span className={styles.iconContainer}>
+          <UndoIcon />
+        </span>
+        <span className={styles.text}>Revert changes</span>
+      </button>
+    )
+  }
+)
+
+RevertChangesButton.displayName = 'RevertChangesButton'
diff --git a/packages/@sanity/field/src/types/portableText/diff/components/InlineObject.css b/packages/@sanity/field/src/types/portableText/diff/components/InlineObject.css
@@ -14,6 +14,7 @@
 
 .popoverContent {
   min-width: 160px;
+  max-height: calc(100vh - 49px - 65px - 16px);
   padding: calc(var(--medium-padding) - var(--extra-small-padding));
 }
 

diff --git a/packages/@sanity/field/src/types/portableText/diff/components/InlineObject.tsx b/packages/@sanity/field/src/types/portableText/diff/components/InlineObject.tsx
@@ -1,3 +1,4 @@
+import {useClickOutside} from '@sanity/components'
 import classNames from 'classnames'
 import ChevronDownIcon from 'part:@sanity/base/chevron-down-icon'
 import SanityPreview from 'part:@sanity/base/preview'
@@ -60,6 +61,7 @@ function InlineObjectWithDiff({
   const className = classNames(styles.root, diff.action === 'removed' && styles.removed)
   const [open, setOpen] = useState(false)
   const emptyObject = object && isEmptyObject(object)
+  const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
 
   const handleClick = useCallback(() => {
     setOpen(true)
@@ -76,18 +78,16 @@ function InlineObjectWithDiff({
     setOpen(false)
   }, [])
 
+  useClickOutside(handleClickOutside, [popoverElement])
+
   return (
-    <ClickOutside onClickOutside={handleClickOutside}>
-      {ref => (
-        <span {...restProps} className={className} onClick={handleClick} ref={ref} style={style}>
-          <Popover content={popoverContent} open={open}>
-            <span className={styles.previewContainer}>
-              <SanityPreview type={schemaType} value={object} layout="inline" />
-              <ChevronDownIcon />
-            </span>
-          </Popover>
+    <span {...restProps} className={className} onClick={handleClick} style={style}>
+      <Popover content={popoverContent} open={open} placement="auto" portal ref={setPopoverElement}>
+        <span className={styles.previewContainer}>
+          <SanityPreview type={schemaType} value={object} layout="inline" />
+          <ChevronDownIcon />
         </span>
-      )}
-    </ClickOutside>
+      </Popover>
+    </span>
   )
 }