diff --git a/ui/src/album/AlbumListView.js b/ui/src/album/AlbumListView.js index b62fc43d..c28ac05d 100644 --- a/ui/src/album/AlbumListView.js +++ b/ui/src/album/AlbumListView.js @@ -1,7 +1,9 @@ -import React from 'react' +import React, { cloneElement, isValidElement, useState } from 'react' import { BooleanField, Datagrid, + DatagridBody, + DatagridRow, DateField, NumberField, Show, @@ -30,6 +32,38 @@ const AlbumDetails = (props) => { ) } +const AlbumDatagridRow = ({ children, ...rest }) => { + const [visible, setVisible] = useState(false) + const childCount = React.Children.count(children) + return ( + setVisible(true)} + onMouseLeave={() => setVisible(false)} + {...rest} + > + {React.Children.map( + children, + (child, index) => + child && + isValidElement(child) && + (index < childCount - 1 + ? child + : cloneElement(child, { + visible, + ...rest, + })) + )} + + ) +} + +const AlbumDatagridBody = (props) => ( + } /> +) +const AlbumDatagrid = (props) => ( + } /> +) + const AlbumListView = ({ hasShow, hasEdit, hasList, ...rest }) => { const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md')) const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs')) @@ -48,7 +82,7 @@ const AlbumListView = ({ hasShow, hasEdit, hasList, ...rest }) => { {...rest} /> ) : ( - } rowClick={'show'} {...rest}> + } rowClick={'show'} {...rest}> {isDesktop && } @@ -56,7 +90,7 @@ const AlbumListView = ({ hasShow, hasEdit, hasList, ...rest }) => { {isDesktop && } - + ) }