Skip to content
Snippets Groups Projects
Select Git revision
  • cba0453298d0e96359539e43d64013cdccac7ac9
  • 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

OpenSeadragonViewer.js

Blame
  • CompanionWindow.js 3.87 KiB
    import React, { Component } from 'react';
    import PropTypes from 'prop-types';
    import CloseIcon from '@material-ui/icons/CloseSharp';
    import IconButton from '@material-ui/core/IconButton';
    import OpenInNewIcon from '@material-ui/icons/OpenInNewSharp';
    import Paper from '@material-ui/core/Paper';
    import Typography from '@material-ui/core/Typography';
    import Toolbar from '@material-ui/core/Toolbar';
    import ThumbnailNavigationBottomIcon from './icons/ThumbnailNavigationBottomIcon';
    import ThumbnailNavigationRightIcon from './icons/ThumbnailNavigationRightIcon';
    import ns from '../config/css-ns';
    
    /**
     * CompanionWindow
     */
    export class CompanionWindow extends Component {
      /**
       * render
       * @return
       */
      render() {
        const {
          classes, paperClassName, id, onCloseClick, updateCompanionWindow, isDisplayed,
          position, t, windowId, title, children, titleControls,
        } = this.props;
    
        return (
          <Paper
            className={[classes.root, position === 'bottom' ? classes.horizontal : classes.vertical, ns(`companion-window-${position}`), paperClassName].join(' ')}
            style={{
              display: isDisplayed ? null : 'none',
              order: position === 'left' ? -1 : null,
            }}
            square
            component="aside"
            aria-label={title}
          >
            <Toolbar className={[classes.toolbar, position === 'left' ? classes.leftPadding : undefined, ns('companion-window-header')].join(' ')} disableGutters>
              <Typography variant="h3" className={classes.windowSideBarTitle}>
                {title}
              </Typography>
              <div className={ns('companion-window-title-controls')}>
                {titleControls}
              </div>
              {
                position === 'left'
                  ? updateCompanionWindow
                    && (
                      <>
                        <IconButton
                          aria-label={t('openInCompanionWindow')}
                          onClick={() => { updateCompanionWindow(windowId, id, { position: 'right' }); }}
                        >
                          <OpenInNewIcon />
                        </IconButton>
                      </>
                    )
                  : (
                    <>
                      {
                        updateCompanionWindow && (
                          <IconButton
                            className={classes.positionButton}
                            aria-label={t('openInCompanionWindow')}
                            onClick={() => { updateCompanionWindow(windowId, id, { position: position === 'bottom' ? 'right' : 'bottom' }); }}
                          >
                            { position === 'bottom' ? <ThumbnailNavigationRightIcon /> : <ThumbnailNavigationBottomIcon /> }
                          </IconButton>
                        )
                      }
                      <IconButton
                        aria-label={t('closeCompanionWindow')}
                        className={classes.closeButton}
                        onClick={() => { onCloseClick(windowId, id); }}
                      >
                        <CloseIcon />
                      </IconButton>
                    </>
                  )
              }
            </Toolbar>
            <Paper className={classes.content} elevation={0}>
              {children}
            </Paper>
          </Paper>
        );
      }
    }
    
    CompanionWindow.propTypes = {
      classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types,
      paperClassName: PropTypes.string,
      id: PropTypes.string.isRequired,
      onCloseClick: PropTypes.func,
      updateCompanionWindow: PropTypes.func,
      position: PropTypes.string,
      isDisplayed: PropTypes.bool,
      t: PropTypes.func,
      title: PropTypes.string,
      titleControls: PropTypes.node,
      windowId: PropTypes.string.isRequired,
      children: PropTypes.node,
    };
    
    CompanionWindow.defaultProps = {
      paperClassName: '',
      onCloseClick: () => {},
      updateCompanionWindow: undefined,
      isDisplayed: false,
      position: null,
      title: null,
      t: key => key,
      children: undefined,
      titleControls: null,
    };