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

Web: Components: add banner loaders

Browse Source
This commit is contained in:
Viktor Fomin 2021-11-08 13:36:09 +03:00
parent 39be3b8619
commit 21a9f115f1
1 changed files with 50 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
packages/asc-web-components/campaigns-banner/index.js
View File

@ -11,7 +11,7 @@ const onButtonClick = (url) => {
};
const CampaignsBanner = (props) => {
const { headerLabel, subHeaderLabel, img, btnLabel, link } = props;
const { headerLabel, subHeaderLabel, img, btnLabel, link, isLoading } = props;
const [imageLoad, setImageLoad] = useState(false);
const handleImageLoaded = () => {
@ -25,26 +25,56 @@ const CampaignsBanner = (props) => {
return (
<BannerWrapper>
<a href={link}>
<Text fontWeight="700" fontSize="13px">
{headerLabel}
</Text>
<Text className="banner-sub-header" fontWeight="500" fontSize="12px">
{subHeaderLabel}
</Text>
{isLoading ? (
<Loaders.Rectangle height="32px" borderRadius="5px" />
) : (
<>
<Text fontWeight="700" fontSize="13px">
{headerLabel}
</Text>
<Text
className="banner-sub-header"
fontWeight="500"
fontSize="12px"
>
{subHeaderLabel}
</Text>
</>
)}
{!imageLoad && <Loaders.Rectangle height="150px" borderRadius="5px" />}
<img src={img} onMouseDown={onMouseDown} onLoad={handleImageLoaded} />
{isLoading ? (
<Loaders.Rectangle height="150px" borderRadius="5px" />
) : (
<>
{!imageLoad && (
<Loaders.Rectangle height="150px" borderRadius="5px" />
)}
<img
src={img}
onMouseDown={onMouseDown}
onLoad={handleImageLoaded}
/>
</>
)}
</a>
<Button
className="banner-btn"
primary
size="medium"
isDisabled={false}
disableHover={true}
label={btnLabel}
onClick={() => onButtonClick(link)}
/>
{isLoading ? (
<Loaders.Rectangle
height="32px"
borderRadius="5px"
className="banner-btn"
/>
) : (
<Button
className="banner-btn"
primary
size="medium"
isDisabled={false}
disableHover={true}
label={btnLabel}
onClick={() => onButtonClick(link)}
/>
)}
</BannerWrapper>
);
};
@ -58,12 +88,14 @@ CampaignsBanner.propTypes = {
img: PropTypes.string,
btnLabel: PropTypes.string,
link: PropTypes.string,
isLoading: PropTypes.bool,
};
CampaignsBanner.defaultProps = {
id: undefined,
className: undefined,
style: undefined,
isLoading: false,
};
export default CampaignsBanner;