jedifocus.navigations/lib/components/Navigation/index.js.flow

Columns of JediFocus.

/*  __.-._
 *  '-._"7'  JediFocus
 *   /'.-c
 *   |  /T   Do. Or do not.
 *  _)_/LI   There is no try.
 *
 *  This project is a part of the “Byte-Sized JavaScript” videocasts.
 *  You can watch “Byte-Sized JavaScript” at: https://bytesized.tv/
 *
 *  MIT Licensed — See LICENSE.md
 *
 *  Send your comments, suggestions, and feedback to me@volkan.io
 */

// @flow

import type { NavigationProps } from 'jedifocus-navigations-types';

import React from 'react';
import PropTypes from 'prop-types';

import {
  IconAdd,
  IconBacklog,
  IconIceBox,
  IconLater,
  IconLowHangingFruits,
  IconRevisit,
  IconRunway
} from 'jedifocus.icons';

import { ActionButton } from 'jedifocus.buttons';

const Navigation = ({
  addNew,
  changeContext,
  context,
  passive
}: NavigationProps) => (
  <div className={`navigation ${passive ? 'no-pointer faded' : ''}`}>
    <ActionButton
      onClick={() => addNew()}
      title="Add a brand new goal."
      className="action-button--navigation text-right"
    >
      <IconAdd />
    </ActionButton>

    <a
      className="context-selection"
      onClick={() => changeContext()}
      title="Change the active context."
    >
      {context === 'runway' ? <IconRunway /> : null}
      {context === 'backlog' ? <IconBacklog /> : null}
      {context === 'ice-box' ? <IconIceBox /> : null}
      {context === 'later' ? <IconLater /> : null}
      {context === 'revisit' ? <IconRevisit /> : null}
      {context === 'low-hanging-fruits' ? <IconLowHangingFruits /> : null}
    </a>
  </div>
);

Navigation.propTypes = {
  addNew: PropTypes.func.isRequired,
  changeContext: PropTypes.func.isRequired,
  context: PropTypes.string.isRequired,
  passive: PropTypes.bool.isRequired
};

export default Navigation;