Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
import { actionCreators as ac } from "common/Actions.mjs";
import React from "react";
import { SafeAnchor } from "../SafeAnchor/SafeAnchor";
import { FluentOrText } from "content-src/components/FluentOrText/FluentOrText";
export class Topic extends React.PureComponent {
constructor(props) {
super(props);
this.onLinkClick = this.onLinkClick.bind(this);
}
onLinkClick(event) {
if (this.props.dispatch) {
this.props.dispatch(
ac.DiscoveryStreamUserEvent({
event: "CLICK",
source: "POPULAR_TOPICS",
action_position: 0,
value: {
topic: event.target.text.toLowerCase().replace(` `, `-`),
},
})
);
}
}
render() {
const { url, name: topicName } = this.props;
return (
<SafeAnchor
onLinkClick={this.onLinkClick}
className={this.props.className}
url={url}
>
{topicName}
</SafeAnchor>
);
}
}
export class Navigation extends React.PureComponent {
render() {
let links = this.props.links || [];
const alignment = this.props.alignment || "centered";
const header = this.props.header || {};
const english = this.props.locale.startsWith("en-");
const privacyNotice = this.props.privacyNoticeURL || {};
const { newFooterSection } = this.props;
const className = `ds-navigation ds-navigation-${alignment} ${
newFooterSection ? `ds-navigation-new-topics` : ``
}`;
let { title } = header;
if (newFooterSection) {
title = { id: "newtab-pocket-new-topics-title" };
if (this.props.extraLinks) {
links = [
...links.slice(0, links.length - 1),
...this.props.extraLinks,
links[links.length - 1],
];
}
}
return (
<div className={className}>
{title && english ? (
<FluentOrText message={title}>
<span className="ds-navigation-header" />
</FluentOrText>
) : null}
{english ? (
<ul>
{links &&
links.map(t => (
<li key={t.name}>
<Topic
url={t.url}
name={t.name}
dispatch={this.props.dispatch}
/>
</li>
))}
</ul>
) : null}
{!newFooterSection ? (
<SafeAnchor className="ds-navigation-privacy" url={privacyNotice.url}>
<FluentOrText message={privacyNotice.title} />
</SafeAnchor>
) : null}
{newFooterSection ? (
<div className="ds-navigation-family">
<span className="icon firefox-logo" />
<span>|</span>
<span className="icon pocket-logo" />
<span
className="ds-navigation-family-message"
data-l10n-id="newtab-pocket-pocket-firefox-family"
/>
</div>
) : null}
</div>
);
}
}