Client: PortalSettings: useIsSmallWindow
This commit is contained in:
parent
8c3a9bc82a
commit
94ace69c1f
@ -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;
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user