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

Web: Common: destructuring props

Browse Source
This commit is contained in:
Viktor Fomin 2020-11-10 17:29:11 +03:00
parent 9cbe89d4b5
commit 710c169bf0
7 changed files with 854 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
web/ASC.Web.Common/src/components/Loaders/ArticleHeaderLoader/ArticleHeaderLoader.js
View File

@ -1,18 +1,58 @@
import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import RectangleLoader from "../RectangleLoader/index";
const StyledContainer = styled.div`
margin-top: 13px;
margin-bottom: 10px;
padding-top: 13px;
padding-bottom: 10px;
`;
const ArticleHeaderLoader = (props) => {
const ArticleHeaderLoader = ({ id, className, style, ...rest }) => {
const {
title,
x,
y,
width,
height,
borderRadius,
backgroundColor,
foregroundColor,
backgroundOpacity,
foregroundOpacity,
speed,
animate,
} = rest;
return (
<StyledContainer>
<RectangleLoader {...props} />
<StyledContainer id={id} className={className} style={style}>
<RectangleLoader
title={title}
x={x}
y={y}
width={width}
height={height}
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
</StyledContainer>
);
};
ArticleHeaderLoader.propTypes = {
id: PropTypes.string,
className: PropTypes.string,
style: PropTypes.object,
};
ArticleHeaderLoader.defaultProps = {
id: undefined,
className: undefined,
style: undefined,
};
export default ArticleHeaderLoader;

58
web/ASC.Web.Common/src/components/Loaders/FilterLoader/FilterLoader.js
View File

@ -1,7 +1,7 @@
import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import RectangleLoader from "../RectangleLoader/index";
import PropTypes from "prop-types";
import { utils } from "asc-web-components";
const { mobile } = utils.device;
@ -17,23 +17,63 @@ const StyledFilter = styled.div`
}
`;
const FilterLoader = (props) => {
const FilterLoader = ({ id, className, style, ...rest }) => {
const {
title,
x,
y,
height,
borderRadius,
backgroundColor,
foregroundColor,
backgroundOpacity,
foregroundOpacity,
speed,
animate,
} = rest;
return (
<StyledFilter>
<RectangleLoader width={props.width} height={props.height} {...props} />
<RectangleLoader width={props.width} height={props.height} {...props} />
<StyledFilter id={id} className={className} style={style}>
<RectangleLoader
title={title}
x={x}
y={y}
height={height}
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
title={title}
x={x}
y={y}
height={height}
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
</StyledFilter>
);
};
FilterLoader.propTypes = {
width: PropTypes.string,
height: PropTypes.string,
id: PropTypes.string,
className: PropTypes.string,
style: PropTypes.object,
};
FilterLoader.defaultProps = {
width: "100%",
height: "32px",
id: undefined,
className: undefined,
style: undefined,
};
export default FilterLoader;

81
web/ASC.Web.Common/src/components/Loaders/HeaderLoader/HeaderLoader.js
View File

@ -1,4 +1,5 @@
import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import RectangleLoader from "../RectangleLoader/index";
@ -8,45 +9,89 @@ const StyledHeader = styled.div`
grid-template-columns: 24px 168px 1fr 24px 36px;
grid-template-rows: 1fr;
grid-column-gap: 16px;
margin: 16px;
padding: 16px;
`;
const StyledSpacer = styled.div``;
const HeaderLoader = (props) => {
const HeaderLoader = ({ id, className, style, ...rest }) => {
const {
title,
x,
y,
borderRadius,
backgroundColor,
foregroundColor,
backgroundOpacity,
foregroundOpacity,
speed,
animate,
} = rest;
return (
<StyledHeader>
<StyledHeader id={id} className={className} style={style}>
<RectangleLoader
title={title}
x={x}
y={y}
width="24"
height="24"
backgroundColor="#fff"
foregroundColor="#fff"
backgroundOpacity={0.2}
foregroundOpacity={0.25}
{...props}
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
title={title}
x={x}
y={y}
width="168"
height="24"
backgroundColor="#fff"
foregroundColor="#fff"
backgroundOpacity={0.2}
foregroundOpacity={0.25}
{...props}
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<StyledSpacer />
<RectangleLoader
title={title}
x={x}
y={y}
width="24"
height="24"
backgroundColor="#fff"
foregroundColor="#fff"
backgroundOpacity={0.2}
foregroundOpacity={0.25}
{...props}
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<StyledSpacer />
</StyledHeader>
);
};
HeaderLoader.propTypes = {
id: PropTypes.string,
className: PropTypes.string,
style: PropTypes.object,
};
HeaderLoader.defaultProps = {
id: undefined,
className: undefined,
style: undefined,
backgroundColor: "#fff",
foregroundColor: "#fff",
backgroundOpacity: 0.25,
foregroundOpacity: 0.2,
};
export default HeaderLoader;

323
web/ASC.Web.Common/src/components/Loaders/ProfileViewLoader/ProfileViewLoader.js
View File

@ -1,13 +1,12 @@
import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import RectangleLoader from "../RectangleLoader/index";
import CircleLoader from "../CircleLoader/index";
import PropTypes from "prop-types";
import { utils } from "asc-web-components";
const { desktop, mobile } = utils.device;
const { isSmallTablet, isTablet, isMobile } = utils.device;
const { desktop, tablet, mobile } = utils.device;
const StyledBox1 = styled.div`
display: grid;
@ -19,7 +18,7 @@ const StyledBox1 = styled.div`
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
}
margin-bottom: 12px;
padding-bottom: 12px;
`;
const StyledBox2 = styled.div`
@ -50,11 +49,20 @@ const StyledBox4 = styled.div`
grid-column-gap: 16px;
padding-top: 40px;
padding-bottom: 40px;
@media ${desktop} {
grid-template-columns: repeat(3, 200px);
}
@media ${tablet} {
.row-content__tablet {
display: none;
}
}
@media ${mobile} {
grid-template-columns: 200px;
.row-content__mobile {
display: none;
}
}
`;
@ -62,73 +70,296 @@ const StyledSpacer = styled.div`
padding-bottom: 40px;
`;
const ProfileViewLoader = (props) => {
const ProfileViewLoader = ({ id, className, style, isEdit, ...rest }) => {
const {
title,
borderRadius,
backgroundColor,
foregroundColor,
backgroundOpacity,
foregroundOpacity,
speed,
animate,
} = rest;
return (
<div>
<div id={id} className={className} style={style}>
<StyledBox1>
<StyledBox2>
<CircleLoader x="80" y="80" radius="80" {...props} />
{props.isEditBtn ? (
<RectangleLoader width="160" height="36" {...props} />
<CircleLoader
title={title}
x="80"
y="80"
radius="80"
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
{isEdit ? (
<RectangleLoader
title={title}
width="160"
height="36"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
) : (
<></>
)}
</StyledBox2>
<StyledBox3>
<RectangleLoader width="231" height="16" {...props} />
<RectangleLoader width="231" height="16" {...props} />
<RectangleLoader width="231" height="16" {...props} />
<RectangleLoader width="231" height="16" {...props} />
<RectangleLoader width="231" height="16" {...props} />
<RectangleLoader width="231" height="16" {...props} />
<RectangleLoader width="231" height="16" {...props} />
<RectangleLoader width="231" height="16" {...props} />
<RectangleLoader width="111" height="16" {...props} />
<RectangleLoader
title={title}
width="231"
height="16"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
title={title}
width="231"
height="16"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
title={title}
width="231"
height="16"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
title={title}
width="231"
height="16"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
title={title}
width="231"
height="16"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
title={title}
width="231"
height="16"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
title={title}
width="231"
height="16"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
title={title}
width="231"
height="16"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
title={title}
width="111"
height="16"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
</StyledBox3>
<RectangleLoader width="200" height="24" {...props} />
<RectangleLoader
title={title}
width="200"
height="24"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
</StyledBox1>
<RectangleLoader width="100%" height="80" {...props} />
<RectangleLoader
title={title}
width="100%"
height="80"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<StyledSpacer />
<RectangleLoader width="200" height="24" {...props} />
<RectangleLoader
title={title}
width="200"
height="24"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<StyledBox4>
{isMobile() || isSmallTablet() ? (
<RectangleLoader width="200" height="80" {...props} />
) : isTablet() ? (
<>
<RectangleLoader width="200" height="80" {...props} />
<RectangleLoader width="200" height="80" {...props} />
</>
) : (
<>
<RectangleLoader width="200" height="80" {...props} />
<RectangleLoader width="200" height="80" {...props} />{" "}
<RectangleLoader width="200" height="80" {...props} />
</>
)}
<RectangleLoader
title={title}
width="200"
height="80"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
className="row-content__mobile"
title={title}
width="200"
height="80"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
className="row-content__tablet row-content__mobile"
title={title}
width="200"
height="80"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
</StyledBox4>
<RectangleLoader width="200" height="24" {...props} />
<RectangleLoader
title={title}
width="200"
height="24"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<StyledBox4>
{isMobile() || isSmallTablet() ? (
<RectangleLoader width="200" height="80" {...props} />
) : (
<>
<RectangleLoader width="200" height="80" {...props} />
<RectangleLoader width="200" height="80" {...props} />
</>
)}
<RectangleLoader
title={title}
width="200"
height="80"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
className="row-content__mobile"
title={title}
width="200"
height="80"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
</StyledBox4>
</div>
);
};
ProfileViewLoader.propTypes = {
isEditBtn: PropTypes.bool,
id: PropTypes.string,
className: PropTypes.string,
style: PropTypes.object,
isEdit: PropTypes.bool,
};
ProfileViewLoader.defaultProps = {
isEditBtn: true,
id: undefined,
className: undefined,
style: undefined,
isEdit: true,
};
export default ProfileViewLoader;

159
web/ASC.Web.Common/src/components/Loaders/RowsLoader/RowsLoader.js
View File

@ -1,11 +1,11 @@
import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import RectangleLoader from "../RectangleLoader/index";
import CircleLoader from "../CircleLoader/index";
import PropTypes from "prop-types";
import { utils } from "asc-web-components";
const { isMobile, isTablet } = utils.device;
const { desktop } = utils.device;
const StyledRow = styled.div`
width: 100%;
@ -18,44 +18,147 @@ const StyledRow = styled.div`
align-items: center;
`;
const StyledBox = styled.div`
const StyledBox1 = styled.div`
.rectangle-content {
width: 32px;
height: 32px;
}
@media ${desktop} {
.rectangle-content {
width: 22px;
height: 22px;
}
}
`;
const StyledBox2 = styled.div`
width: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 16px 12px;
grid-template-rows: 16px;
grid-row-gap: 4px;
justify-items: left;
align-items: left;
.first-row-content__mobile {
width: 80%;
}
@media ${desktop} {
grid-template-rows: 16px;
grid-row-gap: 0;
.first-row-content__mobile {
width: 100%;
}
.second-row-content__mobile {
width: 100%;
display: none;
}
}
`;
const RowBlock = (props) => {
return !isMobile() && !isTablet() ? (
<RectangleLoader width="100%" height="16" {...props} />
) : (
<StyledBox>
<RectangleLoader width="80%" height="16" {...props} />
<RectangleLoader width="100%" height="12" {...props} />
</StyledBox>
);
};
const Row = (props) => {
const rectangleSize = !isMobile() && !isTablet() ? "22" : "32";
let isRectangle = props.isRectangle;
const Row = ({ id, className, style, isRectangle, ...rest }) => {
const {
title,
x,
y,
borderRadius,
backgroundColor,
foregroundColor,
backgroundOpacity,
foregroundOpacity,
speed,
animate,
} = rest;
return (
<StyledRow gap={isRectangle ? "8px" : "16px"}>
<RectangleLoader width="16" height="16" {...props} />
<StyledRow
id={id}
className={className}
style={style}
gap={isRectangle ? "8px" : "16px"}
>
<RectangleLoader
title={title}
x={x}
y={y}
width="16"
height="16"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<StyledBox1>
{isRectangle ? (
<RectangleLoader
width={rectangleSize}
height={rectangleSize}
{...props}
className="rectangle-content"
title={title}
x={x}
y={y}
width="100%"
height="100%"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
) : (
<CircleLoader width="32" height="32" x="16" y="16" radius="16" />
<CircleLoader
title={title}
x="16"
y="16"
width="32"
height="32"
radius="16"
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
)}
<RowBlock {...props} />
</StyledBox1>
<StyledBox2>
<RectangleLoader
className="first-row-content__mobile"
title={title}
x={x}
y={y}
height="16px"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
className="second-row-content__mobile"
title={title}
x={x}
y={y}
height="12px"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
</StyledBox2>
</StyledRow>
);
};
@ -74,10 +177,16 @@ const RowsLoader = (props) => {
};
Row.propTypes = {
id: PropTypes.string,
className: PropTypes.string,
style: PropTypes.object,
isRectangle: PropTypes.bool,
};
Row.defaultProps = {
id: undefined,
className: undefined,
style: undefined,
isRectangle: true,
};

90
web/ASC.Web.Common/src/components/Loaders/SectionHeaderLoader/SectionHeaderLoader.js
View File

@ -1,4 +1,5 @@
import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import RectangleLoader from "../RectangleLoader/index";
@ -36,20 +37,97 @@ const StyledBox2 = styled.div`
const StyledSpacer = styled.div``;
const SectionHeaderLoader = (props) => {
const SectionHeaderLoader = ({ id, className, style, ...rest }) => {
const {
title,
x,
y,
borderRadius,
backgroundColor,
foregroundColor,
backgroundOpacity,
foregroundOpacity,
speed,
animate,
} = rest;
return (
<StyledContainer>
<StyledContainer id={id} className={className} style={style}>
<StyledBox1>
<RectangleLoader width="17" height="17" {...props} />
<RectangleLoader width="67" height="17" {...props} />
<RectangleLoader
title={title}
x={x}
y={y}
width="17"
height="17"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
title={title}
x={x}
y={y}
width="67"
height="17"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
</StyledBox1>
<StyledSpacer />
<StyledBox2>
<RectangleLoader width="17" height="17" {...props} />
<RectangleLoader width="17" height="17" {...props} />
<RectangleLoader
title={title}
x={x}
y={y}
width="17"
height="17"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
title={title}
x={x}
y={y}
width="17"
height="17"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
</StyledBox2>
</StyledContainer>
);
};
SectionHeaderLoader.propTypes = {
id: PropTypes.string,
className: PropTypes.string,
style: PropTypes.object,
};
SectionHeaderLoader.defaultProps = {
id: undefined,
className: undefined,
style: undefined,
};
export default SectionHeaderLoader;

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

@ -1,4 +1,5 @@
import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import RectangleLoader from "../RectangleLoader/index";
import CircleLoader from "../CircleLoader/index";
@ -16,37 +17,218 @@ const StyledContainer = styled.div`
margin-top: 48px;
`;
const TreeFolderLoader = (props) => {
const TreeFolderLoader = ({ id, className, style, ...rest }) => {
const {
title,
borderRadius,
backgroundColor,
foregroundColor,
backgroundOpacity,
foregroundOpacity,
speed,
animate,
} = rest;
return (
<div>
<div id={id} className={className} style={style}>
<StyledTreeFolder>
<CircleLoader radius="3" height="32" {...props} />
<RectangleLoader width="100%" height="24" {...props} />
<CircleLoader radius="3" height="32" {...props} />
<RectangleLoader width="100%" height="24" {...props} />
<CircleLoader radius="3" height="32" {...props} />
<RectangleLoader width="100%" height="24" {...props} />
<CircleLoader
title={title}
height="32"
radius="3"
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
title={title}
width="100%"
height="24"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<CircleLoader
title={title}
height="32"
radius="3"
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
title={title}
width="100%"
height="24"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<CircleLoader
title={title}
height="32"
radius="3"
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
title={title}
width="100%"
height="24"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
</StyledTreeFolder>
<StyledTreeFolder>
<CircleLoader radius="3" height="32" {...props} />
<RectangleLoader width="100%" height="24" {...props} />
<CircleLoader radius="3" height="32" {...props} />
<RectangleLoader width="100%" height="24" {...props} />
<CircleLoader radius="3" height="32" {...props} />
<RectangleLoader width="100%" height="24" {...props} />
<CircleLoader
title={title}
height="32"
radius="3"
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
title={title}
width="100%"
height="24"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<CircleLoader
title={title}
height="32"
radius="3"
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
title={title}
width="100%"
height="24"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<CircleLoader
title={title}
height="32"
radius="3"
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
title={title}
width="100%"
height="24"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
</StyledTreeFolder>
<StyledTreeFolder>
<CircleLoader radius="3" height="32" {...props} />
<RectangleLoader width="100%" height="24" {...props} />
<CircleLoader
title={title}
radius="3"
height="32"
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
title={title}
width="100%"
height="24"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
</StyledTreeFolder>
<StyledContainer>
<RectangleLoader width="100%" height="48" {...props} />
<RectangleLoader
title={title}
width="100%"
height="48"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
</StyledContainer>
</div>
);
};
TreeFolderLoader.propTypes = {
id: PropTypes.string,
className: PropTypes.string,
style: PropTypes.object,
};
TreeFolderLoader.defaultProps = {
id: undefined,
className: undefined,
style: undefined,
};
export default TreeFolderLoader;