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