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     },
  23     icon: {
  24       width: '1.5rem',
  25       height: '1.5rem',
  26       marginTop: '0.5rem'
  27     }
  28   }
  29
  30   return <Tooltip disableFocusListener title="Toggle Side Panel">
  31             <IconButton style={collapseButtonIconStyles.root} onClick={()=>{props.toggleSidePanel(props.isCollapsed)}}>
  32               <div>
  33               {props.isCollapsed?
  34                 <img style={collapseButtonIconStyles.icon} src='arrow-to-right.png'/>
  35                 :
  36                 <img style={{...collapseButtonIconStyles.icon, marginRight: '0.5rem'}} src='arrow-to-left.png'/>}
  37               </div>
  38             </IconButton>
  39           </Tooltip>
  40 };
  41
  42 const mapStateToProps = (state: RootState) => {
  43   return {
  44     isCollapsed: state.sidePanel.collapsedState
  45   }
  46 }
  47
  48   const mapDispatchToProps = (dispatch) => {
  49     return {
  50         toggleSidePanel: (collapsedState)=>{
  51             return dispatch(toggleSidePanel(collapsedState))
  52         }
  53     }
  54 };
  55
  56 export default connect(mapStateToProps, mapDispatchToProps)(SidePanelToggle)