New component for mobile Artist List (#891)

Fixes #890

ui/src/artist/ArtistList.js

@@ -15,8 +15,8 @@ import {
   ArtistContextMenu,
   List,
   QuickFilter,
-  SimpleList,
   useGetHandleArtistClick,
+  ArtistSimpleList,
 } from '../common'
 import { makeStyles } from '@material-ui/core/styles'
 
@@ -49,18 +49,21 @@ const ArtistFilter = (props) => (
   </Filter>
 )
 
-const ArtistListView = ({ hasShow, hasEdit, hasList, width, ...rest }) => {
+const ArtistListView = ({
+  hasShow,
+  hasEdit,
+  hasList,
+  width,
+  syncWithLocation,
+  ...rest
+}) => {
   const classes = useStyles()
   const handleArtistLink = useGetHandleArtistClick(width)
   const history = useHistory()
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   return isXsmall ? (
-    <SimpleList
+    <ArtistSimpleList
-      primaryText={(r) => r.name}
+      linkType={(id) => history.push(handleArtistLink(id))}
-      linkType={(id) => {
-        history.push(handleArtistLink(id))
-      }}
-      rightIcon={(r) => <ArtistContextMenu record={r} />}
       {...rest}
     />
   ) : (

ui/src/common/ArtistSimpleList.js

@@ -0,0 +1,80 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import List from '@material-ui/core/List'
+import ListItem from '@material-ui/core/ListItem'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
+import ListItemText from '@material-ui/core/ListItemText'
+import { makeStyles } from '@material-ui/core/styles'
+import { sanitizeListRestProps } from 'ra-core'
+import { ArtistContextMenu } from './index'
+
+const useStyles = makeStyles(
+  {
+    listItem: {
+      padding: '10px',
+    },
+    title: {
+      paddingRight: '10px',
+      width: '80%',
+    },
+    rightIcon: {
+      top: '26px',
+    },
+  },
+  { name: 'RaArtistSimpleList' }
+)
+
+export const ArtistSimpleList = ({
+  linkType,
+  className,
+  classes: classesOverride,
+  data,
+  hasBulkActions,
+  ids,
+  loading,
+  selectedIds,
+  total,
+  ...rest
+}) => {
+  const classes = useStyles({ classes: classesOverride })
+  return (
+    (loading || total > 0) && (
+      <List className={className} {...sanitizeListRestProps(rest)}>
+        {ids.map(
+          (id) =>
+            data[id] && (
+              <span key={id} onClick={() => linkType(id)}>
+                <ListItem className={classes.listItem} button={true}>
+                  <ListItemText
+                    primary={
+                      <div className={classes.title}>{data[id].name}</div>
+                    }
+                  />
+                  <ListItemSecondaryAction className={classes.rightIcon}>
+                    <ListItemIcon>
+                      <ArtistContextMenu record={data[id]} />
+                    </ListItemIcon>
+                  </ListItemSecondaryAction>
+                </ListItem>
+              </span>
+            )
+        )}
+      </List>
+    )
+  )
+}
+
+ArtistSimpleList.propTypes = {
+  className: PropTypes.string,
+  classes: PropTypes.object,
+  data: PropTypes.object,
+  hasBulkActions: PropTypes.bool.isRequired,
+  ids: PropTypes.array,
+  selectedIds: PropTypes.arrayOf(PropTypes.any).isRequired,
+}
+
+ArtistSimpleList.defaultProps = {
+  hasBulkActions: false,
+  selectedIds: [],
+}

ui/src/common/index.js

@@ -27,3 +27,4 @@ export * from './useToggleStar'
 export * from './useTraceUpdate'
 export * from './Writable'
 export * from './SongSimpleList'
+export * from './ArtistSimpleList'