Digikam-FatClient/src/gridgallery.js

import React from 'react';

import Box from '@material-ui/core/Box';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(theme => ({
    gallery: {
        width: "100%",
        display: "flex",
        'flex-wrap': "wrap",
        'justify-content': "center",
    },
    imgitem: {
        width: "100%",
    }
}));

export function GridGalleryItem(props) {
    const { width, height, children } = props;
    const classes = makeStyles(theme => ({
        item: {
            width: width,
            height: height,
            margin: "3px",
        },
    }))();

    return (
        <Box
            className={classes.item}
        >
            {children}
        </Box>
    )
}

export function PhotoItem(props) {
    const { photo, row_height } = props;
    const classes = useStyles();

    const photo_width = (photo.state.fullsize[0] / photo.state.fullsize[1]) * row_height;

    return (
        <GridGalleryItem
            width={photo_width}
            height={row_height}
        >
            <img src={photo.state.thumbnailpath} className={classes.imgitem} />
        </GridGalleryItem>
    );
}

export function ItemGridGallery(props) {
    const { children } = props;
    const classes = useStyles();

    return (
        <Box
            className={classes.gallery}
        >
            {children}
        </Box>
    );
}

export function GridGallery(props) {
    const { photos } = props;

    return (
        <ItemGridGallery>
            {photos.map(photo => {
                return <PhotoItem photo={photo} row_height={300} />
            })}
        </ItemGridGallery>
    );
}



/*

const useStyles = makeStyles(theme => ({
    root: {
        width: "100%",
    },
}));

const photo_to_gallery_photo = (photo) => {
    if (!photo.state.fullsize) {
        throw new Error("Photo for gallery does not have a size.");
    }
    return {
        src: photo.state.path,
        thumbnail: photo.state.thumbnailpath,
        thumbnailWidth: photo.state.fullsize[0],
        thumbnailHeight: photo.state.fullsize[1],
        caption: photo.state.name,
    }
}

export function GridGallery(props) {
    const classes = useStyles();

    return (
        <Gallery className={classes.root} enableImageSelection={false} images={props.photos.map(x => photo_to_gallery_photo(x))} />
    )
}
*/