@zohodesk/dot
Version:
In this Library, we Provide Some Basic Components to Build Your Application
79 lines (76 loc) • 2.85 kB
JavaScript
import React from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import { Container, Box } from '@zohodesk/components/es/Layout';
import LinkText from "../LinkText/LinkText";
import UnauthorizedLoginSVG from '@zohodesk/svg/es/errorstate/version1/UnauthorizedLogin';
import commonStyle from "../EmptyStates.module.css";
import style from "./PermissionPlay.module.css";
import { ResponsiveReceiver } from '@zohodesk/components/es/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 /*#__PURE__*/React.createElement(ResponsiveReceiver, {
query: this.responsiveFunc
}, ({
tablet,
uptoMobile
}) => /*#__PURE__*/React.createElement(Container, {
className: `${uptoMobile || tablet ? commonStyle.tabletContainer : commonStyle.container} ${customClass}`,
dataId: dataId,
scroll: "vertical"
}, /*#__PURE__*/React.createElement(Box, {
className: commonStyle.top
}, title ? /*#__PURE__*/React.createElement("div", {
className: uptoMobile ? commonStyle.mobileTitle : tablet ? commonStyle.tabletTitle : commonStyle.title
}, title) : null, subtitle ? /*#__PURE__*/React.createElement("div", {
className: uptoMobile ? commonStyle.mobileSubTitle : tablet ? commonStyle.tabletSubTitle : commonStyle.subtitle
}, subtitle) : null), /*#__PURE__*/React.createElement(Box, {
className: uptoMobile ? commonStyle.mobileImageContainer : tablet ? commonStyle.tabletImageContainer : commonStyle.imageContainer
}, /*#__PURE__*/React.createElement(UnauthorizedLoginSVG, {
isFluid: true,
dataId: `${dataId}_svg`
})), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
className: `${style.lastBox} ${tablet || uptoMobile ? style.max : style.min}`
}, /*#__PURE__*/React.createElement("span", null, description), /*#__PURE__*/React.createElement("span", {
className: style.lineText
}, /*#__PURE__*/React.createElement(LinkText, {
text: urlText,
href: url,
onClick: onClick,
dataId: `${dataId}_link`
}))))));
}
}
PermissionPlay.propTypes = propTypes;
PermissionPlay.defaultProps = defaultProps; // if (__DOCS__) {
// PermissionPlay.docs = {
// componentGroup: 'errorStates'
// };
// }