[desk-tool] Use MenuButton for validation menu

sanity-io · Oct 6, 2020 · 9a67b11 · 9a67b11
1 parent 7a33f2a
commit 9a67b11
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 30 deletions.
diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/header/header.tsx b/packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/header/header.tsx
@@ -53,14 +53,6 @@ export function DocumentPanelHeader(props: DocumentPanelHeaderProps) {
   const [isValidationOpen, setValidationOpen] = React.useState<boolean>(false)
   const {rev} = props
 
-  const handleCloseValidationResults = useCallback(() => {
-    setValidationOpen(false)
-  }, [])
-
-  const handleToggleValidationResults = useCallback(() => {
-    setValidationOpen(!isValidationOpen)
-  }, [isValidationOpen])
-
   const handleTitleClick = useCallback(() => {
     if (props.isCollapsed && props.onExpand) props.onExpand()
     if (!props.isCollapsed && props.onCollapse) props.onCollapse()
@@ -93,10 +85,9 @@ export function DocumentPanelHeader(props: DocumentPanelHeaderProps) {
             <ValidationMenu
               isOpen={isValidationOpen}
               markers={props.markers}
-              onClose={handleCloseValidationResults}
-              onToggle={handleToggleValidationResults}
               schemaType={props.schemaType}
               setFocusPath={props.setFocusPath}
+              setOpen={setValidationOpen}
             />
           </div>
 

diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/header/validationMenu.tsx b/packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/header/validationMenu.tsx
@@ -1,20 +1,18 @@
-import Button from 'part:@sanity/components/buttons/default'
+import {MenuButton} from 'part:@sanity/components/menu-button'
 import ValidationList from 'part:@sanity/components/validation/list'
 import ErrorOutlineIcon from 'part:@sanity/base/error-outline-icon'
-import React from 'react'
-import {Popover} from 'part:@sanity/components/popover'
+import React, {useCallback} from 'react'
 
 interface ValidationMenuProps {
   isOpen: boolean
   markers: any[]
-  onClose: () => void
-  onToggle: () => void
   schemaType: any
   setFocusPath: (path: any) => void
+  setOpen: (val: boolean) => void
 }
 
 export function ValidationMenu(props: ValidationMenuProps) {
-  const {isOpen, markers, onClose, onToggle, schemaType, setFocusPath} = props
+  const {isOpen, markers, schemaType, setFocusPath, setOpen} = props
   const validationMarkers = markers.filter(marker => marker.type === 'validation')
   const validationErrorMarkers = validationMarkers.filter(marker => marker.level === 'error')
   const validationWarningwarnings = validationMarkers.filter(marker => marker.level === 'warning')
@@ -23,29 +21,32 @@ export function ValidationMenu(props: ValidationMenuProps) {
     return null
   }
 
+  const handleClose = useCallback(() => setOpen(false), [])
+
   const popoverContent = (
     <ValidationList
       documentType={schemaType}
       markers={validationMarkers}
-      onClose={onClose}
+      onClose={handleClose}
       onFocus={setFocusPath}
       showLink
     />
   )
 
   return (
-    <Popover content={popoverContent as any} open={isOpen} placement="bottom-end">
-      <div>
-        <Button
-          color={validationErrorMarkers.length > 0 ? 'danger' : 'warning'}
-          kind="simple"
-          icon={ErrorOutlineIcon}
-          onClick={onToggle}
-          padding="small"
-          selected={isOpen}
-          title="Show validation issues"
-        />
-      </div>
-    </Popover>
+    <MenuButton
+      buttonProps={{
+        color: validationErrorMarkers.length > 0 ? 'danger' : 'warning',
+        kind: 'simple',
+        icon: ErrorOutlineIcon,
+        padding: 'small',
+        selected: isOpen,
+        title: 'Show validation issues'
+      }}
+      menu={popoverContent}
+      open={isOpen}
+      placement="bottom-end"
+      setOpen={setOpen}
+    />
   )
 }