Allow to pass a string of FuncString for Minimap node className

This commit is contained in:
Robin Goupil
2020-08-28 20:12:11 +02:00
committed by moklick
parent 2e45e9373b
commit a00b1ad597
2 changed files with 7 additions and 2 deletions
@@ -6,17 +6,18 @@ interface MiniMapNodeProps {
width: number; width: number;
height: number; height: number;
color: string; color: string;
className: string;
borderRadius: number; borderRadius: number;
style?: CSSProperties; style?: CSSProperties;
} }
const MiniMapNode = ({ x, y, width, height, style, color, borderRadius }: MiniMapNodeProps) => { const MiniMapNode = ({ x, y, width, height, style, color, className, borderRadius }: MiniMapNodeProps) => {
const { background, backgroundColor } = style || {}; const { background, backgroundColor } = style || {};
const fill = (color || background || backgroundColor) as string; const fill = (color || background || backgroundColor) as string;
return ( return (
<rect <rect
className="react-flow__minimap-node" className={`react-flow__minimap-node ${className}`}
x={x} x={x}
y={y} y={y}
rx={borderRadius} rx={borderRadius}
@@ -12,6 +12,7 @@ type StringFunc = (node: Node) => string;
interface MiniMapProps extends React.HTMLAttributes<SVGSVGElement> { interface MiniMapProps extends React.HTMLAttributes<SVGSVGElement> {
nodeColor?: string | StringFunc; nodeColor?: string | StringFunc;
nodeClassName?: string | StringFunc;
nodeBorderRadius?: number; nodeBorderRadius?: number;
maskColor?: string; maskColor?: string;
} }
@@ -23,6 +24,7 @@ const MiniMap = ({
style = { backgroundColor: '#f8f8f8' }, style = { backgroundColor: '#f8f8f8' },
className, className,
nodeColor = '#ddd', nodeColor = '#ddd',
nodeClassName = '',
nodeBorderRadius = 5, nodeBorderRadius = 5,
maskColor = 'rgba(10, 10, 10, .25)', maskColor = 'rgba(10, 10, 10, .25)',
}: MiniMapProps) => { }: MiniMapProps) => {
@@ -35,6 +37,7 @@ const MiniMap = ({
const elementWidth = (style.width || defaultWidth)! as number; const elementWidth = (style.width || defaultWidth)! as number;
const elementHeight = (style.height || defaultHeight)! as number; const elementHeight = (style.height || defaultHeight)! as number;
const nodeColorFunc = (nodeColor instanceof Function ? nodeColor : () => nodeColor) as StringFunc; const nodeColorFunc = (nodeColor instanceof Function ? nodeColor : () => nodeColor) as StringFunc;
const nodeClassNameFunc = (nodeClassName instanceof Function ? nodeClassName : () => nodeClassName) as StringFunc;
const hasNodes = nodes && nodes.length; const hasNodes = nodes && nodes.length;
const bb = getRectOfNodes(nodes); const bb = getRectOfNodes(nodes);
const viewBB: Rect = { const viewBB: Rect = {
@@ -73,6 +76,7 @@ const MiniMap = ({
width={node.__rf.width} width={node.__rf.width}
height={node.__rf.height} height={node.__rf.height}
style={node.style} style={node.style}
className={nodeClassNameFunc(node)}
color={nodeColorFunc(node)} color={nodeColorFunc(node)}
borderRadius={nodeBorderRadius} borderRadius={nodeBorderRadius}
/> />