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

InfoPanelViewLoader Rewrite to typescript

Browse Source
This commit is contained in:
Akmal Isomadinov 2024-02-16 12:10:28 +05:00
parent 06f20f3452
commit 7cb8a850a3
25 changed files with 578 additions and 595 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/client/src/pages/Home/InfoPanel/Body/views/Accounts/index.js
View File

@ -3,7 +3,7 @@ import { inject, observer } from "mobx-react";
import { withTranslation } from "react-i18next";
import withLoader from "@docspace/client/src/HOCs/withLoader";
import Loaders from "@docspace/common/components/Loaders";
import InfoPanelViewLoader from "@docspace/shared/skeletons/info-panel/body";
import { Text } from "@docspace/shared/components/text";
import { ComboBox } from "@docspace/shared/components/combobox";
@ -247,9 +247,5 @@ export default inject(
"SmartBanner",
"DeleteProfileEverDialog",
"Translations",
])(
withLoader(observer(Accounts))(
<Loaders.InfoPanelViewLoader view="accounts" />,
),
),
])(withLoader(observer(Accounts))(<InfoPanelViewLoader view="accounts" />)),
);

7
packages/client/src/pages/Home/InfoPanel/Body/views/Gallery/index.js
View File

@ -4,7 +4,6 @@ import { withTranslation } from "react-i18next";
import { ReactSVG } from "react-svg";
import withLoader from "@docspace/client/src/HOCs/withLoader";
import Loaders from "@docspace/common/components/Loaders/index.js";
import { Text } from "@docspace/shared/components/text";
@ -85,7 +84,7 @@ const Gallery = ({
{parseAndFormatDate(
gallerySelected.attributes.updatedAt,
personal,
culture
culture,
)}
</Text>
</div>
@ -119,9 +118,9 @@ export default inject(({ settingsStore, filesSettingsStore, oformsStore }) => {
};
})(
withTranslation(["InfoPanel", "FormGallery", "Common", "Translations"])(
Gallery
Gallery,
// withLoader(observer(Gallery))(
// <Loaders.InfoPanelViewLoader view="gallery" />
// )
)
),
);

8
packages/client/src/pages/Home/InfoPanel/Body/views/History/index.js
View File

@ -4,7 +4,7 @@ import { withTranslation } from "react-i18next";
import { StyledHistoryList, StyledHistorySubtitle } from "../../styles/history";
import Loaders from "@docspace/common/components/Loaders";
import InfoPanelViewLoader from "@docspace/shared/skeletons/info-panel/body";
import { parseHistory } from "./../../helpers/HistoryHelper";
import HistoryBlock from "./HistoryBlock";
import NoHistory from "../NoItem/NoHistory";
@ -45,7 +45,7 @@ const History = ({
module,
item.id,
abortControllerRef.current?.signal,
item?.requestToken
item?.requestToken,
)
.then((data) => {
if (isMount.current)
@ -74,7 +74,7 @@ const History = ({
};
}, []);
if (!selectionHistory) return <Loaders.InfoPanelViewLoader view="history" />;
if (!selectionHistory) return <InfoPanelViewLoader view="history" />;
if (!selectionHistory?.length) return <NoHistory t={t} />;
return (
@ -141,5 +141,5 @@ export default inject(
isVisitor,
isCollaborator,
};
}
},
)(withTranslation(["InfoPanel", "Common", "Translations"])(observer(History)));

20
packages/client/src/pages/Home/InfoPanel/Body/views/Members/index.js
View File

