multiple buttons cell

[anovazzi1]

I'm trying to create a multiple buttons cell, one cell with 2 or more buttons that have different functions associated to each one, but now, i don't know how to achieve this and I miss some deeper documentation on custom cells and custom render.
Any help on this would be great for sure

[jassmith]

I'll make one, no problem. You can then use that as a demo. In return I'd love if you helped write some docs :)

[anovazzi1]

of course, i made one based on the custom button cell, but i'm struggling with button states in the canvas and individual hover
here is some code i made for the button:

import { roundedRect } from "../../draw-fns";

type PackedColor = string | readonly [normal: string, hover: string];

interface ButtonListCellProps{
    readonly kind: "button-list-cell";
    readonly title:string[];
    readonly onClick:Function[] | ((index:number)=>void);
    readonly backgroundColor?: PackedColor;
    readonly color?: PackedColor;
    readonly borderColor?: PackedColor;
    readonly borderRadius?: number;
}

export type ButtonListCell = CustomCell<ButtonListCellProps> & {readonly:true}

function unpackColor(color: PackedColor, theme: Record<string, any>, hoverAmount: number): string {
    if (typeof color === "string") {
        if (theme[color] !== undefined) return theme[color];
        return color;
    }

    let [normal, hover] = color;
    if (theme[normal] !== undefined) normal = theme[normal];
    if (theme[hover] !== undefined) hover = theme[hover];
    return interpolateColors(normal, hover, hoverAmount);
}


export const render:CustomRenderer<ButtonListCell>={
    kind:GridCellKind.Custom,
    isMatch: (c): c is ButtonListCell=>{
        if((c.data as any).kind === "button-list-cell" && ((c.data as any).title.length === (c.data as any).onClick.length || typeof((c.data as any).onClick)=="function")){
            return true
        }
        return false
    },
    needsHover:true,
    onSelect:e=>e.preventDefault(),

    onClick:gridData=>{
        let buttonWidth = gridData.bounds.width/gridData.cell.data.title.length
        let clicked = Math.floor(gridData.posX/buttonWidth)
        if(gridData.cell.data.onClick.length >= 2){
            gridData.cell.data.onClick[clicked]()
        }
        else{
            (gridData.cell.data.onClick as Function)(clicked)
        }
        return undefined;
        
    },
    draw:(args,cell)=>{
        const button = new Path2D();
        const {ctx,theme,rect,hoverAmount} = args
        const{title,backgroundColor,color,borderColor,borderRadius}=cell.data
        let x = Math.floor(rect.x+theme.cellHorizontalPadding+1)
        let y = Math.floor(rect.y+theme.cellHorizontalPadding/2)

        const width = Math.ceil(rect.width-theme.cellHorizontalPadding*2-1)/title.length
        const height = Math.ceil(rect.height-theme.cellVerticalPadding*2-1)

        for(let i =0;i<title.length;i++){
            let button_r = new Path2D();
            
            if(backgroundColor!==undefined){
                roundedRect(button_r,x,y,width,height,borderRadius??0)
                ctx.fillStyle = unpackColor(backgroundColor,theme,hoverAmount)
                ctx.fill(button_r);
                
            }
            if(borderColor!==undefined){
                roundedRect(button_r,x+0.5,y+0.5,width-1,height-1,borderRadius??0)
                ctx.strokeStyle = unpackColor(borderColor,theme,hoverAmount)
                ctx.lineWidth=1;
                ctx.stroke(button_r);
            }
            ctx.fillStyle = unpackColor(color??theme.accentColor,theme,hoverAmount)
            ctx.fillText(title[i],x+width/2,y+height/2+getMiddleCenterBias(ctx,`${theme.baseFontStyle} ${theme.fontFamily}`))
            x+=width+theme.cellHorizontalPadding/Math.floor(title.length)
        }

        return true
    },
    drawPrep: args=>{
        const {ctx} = args;
        ctx.textAlign="center"
        return {
            deprep:a=>
            {
                a.ctx.textAlign="start"
            }
        }
    },
    provideEditor:undefined
}```

[jassmith]

I see yeah, you want hover animations (of course) which actually can't be done easily... yet! Will fix.

[anovazzi1]

not just the hover but the state of the button itself, like after been pressed, setting multiple states for the button would be very helpful and useful.
Talking about the docs, may I add things in the API.md?

[jassmith]

Sure

[carrothug]

Hey all, I have a similar use case where a single cell contains a list of links. More specifically, thinking it'll be a drilldown cell with an svg icon, and clicking it navigates to a page. Perhaps the fastest way would be to extend the existing drilldown renderer, or a custom provideEditor prop?

Did you end up with a working solution?