CustomNodeContainer.tsx

import { Layers } from '@carbon/icons-react';
import { Icon } from '@patternfly/react-core';
import { BanIcon } from '@patternfly/react-icons';
import clsx from 'clsx';
import { ElementType, FunctionComponent, Ref } from 'react';

import { IVisualizationNode } from '../../../../models';
import { FloatingCircle } from '../FloatingCircle/FloatingCircle';

export interface CustomNodeContainerProps {
  width: number;
  height: number;
  dataNodelabel?: string;
  foreignObjectRef?: Ref<SVGForeignObjectElement>;
  transform?: string;
  dataTestId: string;
  containerClassNames?: Record<string, boolean>;
  vizNode: IVisualizationNode;
  isCollapsed: boolean;
  childCount: number;
  hasGroupChildren?: boolean;
  ProcessorIcon: ElementType | null;
  processorDescription: string;
  isDisabled: boolean;
}

export const CustomNodeContainer: FunctionComponent<CustomNodeContainerProps> = ({
  width,
  height,
  dataNodelabel,
  foreignObjectRef,
  transform,
  dataTestId,
  containerClassNames = {},
  vizNode,
  isCollapsed,
  childCount,
  hasGroupChildren,
  ProcessorIcon,
  processorDescription,
  isDisabled,
}) => (
  <foreignObject
    data-nodelabel={dataNodelabel}
    width={width}
    height={height}
    ref={foreignObjectRef}
    {...(transform !== undefined && { transform })}
  >
    <div data-testid={dataTestId} className={clsx('custom-node__container', containerClassNames)}>
      <div title={vizNode.data.description} className="custom-node__container__image">
        <img src={vizNode.data.iconUrl} alt={vizNode.data.description?.trim() || (vizNode.data.iconAlt as string)} />

        {isCollapsed && childCount > 0 && (
          <FloatingCircle
            className={clsx('step-icon step-icon__processor', { 'step-icon-collection': hasGroupChildren })}
          >
            {hasGroupChildren && (
              <Icon size="sm" aria-label="contains nested collections">
                <Layers />
              </Icon>
            )}
            <span title={`${childCount}`}>{childCount}</span>
          </FloatingCircle>
        )}
        {ProcessorIcon && (
          <FloatingCircle className="step-icon step-icon__processor">
            <Icon status="info" size="lg">
              <ProcessorIcon title={processorDescription} />
            </Icon>
          </FloatingCircle>
        )}
        {isDisabled && (
          <FloatingCircle className="step-icon step-icon__disabled">
            <Icon status="danger" size="lg">
              <BanIcon />
            </Icon>
          </FloatingCircle>
        )}
      </div>
    </div>
  </foreignObject>
);