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

Web: Common: create tree folder loader

Browse Source
This commit is contained in:
Viktor Fomin 2020-11-03 23:00:43 +03:00
parent 234b323633
commit a591a48e13
1 changed files with 48 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
web/ASC.Web.Common/src/components/Loaders/TreeFolderLoader.js
View File

@ -1,17 +1,52 @@
import React from "react"; import React from "react";
import ContentLoader from "react-content-loader"; import styled from "styled-components";
import RectangleLoader from "./RectangleLoader";
import CircleLoader from "./CircleLoader";
const TreeFolderLoader = () => ( const StyledTreeFolder = styled.div`
<ContentLoader width: 100%;
speed={2} display: grid;
width={264} grid-template-columns: 8px 1fr;
height={188} grid-template-rows: 1fr;
viewBox="0 0 264 188" grid-column-gap: 6px;
backgroundColor="#f3f3f3" margin-bottom: 24px;
foregroundColor="#ecebeb" `;
>
<rect x="0" y="0" rx="0" ry="0" width="216" height="189" /> const StyledContainer = styled.div`
</ContentLoader> margin-top: 48px;
`;
const TreeFolderLoader = () => {
return (
<div>
<StyledTreeFolder>
<CircleLoader radius="3" />
<RectangleLoader width="100%" height="24" />
<CircleLoader radius="3" />
<RectangleLoader width="100%" height="24" />
<CircleLoader radius="3" />
<RectangleLoader width="100%" height="24" />
</StyledTreeFolder>
<StyledTreeFolder>
<CircleLoader radius="3" />
<RectangleLoader width="100%" height="24" />
<CircleLoader radius="3" />
<RectangleLoader width="100%" height="24" />
<CircleLoader radius="3" />
<RectangleLoader width="100%" height="24" />
</StyledTreeFolder>
<StyledTreeFolder>
<CircleLoader radius="3" />
<RectangleLoader width="100%" height="24" />
</StyledTreeFolder>
<StyledContainer>
<RectangleLoader width="100%" height="48" />
</StyledContainer>
</div>
); );
};
export default TreeFolderLoader; export default TreeFolderLoader;