Make rowConstraints responsive?

[silverduner]

Hi - I am thinking it can be a good idea to make RowConstraints type also accepting a provider function for responsive purpose? E.g. Users may want to set "maxPhotos:1" for mobile devices only.

[silverduner]

Probably can either do:

export type RowConstraints = {
    /** minimum number of photos per row in 'rows' layout */
    minPhotos?: ResponsiveParameter;
    /** maximum number of photos per row in 'rows' layout */
    maxPhotos?: ResponsiveParameter;
};

Or promote minPhotos maxPhotos to top level property as rowMinPhotos rowMaxPhotos.
I can try to submit a PR if you feel it's fine.

Thanks,

[igordanchenko]

Sounds reasonable to me.

I wouldn't move these props at this point, though, as it would be a breaking change.

I'm thinking to model it this way:

export type ResponsiveParameterProvider<T = number> = (containerWidth: number) => T;

export type ResponsiveParameter<T = number> = T | ResponsiveParameterProvider<T>;

rowConstraints?: ResponsiveParameter<RowConstraints>;

This option will allow defining row constraints only for specific device sizes (i.e., mobile) and leaving row constraints undefined for all other sizes. What are your thoughts? Please feel free to send a PR.

[silverduner]

The model you proposed looks fine to me. However, with this approach, I will have to add a bit more workaround lines to unwrap, due to the typescript bug microsoft/TypeScript#37663. Will submit the first attempt of PR shortly.

[igordanchenko]

Released in 1.14.0. Thank you for your contribution!

[silverduner]

Thanks for the quick release! Love this project and your work.

Cheers.