CustomizeMenu.jsx - mozsearch

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 { ContentSection } from "content-src/components/CustomizeMenu/ContentSection/ContentSection";

import { connect } from "react-redux";

import React from "react";

const PREF_NOVA_ENABLED = "nova.enabled";

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

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

export class _CustomizeMenu extends React.PureComponent {

  constructor(props) {

    super(props);

    this.onEntered = this.onEntered.bind(this);

    this.onExited = this.onExited.bind(this);

    this.onSubpanelToggle = this.onSubpanelToggle.bind(this);

    this.personalizeButtonRef = React.createRef();

    this.customizeMenuRef = React.createRef();

    this.closeButtonRef = React.createRef();

    this.state = {

      exitEventFired: false,

      subpanelOpen: false,

};

  onSubpanelToggle(isOpen) {

    this.setState({ subpanelOpen: isOpen });

  onEntered() {

    this.setState({ exitEventFired: false });

    if (this.closeButtonRef.current) {

      this.closeButtonRef.current.focus();

  onExited() {

    this.setState({ exitEventFired: true });

    if (this.personalizeButtonRef.current) {

      this.personalizeButtonRef.current.focus();

  render() {

    const activationWindowVariant =

      this.props.Prefs.values["activationWindow.variant"];

    const activationWindowClass = activationWindowVariant

      ? `activation-window-variant-${activationWindowVariant}`

      : "";

    // @nova-cleanup(remove-pref): remove nova pref

    const novaEnabled = this.props.Prefs.values[PREF_NOVA_ENABLED];

    return (

      <span>

        <CSSTransition

          nodeRef={this.personalizeButtonRef}

          timeout={300}

          classNames="personalize-animate"

          in={!this.props.showing}

          appear={true}

          <button

            ref={this.personalizeButtonRef}

            className={`${activationWindowClass} personalize-button`}

            data-l10n-id="newtab-customize-panel-icon-button"

            aria-haspopup="dialog"

            onClick={() => this.props.onOpen()}

            onKeyDown={e => {

              if (e.key === "Enter") {

                this.props.onOpen();

}}

            <label data-l10n-id="newtab-customize-panel-icon-button-label" />

            <div>

              <img

                role="presentation"

                src="chrome://global/skin/icons/edit-outline.svg"

/>

            </div>

          </button>

        </CSSTransition>

        <CSSTransition

          nodeRef={this.customizeMenuRef}

          timeout={250}

          classNames="customize-animate"

          in={this.props.showing}

          onEntered={this.onEntered}

          onExited={this.onExited}

          appear={true}

          <div

            ref={this.customizeMenuRef}

            className="customize-menu-animate-wrapper"

            <div

              // @nova-cleanup(remove-conditional): Remove nova-enabled class

              className={`customize-menu ${

                this.state.subpanelOpen ? "subpanel-open" : ""

              } ${novaEnabled ? "nova-enabled" : ""}`}

              role="dialog"

              data-l10n-id="newtab-settings-dialog-label"

              <div className="close-button-wrapper">

                <moz-button

                  onClick={() => this.props.onClose()}

                  id="close-button"

                  type="icon ghost"

                  data-l10n-id="newtab-custom-close-menu-button"

                  iconsrc="chrome://global/skin/icons/close.svg"

                  ref={this.closeButtonRef}

                ></moz-button>

              </div>

              <ContentSection

                openPreferences={this.props.openPreferences}

                setPref={this.props.setPref}

                enabledSections={this.props.enabledSections}

                enabledWidgets={this.props.enabledWidgets}

                wallpapersEnabled={this.props.wallpapersEnabled}

                activeWallpaper={this.props.activeWallpaper}

                pocketRegion={this.props.pocketRegion}

                mayHaveTopicSections={this.props.mayHaveTopicSections}

                mayHaveInferredPersonalization={

                  this.props.mayHaveInferredPersonalization

                mayHaveWeather={this.props.mayHaveWeather}

                mayHaveWidgets={this.props.mayHaveWidgets}

                mayHaveWeatherForecast={this.props.mayHaveWeatherForecast}

                weatherDisplay={this.props.weatherDisplay}

                mayHaveTimerWidget={this.props.mayHaveTimerWidget}

                mayHaveListsWidget={this.props.mayHaveListsWidget}

                dispatch={this.props.dispatch}

                exitEventFired={this.state.exitEventFired}

                onSubpanelToggle={this.onSubpanelToggle}

                toggleSectionsMgmtPanel={this.props.toggleSectionsMgmtPanel}

                showSectionsMgmtPanel={this.props.showSectionsMgmtPanel}

                novaEnabled={novaEnabled}

                toggleWidgetsManagementPanel={

                  this.props.toggleWidgetsManagementPanel

                showWidgetsManagementPanel={

                  this.props.showWidgetsManagementPanel

/>

            </div>

          </div>

        </CSSTransition>

      </span>

);

export const CustomizeMenu = connect(state => ({

  DiscoveryStream: state.DiscoveryStream,

  Prefs: state.Prefs,

}))(_CustomizeMenu);