services/workbench2/src/views-components/side-panel-toggle/side-panel-toggle.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import { Tooltip, IconButton } from '@material-ui/core';
   7 import { connect } from 'react-redux';
   8 import { toggleSidePanel } from "store/side-panel/side-panel-action";
   9 import { RootState } from 'store/store';
  10
  11 type collapseButtonProps = {
  12     isCollapsed: boolean;
  13     toggleSidePanel: (collapsedState: boolean) => void
  14 }
  15
  16 export const COLLAPSE_ICON_SIZE = 35
  17
  18 const SidePanelToggle = (props: collapseButtonProps) => {
  19     const collapseButtonIconStyles = {
  20         root: {
  21             width: `${COLLAPSE_ICON_SIZE}px`,
  22             height: `${COLLAPSE_ICON_SIZE}px`,
  23             marginTop: '0.4rem',
  24             marginLeft: '0.7rem',
  25             paddingTop: '1rem',
  26             paddingRight: '1rem'
  27         },
  28         icon: {
  29             opacity: '0.5',
  30             marginBottom: '0.54rem'
  31         },
  32     }
  33
  34     return <Tooltip disableFocusListener title="Toggle Side Panel">
  35         <IconButton data-cy="side-panel-toggle" style={collapseButtonIconStyles.root} onClick={() => { props.toggleSidePanel(props.isCollapsed) }}>
  36             <div>
  37                 {props.isCollapsed ?
  38                     <img style={{...collapseButtonIconStyles.icon, marginLeft:'0.25rem'}} src='/mui-start-icon.svg' alt='an arrow pointing right'/>
  39                     :
  40                     <img style={{ ...collapseButtonIconStyles.icon, transform: "rotate(180deg)"}} src='/mui-start-icon.svg' alt='an arrow pointing right'/>}
  41             </div>
  42         </IconButton>
  43     </Tooltip>
  44 };
  45
  46 const mapStateToProps = (state: RootState) => {
  47     return {
  48         isCollapsed: state.sidePanel.collapsedState
  49     }
  50 }
  51
  52 const mapDispatchToProps = (dispatch) => {
  53     return {
  54         toggleSidePanel: (collapsedState) => {
  55             return dispatch(toggleSidePanel(collapsedState))
  56         }
  57     }
  58 };
  59
  60 export default connect(mapStateToProps, mapDispatchToProps)(SidePanelToggle)