[base, desk-tool] Make click on connector put focus into field

sanity-io · Oct 6, 2020 · 910ba3b · 910ba3b
1 parent c8dd4f2
commit 910ba3b
Show file tree

Hide file tree

Showing 11 changed files with 282 additions and 250 deletions.
diff --git a/packages/@sanity/base/src/change-indicators/ChangeFieldWrapper.tsx b/packages/@sanity/base/src/change-indicators/ChangeFieldWrapper.tsx
@@ -2,7 +2,7 @@ import * as PathUtils from '@sanity/util/paths'
 import React from 'react'
 import {useReporter} from './tracker'
 import {Path} from '@sanity/types'
-
+import {ConnectorContext} from './ChangeIndicatorContext'
 /**
  * This is used to draw the bar that wraps the diff components in the changes panel
  */
@@ -13,6 +13,8 @@ export const ChangeFieldWrapper = (props: {
 }) => {
   const ref = React.useRef<HTMLDivElement>(null)
 
+  const {onSetFocus} = React.useContext(ConnectorContext)
+
   const [isHover, setHover] = React.useState(false)
   const onMouseEnter = React.useCallback(() => {
     setHover(true)
@@ -29,7 +31,12 @@ export const ChangeFieldWrapper = (props: {
     hasRevertHover: props.hasHover
   }))
   return (
-    <div ref={ref} onMouseLeave={onMouseLeave} onMouseEnter={onMouseEnter}>
+    <div
+      ref={ref}
+      onClick={() => onSetFocus(props.path)}
+      onMouseLeave={onMouseLeave}
+      onMouseEnter={onMouseEnter}
+    >
       {props.children}
     </div>
   )

diff --git a/packages/@sanity/base/src/change-indicators/ChangeIndicator.tsx b/packages/@sanity/base/src/change-indicators/ChangeIndicator.tsx
@@ -72,7 +72,7 @@ export function ChangeIndicatorProvider(props: {
       value={{
         value: props.value,
         compareValue: props.compareValue,
-        focusPath: parentContext.focusPath ? parentContext.focusPath : props.focusPath,
+        focusPath: props.focusPath || [],
         path: props.path,
         fullPath: fullPath
       }}
@@ -137,18 +137,20 @@ export const ChangeIndicatorWithProvidedFullPath = ({
 interface ContextProvidedProps {
   compareDeep?: boolean
   children?: React.ReactNode
+  disabled?: boolean
 }
 
 export const ContextProvidedChangeIndicator = (props: ContextProvidedProps) => {
   const context = React.useContext(ChangeIndicatorContext)
   const {value, compareValue, path, focusPath, fullPath} = context
-
-  return (
+  return props.disabled ? (
+    <>{props.children}</>
+  ) : (
     <CoreChangeIndicator
       fullPath={fullPath}
       value={value}
       compareValue={compareValue}
-      hasFocus={PathUtils.isEqual(fullPath, focusPath)}
+      hasFocus={PathUtils.isEqual(path, focusPath)}
       compareDeep={props.compareDeep}
     >
       {props.children}

diff --git a/packages/@sanity/base/src/change-indicators/ChangeIndicatorContext.ts b/packages/@sanity/base/src/change-indicators/ChangeIndicatorContext.ts
@@ -12,13 +12,15 @@ interface ChangeIndicatorContext {
 export interface ConnectorContext {
   isReviewChangesOpen: boolean
   onOpenReviewChanges: () => void
+  onSetFocus: (nextPath: Path) => void
 }
 export const ConnectorContext: React.Context<ConnectorContext> = React.createContext({
   isReviewChangesOpen: false as boolean,
-  onOpenReviewChanges: () => {}
+  onOpenReviewChanges: () => {},
+  onSetFocus: (nextPath: Path) => {}
 })
 
-const initial: ChangeIndicatorContext = {path: [], fullPath: [], focusPath: null}
+const initial: ChangeIndicatorContext = {path: [], fullPath: [], focusPath: []}
 
 export const ChangeIndicatorContext: React.Context<ChangeIndicatorContext> = React.createContext(
   initial