Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | 1x 1x 1x 1x 1x 1x 1x 1x | import React from 'react';
import { defaultProps } from './props/defaultProps';
import { propTypes } from './props/propTypes';
import { Container, Box } from '@zohodesk/components/lib/Layout';
import LinkText from '../LinkText/LinkText';
import UnauthorizedLoginSVG from '@zohodesk/svg/lib/errorstate/version1/UnauthorizedLogin';
import commonStyle from '../EmptyStates.module.css';
import style from './PermissionPlay.module.css';
import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
export default class PermissionPlay extends React.Component {
constructor(props) {
super(props);
this.responsiveFunc = this.responsiveFunc.bind(this);
}
responsiveFunc({ mediaQueryOR }) {
return {
tablet: mediaQueryOR([{ minWidth: 481, maxWidth: 768 }]),
uptoMobile: mediaQueryOR([{ maxWidth: 480 }])
};
}
render() {
let { subtitle, title, description, urlText, url, onClick, dataId, customClass } = this.props;
return (
<ResponsiveReceiver query={this.responsiveFunc}>
{({ tablet, uptoMobile }) => (
<Container
className={`${uptoMobile || tablet ? commonStyle.tabletContainer : commonStyle.container} ${customClass}`}
dataId={dataId}
scroll='vertical'
>
<Box className={commonStyle.top}>
{title ? (
<div
className={
uptoMobile ? commonStyle.mobileTitle : tablet ? commonStyle.tabletTitle : commonStyle.title
}
>
{title}
</div>
) : null}
{subtitle ? (
<div
className={
uptoMobile ? commonStyle.mobileSubTitle : tablet ? commonStyle.tabletSubTitle : commonStyle.subtitle
}
>
{subtitle}
</div>
) : null}
</Box>
<Box
className={
uptoMobile
? commonStyle.mobileImageContainer
: tablet
? commonStyle.tabletImageContainer
: commonStyle.imageContainer
}
>
<UnauthorizedLoginSVG isFluid dataId={`${dataId}_svg`} />
</Box>
<Box>
<div className={`${style.lastBox} ${tablet || uptoMobile ? style.max : style.min}`}>
<span>{description}</span>
<span className={style.lineText}>
<LinkText text={urlText} href={url} onClick={onClick} dataId={`${dataId}_link`} />
</span>
</div>
</Box>
</Container>
)}
</ResponsiveReceiver>
);
}
}
PermissionPlay.propTypes = propTypes;
PermissionPlay.defaultProps = defaultProps;
// if (__DOCS__) {
// PermissionPlay.docs = {
// componentGroup: 'errorStates'
// };
// }
|