IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web:Studio:Removed Consumer, added checkInnerWidth call when mounting, added sectionWidth prop in LanguageAndTimeZone component.

Browse Source
This commit is contained in:
Vlada Gazizova 2022-03-16 17:23:33 +03:00
parent 4a2be198cd
commit 5be408a827
1 changed files with 77 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,7 +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) => {
return { key: timezone.id, label: timezone.displayName };
@ -119,7 +119,7 @@ class LanguageAndTimeZone extends React.Component {
getPortalTimezones,
} = this.props;
const { timezones, isLoadedData } = this.state;
this.checkInnerWidth();
window.addEventListener("resize", this.checkInnerWidth);
if (!timezones.length) {
@ -315,7 +315,7 @@ class LanguageAndTimeZone extends React.Component {
};
render() {
const { t, theme, cultureNames } = this.props;
const { t, theme, cultureNames, sectionWidth } = this.props;
const {
isLoadedData,
language,
@ -330,88 +330,81 @@ class LanguageAndTimeZone extends React.Component {
<LanguageTimeSettingsTooltip theme={theme} t={t} />
);
return (
<Consumer>
{(context) =>
!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>
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>
<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}
/>
</StyledComponent>
)
}
</Consumer>
<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>
);
}
}