Problem with percentage width on grid items about ruuri HOT 6 CLOSED

Hi @blaiseludvig!
Thanks for your like this library at first of all.

We have thought about problems like this before. I think muuri does not force the style to encapsulate into a new class and expose it to the outside in this case, but chooses the way to let the user define the style by himself. Perhaps he wants to give the user a full and flexible usage. ruuri hopes to design concept that is consistent with muuri, which will avoid many problems with the development of muuri in the future.

However, for this question, maybe you can consider trying this method: set the style of the container through the CSS class selector .ruuri-draggable-item on the parent node.

Hope it helps you!

from ruuri.

Thanks for your response!

I might have been unclear in the suggestion in my previous message. Sorry about that!

Your method would unfortunately not work in my case because I'm using multiple DraggableGrids, and I need to be able to set the widths of the items individually for each grid, but the .ruuri-draggable-item class targets every DraggableGrid.

I came up with two solutions to this problem.

1. The .ruuri-draggable-item element could be optionally passed in through the props, just like the renderItem. The downside to this approach is that it complicates the library code a bit.

2. Give DraggableGrid an optional prop of type React.ComponentPropsWithoutRef<"div"> that gets merged into the props of the .ruuri-draggable-item elements. This approach produces a flexible API, and it's easy to implement.

I'm interested in making a PR if you like one of these solutions!

from ruuri.

Thanks for your recommendation!

It's time to expand api for more flexible, I prefers the idea that add props getter function.

There are two APIs designed.
New API design prototype below:

// New API for getItemProps
type GetItemProps<T> = (itemData: T, index: number) => Partial<HTMLAttributes<HTMLDivElement>>

// New API for getItemContentProps
type GetItemContentProps<T> = (itemData: T, index: number) => Partial<HTMLAttributes<HTMLDivElement>>

// in interface DraggableGridProps
interface DraggableGridProps<T> {
...
data: T[]
...
+ getItemProps?: GetItemProps<T>
+ getItemContentProps?: GetItemContentProps<T>
...
}

How about this solution? @blaiseludvig

from ruuri.

Looks good to me! Glad I was able to help.

from ruuri.

hah! Thanks for your work, PR is welcome :)

from ruuri.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

from ruuri.