tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

Navigation.jsx (3200B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
      3 * You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 
      5 import { actionCreators as ac } from "common/Actions.mjs";
      6 import React from "react";
      7 import { SafeAnchor } from "../SafeAnchor/SafeAnchor";
      8 import { FluentOrText } from "content-src/components/FluentOrText/FluentOrText";
      9 
     10 export class Topic extends React.PureComponent {
     11  constructor(props) {
     12    super(props);
     13 
     14    this.onLinkClick = this.onLinkClick.bind(this);
     15  }
     16 
     17  onLinkClick(event) {
     18    if (this.props.dispatch) {
     19      this.props.dispatch(
     20        ac.DiscoveryStreamUserEvent({
     21          event: "CLICK",
     22          source: "POPULAR_TOPICS",
     23          action_position: 0,
     24          value: {
     25            topic: event.target.text.toLowerCase().replace(` `, `-`),
     26          },
     27        })
     28      );
     29    }
     30  }
     31 
     32  render() {
     33    const { url, name: topicName } = this.props;
     34    return (
     35      <SafeAnchor
     36        onLinkClick={this.onLinkClick}
     37        className={this.props.className}
     38        url={url}
     39      >
     40        {topicName}
     41      </SafeAnchor>
     42    );
     43  }
     44 }
     45 
     46 export class Navigation extends React.PureComponent {
     47  render() {
     48    let links = this.props.links || [];
     49    const alignment = this.props.alignment || "centered";
     50    const header = this.props.header || {};
     51    const english = this.props.locale.startsWith("en-");
     52    const privacyNotice = this.props.privacyNoticeURL || {};
     53    const { newFooterSection } = this.props;
     54    const className = `ds-navigation ds-navigation-${alignment} ${
     55      newFooterSection ? `ds-navigation-new-topics` : ``
     56    }`;
     57    let { title } = header;
     58    if (newFooterSection) {
     59      title = { id: "newtab-pocket-new-topics-title" };
     60      if (this.props.extraLinks) {
     61        links = [
     62          ...links.slice(0, links.length - 1),
     63          ...this.props.extraLinks,
     64          links[links.length - 1],
     65        ];
     66      }
     67    }
     68 
     69    return (
     70      <div className={className}>
     71        {title && english ? (
     72          <FluentOrText message={title}>
     73            <span className="ds-navigation-header" />
     74          </FluentOrText>
     75        ) : null}
     76 
     77        {english ? (
     78          <ul>
     79            {links &&
     80              links.map(t => (
     81                <li key={t.name}>
     82                  <Topic
     83                    url={t.url}
     84                    name={t.name}
     85                    dispatch={this.props.dispatch}
     86                  />
     87                </li>
     88              ))}
     89          </ul>
     90        ) : null}
     91 
     92        {!newFooterSection ? (
     93          <SafeAnchor className="ds-navigation-privacy" url={privacyNotice.url}>
     94            <FluentOrText message={privacyNotice.title} />
     95          </SafeAnchor>
     96        ) : null}
     97 
     98        {newFooterSection ? (
     99          <div className="ds-navigation-family">
    100            <span className="icon firefox-logo" />
    101            <span>|</span>
    102            <span className="icon pocket-logo" />
    103            <span
    104              className="ds-navigation-family-message"
    105              data-l10n-id="newtab-pocket-pocket-firefox-family"
    106            />
    107          </div>
    108        ) : null}
    109      </div>
    110    );
    111  }
    112 }