Client: PortalSettings: useIsSmallWindow

This commit is contained in:
Viktor Fomin 2023-07-28 01:54:56 +03:00
parent 8c3a9bc82a
commit 94ace69c1f
2 changed files with 16 additions and 38 deletions

View File

@ -1,12 +1,20 @@
import CheckWhiteSvgUrl from "PUBLIC_DIR/images/check.white.svg?url";
import React, { useState, useEffect, useCallback, useMemo } from "react";
import { withTranslation } from "react-i18next";
import toastr from "@docspace/components/toast/toastr";
import { inject, observer } from "mobx-react";
import { isMobileOnly, isDesktop } from "react-device-detect";
import { ReactSVG } from "react-svg";
import hexToRgba from "hex-to-rgba";
import Button from "@docspace/components/button";
import Tooltip from "@docspace/components/tooltip";
import Text from "@docspace/components/text";
import TabContainer from "@docspace/components/tabs-container";
import toastr from "@docspace/components/toast/toastr";
import { useIsSmallWindow } from "@docspace/common/utils/useIsSmallWindow";
import Preview from "./Appearance/preview";
import { saveToSessionStorage, getFromSessionStorage } from "../../utils";
import ColorSchemeDialog from "./sub-components/colorSchemeDialog";
@ -15,15 +23,12 @@ import DropDownItem from "@docspace/components/drop-down-item";
import DropDownContainer from "@docspace/components/drop-down";
import HexColorPickerComponent from "./sub-components/hexColorPicker";
import { isMobileOnly, isDesktop } from "react-device-detect";
import Loader from "./sub-components/loaderAppearance";
import { StyledComponent, StyledTheme } from "./Appearance/StyledApperance.js";
import { ReactSVG } from "react-svg";
import BreakpointWarning from "../../../../components/BreakpointWarning/index";
import ModalDialogDelete from "./sub-components/modalDialogDelete";
import hexToRgba from "hex-to-rgba";
const Appearance = (props) => {
const {
@ -72,8 +77,6 @@ const Appearance = (props) => {
const [changeCurrentColorButtons, setChangeCurrentColorButtons] =
useState(false);
const [isSmallWindow, setIsSmallWindow] = useState(false);
const [showSaveButtonDialog, setShowSaveButtonDialog] = useState(false);
const [isEditDialog, setIsEditDialog] = useState(false);
@ -104,6 +107,8 @@ const Appearance = (props) => {
const [theme, setTheme] = useState(appearanceTheme);
const isSmallWindow = useIsSmallWindow(600);
const array_items = useMemo(
() => [
{
@ -157,15 +162,6 @@ const Appearance = (props) => {
saveToSessionStorage("selectColorId", selectThemeId);
}, [selectThemeId]);
useEffect(() => {
onCheckView();
window.addEventListener("resize", onCheckView);
return () => {
window.removeEventListener("resize", onCheckView);
};
}, []);
useEffect(() => {
if (!currentColorScheme) return;
@ -286,14 +282,6 @@ const Appearance = (props) => {
[appearanceTheme]
);
const onCheckView = () => {
if (isDesktop && window.innerWidth < 600) {
setIsSmallWindow(true);
} else {
setIsSmallWindow(false);
}
};
const onColorSelection = useCallback(
(e) => {
const theme = e.currentTarget;

View File

@ -1,9 +1,10 @@
import React, { useEffect, useState } from "react";
import { isMobile, isDesktop } from "react-device-detect";
import React, { useEffect } from "react";
import { isMobile } from "react-device-detect";
import { inject, observer } from "mobx-react";
import { useTranslation } from "react-i18next";
import Box from "@docspace/components/box";
import { useIsSmallWindow } from "@docspace/common/utils/useIsSmallWindow";
import Certificates from "./Certificates";
import FieldMapping from "./FieldMapping";
@ -23,24 +24,13 @@ const SP_METADATA = "spMetadata";
const SingleSignOn = (props) => {
const { load, serviceProviderSettings, spMetadata, isSSOAvailable } = props;
const { t } = useTranslation(["SingleSignOn", "Settings"]);
const [isSmallWindow, setIsSmallWindow] = useState(false);
const isSmallWindow = useIsSmallWindow(795);
useEffect(() => {
isSSOAvailable && load();
onCheckView();
window.addEventListener("resize", onCheckView);
return () => window.removeEventListener("resize", onCheckView);
}, []);
const onCheckView = () => {
if (isDesktop && window.innerWidth < 795) {
setIsSmallWindow(true);
} else {
setIsSmallWindow(false);
}
};
if (isSmallWindow)
return (
<BreakpointWarning