diff --git a/packages/dendogram/src/Dendogram.tsx b/packages/dendogram/src/Dendogram.tsx index 74c8882836..a437bce58e 100644 --- a/packages/dendogram/src/Dendogram.tsx +++ b/packages/dendogram/src/Dendogram.tsx @@ -1,6 +1,6 @@ -import { createElement, Fragment, ReactNode } from 'react' +import { createElement, Fragment, ReactNode, useMemo } from 'react' import { Container, useDimensions, SvgWrapper } from '@nivo/core' -import { DefaultDatum, LayerId, DendogramSvgProps } from './types' +import { DefaultDatum, LayerId, DendogramSvgProps, CustomLayerProps } from './types' import { svgDefaultProps } from './defaults' import { useDendogram } from './hooks' import { Links } from './Links' @@ -18,8 +18,9 @@ const InnerDendogram = ({ data, identity, nodeComponent = svgDefaultProps.nodeComponent, + linkComponent = svgDefaultProps.linkComponent, layout = svgDefaultProps.layout, - layers = svgDefaultProps.layers as LayerId[], + layers = svgDefaultProps.layers, isInteractive = svgDefaultProps.isInteractive, onNodeMouseEnter, onNodeMouseMove, @@ -52,7 +53,7 @@ const InnerDendogram = ({ } if (layers.includes('links')) { - layerById.links = + layerById.links = key="links" links={links} linkComponent={linkComponent} /> } if (layers.includes('nodes')) { @@ -71,10 +72,15 @@ const InnerDendogram = ({ ) } - const customLayerProps = {} /*useCustomLayerProps({ - cells, - computedData, - })*/ + const customLayerProps: CustomLayerProps = useMemo( + () => ({ + nodes, + links, + innerWidth, + innerHeight, + }), + [nodes, links, innerWidth, innerHeight] + ) return ( { - link: ComputedLink -} - -export const Link = ({ link }: LinkProps) => { +export const Link = ({ link }: LinkComponentProps) => { // console.log(link) return ( diff --git a/packages/dendogram/src/Links.tsx b/packages/dendogram/src/Links.tsx index bf64c041dd..e5b59d9114 100644 --- a/packages/dendogram/src/Links.tsx +++ b/packages/dendogram/src/Links.tsx @@ -1,8 +1,9 @@ -import { ComputedLink } from './types' +import { ComputedLink, LinkComponent } from './types' import { Link } from './Link' interface LinksProps { links: ComputedLink[] + linkComponent: LinkComponent } export const Links = ({ links }: LinksProps) => { diff --git a/packages/dendogram/src/Nodes.tsx b/packages/dendogram/src/Nodes.tsx index 6fe537b4f2..0241ff3847 100644 --- a/packages/dendogram/src/Nodes.tsx +++ b/packages/dendogram/src/Nodes.tsx @@ -1,11 +1,11 @@ import { createElement } from 'react' import { useTransition } from '@react-spring/web' import { useMotionConfig } from '@nivo/core' -import { ComputedNode, NodeMouseEventHandler, DendogramSvgProps, NodeTooltip } from './types' +import { ComputedNode, NodeComponent, NodeMouseEventHandler, NodeTooltip } from './types' interface NodesProps { nodes: ComputedNode[] - nodeComponent: Exclude['nodeComponent'], undefined> + nodeComponent: NodeComponent isInteractive: boolean onMouseEnter?: NodeMouseEventHandler onMouseMove?: NodeMouseEventHandler diff --git a/packages/dendogram/src/defaults.ts b/packages/dendogram/src/defaults.ts index a701ff13af..d9e49d37f5 100644 --- a/packages/dendogram/src/defaults.ts +++ b/packages/dendogram/src/defaults.ts @@ -1,15 +1,23 @@ +import { CommonProps, DendogramSvgProps } from './types' import { Node } from './Node' +import { Link } from './Link' -export const commonDefaultProps: any = { +export const commonDefaultProps: Pick< + CommonProps, + 'identity' | 'layout' | 'isInteractive' | 'role' | 'animate' | 'motionConfig' +> = { + identity: 'id', layout: 'top-to-bottom', - layers: ['links', 'nodes', 'labels'], isInteractive: true, role: 'img', animate: true, motionConfig: 'gentle', } -export const svgDefaultProps = { +export const svgDefaultProps: typeof commonDefaultProps & + Required, 'layers' | 'nodeComponent' | 'linkComponent'>> = { ...commonDefaultProps, + layers: ['links', 'nodes', 'labels'], nodeComponent: Node, + linkComponent: Link, } diff --git a/packages/dendogram/src/types.ts b/packages/dendogram/src/types.ts index f99bd9f40b..3d7afa667b 100644 --- a/packages/dendogram/src/types.ts +++ b/packages/dendogram/src/types.ts @@ -64,6 +64,19 @@ export type NodeMouseEventHandler = ( event: MouseEvent ) => void +export interface LinkComponentProps { + link: ComputedLink +} +export type LinkComponent = FunctionComponent> + +export interface CustomLayerProps { + nodes: ComputedNode[] + links: ComputedLink[] + innerWidth: number + innerHeight: number +} +export type CustomSvgLayer = FunctionComponent> + export interface DendogramDataProps { data: Datum } @@ -93,8 +106,9 @@ export interface CommonProps extends MotionProps { export type DendogramSvgProps = DendogramDataProps & Dimensions & Partial> & { - layers?: LayerId[] + layers?: (LayerId | CustomSvgLayer)[] nodeComponent?: NodeComponent + linkComponent?: LinkComponent } export type ResponsiveDendogramSvgProps = Omit<