Source code
Revision control
Copy as Markdown
Other Tools
/* 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,
import { ErrorBoundary } from "content-src/components/ErrorBoundary/ErrorBoundary";
import { FluentOrText } from "content-src/components/FluentOrText/FluentOrText";
import { SponsoredContentHighlight } from "../DiscoveryStreamComponents/FeatureHighlight/SponsoredContentHighlight";
import React from "react";
import { connect } from "react-redux";
/**
*/
export class _CollapsibleSection extends React.PureComponent {
constructor(props) {
super(props);
this.onBodyMount = this.onBodyMount.bind(this);
this.onMenuButtonMouseEnter = this.onMenuButtonMouseEnter.bind(this);
this.onMenuButtonMouseLeave = this.onMenuButtonMouseLeave.bind(this);
this.onMenuUpdate = this.onMenuUpdate.bind(this);
this.state = {
menuButtonHover: false,
showContextMenu: false,
};
this.setContextMenuButtonRef = this.setContextMenuButtonRef.bind(this);
}
setContextMenuButtonRef(element) {
this.contextMenuButtonRef = element;
}
onBodyMount(node) {
this.sectionBody = node;
}
onMenuButtonMouseEnter() {
this.setState({ menuButtonHover: true });
}
onMenuButtonMouseLeave() {
this.setState({ menuButtonHover: false });
}
onMenuUpdate(showContextMenu) {
this.setState({ showContextMenu });
}
render() {
const { isAnimating, maxHeight, menuButtonHover, showContextMenu } =
this.state;
const {
id,
collapsed,
learnMore,
title,
subTitle,
mayHaveSponsoredStories,
} = this.props;
const active = menuButtonHover || showContextMenu;
let bodyStyle;
if (isAnimating && !collapsed) {
bodyStyle = { maxHeight };
} else if (!isAnimating && collapsed) {
bodyStyle = { display: "none" };
}
let titleStyle;
if (this.props.hideTitle) {
titleStyle = { visibility: "hidden" };
}
const hasSubtitleClassName = subTitle ? `has-subtitle` : ``;
return (
<section
className={`collapsible-section ${this.props.className}${
active ? " active" : ""
}`}
// Note: data-section-id is used for web extension api tests in mozilla central
data-section-id={id}
>
<div className="section-top-bar">
<h3
className={`section-title-container ${hasSubtitleClassName}`}
style={titleStyle}
>
<span className="section-title">
<FluentOrText message={title} />
</span>
<span className="learn-more-link-wrapper">
{learnMore && (
<span className="learn-more-link">
<FluentOrText message={learnMore.link.message}>
<a href={learnMore.link.href} />
</FluentOrText>
</span>
)}
</span>
{subTitle && (
<span className="section-sub-title">
<FluentOrText message={subTitle} />
</span>
)}
{mayHaveSponsoredStories &&
this.props.spocMessageVariant === "variant-a" && (
<SponsoredContentHighlight
position="inset-block-start inset-inline-start"
dispatch={this.props.dispatch}
/>
)}
</h3>
</div>
<ErrorBoundary className="section-body-fallback">
<div ref={this.onBodyMount} style={bodyStyle}>
{this.props.children}
</div>
</ErrorBoundary>
</section>
);
}
}
_CollapsibleSection.defaultProps = {
document: globalThis.document || {
addEventListener: () => {},
removeEventListener: () => {},
visibilityState: "hidden",
},
};
export const CollapsibleSection = connect(state => ({
Prefs: state.Prefs,
}))(_CollapsibleSection);