Web: Added new SettingsDSConnect loader
This commit is contained in:
parent
8371330d3c
commit
c91a2dfc36
@ -12,6 +12,7 @@ import {
|
||||
Text,
|
||||
} from "@docspace/components";
|
||||
import toastr from "@docspace/components/toast/toastr";
|
||||
import Loaders from "@docspace/common/components/Loaders";
|
||||
|
||||
const URL_REGEX = /^https?:\/\/[-a-zA-Z0-9@:%._\+~#=]{1,256}\/?$/;
|
||||
const EDITOR_URL_PLACEHOLDER = `${window.location.protocol}//<editors-dns-name>/`;
|
||||
@ -22,8 +23,9 @@ const DocumentService = ({
|
||||
currentColorScheme,
|
||||
integrationSettingsUrl,
|
||||
}) => {
|
||||
const { t } = useTranslation(["Settings", "Common"]);
|
||||
const { t, ready } = useTranslation(["Settings", "Common"]);
|
||||
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isSaveLoading, setSaveIsLoading] = useState(false);
|
||||
const [isResetLoading, setResetIsLoading] = useState(false);
|
||||
|
||||
@ -40,6 +42,7 @@ const DocumentService = ({
|
||||
const [initInternalUrl, setInitInternalUrl] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
setIsLoading(true);
|
||||
getDocumentServiceLocation()
|
||||
.then((result) => {
|
||||
setIsDefaultSettiings(result?.isDefault || false);
|
||||
@ -52,7 +55,8 @@ const DocumentService = ({
|
||||
setInitInternalUrl(result?.docServiceUrlInternal);
|
||||
setInitDocServiceUrl(result?.docServiceUrl);
|
||||
})
|
||||
.catch((error) => toastr.error(error));
|
||||
.catch((error) => toastr.error(error))
|
||||
.finally(() => setIsLoading(false));
|
||||
}, []);
|
||||
|
||||
const onChangeDocServiceUrl = (e) => {
|
||||
@ -127,6 +131,8 @@ const DocumentService = ({
|
||||
internalUrl == initInternalUrl &&
|
||||
portalUrl == initPortalUrl;
|
||||
|
||||
if (isLoading || !ready) return <Loaders.SettingsDSConnect />;
|
||||
|
||||
return (
|
||||
<Styled.Location>
|
||||
<Styled.LocationHeader>
|
||||
|
@ -0,0 +1,190 @@
|
||||
import React from "react";
|
||||
import { LoaderStyle } from "../../../constants";
|
||||
import RectangleLoader from "../RectangleLoader";
|
||||
import { StyledSMTPContent } from "./StyledComponent";
|
||||
const speed = 2;
|
||||
|
||||
const SettingsDSConnect = () => {
|
||||
const firstComponent = (
|
||||
<div>
|
||||
<div>
|
||||
<RectangleLoader
|
||||
height="22"
|
||||
width="56"
|
||||
backgroundColor={LoaderStyle.backgroundColor}
|
||||
foregroundColor={LoaderStyle.foregroundColor}
|
||||
backgroundOpacity={LoaderStyle.backgroundOpacity}
|
||||
foregroundOpacity={LoaderStyle.foregroundOpacity}
|
||||
speed={speed}
|
||||
animate={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<RectangleLoader
|
||||
className="rectangle-loader-2"
|
||||
height="46"
|
||||
width="348"
|
||||
backgroundColor={LoaderStyle.backgroundColor}
|
||||
foregroundColor={LoaderStyle.foregroundColor}
|
||||
backgroundOpacity={LoaderStyle.backgroundOpacity}
|
||||
foregroundOpacity={LoaderStyle.foregroundOpacity}
|
||||
speed={speed}
|
||||
animate={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
const secondComponent = (
|
||||
<div>
|
||||
<RectangleLoader
|
||||
height="20"
|
||||
width="101"
|
||||
backgroundColor={LoaderStyle.backgroundColor}
|
||||
foregroundColor={LoaderStyle.foregroundColor}
|
||||
backgroundOpacity={LoaderStyle.backgroundOpacity}
|
||||
foregroundOpacity={LoaderStyle.foregroundOpacity}
|
||||
speed={speed}
|
||||
animate={true}
|
||||
/>
|
||||
<RectangleLoader
|
||||
className="rectangle-loader-2"
|
||||
height="32"
|
||||
backgroundColor={LoaderStyle.backgroundColor}
|
||||
foregroundColor={LoaderStyle.foregroundColor}
|
||||
backgroundOpacity={LoaderStyle.backgroundOpacity}
|
||||
foregroundOpacity={LoaderStyle.foregroundOpacity}
|
||||
speed={speed}
|
||||
animate={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
const thirdComponent = (
|
||||
<div>
|
||||
<RectangleLoader
|
||||
height="20"
|
||||
width="138"
|
||||
backgroundColor={LoaderStyle.backgroundColor}
|
||||
foregroundColor={LoaderStyle.foregroundColor}
|
||||
backgroundOpacity={LoaderStyle.backgroundOpacity}
|
||||
foregroundOpacity={LoaderStyle.foregroundOpacity}
|
||||
speed={speed}
|
||||
animate={true}
|
||||
/>
|
||||
<RectangleLoader
|
||||
className="rectangle-loader-2"
|
||||
height="32"
|
||||
backgroundColor={LoaderStyle.backgroundColor}
|
||||
foregroundColor={LoaderStyle.foregroundColor}
|
||||
backgroundOpacity={LoaderStyle.backgroundOpacity}
|
||||
foregroundOpacity={LoaderStyle.foregroundOpacity}
|
||||
speed={speed}
|
||||
animate={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
const checkboxComponent = (
|
||||
<div className="rectangle-loader_checkbox">
|
||||
<RectangleLoader
|
||||
height="16"
|
||||
width="16"
|
||||
backgroundColor={LoaderStyle.backgroundColor}
|
||||
foregroundColor={LoaderStyle.foregroundColor}
|
||||
backgroundOpacity={LoaderStyle.backgroundOpacity}
|
||||
foregroundOpacity={LoaderStyle.foregroundOpacity}
|
||||
speed={speed}
|
||||
animate={true}
|
||||
/>
|
||||
<RectangleLoader
|
||||
height="22"
|
||||
width="101"
|
||||
backgroundColor={LoaderStyle.backgroundColor}
|
||||
foregroundColor={LoaderStyle.foregroundColor}
|
||||
backgroundOpacity={LoaderStyle.backgroundOpacity}
|
||||
foregroundOpacity={LoaderStyle.foregroundOpacity}
|
||||
speed={speed}
|
||||
animate={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
const secondCheckboxComponent = (
|
||||
<div className="rectangle-loader_checkbox">
|
||||
<RectangleLoader
|
||||
height="16"
|
||||
width="16"
|
||||
backgroundColor={LoaderStyle.backgroundColor}
|
||||
foregroundColor={LoaderStyle.foregroundColor}
|
||||
backgroundOpacity={LoaderStyle.backgroundOpacity}
|
||||
foregroundOpacity={LoaderStyle.foregroundOpacity}
|
||||
speed={speed}
|
||||
animate={true}
|
||||
/>
|
||||
<RectangleLoader
|
||||
height="20"
|
||||
width="70"
|
||||
backgroundColor={LoaderStyle.backgroundColor}
|
||||
foregroundColor={LoaderStyle.foregroundColor}
|
||||
backgroundOpacity={LoaderStyle.backgroundOpacity}
|
||||
foregroundOpacity={LoaderStyle.foregroundOpacity}
|
||||
speed={speed}
|
||||
animate={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
const buttonsComponent = (
|
||||
<div className="rectangle-loader_buttons">
|
||||
<RectangleLoader
|
||||
height="32"
|
||||
backgroundColor={LoaderStyle.backgroundColor}
|
||||
foregroundColor={LoaderStyle.foregroundColor}
|
||||
backgroundOpacity={LoaderStyle.backgroundOpacity}
|
||||
foregroundOpacity={LoaderStyle.foregroundOpacity}
|
||||
speed={speed}
|
||||
animate={true}
|
||||
/>
|
||||
<RectangleLoader
|
||||
height="32"
|
||||
backgroundColor={LoaderStyle.backgroundColor}
|
||||
foregroundColor={LoaderStyle.foregroundColor}
|
||||
backgroundOpacity={LoaderStyle.backgroundOpacity}
|
||||
foregroundOpacity={LoaderStyle.foregroundOpacity}
|
||||
speed={speed}
|
||||
animate={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<StyledSMTPContent>
|
||||
<RectangleLoader
|
||||
className="rectangle-loader_title"
|
||||
height="22"
|
||||
width="128"
|
||||
backgroundColor={LoaderStyle.backgroundColor}
|
||||
foregroundColor={LoaderStyle.foregroundColor}
|
||||
backgroundOpacity={LoaderStyle.backgroundOpacity}
|
||||
foregroundOpacity={LoaderStyle.foregroundOpacity}
|
||||
speed={speed}
|
||||
animate={true}
|
||||
/>
|
||||
|
||||
<RectangleLoader
|
||||
className="rectangle-loader_description"
|
||||
height="40"
|
||||
backgroundColor={LoaderStyle.backgroundColor}
|
||||
foregroundColor={LoaderStyle.foregroundColor}
|
||||
backgroundOpacity={LoaderStyle.backgroundOpacity}
|
||||
foregroundOpacity={LoaderStyle.foregroundOpacity}
|
||||
speed={speed}
|
||||
animate={true}
|
||||
/>
|
||||
|
||||
{firstComponent}
|
||||
{firstComponent}
|
||||
{firstComponent}
|
||||
|
||||
{buttonsComponent}
|
||||
</StyledSMTPContent>
|
||||
);
|
||||
};
|
||||
|
||||
export default SettingsDSConnect;
|
@ -49,6 +49,7 @@ import SettingsHeader from "./SettingsLoader/SettingsHeaderLoader";
|
||||
import SettingsAdmin from "./SettingsLoader/SettingsAdminLoader";
|
||||
import SettingsCommon from "./SettingsLoader/SettingsCommonLoader";
|
||||
import SettingsSMTP from "./SettingsLoader/SettingsSMTPLoader";
|
||||
import SettingsDSConnect from "./SettingsLoader/SettingsDSConnectLoader";
|
||||
import EmptyContainerLoader from "./EmptyContainerLoader/EmptyContainerLoader";
|
||||
import ContextMenuLoader from "./ContextMenuLoader";
|
||||
|
||||
@ -103,6 +104,7 @@ export default {
|
||||
SettingsAdmin,
|
||||
SettingsCommon,
|
||||
SettingsSMTP,
|
||||
SettingsDSConnect,
|
||||
|
||||
EmptyContainerLoader,
|
||||
Notifications,
|
||||
|
Loading…
Reference in New Issue
Block a user