@ -5,7 +5,7 @@ import { toastr } from "@docspace/shared/components/toast";
import { RoomsType, ShareAccessRights } from "@docspace/shared/enums";
import { LINKS_LIMIT_COUNT } from "@docspace/shared/constants";
import Loaders from "@docspace/common/components/Loaders";
import InfoPanelViewLoader from "@docspace/shared/skeletons/info-panel/body";
import MembersHelper from "../../helpers/MembersHelper";
import MembersList from "./sub-components/MembersList";
import User from "./User";
@ -72,11 +72,11 @@ const Members = ({
setInfoPanelMembers(newMembers);
};
if (membersIsLoading) return <Loaders.InfoPanelViewLoader view="members" />;
if (membersIsLoading) return <InfoPanelViewLoader view="members" />;
else if (!infoPanelMembers) return <></>;
const [currentMember] = infoPanelMembers.administrators.filter(
(member) => member.id === selfId
(member) => member.id === selfId,
);
const { administrators, users, expected } = infoPanelMembers;
@ -116,7 +116,7 @@ const Members = ({
<div
data-tooltip-id="emailTooltip"
data-tooltip-content={t(
"Files:MaximumNumberOfExternalLinksCreated"
"Files:MaximumNumberOfExternalLinksCreated",
)}
>
<IconButton
@ -140,7 +140,7 @@ const Members = ({
)}
</div>
)}
</LinksBlock>
</LinksBlock>,
);
}
@ -150,7 +150,7 @@ const Members = ({
key="general-link"
link={primaryLink}
setIsScrollLocked={setIsScrollLocked}
/>
/>,
);
}
@ -161,7 +161,7 @@ const Members = ({
link={link}
key={link?.sharedTo?.id}
setIsScrollLocked={setIsScrollLocked}
/>
/>,
);
});
} else if (!isArchiveFolder && !primaryLink) {
@ -182,7 +182,7 @@ const Members = ({
>
{t("Files:CreateNewLink")}
</Link>
</StyledLinkRow>
</StyledLinkRow>,
);
}
}
@ -290,7 +290,7 @@ export default inject(
fetchMembers,
membersIsLoading,
};
}
},
)(
withTranslation([
"InfoPanel",
@ -300,5 +300,5 @@ export default inject(
"PeopleTranslations",
"Settings",
"CreateEditRoomDialog",
])(observer(Members))
])(observer(Members)),
);

3
packages/client/src/pages/Home/InfoPanel/Body/views/NoItem/index.js
View File

@ -2,7 +2,6 @@ import React from "react";
import { withTranslation } from "react-i18next";
import withLoader from "@docspace/client/src/HOCs/withLoader";
import Loaders from "@docspace/common/components/Loaders/index.js";
import NoGalleryItem from "./NoGalleryItem";
import NoRoomItem from "./NoRoomItem";
@ -18,6 +17,6 @@ const NoItem = ({ t, isAccounts, isGallery, isRooms, isFiles }) => {
};
export default withTranslation(["InfoPanel", "FormGallery"])(
NoItem
NoItem,
// withLoader(NoItem)(<Loaders.InfoPanelViewLoader view="noItem" />)
);

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

