Web:Studio:Added Consumer, renaming the checkInnerWidth function to checkSectionWidth, adding to the state sectionWidth.

web/ASC.Web.Client/src/components/pages/Settings/categories/common/customization.js

@@ -80,14 +80,14 @@ const Customization = ({ t }) => {
               "Settings:CustomizationDescription"
             )}`}</div>
             <div className="category-item-wrapper">
-              <LanguageAndTimeZone sectionWidth={context.sectionWidth} />
+              <LanguageAndTimeZone />
+            </div>
+            {/* <div className="category-item-wrapper">
+              <CustomTitles />
             </div>
             <div className="category-item-wrapper">
-              <CustomTitles sectionWidth={context.sectionWidth} />
-            </div>
-            <div className="category-item-wrapper">
-              <PortalRenaming sectionWidth={context.sectionWidth} />
-            </div>
+              <PortalRenaming />
+            </div> */}
           </StyledComponent>
         )
       }

web/ASC.Web.Client/src/components/pages/Settings/categories/common/language-and-time-zone.js

@@ -20,6 +20,7 @@ import { AppServerConfig } from "@appserver/common/constants";
 import config from "../../../../../../package.json";
 import history from "@appserver/common/history";
 import { isMobile } from "react-device-detect";
+import { Consumer } from "@appserver/components/utils/context";
 
 const mapTimezonesToArray = (timezones) => {
   return timezones.map((timezone) => {
@@ -108,6 +109,7 @@ class LanguageAndTimeZone extends React.Component {
       isLoadingGreetingRestore: false,
       hasChanged: false,
       showReminder: false,
+      sectionWidth: null,
     };
   }
 
@@ -119,8 +121,8 @@ class LanguageAndTimeZone extends React.Component {
       getPortalTimezones,
     } = this.props;
     const { timezones, isLoadedData } = this.state;
-    this.checkInnerWidth();
-    window.addEventListener("resize", this.checkInnerWidth);
+
+    window.addEventListener("resize", this.checkSectionWidth);
 
     if (!timezones.length) {
       getPortalTimezones().then(() => {
@@ -199,7 +201,7 @@ class LanguageAndTimeZone extends React.Component {
   }
 
   componentWillUnmount() {
-    window.removeEventListener("resize", this.checkInnerWidth);
+    window.removeEventListener("resize", this.checkSectionWidth);
   }
 
   onLanguageSelect = (language) => {
@@ -302,8 +304,11 @@ class LanguageAndTimeZone extends React.Component {
     }
   };
 
-  checkInnerWidth = () => {
-    if (window.innerWidth > 375 && !isMobile) {
+  checkSectionWidth = (width) => {
+    if (this.state.sectionWidth === width) return;
+    this.setState({ sectionWidth: width });
+
+    if (width > 375 && !isMobile) {
       history.push(
         combineUrl(
           AppServerConfig.proxyURL,
@@ -315,7 +320,7 @@ class LanguageAndTimeZone extends React.Component {
   };
 
   render() {
-    const { t, theme, cultureNames, sectionWidth } = this.props;
+    const { t, theme, cultureNames } = this.props;
     const {
       isLoadedData,
       language,
@@ -330,81 +335,90 @@ class LanguageAndTimeZone extends React.Component {
       <LanguageTimeSettingsTooltip theme={theme} t={t} />
     );
 
-    return !isLoadedData ? (
-      <Loader className="pageLoader" type="rombs" size="40px" />
-    ) : (
-      <StyledComponent>
-        {`${sectionWidth}` > 375 && !isMobile && (
-          <div className="category-item-heading">
-            <div className="category-item-title">
-              {t("StudioTimeLanguageSettings")}
-            </div>
-            <HelpButton
-              iconName="static/images/combined.shape.svg"
-              size={12}
-              tooltipContent={tooltipLanguageTimeSettings}
-            />
-          </div>
-        )}
-        <div className="settings-block">
-          <FieldContainer
-            id="fieldContainerLanguage"
-            labelText={`${t("Common:Language")}:`}
-            isVertical={true}
-          >
-            <ComboBox
-              id="comboBoxLanguage"
-              options={cultureNames}
-              selectedOption={language}
-              onSelect={this.onLanguageSelect}
-              isDisabled={isLoading}
-              noBorder={false}
-              scaled={true}
-              scaledOptions={true}
-              dropDownMaxHeight={300}
-              className="dropdown-item-width"
-            />
-          </FieldContainer>
+    return (
+      <Consumer>
+        {(context) => {
+          this.checkSectionWidth(context.sectionWidth);
+          return !isLoadedData ? (
+            <Loader className="pageLoader" type="rombs" size="40px" />
+          ) : (
+            <StyledComponent>
+              {`${context.sectionWidth}` > 375 && !isMobile && (
+                <div className="category-item-heading">
+                  <div className="category-item-title">
+                    {t("StudioTimeLanguageSettings")}
+                  </div>
+                  <HelpButton
+                    iconName="static/images/combined.shape.svg"
+                    size={12}
+                    tooltipContent={tooltipLanguageTimeSettings}
+                  />
+                </div>
+              )}
+              <div className="settings-block">
+                <FieldContainer
+                  id="fieldContainerLanguage"
+                  labelText={`${t("Common:Language")}:`}
+                  isVertical={true}
+                >
+                  <ComboBox
+                    id="comboBoxLanguage"
+                    options={cultureNames}
+                    selectedOption={language}
+                    onSelect={this.onLanguageSelect}
+                    isDisabled={isLoading}
+                    noBorder={false}
+                    scaled={true}
+                    scaledOptions={true}
+                    dropDownMaxHeight={300}
+                    className="dropdown-item-width"
+                  />
+                </FieldContainer>
 
-          <div className="field-container-flex">
-            <div className="field-title">{`${t("Automatic time zone")}`}</div>
-            <ToggleButton
-              className="toggle"
-              onChange={() => toastr.info(<>Not implemented</>)}
-            />
-          </div>
-          <FieldContainer
-            id="fieldContainerTimezone"
-            labelText={`${t("TimeZone")}:`}
-            isVertical={true}
-          >
-            <ComboBox
-              id="comboBoxTimezone"
-              options={timezones}
-              selectedOption={timezone}
-              onSelect={this.onTimezoneSelect}
-              isDisabled={isLoading}
-              noBorder={false}
-              scaled={true}
-              scaledOptions={true}
-              dropDownMaxHeight={300}
-              className="dropdown-item-width"
-            />
-          </FieldContainer>
-        </div>
-        <SaveCancelButtons
-          className="save-cancel-buttons"
-          onSaveClick={this.onSaveLngTZSettings}
-          onCancelClick={this.onCancelClick}
-          showReminder={showReminder}
-          reminderTest={t("YouHaveUnsavedChanges")}
-          saveButtonLabel={t("Common:SaveButton")}
-          cancelButtonLabel={t("Common:CancelButton")}
-          displaySettings={true}
-          hasChanged={hasChanged}
-          sectionWidth={sectionWidth}
-        />
-      </StyledComponent>
+                <div className="field-container-flex">
+                  <div className="field-title">{`${t(
+                    "Automatic time zone"
+                  )}`}</div>
+                  <ToggleButton
+                    className="toggle"
+                    onChange={() => toastr.info(<>Not implemented</>)}
+                  />
+                </div>
+                <FieldContainer
+                  id="fieldContainerTimezone"
+                  labelText={`${t("TimeZone")}:`}
+                  isVertical={true}
+                >
+                  <ComboBox
+                    id="comboBoxTimezone"
+                    options={timezones}
+                    selectedOption={timezone}
+                    onSelect={this.onTimezoneSelect}
+                    isDisabled={isLoading}
+                    noBorder={false}
+                    scaled={true}
+                    scaledOptions={true}
+                    dropDownMaxHeight={300}
+                    className="dropdown-item-width"
+                  />
+                </FieldContainer>
+              </div>
+              <SaveCancelButtons
+                className="save-cancel-buttons"
+                onSaveClick={this.onSaveLngTZSettings}
+                onCancelClick={this.onCancelClick}
+                showReminder={showReminder}
+                reminderTest={t("YouHaveUnsavedChanges")}
+                saveButtonLabel={t("Common:SaveButton")}
+                cancelButtonLabel={t("Common:CancelButton")}
+                displaySettings={true}
+                hasChanged={hasChanged}
+                sectionWidth={context.sectionWidth}
+              />
+            </StyledComponent>
+          );
+        }}
+      </Consumer>
     );
   }
 }