102 lines
3.2 KiB
JavaScript
102 lines
3.2 KiB
JavaScript
/* 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";
|
|
// 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.state = {
|
|
exitEventFired: false,
|
|
};
|
|
}
|
|
|
|
onEntered() {
|
|
this.setState({ exitEventFired: false });
|
|
if (this.closeButton) {
|
|
this.closeButton.focus();
|
|
}
|
|
}
|
|
|
|
onExited() {
|
|
this.setState({ exitEventFired: true });
|
|
if (this.openButton) {
|
|
this.openButton.focus();
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<span>
|
|
<CSSTransition
|
|
timeout={300}
|
|
classNames="personalize-animate"
|
|
in={!this.props.showing}
|
|
appear={true}
|
|
>
|
|
<button
|
|
className="icon icon-settings personalize-button"
|
|
onClick={() => this.props.onOpen()}
|
|
onKeyDown={e => {
|
|
if (e.key === "Enter") {
|
|
this.props.onOpen();
|
|
}
|
|
}}
|
|
data-l10n-id="newtab-personalize-settings-icon-label"
|
|
ref={c => (this.openButton = c)}
|
|
/>
|
|
</CSSTransition>
|
|
<CSSTransition
|
|
timeout={250}
|
|
classNames="customize-animate"
|
|
in={this.props.showing}
|
|
onEntered={this.onEntered}
|
|
onExited={this.onExited}
|
|
appear={true}
|
|
>
|
|
<div
|
|
className="customize-menu"
|
|
role="dialog"
|
|
data-l10n-id="newtab-settings-dialog-label"
|
|
>
|
|
<div className="close-button-wrapper">
|
|
<button
|
|
onClick={() => this.props.onClose()}
|
|
className="close-button"
|
|
data-l10n-id="newtab-custom-close-button"
|
|
ref={c => (this.closeButton = c)}
|
|
/>
|
|
</div>
|
|
<ContentSection
|
|
openPreferences={this.props.openPreferences}
|
|
setPref={this.props.setPref}
|
|
enabledSections={this.props.enabledSections}
|
|
wallpapersEnabled={this.props.wallpapersEnabled}
|
|
activeWallpaper={this.props.activeWallpaper}
|
|
pocketRegion={this.props.pocketRegion}
|
|
mayHaveTopicSections={this.props.mayHaveTopicSections}
|
|
mayHaveInferredPersonalization={
|
|
this.props.mayHaveInferredPersonalization
|
|
}
|
|
mayHaveRecentSaves={this.props.DiscoveryStream.recentSavesEnabled}
|
|
mayHaveWeather={this.props.mayHaveWeather}
|
|
dispatch={this.props.dispatch}
|
|
exitEventFired={this.state.exitEventFired}
|
|
/>
|
|
</div>
|
|
</CSSTransition>
|
|
</span>
|
|
);
|
|
}
|
|
}
|
|
|
|
export const CustomizeMenu = connect(state => ({
|
|
DiscoveryStream: state.DiscoveryStream,
|
|
}))(_CustomizeMenu);
|