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 88 89 90 91 92 93 | 2x 2x 3x 2x 2x 2x 2x | import React, { Component } from 'react';
import { defaultProps } from './props/defaultProps';
import { propTypes } from './props/propTypes';
import { Container, Box } from '@zohodesk/components/lib/Layout';
import AlertClose from '../../AlertClose/AlertClose';
import AlertIcons from '../../alertIcons/AlertIcons';
import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
import Typography from '@zohodesk/components/es/Typography/Typography';
import style from './DesktopNotificationHeader.module.css';
export default class DesktopNotificationHeader extends Component {
constructor(props) {
super(props);
}
render() {
let { onClose, closeTitle, dataId, variant, type = '', needIcon, title, needClose, responsiveId } = this.props;
function responsiveFunc({ mediaQueryOR }) {
return {
uptoTablet: mediaQueryOR([{ maxWidth: 760 }])
};
}
return (
<Container
align='vertical'
alignBox='row'
className={`${style.container} ${style[variant+'_header']} ${style[type]}`}
isCover={false}
wrap='wrap'
>
<ResponsiveReceiver query={responsiveFunc} responsiveId={responsiveId}>
{({ uptoTablet }) => (
<>
{needIcon ? (
<div className={style.iconContainer}>
<AlertIcons type={type} />
</div>
) : null}
<Box flexible>
<Container alignBox='row' align='center'>
{variant === 'primary' ? (
<Box shrink>
<Typography
$i18n_dataTitle={title}
$ui_className={style.title}
$ui_tagName='h1'
$ui_size={uptoTablet ? '16' : '18'}
$ui_lineHeight='1.2'
$ui_weight='bold'
$flag_reset
$ui_wordBreak='breakWord'
>
{title}
</Typography>
</Box>
) : (
<Box className={`${style.infoText}`}>
<Typography
$i18n_dataTitle={title}
$ui_className={style.title}
$ui_size='14'
$ui_wordBreak='breakWord'
>
{title}
</Typography>
</Box>
)}
</Container>
</Box>
{needClose ? (
<Box className={style.close}>
<AlertClose onClose={onClose} dataTitle={closeTitle} dataId={dataId} type='light' />
</Box>
) : null}
</>
)}
</ResponsiveReceiver>
</Container>
);
}
}
DesktopNotificationHeader.propTypes = propTypes;
DesktopNotificationHeader.defaultProps = defaultProps;
// if (__DOCS__) {
// DesktopNotificationHeader.docs = {
// componentGroup: 'DesktopNotificationHeader',
// folderName: 'Alert'
// };
// }
|