RootLayout.tsx 4.08 KB
Newer Older
Oleksii Savran's avatar
Oleksii Savran committed
1
2
3
4
import * as React from 'react';
import { withStyles, WithStyles } from '@material-ui/core/styles';
import { withTranslation, WithTranslation } from 'react-i18next';

5
import renderRoutes from '_core/routing/renderRoutes';
Oleksii Savran's avatar
Oleksii Savran committed
6
7
8
import { Link } from 'react-router-dom';

const styles = (theme) => ({
Maksym Tishchenko's avatar
Maksym Tishchenko committed
9
10
11
12
13
14
15
  '@global': {
    'a': {
      color: theme.palette.primary.main,
      textDecoration: 'none',
      cursor: 'pointer',
    },
  },
Oleksii Savran's avatar
Oleksii Savran committed
16
17
18
19
20
21
22
23
24
25
26
27
28
  app: {
    backgroundColor: theme.palette.secondary.main,
  },
  logo: {
    height: '36px',
    padding: '12px',
  },
  toolsFoot: {
    'font-size': '0.8em',
    'padding': '8px 16px',
    'backgroundColor': '#d8d8d8',
    'color': '#222',
    '& a': {
29
      color: theme.palette.primary.main,
Oleksii Savran's avatar
Oleksii Savran committed
30
31
    },
  },
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
  content: {
    '@media print': {
      '& table, & tbody, & div ': {
        overflow: 'visible !important',
        borderCollapse: 'collapse',
        // fontSize: '1vw',
      },
      '& tr': {
        pageBreakInside: 'avoid',
      },
    },
    '@media print and (orientation: portrait)': {
      '& td:nth-child(n + 10)': {
        display: 'none !important',
      },
    },
    '@media print and (orientation: landscape)': {
      '& td:nth-child(n + 15)': {
        display: 'none !important',
      },
    },
  },
Oleksii Savran's avatar
Oleksii Savran committed
54
55
});

Matija Obreza's avatar
Matija Obreza committed
56
57
declare const window: Window & { softwareVersion: string };

Matija Obreza's avatar
Matija Obreza committed
58
const VersionDisplay = ({}) => typeof window !== 'undefined' && window.softwareVersion ? <p><code>{ window.softwareVersion }</code></p> : <p><code>{ process.env.PROJECT_VERSION }</code></p>;
Matija Obreza's avatar
Matija Obreza committed
59
60


Oleksii Savran's avatar
Oleksii Savran committed
61
62
63
interface IRootLayoutProps {
  home: string;
  children?: React.ReactNode;
64
65
  // location: any;
  matchPath: string;
Oleksii Savran's avatar
Oleksii Savran committed
66
67
  route: any;
  Menu: any;
68
  routingProps: any;
Oleksii Savran's avatar
Oleksii Savran committed
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
}

const isNavigationOpen = () => {
  // console.log('Has classNames: ', document.getElementById('navigation').className);
  return document.getElementById('navigation').className.match(/\bnavigationopen\b/);
}

const maybeCloseNavigation = (ev) => {
  // console.log('Clickety click!');
  setTimeout(() => {
    if (isNavigationOpen()) {
      document.getElementById('navigation').className = document.getElementById('navigation').className.replace(/\bnavigationopen\b/, '');
    }
  }, 50);
}

const toggleNavigation = (ev) => {
  // console.log('Toggling', ev);
  ev.stopPropagation();
  setTimeout(() => {
    if (isNavigationOpen()) {
      // console.log('Closing nav');
      document.getElementById('navigation').className = document.getElementById('navigation').className.replace(/\bnavigationopen\b/, '');
    } else {
      // console.log('Opening nav');
      document.getElementById('navigation').className = `${document.getElementById('navigation').className} navigationopen`.trim();
    }
  }, 50);
}

function RootLayout(props: IRootLayoutProps & WithStyles & WithTranslation) {
100
  const { route, matchPath, routingProps, classes, Menu, home } = props;
Matija Obreza's avatar
Matija Obreza committed
101
  // console.log('root props: ', props);
Oleksii Savran's avatar
Oleksii Savran committed
102

103
104
  console.log(`Rendering route ${matchPath}`);

Oleksii Savran's avatar
Oleksii Savran committed
105
106
107
108
  return (
    <div id="app-layout">
      <div id="navigation" onClick={ maybeCloseNavigation }>
        <div id="app" className={ classes.app }>
Matija Obreza's avatar
Matija Obreza committed
109
110
          <Link className="navigationdisplayed" to={ home || '/' }><img className={ classes.logo } alt="logo" src="images/logo-white.png"/></Link>
          <img onClick={ toggleNavigation } className={ `navigationtoggle ${classes.logo}` } alt="logo" src="images/logo-white.png"/>
Oleksii Savran's avatar
Oleksii Savran committed
111
112
113
        </div>
        <div id="menu">
          <div id="tools">
114
            <Menu currentPath={ routingProps?.location?.pathname }/>
Oleksii Savran's avatar
Oleksii Savran committed
115
116
            <div id="shameless-plug" className={ classes.toolsFoot }>
              <p>
Matija Obreza's avatar
Matija Obreza committed
117
118
119
                <a rel="noreferrer" target="_blank" href="https://gitlab.croptrust.org/grin-global/support">GGCE</a>
                <br/>
                by <a rel="noreferrer" target="_blank" href="https://www.croptrust.org">Global Crop Diversity Trust</a>
Oleksii Savran's avatar
Oleksii Savran committed
120
              </p>
121
              <VersionDisplay />
Oleksii Savran's avatar
Oleksii Savran committed
122
123
124
125
126
127
            </div>
          </div>
        </div>
      </div>

      <main id="content" className={ classes.content }>
128
        { renderRoutes(route.routes, matchPath) }
Oleksii Savran's avatar
Oleksii Savran committed
129
130
131
132
133
134
      </main>
    </div>
  );
}

export default withTranslation()(withStyles(styles)(RootLayout));