Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | 31x 31x 31x 31x 31x 31x 31x 18x 18x 18x 18x 18x 18x 18x 18x 18x 12x 4x 12x 18x 14x 18x | import * as React from "react"
import { MutableRefObject, useContext, useMemo, useRef } from "react"
import {
LayoutGroupContext,
LayoutGroupContextProps,
} from "../../context/LayoutGroupContext"
import { DeprecatedLayoutGroupContext } from "../../context/DeprecatedLayoutGroupContext"
import { nodeGroup } from "../../projection"
import { useForceUpdate } from "../../utils/use-force-update"
export interface Props {
id?: string
inheritId?: boolean
}
export const LayoutGroup: React.FunctionComponent<Props> = ({
children,
id,
inheritId = true,
}) => {
const layoutGroupContext = useContext(LayoutGroupContext)
const deprecatedLayoutGroupContext = useContext(
DeprecatedLayoutGroupContext
)
const [forceRender, key] = useForceUpdate()
const context = useRef(
null
) as MutableRefObject<LayoutGroupContextProps | null>
const upstreamId = layoutGroupContext.id ?? deprecatedLayoutGroupContext
if (context.current === null) {
if (inheritId && upstreamId) {
id = id ? upstreamId + "-" + id : upstreamId
}
context.current = {
id,
group: inheritId
? layoutGroupContext?.group ?? nodeGroup()
: nodeGroup(),
}
}
const memoizedContext = useMemo(
() => ({ ...context.current, forceRender }),
[key]
)
return (
<LayoutGroupContext.Provider value={memoizedContext}>
{children}
</LayoutGroupContext.Provider>
)
}
|