blob: 2b16c7fd391af60a77cea9370962f53c4ef9ebb6 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
/* 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 { BackgroundsSection } from "content-src/components/CustomizeMenu/BackgroundsSection/BackgroundsSection";
import { ContentSection } from "content-src/components/CustomizeMenu/ContentSection/ContentSection";
import { connect } from "react-redux";
import React from "react";
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);
}
onEntered() {
if (this.closeButton) {
this.closeButton.focus();
}
}
onExited() {
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()}
data-l10n-id="newtab-personalize-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-personalize-dialog-label"
>
<button
onClick={() => this.props.onClose()}
className="close-button"
data-l10n-id="newtab-custom-close-button"
ref={c => (this.closeButton = c)}
/>
<BackgroundsSection />
<ContentSection
openPreferences={this.props.openPreferences}
setPref={this.props.setPref}
enabledSections={this.props.enabledSections}
pocketRegion={this.props.pocketRegion}
mayHaveSponsoredTopSites={this.props.mayHaveSponsoredTopSites}
mayHaveSponsoredStories={
this.props.DiscoveryStream.config.show_spocs
}
mayHaveRecentSaves={this.props.DiscoveryStream.recentSavesEnabled}
dispatch={this.props.dispatch}
/>
</div>
</CSSTransition>
</span>
);
}
}
export const CustomizeMenu = connect(state => ({
DiscoveryStream: state.DiscoveryStream,
}))(_CustomizeMenu);
|
