Skip to content
Snippets Groups Projects
Select Git revision
  • 4624b6f969685736d1e9762985d438f12e671f15
  • mui5-annotation-on-video-stable default
  • get_setter_canvasSizeInformations
  • fix-error-div-into-p
  • annotation-on-video-v2
  • detached
  • annotation-on-video-r17
  • mui5
  • mui5-react-18
  • jacob-test
  • annotation-on-video protected
  • master
  • test-antoinev1
  • 20-fetch-thumbnail-on-annotation
  • add-research-field
  • Save
  • add-plugin
  • 14-wip-no-seek-to
  • 14-bug-on-video-time-control
  • 9_wip_videotests
  • _upgrade_material_ui
  • latest-tetras-16
  • v3.3.0
  • v3.2.0
  • v3.1.1
  • v3.1.0
  • v3.0.0
  • v3.0.0-rc.7
  • v3.0.0-rc.6
  • v3.0.0-rc.5
  • v3.0.0-rc.4
  • v3.0.0-rc.3
  • v3.0.0-rc.2
  • v3.0.0-rc.1
  • v3.0.0-beta.10
  • v3.0.0-beta.9
  • v3.0.0-beta.8
  • v3.0.0-beta.7
  • v3.0.0-beta.6
  • v3.0.0-beta.5
  • v3.0.0-beta.3
41 results

WindowList.js

Blame
  • user avatar
    Chris Beer authored
    54b4fa20
    History
    WindowList.js 2.60 KiB
    import { Component } from 'react';
    import Menu from '@material-ui/core/Menu';
    import MenuItem from '@material-ui/core/MenuItem';
    import ListItemText from '@material-ui/core/ListItemText';
    import ListSubheader from '@material-ui/core/ListSubheader';
    import PropTypes from 'prop-types';
    import ns from '../config/css-ns';
    
    /**
     */
    export class WindowList extends Component {
      /**
       * Given the menuElement passed in by the onEntering callback,
       * find the 2nd ListItem element (avoiding the header) and focus it
      */
      static focus2ndListIitem(menuElement) {
        if (!menuElement.querySelectorAll('li') || menuElement.querySelectorAll('li').length < 2) return;
    
        menuElement.querySelectorAll('li')[1].focus(); // The 2nd LI
      }
    
      /**
       * Get the title for a window from its manifest title
       * @private
       */
      titleContent(windowId) {
        const { titles, t } = this.props;
    
        return titles[windowId] || t('untitled');
      }
    
      /**
       * render
       * @return
       */
      render() {
        const {
          containerId, handleClose, anchorEl, windowIds, focusWindow, t,
        } = this.props;
    
        return (
          <Menu
            anchorOrigin={{
              horizontal: 'right',
              vertical: 'top',
            }}
            transformOrigin={{
              horizontal: 'left',
              vertical: 'top',
            }}
            id="window-list-menu"
            container={document.querySelector(`#${containerId} .${ns('viewer')}`)}
            disableAutoFocusItem
            anchorEl={anchorEl}
            open={Boolean(anchorEl)}
            onClose={handleClose}
            TransitionProps={{
              onEntering: WindowList.focus2ndListIitem,
            }}
          >
            <ListSubheader role="presentation" selected={false} disabled tabIndex="-1">
              {t('openWindows')}
            </ListSubheader>
            {
              windowIds.map((windowId, i) => (
                <MenuItem
                  key={windowId}
                  onClick={(e) => { focusWindow(windowId, true); handleClose(e); }}
                >
                  <ListItemText primaryTypographyProps={{ variant: 'body1' }}>
                    {
                      this.titleContent(windowId)
                    }
                  </ListItemText>
                </MenuItem>
              ))
            }
          </Menu>
        );
      }
    }
    
    WindowList.propTypes = {
      anchorEl: PropTypes.object, // eslint-disable-line react/forbid-prop-types
      containerId: PropTypes.string.isRequired,
      focusWindow: PropTypes.func.isRequired,
      handleClose: PropTypes.func.isRequired,
      t: PropTypes.func,
      titles: PropTypes.objectOf(PropTypes.string),
      windowIds: PropTypes.arrayOf(PropTypes.string).isRequired,
    };
    
    WindowList.defaultProps = {
      anchorEl: null,
      t: key => key,
      titles: {},
    };