ThemesManagementPanel.jsx

Enable keyboard shortcuts

/* 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 React, { useEffect, useRef } from "react";

import { useDispatch } from "react-redux";

import { actionCreators as ac, actionTypes as at } from "common/Actions.mjs";

// eslint-disable-next-line no-shadow

import { CSSTransition } from "react-transition-group";

// Full browser theme selection sub-panel. The compact `theme-picker` lives in

// the customize panel row; the "See more themes" box-button opens this sliding

// panel, which shows the full `theme-picker` (appearance chooser + all themes)

// and a link out to the about:addons themes list.

function ThemesManagementPanel({ onSubpanelToggle, togglePanel, showPanel }) {

  const arrowButtonRef = useRef(null);

  const panelRef = useRef(null);

  const dispatch = useDispatch();

  // Notify parent menu when subpanel opens/closes

  useEffect(() => {

    if (onSubpanelToggle) {

      onSubpanelToggle(showPanel);

  }, [showPanel, onSubpanelToggle]);

  const handlePanelEntered = () => {

    arrowButtonRef.current?.focus();

};

  const openAboutAddonsThemes = () => {

    dispatch(ac.OnlyToMain({ type: at.OPEN_ABOUT_ADDONS_THEMES }));

};

  const isRTL = typeof document !== "undefined" && document.dir === "rtl";

  const arrowIconSrc = `chrome://global/skin/icons/shaft-arrow-${isRTL ? "right" : "left"}.svg`;

  return (

    <div id="themes-management-panel" className="themes-mgmt-panel-container">

      <moz-box-button

        onClick={togglePanel}

        data-l10n-id="newtab-appearance-more-themes-button"

      ></moz-box-button>

      <CSSTransition

        nodeRef={panelRef}

        in={showPanel}

        timeout={300}

        classNames="themes-mgmt-panel"

        unmountOnExit={true}

        onEntered={handlePanelEntered}

        <div ref={panelRef} className="themes-mgmt-panel">

          <div className="panel-content">

            <div className="arrow-wrapper">

              <moz-button

                ref={arrowButtonRef}

                type="ghost"

                className="arrow-button"

                iconSrc={arrowIconSrc}

                onClick={togglePanel}

              ></moz-button>

              <h2 data-l10n-id="newtab-appearance-manage-title"></h2>

            </div>

            <theme-picker

              layout="full"

              showLabels={false}

              installsource="about:newtab"

            ></theme-picker>

            <button

              className="external-link"

              onClick={openAboutAddonsThemes}

              data-l10n-id="newtab-appearance-explore-more-themes-button"

            ></button>

          </div>

        </div>

      </CSSTransition>

    </div>

);

export { ThemesManagementPanel };