mirador/src/components/WorkspaceSelectionDialog.jsx

An open-source, web-based 'multi-up' viewer that supports zoom-pan-rotate functionality, ability to display/compare simple images, and images with annotations.

import DialogTitle from '@mui/material/DialogTitle';
import { Card, CardContent, MenuList, MenuItem, Typography } from '@mui/material';
import PropTypes from 'prop-types';
import { styled } from '@mui/material/styles';
import { useTranslation } from 'react-i18next';
import { useId } from 'react';
import { WorkspaceDialog } from './WorkspaceDialog';
import WorkspaceTypeElasticIcon from './icons/WorkspaceTypeElasticIcon';
import WorkspaceTypeMosaicIcon from './icons/WorkspaceTypeMosaicIcon';
import ScrollIndicatedDialogContent from '../containers/ScrollIndicatedDialogContent';

const StyledDetails = styled('div')(() => ({
  display: 'flex',
  flexDirection: 'column',
}));

/**
 */
export function WorkspaceSelectionDialog({
  container = null,
  handleClose,
  open = false,
  children = null,
  updateWorkspace,
  workspaceType,
}) {
  const { t } = useTranslation();
  const dialogTitleId = useId();

  /** */
  const handleWorkspaceTypeChange = (newWorkspaceType) => {
    updateWorkspace({
      type: newWorkspaceType,
    });
    handleClose();
  };

  return (
    <WorkspaceDialog aria-labelledby={dialogTitleId} container={container} onClose={handleClose} open={open}>
      <DialogTitle id={dialogTitleId}>{t('workspaceSelectionTitle')}</DialogTitle>
      <ScrollIndicatedDialogContent>
        {children}
        <MenuList
          sx={{
            '&active': {
              outline: 'none',
            },
            '&focus': {
              outline: 'none',
            },
            outline: 'none',
          }}
          selected={workspaceType}
          autoFocusItem
        >
          <MenuItem
            sx={{
              height: 'auto',
              overflow: 'auto',
              whiteSpace: 'inherit',
            }}
            onClick={() => handleWorkspaceTypeChange('elastic')}
            selected={workspaceType === 'elastic'}
            value="elastic"
          >
            <Card
              sx={{
                backgroundColor: 'transparent',
                borderRadius: '0',
                boxShadow: '0 0 transparent',
                display: 'flex',
              }}
            >
              <WorkspaceTypeElasticIcon
                sx={{
                  flexShrink: 0,
                  height: '90px',
                  width: '120px',
                }}
                viewBox="0 0 120 90"
              />
              <StyledDetails>
                <CardContent
                  sx={{
                    '&.MuiCardContent-root': {
                      '&:last-child': {
                        paddingBottom: '12px',
                      },
                      paddingBottom: 0,
                      paddingTop: 0,
                      textAlign: 'left',
                    },
                    flex: '1 0 auto',
                  }}
                >
                  <Typography sx={{ paddingBottom: '6px' }} component="p" variant="h3">
                    {t('elastic')}
                  </Typography>
                  <Typography variant="body1">{t('elasticDescription')}</Typography>
                </CardContent>
              </StyledDetails>
            </Card>
          </MenuItem>
          <MenuItem
            sx={{
              height: 'auto',
              overflow: 'auto',
              whiteSpace: 'inherit',
            }}
            onClick={() => handleWorkspaceTypeChange('mosaic')}
            selected={workspaceType === 'mosaic'}
            value="mosaic"
          >
            <Card
              sx={{
                backgroundColor: 'transparent',
                borderRadius: '0',
                boxShadow: '0 0 transparent',
                display: 'flex',
              }}
            >
              <WorkspaceTypeMosaicIcon
                sx={{
                  flexShrink: 0,
                  height: '90px',
                  width: '120px',
                }}
                viewBox="0 0 120 90"
              />
              <StyledDetails>
                <CardContent
                  sx={{
                    '&.MuiCardContent-root': {
                      '&:last-child': {
                        paddingBottom: '12px',
                      },
                      paddingBottom: 0,
                      paddingTop: 0,
                      textAlign: 'left',
                    },
                    flex: '1 0 auto',
                  }}
                >
                  <Typography sx={{ paddingBottom: '6px' }} component="p" variant="h3">
                    {t('mosaic')}
                  </Typography>
                  <Typography variant="body1">{t('mosaicDescription')}</Typography>
                </CardContent>
              </StyledDetails>
            </Card>
          </MenuItem>
        </MenuList>
      </ScrollIndicatedDialogContent>
    </WorkspaceDialog>
  );
}

WorkspaceSelectionDialog.propTypes = {
  children: PropTypes.node,
  container: PropTypes.object,
  handleClose: PropTypes.func.isRequired,
  open: PropTypes.bool,
  updateWorkspace: PropTypes.func.isRequired,
  workspaceType: PropTypes.string.isRequired,
};