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

Merge branch 'release/v1.0.0' of https://github.com/ONLYOFFICE/DocSpace into release/v1.0.0

Browse Source
This commit is contained in:
Tatiana Lopaeva 2023-03-15 13:09:37 +03:00
commit 03a56fe6ae
9 changed files with 208 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
packages/client/src/HOCs/withPeopleLoader.js
View File

@ -11,8 +11,12 @@ const withLoader = (WrappedComponent) => (Loader) => {
firstLoad,
profileLoaded,
setIsBurgerLoading,
isLoadedProfileSectionBody,
setIsLoadedProfileSectionBody,
} = props;
const [inLoad, setInLoad] = useState(true);
const isProfileViewLoader = Loader.props.isProfileView;
const isProfileFooterLoader = Loader.props.isProfileFooter;
const cleanTimer = () => {
loadTimeout && clearTimeout(loadTimeout);
@ -45,7 +49,30 @@ const withLoader = (WrappedComponent) => (Loader) => {
}
}, [isLoaded]);
return firstLoad || !isLoaded || inLoad || !tReady || !profileLoaded ? (
useEffect(() => {
if (!isProfileViewLoader) return;
if (!(firstLoad || !isLoaded || inLoad || !tReady || !profileLoaded)) {
setIsLoadedProfileSectionBody(true);
} else {
setIsLoadedProfileSectionBody(false);
}
}, [
firstLoad,
isLoaded,
inLoad,
tReady,
profileLoaded,
setIsLoadedProfileSectionBody,
isProfileViewLoader,
]);
return firstLoad ||
!isLoaded ||
inLoad ||
!tReady ||
!profileLoaded ||
(isProfileFooterLoader && !isLoadedProfileSectionBody) ? (
Loader
) : (
<WrappedComponent {...props} />
@ -54,7 +81,11 @@ const withLoader = (WrappedComponent) => (Loader) => {
return inject(({ auth, peopleStore }) => {
const { isLoaded, settingsStore } = auth;
const { loadingStore } = peopleStore;
const {
loadingStore,
isLoadedProfileSectionBody,
setIsLoadedProfileSectionBody,
} = peopleStore;
const { isLoading, firstLoad, profileLoaded } = loadingStore;
const { setIsBurgerLoading } = settingsStore;
return {
@ -63,6 +94,8 @@ const withLoader = (WrappedComponent) => (Loader) => {
firstLoad,
profileLoaded,
setIsBurgerLoading,
isLoadedProfileSectionBody,
setIsLoadedProfileSectionBody,
};
})(observer(withLoader));
};

6
packages/client/src/pages/Profile/Section/Body/index.js
View File

@ -93,7 +93,11 @@ export default withRouter(
"BackupCodesDialog",
"DeleteSelfProfileDialog",
"Notifications",
])(withPeopleLoader(SectionBodyContent)(<Loaders.ProfileView />))
])(
withPeopleLoader(SectionBodyContent)(
<Loaders.ProfileView isProfileView />
)
)
)
)
);

12
packages/client/src/pages/Profile/Section/Footer/index.js
View File

@ -11,6 +11,8 @@ import Link from "@docspace/components/link";
import Box from "@docspace/components/box";
import HelpButton from "@docspace/components/help-button";
import toastr from "@docspace/components/toast/toastr";
import Loaders from "@docspace/common/components/Loaders";
import withPeopleLoader from "../../../../HOCs/withPeopleLoader";
import {
LogoutConnectionDialog,
@ -263,4 +265,12 @@ export default inject(({ auth, setup }) => {
setLogoutAllVisible,
removeAllExecptThis,
};
})(observer(withTranslation(["Profile", "Common"])(ActiveSessions)));
})(
observer(
withTranslation(["Profile", "Common"])(
withPeopleLoader(ActiveSessions)(
<Loaders.ProfileFooter isProfileFooter />
)
)
)
);

5
packages/client/src/store/PeopleStore.js
View File

