Skip to content
Snippets Groups Projects
Select Git revision
  • c0fa2081c34eafa397ef5f1d8270011cc8bfe4aa
  • main default
  • 35-cgu
  • 34-peertube-support
  • 27-add-autoplay-to-iframe
  • 33-bug-on-youtube-embed-urls
  • RC-Rekall-v1.1-fix_lpo
  • tuleap-140-go-back-to-my-capsules-page-when-i-m-on-capsule-preview-page
  • RC-Rekall-v1.2-fix10
  • RC-Rekall-v1.2-fix9
  • RC-Rekall-v1.2-fix8
  • RC-Rekall-v1.2-fix7
  • RC-Rekall-v1.2-fix6
  • RC-Rekall-v1.2-fix5
  • RC-Rekall-v1.2-fix4
  • RC-Rekall-v1.2-fix3
  • RC-Rekall-v1.2-fix2
  • RC-Rekall-v1.2-fix1
  • RC-Rekall-v1.1-fix-3
  • RC-Rekall-v1.1-fix-2
  • RC-Rekall-v1.1-fix-1
  • RC-Rekall-v1.1-delivered
  • preprod20220209-1535
23 results

PendingEditorInvitationRepository.php

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