New: Project Aphrodite

frontend/src/Components/Page/Header/PageHeader.js

@@ -0,0 +1,100 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { icons } from 'Helpers/Props';
+import keyboardShortcuts, { shortcuts } from 'Components/keyboardShortcuts';
+import IconButton from 'Components/Link/IconButton';
+import Link from 'Components/Link/Link';
+import MovieSearchInputConnector from './MovieSearchInputConnector';
+import PageHeaderActionsMenuConnector from './PageHeaderActionsMenuConnector';
+import KeyboardShortcutsModal from './KeyboardShortcutsModal';
+import styles from './PageHeader.css';
+
+class PageHeader extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props);
+
+    this.state = {
+      isKeyboardShortcutsModalOpen: false
+    };
+  }
+
+  componentDidMount() {
+    this.props.bindShortcut(shortcuts.OPEN_KEYBOARD_SHORTCUTS_MODAL.key, this.onOpenKeyboardShortcutsModal);
+  }
+
+  //
+  // Control
+
+  onOpenKeyboardShortcutsModal = () => {
+    this.setState({ isKeyboardShortcutsModalOpen: true });
+  }
+
+  //
+  // Listeners
+
+  onKeyboardShortcutsModalClose = () => {
+    this.setState({ isKeyboardShortcutsModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      onSidebarToggle,
+      isSmallScreen
+    } = this.props;
+
+    return (
+      <div className={styles.header}>
+        <div className={styles.logoContainer}>
+          <Link to={`${window.Radarr.urlBase}/`}>
+            <img
+              className={isSmallScreen ? styles.logo : styles.logoFull}
+              src={isSmallScreen ? `${window.Radarr.urlBase}/Content/Images/logo.png` : `${window.Radarr.urlBase}/Content/Images/logo-full.png`}
+            />
+          </Link>
+        </div>
+
+        <div className={styles.sidebarToggleContainer}>
+          <IconButton
+            id="sidebar-toggle-button"
+            name={icons.NAVBAR_COLLAPSE}
+            onPress={onSidebarToggle}
+          />
+        </div>
+
+        <MovieSearchInputConnector />
+
+        <div className={styles.right}>
+          <IconButton
+            className={styles.donate}
+            name={icons.HEART}
+            to="https://radarr.video/donate.html"
+            size={14}
+          />
+          <PageHeaderActionsMenuConnector
+            onKeyboardShortcutsPress={this.onOpenKeyboardShortcutsModal}
+          />
+        </div>
+
+        <KeyboardShortcutsModal
+          isOpen={this.state.isKeyboardShortcutsModalOpen}
+          onModalClose={this.onKeyboardShortcutsModalClose}
+        />
+      </div>
+    );
+  }
+}
+
+PageHeader.propTypes = {
+  onSidebarToggle: PropTypes.func.isRequired,
+  isSmallScreen: PropTypes.bool.isRequired,
+  bindShortcut: PropTypes.func.isRequired
+};
+
+export default keyboardShortcuts(PageHeader);