@ -49,6 +49,7 @@ class PeopleStore {
accessRightsStore = null;
isInit = false;
viewAs = isMobileRDD ? "row" : "table";
isLoadedProfileSectionBody = false;
constructor(authStore, setupStore, accessRightsStore, dialogsStore) {
this.authStore = authStore;
@ -298,6 +299,10 @@ class PeopleStore {
setViewAs = (viewAs) => {
this.viewAs = viewAs;
};
setIsLoadedProfileSectionBody = (isLoadedProfileSectionBody) => {
this.isLoadedProfileSectionBody = isLoadedProfileSectionBody;
};
}
export default PeopleStore;

124
packages/common/components/Loaders/ProfileFooterLoader/ProfileFooterLoader.js Normal file
View File

@ -0,0 +1,124 @@
import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import { FooterBlock } from "./StyledProfileFooter";
import RectangleLoader from "../RectangleLoader";
import Loaders from "@docspace/common/components/Loaders";
import { size } from "@docspace/components/utils/device";
const ProfileFooterLoader = ({ id, className, style, ...rest }) => {
const {
title,
borderRadius,
backgroundColor,
foregroundColor,
backgroundOpacity,
foregroundOpacity,
speed,
animate,
} = rest;
const [isDesktop, setIsDesktop] = useState(false);
useEffect(() => {
checkWidth();
window.addEventListener("resize", checkWidth);
return () => window.removeEventListener("resize", checkWidth);
}, []);
const checkWidth = () => {
window.innerWidth <= size.tablet ? setIsDesktop(false) : setIsDesktop(true);
};
return (
<div id={id} className={className} style={style}>
<FooterBlock>
<div className="header">
<RectangleLoader
title={title}
width="129"
height="22"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
title={title}
width="213"
height="20"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
</div>
{isDesktop && (
<div className="table-header">
<RectangleLoader
title={title}
width="51"
height="16"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
title={title}
width="60"
height="16"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
title={title}
width="62"
height="16"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
</div>
)}
<Loaders.Rows count={3} />
</FooterBlock>
</div>
);
};
ProfileFooterLoader.propTypes = {
id: PropTypes.string,
className: PropTypes.string,
style: PropTypes.object,
};
ProfileFooterLoader.defaultProps = {
id: undefined,
className: undefined,
style: undefined,
};
export default ProfileFooterLoader;

19
packages/common/components/Loaders/ProfileFooterLoader/StyledProfileFooter.js Normal file
View File

@ -0,0 +1,19 @@
import styled from "styled-components";
const FooterBlock = styled.div`
.header {
display: flex;
flex-direction: column;
gap: 8px;
padding-bottom: 14px;
}
.table-header {
display: flex;
justify-content: space-between;
max-width: 787px;
padding-bottom: 26px;
}
`;
export { FooterBlock };

1
packages/common/components/Loaders/ProfileFooterLoader/index.js Normal file
View File

@ -0,0 +1 @@
export default from "./ProfileFooterLoader";

2
packages/common/components/Loaders/index.js
View File

@ -15,6 +15,7 @@ import Text from "./TextLoader";
import Filter from "./FilterLoader";
import FilterBlock from "./FilterBlockLoader";
import ProfileView from "./ProfileViewLoader";
import ProfileFooter from "./ProfileFooterLoader";
import Notifications from "./NotificationsLoader";
import Group from "./GroupLoader";
@ -61,6 +62,7 @@ export default {
Filter,
FilterBlock,
ProfileView,
ProfileFooter,
Group,
HistoryRows,

6
packages/common/components/Section/sub-components/section-footer.js
View File

@ -1,8 +1,14 @@
import React from "react";
import styled from "styled-components";
import { smallTablet } from "@docspace/components/utils/device";
import { isMobileOnly } from "react-device-detect";
const StyledSectionFooter = styled.div`
margin-top: 40px;
@media ${smallTablet}, ${isMobileOnly} {
margin-top: 32px;
}
`;
const SectionFooter = ({ children }) => {