Function createRenderChipCell

apps/hash-frontend/src/pages/shared/chip-cell.tsx:75–186

(params?: {
  firstColumnLeftPadding?: number;
})

};

export const createRenderChipCell = (params?: {
  firstColumnLeftPadding?: number;
}): CustomRenderer<ChipCell> => ({
  kind: GridCellKind.Custom,
  isMatch: (cell: CustomCell): cell is ChipCell =>
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    (cell.data as any).kind === "chip-cell",
  draw: (args, cell) => {
    const { theme, rect, ctx } = args;
    const { chips, color = "gray", variant } = cell.data;

    const chipGap = 8;

    const columnPadding =
      typeof params?.firstColumnLeftPadding !== "undefined" && args.col === 1
        ? params.firstColumnLeftPadding
        : getCellHorizontalPadding();

    let chipLeft = rect.x + columnPadding;

    const interactables: Interactable[] = [];

    for (let i = 0; i < chips.length; i++) {
      const { icon, iconFill, text = "", suffix, onClick } = chips[i] ?? {};

      const { width, height, top } = drawChipWithIcon({
        args,
        color,
        text,
        suffix,
        left: chipLeft,
        icon,
        iconFill,
        variant,
      });

      if (onClick) {
        const arrowSpacing = 4;
        const arrowLeft = chipLeft + width + arrowSpacing;
        const arrowSize = 12;

        args.spriteManager.drawSprite(
          "arrowUpRightRegular",
          "normal",
          ctx,
          arrowLeft,
          top + 6,
          12,
          {
            ...theme,
            bgIconHeader: "white",
            fgIconHeader: customColors.blue[70],
          },
        );

        interactables.push(
          InteractableManager.createCellInteractable(args, {
            id: generateUuid(),