tor-browser

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

CustomizeMenu.jsx (4401B)

      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 { ContentSection } from "content-src/components/CustomizeMenu/ContentSection/ContentSection";
      6 import { connect } from "react-redux";
      7 import React from "react";
      8 // eslint-disable-next-line no-shadow
      9 import { CSSTransition } from "react-transition-group";
     10 
     11 export class _CustomizeMenu extends React.PureComponent {
     12  constructor(props) {
     13    super(props);
     14    this.onEntered = this.onEntered.bind(this);
     15    this.onExited = this.onExited.bind(this);
     16    this.onSubpanelToggle = this.onSubpanelToggle.bind(this);
     17    this.state = {
     18      exitEventFired: false,
     19      subpanelOpen: false,
     20    };
     21  }
     22 
     23  onSubpanelToggle(isOpen) {
     24    this.setState({ subpanelOpen: isOpen });
     25  }
     26 
     27  onEntered() {
     28    this.setState({ exitEventFired: false });
     29    if (this.closeButton) {
     30      this.closeButton.focus();
     31    }
     32  }
     33 
     34  onExited() {
     35    this.setState({ exitEventFired: true });
     36    if (this.openButton) {
     37      this.openButton.focus();
     38    }
     39  }
     40 
     41  render() {
     42    return (
     43      <span>
     44        <CSSTransition
     45          timeout={300}
     46          classNames="personalize-animate"
     47          in={!this.props.showing}
     48          appear={true}
     49        >
     50          <button
     51            className="personalize-button"
     52            data-l10n-id="newtab-customize-panel-icon-button"
     53            onClick={() => this.props.onOpen()}
     54            onKeyDown={e => {
     55              if (e.key === "Enter") {
     56                this.props.onOpen();
     57              }
     58            }}
     59            ref={c => (this.openButton = c)}
     60          >
     61            <label data-l10n-id="newtab-customize-panel-icon-button-label" />
     62            <div>
     63              <img
     64                role="presentation"
     65                src="chrome://global/skin/icons/edit-outline.svg"
     66              />
     67            </div>
     68          </button>
     69        </CSSTransition>
     70        <CSSTransition
     71          timeout={250}
     72          classNames="customize-animate"
     73          in={this.props.showing}
     74          onEntered={this.onEntered}
     75          onExited={this.onExited}
     76          appear={true}
     77        >
     78          <div className="customize-menu-animate-wrapper">
     79            <div
     80              className={`customize-menu ${
     81                this.state.subpanelOpen ? "subpanel-open" : ""
     82              }`}
     83              role="dialog"
     84              data-l10n-id="newtab-settings-dialog-label"
     85            >
     86              <div className="close-button-wrapper">
     87                <moz-button
     88                  onClick={() => this.props.onClose()}
     89                  id="close-button"
     90                  type="icon ghost"
     91                  data-l10n-id="newtab-custom-close-menu-button"
     92                  iconsrc="chrome://global/skin/icons/close.svg"
     93                  ref={c => (this.closeButton = c)}
     94                ></moz-button>
     95              </div>
     96              <ContentSection
     97                openPreferences={this.props.openPreferences}
     98                setPref={this.props.setPref}
     99                enabledSections={this.props.enabledSections}
    100                enabledWidgets={this.props.enabledWidgets}
    101                wallpapersEnabled={this.props.wallpapersEnabled}
    102                activeWallpaper={this.props.activeWallpaper}
    103                pocketRegion={this.props.pocketRegion}
    104                mayHaveTopicSections={this.props.mayHaveTopicSections}
    105                mayHaveInferredPersonalization={
    106                  this.props.mayHaveInferredPersonalization
    107                }
    108                mayHaveWeather={this.props.mayHaveWeather}
    109                mayHaveWidgets={this.props.mayHaveWidgets}
    110                mayHaveTimerWidget={this.props.mayHaveTimerWidget}
    111                mayHaveListsWidget={this.props.mayHaveListsWidget}
    112                dispatch={this.props.dispatch}
    113                exitEventFired={this.state.exitEventFired}
    114                onSubpanelToggle={this.onSubpanelToggle}
    115                toggleSectionsMgmtPanel={this.props.toggleSectionsMgmtPanel}
    116                showSectionsMgmtPanel={this.props.showSectionsMgmtPanel}
    117              />
    118            </div>
    119          </div>
    120        </CSSTransition>
    121      </span>
    122    );
    123  }
    124 }
    125 
    126 export const CustomizeMenu = connect(state => ({
    127  DiscoveryStream: state.DiscoveryStream,
    128 }))(_CustomizeMenu);