87 lines
1.8 KiB
JavaScript
87 lines
1.8 KiB
JavaScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import PropTypes from "prop-types";
|
|
|
|
import TileLoader from "../TileLoader";
|
|
import RectangleLoader from "../RectangleLoader";
|
|
import { tablet } from "@appserver/components/utils/device";
|
|
|
|
const StyledTilesLoader = styled.div`
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
|
|
width: 100%;
|
|
grid-gap: 16px;
|
|
`;
|
|
|
|
const StyledWrapper = styled.div`
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-gap: 16px;
|
|
|
|
.folders {
|
|
margin-top: -1px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.files {
|
|
margin-top: 25px;
|
|
}
|
|
|
|
margin-right: 3px;
|
|
|
|
@media ${tablet} {
|
|
margin-right: -1px;
|
|
}
|
|
`;
|
|
|
|
const TilesLoader = ({ foldersCount, filesCount, sectionWidth, ...rest }) => {
|
|
const folders = [];
|
|
const files = [];
|
|
|
|
for (let i = 0; i < foldersCount; i++) {
|
|
folders.push(<TileLoader isFolder key={`tile-loader-${i}`} {...rest} />);
|
|
}
|
|
|
|
for (let i = 0; i < filesCount; i++) {
|
|
files.push(<TileLoader key={`files-loader-${i}`} {...rest} />);
|
|
}
|
|
|
|
return (
|
|
<StyledWrapper>
|
|
{foldersCount > 0 ? (
|
|
<RectangleLoader
|
|
height="22px"
|
|
width="57px"
|
|
className="folders"
|
|
animate
|
|
{...rest}
|
|
/>
|
|
) : null}
|
|
<StyledTilesLoader>{folders}</StyledTilesLoader>
|
|
|
|
{filesCount > 0 ? (
|
|
<RectangleLoader
|
|
height="22px"
|
|
width="35px"
|
|
className="files"
|
|
animate
|
|
{...rest}
|
|
/>
|
|
) : null}
|
|
<StyledTilesLoader>{files}</StyledTilesLoader>
|
|
</StyledWrapper>
|
|
);
|
|
};
|
|
|
|
TilesLoader.propTypes = {
|
|
foldersCount: PropTypes.number,
|
|
filesCount: PropTypes.number,
|
|
};
|
|
|
|
TilesLoader.defaultProps = {
|
|
foldersCount: 2,
|
|
filesCount: 8,
|
|
};
|
|
|
|
export default TilesLoader;
|