diff --git a/packages/@sanity/desk-tool/src/contexts/PaneRouterContext.js b/packages/@sanity/desk-tool/src/contexts/PaneRouterContext.js index 8b5aaad9657..c7183259b01 100644 --- a/packages/@sanity/desk-tool/src/contexts/PaneRouterContext.js +++ b/packages/@sanity/desk-tool/src/contexts/PaneRouterContext.js @@ -1,5 +1,5 @@ /* eslint-disable react/no-multi-comp, react/prop-types */ -import React from 'react' +import React, {useContext} from 'react' import {isEqual, pick, omit} from 'lodash' import {StateLink} from 'part:@sanity/base/router' @@ -15,49 +15,6 @@ const missingContext = () => { export const exclusiveParams = ['view'] -const ChildLink = React.forwardRef(function ChildLink({childId, childPayload, ...props}, ref) { - return ( - - {({routerPanesState, groupIndex}) => { - const panes = routerPanesState - .slice(0, groupIndex + 1) - .concat([[{id: childId, payload: childPayload}]]) - - return - }} - - ) -}) - -const ParameterizedLink = React.forwardRef(function ParameterizedLink( - {params: newParams, payload: newPayload, ...props}, - ref -) { - return ( - - {({routerPanesState}) => { - const panes = routerPanesState.map((group, i) => { - if (i !== routerPanesState.length - 1) { - return group - } - - const pane = group[0] - return [ - { - ...pane, - params: newParams || pane.params, - payload: newPayload || pane.payload - }, - ...group.slice(1) - ] - }) - - return - }} - - ) -}) - export const PaneRouterContext = React.createContext({ // Zero-based index (position) of pane, visually index: 0, @@ -102,6 +59,40 @@ export const PaneRouterContext = React.createContext({ navigateIntent: (intentName, params, options = {}) => missingContext() }) +const ChildLink = React.forwardRef(function ChildLink({childId, childPayload, ...props}, ref) { + const {routerPanesState, groupIndex} = useContext(PaneRouterContext) + const panes = routerPanesState + .slice(0, groupIndex + 1) + .concat([[{id: childId, payload: childPayload}]]) + + return +}) + +const ParameterizedLink = React.forwardRef(function ParameterizedLink( + {params: newParams, payload: newPayload, ...props}, + ref +) { + const {routerPanesState} = useContext(PaneRouterContext) + + const panes = routerPanesState.map((group, i) => { + if (i !== routerPanesState.length - 1) { + return group + } + + const pane = group[0] + return [ + { + ...pane, + params: newParams || pane.params, + payload: newPayload || pane.payload + }, + ...group.slice(1) + ] + }) + + return +}) + export function getPaneRouterContextFactory(instance) { let contexts = contextCache.get(instance) if (!contexts) {