75 lines
2.5 KiB
TypeScript
75 lines
2.5 KiB
TypeScript
import * as React from "react";
|
|
import { NavLinksProps } from "./interfaces";
|
|
import { getPathArray } from "../history";
|
|
import {
|
|
computeEditorUrlFromState, computeFarmwareUrlFromState,
|
|
} from "./compute_editor_url_from_state";
|
|
import { Link } from "../link";
|
|
import { t } from "../i18next_wrapper";
|
|
import { betterCompact } from "../util";
|
|
import { DevSettings } from "../account/dev/dev_support";
|
|
/** Uses a slug and a child path to compute the `href` of a navbar link. */
|
|
export type LinkComputeFn = (slug: string, childPath: string) => string;
|
|
|
|
/** If no LinkComputeFn is provided, the default behavior prevails. */
|
|
const DEFAULT: LinkComputeFn =
|
|
(slug, childpath) => `/app/${slug}${childpath}`;
|
|
|
|
interface NavLinkParams {
|
|
/** User visible verbiage. */
|
|
name: string;
|
|
/** Font awesome icon name. */
|
|
icon: string;
|
|
/** A unique name used for the path in the URL bar. */
|
|
slug: string;
|
|
computeHref?: LinkComputeFn
|
|
}
|
|
|
|
export const getLinks = (): NavLinkParams[] => betterCompact([
|
|
{ name: "Farm Designer", icon: "leaf", slug: "designer" },
|
|
{ name: "Controls", icon: "keyboard-o", slug: "controls" },
|
|
DevSettings.futureFeaturesEnabled() ? undefined :
|
|
{ name: "Device", icon: "cog", slug: "device" },
|
|
{
|
|
name: "Sequences", icon: "server", slug: "sequences",
|
|
computeHref: computeEditorUrlFromState("Sequence")
|
|
},
|
|
{
|
|
name: "Regimens", icon: "calendar-check-o", slug: "regimens",
|
|
computeHref: computeEditorUrlFromState("Regimen")
|
|
},
|
|
{
|
|
name: "Farmware", icon: "crosshairs", slug: "farmware",
|
|
computeHref: computeFarmwareUrlFromState
|
|
},
|
|
{ name: "Messages", icon: "list", slug: "messages" },
|
|
]);
|
|
|
|
export const NavLinks = (props: NavLinksProps) => {
|
|
const currPageSlug = getPathArray()[2];
|
|
return <div className="links">
|
|
<div className="nav-links">
|
|
{getLinks().map(link => {
|
|
const isActive = (currPageSlug === link.slug) ? "active" : "";
|
|
const childPath = link.slug === "designer" ? "/plants" : "";
|
|
const fn = link.computeHref || DEFAULT;
|
|
return <Link
|
|
to={fn(link.slug, childPath)}
|
|
className={`${isActive}`}
|
|
key={link.slug}
|
|
draggable={false}
|
|
onClick={props.close("mobileMenuOpen")}>
|
|
<i className={`fa fa-${link.icon}`} />
|
|
<div data-title={t(link.name)}>
|
|
{t(link.name)}
|
|
{link.slug === "messages" && props.alertCount > 0 &&
|
|
<div className={"saucer fun"}>
|
|
<p>{props.alertCount}</p>
|
|
</div>}
|
|
</div>
|
|
</Link>;
|
|
})}
|
|
</div>
|
|
</div>;
|
|
};
|