BaseHorizontal.js 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. import React, { Component } from 'react';
  2. import PropTypes from 'prop-types';
  3. import { connect } from 'react-redux';
  4. import { bindActionCreators } from 'redux';
  5. import * as actions from '../../store/actions/actions';
  6. import Head from './Head';
  7. import HeaderHorizontal from './HeaderHorizontal';
  8. import Offsidebar from './Offsidebar';
  9. import Footer from './Footer';
  10. import SettingsProvider from './SettingsProvider';
  11. import ThemesProvider from './ThemesProvider';
  12. class BaseHorizontal extends Component {
  13. /* Toggle Horizontal layout for demo purposes.
  14. Set the 'horizontal' flag using redux in the settingsReducer
  15. and remove bwloe methods so it gets rendered on the server
  16. */
  17. componentWillMount = () => this.props.actions.changeSetting('horizontal', true);
  18. componentWillUnmount = () => this.props.actions.changeSetting('horizontal', false);
  19. render() {
  20. return (
  21. <ThemesProvider>
  22. <SettingsProvider>
  23. <div className="wrapper">
  24. <Head />
  25. <HeaderHorizontal />
  26. <Offsidebar />
  27. <section className="section-container">{this.props.children}</section>
  28. <Footer />
  29. </div>
  30. </SettingsProvider>
  31. </ThemesProvider>
  32. );
  33. }
  34. }
  35. BaseHorizontal.propTypes = {
  36. actions: PropTypes.object,
  37. settings: PropTypes.object
  38. };
  39. const mapStateToProps = state => ({ settings: state.settings });
  40. const mapDispatchToProps = dispatch => ({ actions: bindActionCreators(actions, dispatch) });
  41. export default connect(
  42. mapStateToProps,
  43. mapDispatchToProps
  44. )(BaseHorizontal);