1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
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
100
101
102
103
104
105
106
107
108
109
110
111
112
|
/* 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,
* You can obtain one at http://mozilla.org/MPL/2.0/. */
import { actionCreators as ac } from "common/Actions.sys.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 } = this.props;
return (
<SafeAnchor
onLinkClick={this.onLinkClick}
className={this.props.className}
url={url}
>
{name}
</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>
);
}
}
|
