87 lines
1.5 KiB
JavaScript
87 lines
1.5 KiB
JavaScript
|
import React from "react";
|
||
|
import styled from "styled-components";
|
||
|
|
||
|
import RectangleLoader from "../RectangleLoader/RectangleLoader";
|
||
|
|
||
|
const StyledContainer = styled.div`
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
|
||
|
overflow: hidden;
|
||
|
|
||
|
display: flex;
|
||
|
flex-direction: column;
|
||
|
`;
|
||
|
|
||
|
const StyledItem = styled.div`
|
||
|
width: 100%;
|
||
|
height: 48px;
|
||
|
min-height: 48px;
|
||
|
|
||
|
padding: 0 16px;
|
||
|
|
||
|
box-sizing: border-box;
|
||
|
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
|
||
|
.avatar {
|
||
|
margin-right: 8px;
|
||
|
}
|
||
|
|
||
|
.checkbox {
|
||
|
margin-left: auto;
|
||
|
}
|
||
|
`;
|
||
|
|
||
|
const SelectorRowLoader = ({
|
||
|
id,
|
||
|
className,
|
||
|
style,
|
||
|
isMultiSelect,
|
||
|
isContainer,
|
||
|
...rest
|
||
|
}) => {
|
||
|
const getRowItem = (key) => {
|
||
|
return (
|
||
|
<StyledItem
|
||
|
id={id}
|
||
|
className={className}
|
||
|
style={style}
|
||
|
isMultiSelect={isMultiSelect}
|
||
|
key={key}
|
||
|
{...rest}
|
||
|
>
|
||
|
<RectangleLoader className={"avatar"} width={"32px"} height={"32px"} />
|
||
|
<RectangleLoader className={"text"} width={"212px"} height={"16px"} />
|
||
|
{isMultiSelect && (
|
||
|
<RectangleLoader
|
||
|
className={"checkbox"}
|
||
|
width={"16px"}
|
||
|
height={"16px"}
|
||
|
/>
|
||
|
)}
|
||
|
</StyledItem>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
const getRowItems = () => {
|
||
|
const rows = [];
|
||
|
for (let i = 0; i < 20; i++) {
|
||
|
rows.push(getRowItem(i));
|
||
|
}
|
||
|
|
||
|
return rows;
|
||
|
};
|
||
|
|
||
|
return isContainer ? (
|
||
|
<StyledContainer id={id} className={className} style={style} {...rest}>
|
||
|
{getRowItems()}
|
||
|
</StyledContainer>
|
||
|
) : (
|
||
|
getRowItem()
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default SelectorRowLoader;
|