tor-browser

ContentSection.jsx (11847B)

---

/* 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 React from "react";
import { actionCreators as ac } from "common/Actions.mjs";
import { SectionsMgmtPanel } from "../SectionsMgmtPanel/SectionsMgmtPanel";
import { WallpaperCategories } from "../../WallpaperCategories/WallpaperCategories";

export class ContentSection extends React.PureComponent {
 constructor(props) {
   super(props);
   this.onPreferenceSelect = this.onPreferenceSelect.bind(this);

   // Refs are necessary for dynamically measuring drawer heights for slide animations
   this.topSitesDrawerRef = React.createRef();
   this.pocketDrawerRef = React.createRef();
 }

 inputUserEvent(eventSource, eventValue) {
   this.props.dispatch(
     ac.UserEvent({
       event: "PREF_CHANGED",
       source: eventSource,
       value: { status: eventValue, menu_source: "CUSTOMIZE_MENU" },
     })
   );
 }

 onPreferenceSelect(e) {
   // eventSource: WEATHER | TOP_SITES | TOP_STORIES | WIDGET_LISTS | WIDGET_TIMER
   const { preference, eventSource } = e.target.dataset;
   let value;
   if (e.target.nodeName === "SELECT") {
     value = parseInt(e.target.value, 10);
   } else if (e.target.nodeName === "INPUT") {
     value = e.target.checked;
     if (eventSource) {
       this.inputUserEvent(eventSource, value);
     }
   } else if (e.target.nodeName === "MOZ-TOGGLE") {
     value = e.target.pressed;
     if (eventSource) {
       this.inputUserEvent(eventSource, value);
     }
   }
   this.props.setPref(preference, value);
 }

 componentDidMount() {
   this.setDrawerMargins();
 }

 componentDidUpdate() {
   this.setDrawerMargins();
 }

 setDrawerMargins() {
   this.setDrawerMargin(
     `TOP_SITES`,
     this.props.enabledSections.topSitesEnabled
   );
   this.setDrawerMargin(
     `TOP_STORIES`,
     this.props.enabledSections.pocketEnabled
   );
 }

 setDrawerMargin(drawerID, isOpen) {
   let drawerRef;

   if (drawerID === `TOP_SITES`) {
     drawerRef = this.topSitesDrawerRef.current;
   } else if (drawerID === `TOP_STORIES`) {
     drawerRef = this.pocketDrawerRef.current;
   } else {
     return;
   }

   if (drawerRef) {
     // Use measured height if valid, otherwise use a large fallback
     // since overflow:hidden on the parent safely hides the drawer
     let drawerHeight =
       parseFloat(window.getComputedStyle(drawerRef)?.height) || 100;

     if (isOpen) {
       drawerRef.style.marginTop = "var(--space-small)";
     } else {
       drawerRef.style.marginTop = `-${drawerHeight + 3}px`;
     }
   }
 }

 render() {
   const {
     enabledSections,
     enabledWidgets,
     pocketRegion,
     mayHaveInferredPersonalization,
     mayHaveWeather,
     mayHaveWidgets,
     mayHaveTimerWidget,
     mayHaveListsWidget,
     openPreferences,
     wallpapersEnabled,
     activeWallpaper,
     setPref,
     mayHaveTopicSections,
     exitEventFired,
     onSubpanelToggle,
     toggleSectionsMgmtPanel,
     showSectionsMgmtPanel,
   } = this.props;
   const {
     topSitesEnabled,
     pocketEnabled,
     weatherEnabled,
     showInferredPersonalizationEnabled,
     topSitesRowsCount,
   } = enabledSections;
   const { timerEnabled, listsEnabled } = enabledWidgets;

   return (
     <div className="home-section">
       {wallpapersEnabled && (
         <>
           <div className="wallpapers-section">
             <WallpaperCategories
               setPref={setPref}
               activeWallpaper={activeWallpaper}
               exitEventFired={exitEventFired}
               onSubpanelToggle={onSubpanelToggle}
             />
           </div>
           {/* If widgets section is visible, hide this divider */}
           {!mayHaveWidgets && (
             <span className="divider" role="separator"></span>
           )}
         </>
       )}
       {mayHaveWidgets && (
         <div className="widgets-section">
           <div className="category-header">
             <h2 data-l10n-id="newtab-custom-widget-section-title"></h2>
           </div>
           <div className="settings-widgets">
             {/* Weather */}
             {mayHaveWeather && (
               <div id="weather-section" className="section">
                 <moz-toggle
                   id="weather-toggle"
                   pressed={weatherEnabled || null}
                   onToggle={this.onPreferenceSelect}
                   data-preference="showWeather"
                   data-eventSource="WEATHER"
                   data-l10n-id="newtab-custom-widget-weather-toggle"
                 />
               </div>
             )}

             {/* Lists */}
             {mayHaveListsWidget && (
               <div id="lists-widget-section" className="section">
                 <moz-toggle
                   id="lists-toggle"
                   pressed={listsEnabled || null}
                   onToggle={this.onPreferenceSelect}
                   data-preference="widgets.lists.enabled"
                   data-eventSource="WIDGET_LISTS"
                   data-l10n-id="newtab-custom-widget-lists-toggle"
                 />
               </div>
             )}

             {/* Timer */}
             {mayHaveTimerWidget && (
               <div id="timer-widget-section" className="section">
                 <moz-toggle
                   id="timer-toggle"
                   pressed={timerEnabled || null}
                   onToggle={this.onPreferenceSelect}
                   data-preference="widgets.focusTimer.enabled"
                   data-eventSource="WIDGET_TIMER"
                   data-l10n-id="newtab-custom-widget-timer-toggle"
                 />
               </div>
             )}
             <span className="divider" role="separator"></span>
           </div>
         </div>
       )}
       <div className="settings-toggles">
         {/* Note: If widgets are enabled, the weather toggle will be moved under Widgets subsection */}
         {!mayHaveWidgets && mayHaveWeather && (
           <div id="weather-section" className="section">
             <moz-toggle
               id="weather-toggle"
               pressed={weatherEnabled || null}
               onToggle={this.onPreferenceSelect}
               data-preference="showWeather"
               data-eventSource="WEATHER"
               data-l10n-id="newtab-custom-weather-toggle"
             />
           </div>
         )}

         <div id="shortcuts-section" className="section">
           <moz-toggle
             id="shortcuts-toggle"
             pressed={topSitesEnabled || null}
             onToggle={this.onPreferenceSelect}
             data-preference="feeds.topsites"
             data-eventSource="TOP_SITES"
             data-l10n-id="newtab-custom-shortcuts-toggle"
           >
             <div slot="nested">
               <div className="more-info-top-wrapper">
                 <div
                   className="more-information"
                   ref={this.topSitesDrawerRef}
                 >
                   <select
                     id="row-selector"
                     className="selector"
                     name="row-count"
                     data-preference="topSitesRows"
                     value={topSitesRowsCount}
                     onChange={this.onPreferenceSelect}
                     disabled={!topSitesEnabled}
                     aria-labelledby="custom-shortcuts-title"
                   >
                     <option
                       value="1"
                       data-l10n-id="newtab-custom-row-selector"
                       data-l10n-args='{"num": 1}'
                     />
                     <option
                       value="2"
                       data-l10n-id="newtab-custom-row-selector"
                       data-l10n-args='{"num": 2}'
                     />
                     <option
                       value="3"
                       data-l10n-id="newtab-custom-row-selector"
                       data-l10n-args='{"num": 3}'
                     />
                     <option
                       value="4"
                       data-l10n-id="newtab-custom-row-selector"
                       data-l10n-args='{"num": 4}'
                     />
                   </select>
                 </div>
               </div>
             </div>
           </moz-toggle>
         </div>

         {pocketRegion && (
           <div id="pocket-section" className="section">
             <moz-toggle
               id="pocket-toggle"
               pressed={pocketEnabled || null}
               onToggle={this.onPreferenceSelect}
               aria-describedby="custom-pocket-subtitle"
               data-preference="feeds.section.topstories"
               data-eventSource="TOP_STORIES"
               {...(mayHaveInferredPersonalization
                 ? {
                     "data-l10n-id":
                       "newtab-custom-stories-personalized-toggle",
                   }
                 : {
                     "data-l10n-id": "newtab-custom-stories-toggle",
                   })}
             >
               <div slot="nested">
                 {(mayHaveInferredPersonalization || mayHaveTopicSections) && (
                   <div className="more-info-pocket-wrapper">
                     <div
                       className="more-information"
                       ref={this.pocketDrawerRef}
                     >
                       {mayHaveInferredPersonalization && (
                         <div className="check-wrapper" role="presentation">
                           <input
                             id="inferred-personalization"
                             className="customize-menu-checkbox"
                             disabled={!pocketEnabled}
                             checked={showInferredPersonalizationEnabled}
                             type="checkbox"
                             onChange={this.onPreferenceSelect}
                             data-preference="discoverystream.sections.personalization.inferred.user.enabled"
                             data-eventSource="INFERRED_PERSONALIZATION"
                           />
                           <label
                             className="customize-menu-checkbox-label"
                             htmlFor="inferred-personalization"
                             data-l10n-id="newtab-custom-stories-personalized-checkbox-label"
                           />
                         </div>
                       )}
                       {mayHaveTopicSections && (
                         <SectionsMgmtPanel
                           exitEventFired={exitEventFired}
                           pocketEnabled={pocketEnabled}
                           onSubpanelToggle={onSubpanelToggle}
                           togglePanel={toggleSectionsMgmtPanel}
                           showPanel={showSectionsMgmtPanel}
                         />
                       )}
                     </div>
                   </div>
                 )}
               </div>
             </moz-toggle>
           </div>
         )}
       </div>

       <span className="divider" role="separator"></span>

       <div>
         <button
           id="settings-link"
           className="external-link"
           onClick={openPreferences}
           data-l10n-id="newtab-custom-settings"
         />
       </div>
     </div>
   );
 }
}