@ -26,7 +26,6 @@ import PaymentsLoader from "./PaymentsLoader";
import SelectorBreadCrumbsLoader from "./SelectorBreadCrumbsLoader";
import PaymentsStandaloneLoader from "./PaymentsStandaloneLoader";
import InfoPanelViewLoader from "./InfoPanelBodyLoader/InfoPanelViewLoader";
import InfoPanelHeaderLoader from "./InfoPanelHeaderLoader";
import SettingsHeader from "./SettingsLoader/SettingsHeaderLoader";
@ -68,7 +67,6 @@ export default {
PaymentsStandaloneLoader,
InfoPanelHeaderLoader,
InfoPanelViewLoader,
SettingsHeader,
SettingsAdmin,

51
packages/shared/skeletons/info-panel/body/body.constant.ts Normal file
View File

@ -0,0 +1,51 @@
export const propertyDimensions = [
{
titleKey: 0,
contentKey: 1,
propertyTitle: "50px",
propertyContent: "39px",
},
{
titleKey: 2,
contentKey: 3,
propertyTitle: "29px",
propertyContent: "64px",
},
{
titleKey: 4,
contentKey: 5,
propertyTitle: "38px",
propertyContent: "28px",
},
{
titleKey: 6,
contentKey: 7,
propertyTitle: "36px",
propertyContent: "120px",
},
{
titleKey: 8,
contentKey: 9,
propertyTitle: "0px",
propertyContent: "160px",
},
];
export const propertyDetailsDimensions = [
{ propertyTitle: "41px", propertyContent: "160px" },
{ propertyTitle: "52px", propertyContent: "120px" },
{ propertyTitle: "29px", propertyContent: "89px" },
{ propertyTitle: "84px", propertyContent: "23px" },
{ propertyTitle: "24px", propertyContent: "47px" },
{ propertyTitle: "86px", propertyContent: "127px" },
{ propertyTitle: "101px", propertyContent: "160px" },
{ propertyTitle: "82px", propertyContent: "127px" },
{ propertyTitle: "52px", propertyContent: "32px" },
{ propertyTitle: "67px", propertyContent: "43px" },
];
export const propertyGalleryDimensions = [
{ propertyTitle: "100px", propertyContent: "160px" },
{ propertyTitle: "52px", propertyContent: "50px" },
{ propertyTitle: "68px", propertyContent: "35px" },
];

224
packages/shared/skeletons/info-panel/body/body.styled.ts Normal file
View File

@ -0,0 +1,224 @@
import styled from "styled-components";
import { Base } from "@docspace/shared/themes";
export const StyledAccountsLoader = styled.div`
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
`;
export const StyledSubtitleLoader = styled.div`
width: 100%;
padding: 24px 0 24px 0;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
`;
export const StyledProperty = styled.div`
width: 100%;
display: grid;
grid-template-columns: 108px 1fr;
grid-column-gap: 24px;
grid-row-gap: 8px;
.property-content {
max-width: 100%;
margin: auto 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
`;
export const StyledDetailsLoader = styled.div`
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
`;
export const StyledDetailsSubtitleLoader = styled.div`
width: 100%;
padding: 24px 0 24px 0;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
`;
export const StyledDetailsProperty = styled.div`
width: 100%;
display: grid;
grid-template-columns: 101px 1fr;
grid-column-gap: 24px;
grid-row-gap: 8px;
.property-content {
max-width: 100%;
margin: auto 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
`;
export const StyledGalleryLoader = styled.div`
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
.thumbnail {
}
`;
export const StyledGallerySubtitleLoader = styled.div`
width: 100%;
padding: 24px 0 24px 0;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
`;
export const StyledGalleryProperty = styled.div`
width: 100%;
display: grid;
grid-template-columns: 101px 1fr;
grid-column-gap: 24px;
grid-row-gap: 8px;
.property-content {
max-width: 100%;
margin: auto 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
`;
export const StyledHistoryLoader = styled.div`
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
`;
export const StyledHistorySubtitleLoader = styled.div`
width: 100%;
padding: 8px 0 12px 0;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
`;
export const StyledHistoryBlockLoader = styled.div`
width: 100%;
height: 70px;
display: flex;
align-items: center;
border-bottom: ${(props) => `solid 1px ${props.theme.infoPanel.borderColor}`};
.content {
width: 100%;
height: 38px;
display: flex;
flex-direction: row;
gap: 8px;
.avatar {
min-height: 32px;
min-width: 32px;
}
.message {
display: flex;
flex-direction: column;
gap: 6px;
}
.date {
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-right: auto;`
: `margin-left: auto;`}
}
}
`;
StyledHistoryBlockLoader.defaultProps = { theme: Base };
export const StyledMembersLoader = styled.div`
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
`;
export const StyledMemberSubtitleLoader = styled.div`
width: 100%;
padding: 8px 0 12px 0;
.pending_users {
padding-top: 20px;
}
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
`;
export const StyledMemberLoader = styled.div`
width: 100%;
height: 48px;
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
gap: 8px;
.avatar {
min-height: 32px;
min-width: 32px;
}
.role-selector {
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-right: auto;`
: `margin-left: auto;`}
}
`;
export const StyledNoItemLoader = styled.div`
width: 100%;
margin: 80px 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 32px;
`;
export const StyledSeveralItemsLoader = styled.div`
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;

10
packages/shared/skeletons/info-panel/body/body.types.ts Normal file
View File

@ -0,0 +1,10 @@
export interface InfoPanelViewLoaderProps {
view:
| "members"
| "history"
| "details"
| "gallery"
| "accounts"
| "noItem"
| "severalItems";
}

1
packages/shared/skeletons/info-panel/body/index.js
View File

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

4
packages/shared/skeletons/info-panel/body/InfoPanelViewLoader.js → packages/shared/skeletons/info-panel/body/index.tsx
View File

@ -7,7 +7,9 @@ import GalleryLoader from "./views/GalleryLoader";
import NoItemLoader from "./views/NoItemLoader";
import SeveralItemsLoader from "./views/SeveralItemsLoader";
const InfoPanelViewLoader = ({ view }) => {
import type { InfoPanelViewLoaderProps } from "./body.types";
const InfoPanelViewLoader = ({ view }: InfoPanelViewLoaderProps) => {
switch (view) {
case "members":
return <MembersLoader />;

106
packages/shared/skeletons/info-panel/body/views/AccountsLoader.js
View File

@ -1,106 +0,0 @@
import React from "react";
import styled from "styled-components";
import { RectangleSkeleton } from "@docspace/shared/skeletons";
const StyledAccountsLoader = styled.div`
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
`;
const StyledSubtitleLoader = styled.div`
width: 100%;
padding: 24px 0 24px 0;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
`;
const StyledProperty = styled.div`
width: 100%;
display: grid;
grid-template-columns: 108px 1fr;
grid-column-gap: 24px;
grid-row-gap: 8px;
.property-content {
max-width: 100%;
margin: auto 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
`;
const propertyDimensions = [
{
titleKey: 0,
contentKey: 1,
propertyTitle: "50px",
propertyContent: "39px",
},
{
titleKey: 2,
contentKey: 3,
propertyTitle: "29px",
propertyContent: "64px",
},
{
titleKey: 4,
contentKey: 5,
propertyTitle: "38px",
propertyContent: "28px",
},
{
titleKey: 6,
contentKey: 7,
propertyTitle: "36px",
propertyContent: "120px",
},
{
titleKey: 8,
contentKey: 9,
propertyTitle: "0px",
propertyContent: "160px",
},
];
const AccountsLoader = () => {
return (
<StyledAccountsLoader>
<StyledSubtitleLoader>
<RectangleSkeleton
width={"71px"}
height={"16px"}
borderRadius={"3px"}
/>
</StyledSubtitleLoader>
<StyledProperty>
{propertyDimensions.map((property) => [
<RectangleSkeleton
key={property.titleKey}
className="property-title"
width={property.propertyTitle}
height={"20px"}
borderRadius={"3px"}
/>,
<RectangleSkeleton
key={property.contentKey}
className="property-content"
width={property.propertyContent}
height={"20px"}
borderRadius={"3px"}
/>,
])}
</StyledProperty>
</StyledAccountsLoader>
);
};
export default AccountsLoader;

40
packages/shared/skeletons/info-panel/body/views/AccountsLoader.tsx Normal file
View File

@ -0,0 +1,40 @@
import React from "react";
import { RectangleSkeleton } from "@docspace/shared/skeletons";
import {
StyledAccountsLoader,
StyledProperty,
StyledSubtitleLoader,
} from "../body.styled";
import { propertyDimensions } from "../body.constant";
const AccountsLoader = () => {
return (
<StyledAccountsLoader>
<StyledSubtitleLoader>
<RectangleSkeleton width="71px" height="16px" borderRadius="3px" />
</StyledSubtitleLoader>
<StyledProperty>
{propertyDimensions.map((property) => [
<RectangleSkeleton
key={property.titleKey}
className="property-title"
width={property.propertyTitle}
height="20px"
borderRadius="3px"
/>,
<RectangleSkeleton
key={property.contentKey}
className="property-content"
width={property.propertyContent}
height="20px"
borderRadius="3px"
/>,
])}
</StyledProperty>
</StyledAccountsLoader>
);
};
export default AccountsLoader;

84
packages/shared/skeletons/info-panel/body/views/DetailsLoader.js
View File

@ -1,84 +0,0 @@
import React from "react";
import styled from "styled-components";
import { RectangleSkeleton } from "@docspace/shared/skeletons";
const StyledDetailsLoader = styled.div`
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
`;
const StyledSubtitleLoader = styled.div`
width: 100%;
padding: 24px 0 24px 0;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
`;
const StyledProperty = styled.div`
width: 100%;
display: grid;
grid-template-columns: 101px 1fr;
grid-column-gap: 24px;
grid-row-gap: 8px;
.property-content {
max-width: 100%;
margin: auto 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
`;
const propertyDimensions = [
{ propertyTitle: "41px", propertyContent: "160px" },
{ propertyTitle: "52px", propertyContent: "120px" },
{ propertyTitle: "29px", propertyContent: "89px" },
{ propertyTitle: "84px", propertyContent: "23px" },
{ propertyTitle: "24px", propertyContent: "47px" },
{ propertyTitle: "86px", propertyContent: "127px" },
{ propertyTitle: "101px", propertyContent: "160px" },
{ propertyTitle: "82px", propertyContent: "127px" },
{ propertyTitle: "52px", propertyContent: "32px" },
{ propertyTitle: "67px", propertyContent: "43px" },
];
const DetailsLoader = () => {
return (
<StyledDetailsLoader>
<StyledSubtitleLoader>
<RectangleSkeleton
width={"71px"}
height={"16px"}
borderRadius={"3px"}
/>
</StyledSubtitleLoader>
<StyledProperty>
{propertyDimensions.map((property) => [
<RectangleSkeleton
className="property-title"
width={property.propertyTitle}
height={"20px"}
borderRadius={"3px"}
/>,
<RectangleSkeleton
className="property-content"
width={property.propertyContent}
height={"20px"}
borderRadius={"3px"}
/>,
])}
</StyledProperty>
</StyledDetailsLoader>
);
};
export default DetailsLoader;

40
packages/shared/skeletons/info-panel/body/views/DetailsLoader.tsx Normal file
View File

@ -0,0 +1,40 @@
import React from "react";
import { RectangleSkeleton } from "@docspace/shared/skeletons";
import {
StyledDetailsLoader,
StyledDetailsProperty,
StyledDetailsSubtitleLoader,
} from "../body.styled";
import { propertyDetailsDimensions } from "../body.constant";
const DetailsLoader = () => {
return (
<StyledDetailsLoader>
<StyledDetailsSubtitleLoader>
<RectangleSkeleton width="71px" height="16px" borderRadius="3px" />
</StyledDetailsSubtitleLoader>
<StyledDetailsProperty>
{propertyDetailsDimensions.map((property) => [
<RectangleSkeleton
key={property.propertyTitle}
className="property-title"
width={property.propertyTitle}
height="20px"
borderRadius="3px"
/>,
<RectangleSkeleton
key={property.propertyContent}
className="property-content"
width={property.propertyContent}
height="20px"
borderRadius="3px"
/>,
])}
</StyledDetailsProperty>
</StyledDetailsLoader>
);
};
export default DetailsLoader;

89
packages/shared/skeletons/info-panel/body/views/GalleryLoader.js
View File

@ -1,89 +0,0 @@
import React from "react";
import styled from "styled-components";
import { RectangleSkeleton } from "@docspace/shared/skeletons";
const StyledGalleryLoader = styled.div`
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
.thumbnail {
}
`;
const StyledSubtitleLoader = styled.div`
width: 100%;
padding: 24px 0 24px 0;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
`;
const StyledProperty = styled.div`
width: 100%;
display: grid;
grid-template-columns: 101px 1fr;
grid-column-gap: 24px;
grid-row-gap: 8px;
.property-content {
max-width: 100%;
margin: auto 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
`;
const propertyDimensions = [
{ propertyTitle: "100px", propertyContent: "160px" },
{ propertyTitle: "52px", propertyContent: "50px" },
{ propertyTitle: "68px", propertyContent: "35px" },
];
const GalleryLoader = () => {
return (
<StyledGalleryLoader>
<RectangleSkeleton
className="thumbnail"
width={"360.2px"}
height={"346px"}
borderRadius={"3px"}
/>
<StyledSubtitleLoader>
<RectangleSkeleton
width={"71px"}
height={"16px"}
borderRadius={"3px"}
/>
</StyledSubtitleLoader>
<StyledProperty>
{propertyDimensions.map((property, i) => [
<RectangleSkeleton
key={`title-${i}`}
className="property-title"
width={property.propertyTitle}
height={"20px"}
borderRadius={"3px"}
/>,
<RectangleSkeleton
key={`content-${i}`}
className="property-content"
width={property.propertyContent}
height={"20px"}
borderRadius={"3px"}
/>,
])}
</StyledProperty>
</StyledGalleryLoader>
);
};
export default GalleryLoader;

47
packages/shared/skeletons/info-panel/body/views/GalleryLoader.tsx Normal file
View File

@ -0,0 +1,47 @@
import React from "react";
import { RectangleSkeleton } from "@docspace/shared/skeletons";
import {
StyledGalleryLoader,
StyledGalleryProperty,
StyledGallerySubtitleLoader,
} from "../body.styled";
import { propertyGalleryDimensions } from "../body.constant";
const GalleryLoader = () => {
return (
<StyledGalleryLoader>
<RectangleSkeleton
className="thumbnail"
width="360.2px"
height="346px"
borderRadius="3px"
/>
<StyledGallerySubtitleLoader>
<RectangleSkeleton width="71px" height="16px" borderRadius="3px" />
</StyledGallerySubtitleLoader>
<StyledGalleryProperty>
{propertyGalleryDimensions.map((property) => [
<RectangleSkeleton
key={property.propertyTitle}
className="property-title"
width={property.propertyTitle}
height="20px"
borderRadius="3px"
/>,
<RectangleSkeleton
key={property.propertyContent}
className="property-content"
width={property.propertyContent}
height="20px"
borderRadius="3px"
/>,
])}
</StyledGalleryProperty>
</StyledGalleryLoader>
);
};
export default GalleryLoader;

112
packages/shared/skeletons/info-panel/body/views/HistoryLoader.js
View File

@ -1,112 +0,0 @@
import React from "react";
import styled from "styled-components";
import { Base } from "@docspace/shared/themes";
import { RectangleSkeleton } from "@docspace/shared/skeletons";
const StyledHistoryLoader = styled.div`
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
`;
const StyledSubtitleLoader = styled.div`
width: 100%;
padding: 8px 0 12px 0;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
`;
const StyledHistoryBlockLoader = styled.div`
width: 100%;
height: 70px;
display: flex;
align-items: center;
border-bottom: ${(props) => `solid 1px ${props.theme.infoPanel.borderColor}`};
.content {
width: 100%;
height: 38px;
display: flex;
flex-direction: row;
gap: 8px;
.avatar {
min-height: 32px;
min-width: 32px;
}
.message {
display: flex;
flex-direction: column;
gap: 6px;
}
.date {
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-right: auto;`
: `margin-left: auto;`}
}
}
`;
StyledHistoryBlockLoader.defaultProps = { theme: Base };
const HistoryLoader = ({}) => {
return (
<StyledHistoryLoader>
<StyledSubtitleLoader>
<RectangleSkeleton
width={"111px"}
height={"16px"}
borderRadius={"3px"}
/>
<RectangleSkeleton
width={"16px"}
height={"16px"}
borderRadius={"3px"}
/>
</StyledSubtitleLoader>
{[...Array(5).keys()].map((i) => (
<StyledHistoryBlockLoader key={i}>
<div className="content">
<RectangleSkeleton
className="avatar"
width={"32px"}
height={"32px"}
borderRadius={"50%"}
/>
<div className="message">
<RectangleSkeleton
width={"107px"}
height={"16px"}
borderRadius={"3px"}
/>
<RectangleSkeleton
width={"176px"}
height={"16px"}
borderRadius={"3px"}
/>
</div>
<RectangleSkeleton
className="date"
width={"107px"}
height={"16px"}
borderRadius={"3px"}
/>
</div>
</StyledHistoryBlockLoader>
))}
</StyledHistoryLoader>
);
};
export default HistoryLoader;

52
packages/shared/skeletons/info-panel/body/views/HistoryLoader.tsx Normal file
View File

@ -0,0 +1,52 @@
import React from "react";
import { RectangleSkeleton } from "@docspace/shared/skeletons";
import {
StyledHistoryBlockLoader,
StyledHistoryLoader,
StyledHistorySubtitleLoader,
} from "../body.styled";
const HistoryLoader = () => {
return (
<StyledHistoryLoader>
<StyledHistorySubtitleLoader>
<RectangleSkeleton width="111px" height="16px" borderRadius="3px" />
<RectangleSkeleton width="16px" height="16px" borderRadius="3px" />
</StyledHistorySubtitleLoader>
{[...Array(5).keys()].map((i) => (
<StyledHistoryBlockLoader key={i}>
<div className="content">
<RectangleSkeleton
className="avatar"
width="32px"
height="32px"
borderRadius="50%"
/>
<div className="message">
<RectangleSkeleton
width="107px"
height="16px"
borderRadius="3px"
/>
<RectangleSkeleton
width="176px"
height="16px"
borderRadius="3px"
/>
</div>
<RectangleSkeleton
className="date"
width="107px"
height="16px"
borderRadius="3px"
/>
</div>
</StyledHistoryBlockLoader>
))}
</StyledHistoryLoader>
);
};
export default HistoryLoader;

127
packages/shared/skeletons/info-panel/body/views/MembersLoader.js
View File

@ -1,127 +0,0 @@
import React from "react";
import styled from "styled-components";
import { RectangleSkeleton } from "@docspace/shared/skeletons";
const StyledMembersLoader = styled.div`
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
`;
const StyledSubtitleLoader = styled.div`
width: 100%;
padding: 8px 0 12px 0;
.pending_users {
padding-top: 20px;
}
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
`;
const StyledMemberLoader = styled.div`
width: 100%;
height: 48px;
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
gap: 8px;
.avatar {
min-height: 32px;
min-width: 32px;
}
.role-selector {
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-right: auto;`
: `margin-left: auto;`}
}
`;
const MembersLoader = () => {
return (
<StyledMembersLoader>
<StyledSubtitleLoader>
<RectangleSkeleton
width={"111px"}
height={"16px"}
borderRadius={"3px"}
/>
<RectangleSkeleton
width={"16px"}
height={"16px"}
borderRadius={"3px"}
/>
</StyledSubtitleLoader>
{[...Array(4).keys()].map((i) => (
<StyledMemberLoader key={i}>
<RectangleSkeleton
className="avatar"
width={"32px"}
height={"32px"}
borderRadius={"50%"}
/>
<RectangleSkeleton
width={"212px"}
height={"16px"}
borderRadius={"3px"}
/>
<RectangleSkeleton
className="role-selector"
width={"64px"}
height={"20px"}
borderRadius={"3px"}
/>
</StyledMemberLoader>
))}
<StyledSubtitleLoader className="pending_users">
<RectangleSkeleton
width={"111px"}
height={"16px"}
borderRadius={"3px"}
/>
<RectangleSkeleton
width={"16px"}
height={"16px"}
borderRadius={"3px"}
/>
</StyledSubtitleLoader>
{[...Array(4).keys()].map((i) => (
<StyledMemberLoader key={i}>
<RectangleSkeleton
className="avatar"
width={"32px"}
height={"32px"}
borderRadius={"50%"}
/>
<RectangleSkeleton
width={"212px"}
height={"16px"}
borderRadius={"3px"}
/>
<RectangleSkeleton
className="role-selector"
width={"64px"}
height={"20px"}
borderRadius={"3px"}
/>
</StyledMemberLoader>
))}
</StyledMembersLoader>
);
};
export default MembersLoader;

62
packages/shared/skeletons/info-panel/body/views/MembersLoader.tsx Normal file
View File

@ -0,0 +1,62 @@
import React from "react";
import { RectangleSkeleton } from "@docspace/shared/skeletons";
import {
StyledMemberLoader,
StyledMemberSubtitleLoader,
StyledMembersLoader,
} from "../body.styled";
const MembersLoader = () => {
return (
<StyledMembersLoader>
<StyledMemberSubtitleLoader>
<RectangleSkeleton width="111px" height="16px" borderRadius="3px" />
<RectangleSkeleton width="16px" height="16px" borderRadius="3px" />
</StyledMemberSubtitleLoader>
{[...Array(4).keys()].map((i) => (
<StyledMemberLoader key={i}>
<RectangleSkeleton
className="avatar"
width="32px"
height="32px"
borderRadius="50%"
/>
<RectangleSkeleton width="212px" height="16px" borderRadius="3px" />
<RectangleSkeleton
className="role-selector"
width="64px"
height="20px"
borderRadius="3px"
/>
</StyledMemberLoader>
))}
<StyledMemberSubtitleLoader className="pending_users">
<RectangleSkeleton width="111px" height="16px" borderRadius="3px" />
<RectangleSkeleton width="16px" height="16px" borderRadius="3px" />
</StyledMemberSubtitleLoader>
{[...Array(4).keys()].map((i) => (
<StyledMemberLoader key={i}>
<RectangleSkeleton
className="avatar"
width="32px"
height="32px"
borderRadius="50%"
/>
<RectangleSkeleton width="212px" height="16px" borderRadius="3px" />
<RectangleSkeleton
className="role-selector"
width="64px"
height="20px"
borderRadius="3px"
/>
</StyledMemberLoader>
))}
</StyledMembersLoader>
);
};
export default MembersLoader;

25
packages/shared/skeletons/info-panel/body/views/NoItemLoader.js
View File

@ -1,25 +0,0 @@
import React from "react";
import styled from "styled-components";
import { RectangleSkeleton } from "@docspace/shared/skeletons";
const StyledNoItemLoader = styled.div`
width: 100%;
margin: 80px 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 32px;
`;
const NoItemLoader = () => {
return (
<StyledNoItemLoader>
<RectangleSkeleton width={"96px"} height={"96px"} borderRadius={"6px"} />
<RectangleSkeleton width={"150px"} height={"16px"} borderRadius={"3px"} />
</StyledNoItemLoader>
);
};
export default NoItemLoader;

15
packages/shared/skeletons/info-panel/body/views/NoItemLoader.tsx Normal file
View File

@ -0,0 +1,15 @@
import React from "react";
import { RectangleSkeleton } from "@docspace/shared/skeletons";
import { StyledNoItemLoader } from "../body.styled";
const NoItemLoader = () => {
return (
<StyledNoItemLoader>
<RectangleSkeleton width="96px" height="96px" borderRadius="6px" />
<RectangleSkeleton width="150px" height="16px" borderRadius="3px" />
</StyledNoItemLoader>
);
};
export default NoItemLoader;

22
packages/shared/skeletons/info-panel/body/views/SeveralItemsLoader.js
View File

@ -1,22 +0,0 @@
import React from "react";
import styled from "styled-components";
import { RectangleSkeleton } from "@docspace/shared/skeletons";
const StyledSeveralItemsLoader = styled.div`
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;
const SeveralItemsLoader = () => {
return (
<StyledSeveralItemsLoader>
<RectangleSkeleton width={"96px"} height={"96px"} borderRadius={"6px"} />
</StyledSeveralItemsLoader>
);
};
export default SeveralItemsLoader;

14
packages/shared/skeletons/info-panel/body/views/SeveralItemsLoader.tsx Normal file
View File

@ -0,0 +1,14 @@
import React from "react";
import { RectangleSkeleton } from "@docspace/shared/skeletons";
import { StyledSeveralItemsLoader } from "../body.styled";
const SeveralItemsLoader = () => {
return (
<StyledSeveralItemsLoader>
<RectangleSkeleton width="96px" height="96px" borderRadius="6px" />
</StyledSeveralItemsLoader>
);
};
export default SeveralItemsLoader;