Add artist context menu

ui/src/artist/ArtistList.js

@@ -1,13 +1,21 @@
-import React from 'react'
+import React, { cloneElement, isValidElement, useState } from 'react'
 import {
   Datagrid,
+  DatagridBody,
+  DatagridRow,
   Filter,
   NumberField,
   SearchInput,
   TextField,
 } from 'react-admin'
-import { List, useGetHandleArtistClick } from '../common'
-import { withWidth } from '@material-ui/core'
+import { useMediaQuery, withWidth } from '@material-ui/core'
+import AddToPlaylistDialog from '../dialogs/AddToPlaylistDialog'
+import {
+  ArtistContextMenu,
+  List,
+  SimpleList,
+  useGetHandleArtistClick,
+} from '../common'
 
 const ArtistFilter = (props) => (
   <Filter {...props}>
@@ -15,22 +23,67 @@ const ArtistFilter = (props) => (
   </Filter>
 )
 
-const ArtistList = ({ width, ...props }) => {
-  const handleArtistLink = useGetHandleArtistClick(width)
+const ArtistDatagridRow = ({ children, ...rest }) => {
+  const [visible, setVisible] = useState(false)
+  const childCount = React.Children.count(children)
   return (
-    <List
-      {...props}
-      sort={{ field: 'name', order: 'ASC' }}
-      exporter={false}
-      bulkActionButtons={false}
-      filters={<ArtistFilter />}
+    <DatagridRow
+      onMouseEnter={() => setVisible(true)}
+      onMouseLeave={() => setVisible(false)}
+      {...rest}
     >
-      <Datagrid rowClick={handleArtistLink}>
-        <TextField source="name" />
-        <NumberField source="albumCount" sortByOrder={'DESC'} />
-        <NumberField source="songCount" sortByOrder={'DESC'} />
-      </Datagrid>
-    </List>
+      {React.Children.map(
+        children,
+        (child, index) =>
+          child &&
+          isValidElement(child) &&
+          (index < childCount - 1
+            ? child
+            : cloneElement(child, {
+                visible,
+              }))
+      )}
+    </DatagridRow>
+  )
+}
+
+const ArtistDatagridBody = (props) => (
+  <DatagridBody {...props} row={<ArtistDatagridRow />} />
+)
+const ArtistDatagrid = (props) => (
+  <Datagrid {...props} body={<ArtistDatagridBody />} />
+)
+
+const ArtistList = ({ width, ...rest }) => {
+  const handleArtistLink = useGetHandleArtistClick(width)
+  const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
+  return (
+    <>
+      <List
+        {...rest}
+        sort={{ field: 'name', order: 'ASC' }}
+        exporter={false}
+        bulkActionButtons={false}
+        filters={<ArtistFilter />}
+      >
+        {isXsmall ? (
+          <SimpleList
+            primaryText={(r) => r.name}
+            linkType={'show'}
+            rightIcon={(r) => <ArtistContextMenu record={r} />}
+            {...rest}
+          />
+        ) : (
+          <ArtistDatagrid rowClick={handleArtistLink}>
+            <TextField source="name" />
+            <NumberField source="albumCount" sortByOrder={'DESC'} />
+            <NumberField source="songCount" sortByOrder={'DESC'} />
+            <ArtistContextMenu />
+          </ArtistDatagrid>
+        )}
+      </List>
+      <AddToPlaylistDialog />
+    </>
   )
 }