Replace expanded with a dialog (#1258)

* Replace expanded with a dialog * Change `info` label to "Get Info" * Rename things for consistency Co-authored-by: Deluan <deluan@navidrome.org>
2021-09-21 06:00:43 +05:30
parent 15ae3d47cf
commit 0c0bd2967d
18 changed files with 223 additions and 89 deletions
@@ -0,0 +1,57 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
+import { RecordContextProvider, useTranslate } from 'react-admin'
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+} from '@material-ui/core'
+import { closeExtendedInfoDialog } from '../actions'
+
+const ExpandInfoDialog = ({ title, content }) => {
+  const { open, record } = useSelector((state) => state.expandInfoDialog)
+  const dispatch = useDispatch()
+  const translate = useTranslate()
+
+  const handleClose = (e) => {
+    dispatch(closeExtendedInfoDialog())
+    e.stopPropagation()
+  }
+
+  return (
+    <Dialog
+      open={open}
+      onClose={handleClose}
+      onBackdropClick={handleClose}
+      aria-labelledby="info-dialog-album"
+      fullWidth={true}
+      maxWidth={'sm'}
+    >
+      <DialogTitle id="info-dialog-album">
+        {translate(title || 'resources.song.actions.info')}
+      </DialogTitle>
+      <DialogContent>
+        {record && (
+          <RecordContextProvider value={record}>
+            {content}
+          </RecordContextProvider>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleClose} color="primary">
+          {translate('ra.action.close')}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+ExpandInfoDialog.propTypes = {
+  title: PropTypes.string,
+  content: PropTypes.elementType.isRequired,
+}
+
+export default ExpandInfoDialog