Skip to content
Snippets Groups Projects
Select Git revision
  • c60a48be630bf0784c3e4de7dca4dbec175c3a92
  • mui5-tetras-main-stable default protected
  • mui5-tetras-main-old-stable
  • preprod protected
  • 75-dernieres-ameliorations-avant-workshop-du-7-02
  • wip-fix-xywh
  • wip-positionement-annot
  • wip-surface-transformer
  • uploads-file
  • 69-la-video-demare-quand-on-fait-glisser-le-slider-et-le-clic-creer-un-decalage-entre-le-player
  • 61-recettage-des-outils-d-annotation
  • gestion_multiple_ouverture_pannel_annotation
  • autorisation_un_pannel_annotation
  • autorisation_un_pannel_edition_annotation
  • récupération_temps_video
  • save-shapes-and-position
  • fix-error-create-annotation-pannel
  • time-saving-on-annotation
  • tetras-main protected
  • fix-poc-mirador
  • tetras-antho-test
21 results

AnnotationFormFooter.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,
    };