{"size": 2746, "ext": "js", "max_stars_repo_path": "homebase/user-interface/src/containers/LeftMenu/index.js", "max_stars_repo_name": "WesleyBaxter/TitanRover2018", "max_stars_repo_stars_event_min_datetime": "2021-01-04T00:25:20.000Z", "max_stars_repo_stars_event_max_datetime": "2021-01-04T00:25:20.000Z", "max_issues_repo_path": "homebase/user-interface/src/containers/LeftMenu/index.js", "max_issues_repo_name": "WesleyBaxter/TitanRover2018", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "homebase/user-interface/src/containers/LeftMenu/index.js", "max_forks_repo_name": "WesleyBaxter/TitanRover2018", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 30.5111111111, "max_line_length": 90, "alphanum_fraction": 0.6740713765}
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import Drawer from 'material-ui/Drawer';
import List from 'material-ui/List';
import Divider from 'material-ui/Divider';
import Typography from 'material-ui/Typography';
import Tooltip from 'material-ui/Tooltip';
import IconButton from 'material-ui/IconButton';
import ChevronLeftIcon from 'material-ui-icons/ChevronLeft';
import LayoutMenuList from '../../components/LayoutMenuList/';
import ComponentMenuList from '../../components/ComponentMenuList/';
import { closeLeftMenu } from '../../actions/menu';

const propTypes = {
  /** handles dispatching the method to close the left menu */
  handleOnClick: PropTypes.func.isRequired,
  /** current active state of left menu */
  leftMenuActive: PropTypes.bool.isRequired,
  /** A string of class names to apply to the LeftMenu for styling concerns. */
  drawerPaperClassNames: PropTypes.string,
};

const defaultProps = {
  leftMenuActive: false,
  drawerPaperClassNames: '',
};

const mapStateToProps = state => ({ leftMenuActive: state.leftMenuActive });

const mapDispatchToProps = dispatch => ({
  handleOnClick: () => {
    // dispatch the window resize method to force the GL Playground to resize itself
    // this gets rid of the extra spacing that appears
    // although it's kind of a hacky approach
    setTimeout(() => window.dispatchEvent(new Event('resize')), 250);

    dispatch(closeLeftMenu());
  },
});

const styles = {
  drawerHeader: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end',
    padding: '0 10px',
  },
};

/**
 * The LeftMenu allows quick access to load saved layouts and also select react components
 * that will be added to the Golden-Layout playground.
 */
class LeftMenu extends Component {
  render() {
    const { leftMenuActive, handleOnClick, drawerPaperClassNames } = this.props;

    return (
      <Drawer
        variant="persistent"
        open={leftMenuActive}
        classes={{
          paper: drawerPaperClassNames,
        }}
      >
        <div style={styles.drawerHeader}>
          <Typography variant="headline">Titan Rover</Typography>
          <Tooltip title="Close Menu" placement="bottom">
            <IconButton aria-label="Close Menu" onClick={handleOnClick} >
              <ChevronLeftIcon />
            </IconButton>
          </Tooltip>
        </div>
        <Divider light />
        <List>
          <LayoutMenuList open={false} />
          <Divider />
          <ComponentMenuList />
        </List>
      </Drawer>
    );
  }
}

LeftMenu.propTypes = propTypes;
LeftMenu.defaultProps = defaultProps;

export default connect(mapStateToProps, mapDispatchToProps)(LeftMenu);
