tor-browser

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

AddonsPicker.jsx (4520B)

      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 React from "react";
      6 import { AboutWelcomeUtils } from "../lib/aboutwelcome-utils.mjs";
      7 import { Localized } from "./MSLocalized";
      8 import { InstallButton } from "./InstallButton";
      9 
     10 export const AddonsPicker = props => {
     11  const { content, installedAddons, layout } = props;
     12 
     13  if (!content) {
     14    return null;
     15  }
     16 
     17  function handleAction(event) {
     18    const { message_id } = props;
     19    let { action, source_id } = content.tiles.data[event.currentTarget.value];
     20    let { type, data } = action;
     21 
     22    if (type === "INSTALL_ADDON_FROM_URL") {
     23      if (!data) {
     24        return;
     25      }
     26    }
     27 
     28    AboutWelcomeUtils.handleUserAction({ type, data });
     29    AboutWelcomeUtils.sendActionTelemetry(message_id, source_id);
     30  }
     31 
     32  function handleAuthorClick(event, authorId) {
     33    event.stopPropagation();
     34    AboutWelcomeUtils.handleUserAction({
     35      type: "OPEN_URL",
     36      data: {
     37        args: `https://addons.mozilla.org/firefox/user/${authorId}/`,
     38        where: "tab",
     39      },
     40    });
     41  }
     42 
     43  return (
     44    <div className={"addons-picker-container"}>
     45      {content.tiles.data.map(
     46        (
     47          {
     48            id,
     49            name: addonName,
     50            type,
     51            description,
     52            icon,
     53            author,
     54            install_label,
     55            install_complete_label,
     56          },
     57          index
     58        ) =>
     59          addonName ? (
     60            <div key={id} className="addon-container">
     61              <div className="rtamo-icon">
     62                <img
     63                  className={`${
     64                    type === "theme" ? "rtamo-theme-icon" : "brand-logo"
     65                  }`}
     66                  src={icon}
     67                  role="presentation"
     68                  alt=""
     69                />
     70              </div>
     71 
     72              {layout === "split" ? (
     73                <div className="addon-rows-container">
     74                  <div className="addon-row">
     75                    <div className="addon-author-details">
     76                      <Localized text={addonName}>
     77                        <div className="addon-title" />
     78                      </Localized>
     79 
     80                      {author && (
     81                        <div className="addon-author">
     82                          <Localized text={author.byLine}>
     83                            <span className="addon-by-line" />
     84                          </Localized>
     85                          <button
     86                            href="#"
     87                            onClick={e => {
     88                              handleAuthorClick(e, author.id);
     89                            }}
     90                            className="author-link"
     91                          >
     92                            <span>{author.name}</span>
     93                          </button>
     94                        </div>
     95                      )}
     96                    </div>
     97                    <InstallButton
     98                      key={id}
     99                      addonId={id}
    100                      handleAction={handleAction}
    101                      index={index}
    102                      installedAddons={installedAddons}
    103                      install_label={install_label}
    104                      install_complete_label={install_complete_label}
    105                    />
    106                  </div>
    107 
    108                  <div className="addon-row">
    109                    <Localized text={description}>
    110                      <div className="addon-description" />
    111                    </Localized>
    112                  </div>
    113                </div>
    114              ) : (
    115                <>
    116                  <div className="addon-details">
    117                    <Localized text={addonName}>
    118                      <div className="addon-title" />
    119                    </Localized>
    120                    <Localized text={description}>
    121                      <div className="addon-description" />
    122                    </Localized>
    123                  </div>
    124                  <InstallButton
    125                    key={id}
    126                    addonId={id}
    127                    handleAction={handleAction}
    128                    index={index}
    129                    installedAddons={installedAddons}
    130                    install_label={install_label}
    131                    install_complete_label={install_complete_label}
    132                  />
    133                </>
    134              )}
    135            </div>
    136          ) : null
    137      )}
    138    </div>
    139  );
    140 };