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 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React from 'react';
import { defaultProps } from './props/defaultProps';
import { propTypes, UI_propTypes, new_propTypes } from './props/propTypes';
import AutoClose from '../../actions/AutoClose';
import AlertIcons from '../alertIcons/AlertIcons';
import AlertClose from '../AlertClose/AlertClose';
import style from './GlobalNotification.module.css';
import { Container, Box } from '@zohodesk/components/lib/Layout';
import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
export default class GlobalNotification extends React.Component {
constructor(props) {
super(props);
this.hideMessageTimer = null;
this.state = { shadowClose: true };
this.onClose = this.onClose.bind(this);
};
componentDidMount() {
let { hideMessage, hideTime, id, needAutoClose } = this.props;
Eif (needAutoClose) {
this.hideMessageTimer = setTimeout(() => {
hideMessage(id);
}, hideTime);
}
}
componentWillUnmount() {
if (this.hideMessageTimer) {
clearTimeout(this.hideMessageTimer)
}
}
onClose(e) {
const { onClose, hideMessage, id } = this.props;
this.setState({ shadowClose: false });
hideMessage && hideMessage(id);
onClose && onClose(e);
}
render() {
let { type, message, hideMessage, onClick, i18nKeys = {}, customProps, dataSelectorId, id, needShadow, shadowCount, eleRef } = this.props;
let { shadowClose } = this.state
let { closeTitle = 'Close' } = i18nKeys;
return (
<GlobalNotificationUI
type={type}
message={message}
hideMessage={hideMessage}
onClick={onClick}
closeTitle={closeTitle}
customProps={customProps}
dataSelectorId={dataSelectorId}
id={id}
shadowCount={shadowCount}
onClose={this.onClose}
needShadow={shadowClose && needShadow}
eleRef={eleRef}
/>
);
}
}
GlobalNotification.propTypes = propTypes;
GlobalNotification.defaultProps = defaultProps;
// if (__DOCS__) {
// GlobalNotification.docs = {
// componentGroup: 'GlobalNotification',
// folderName: 'Alert'
// };
// }
export function GlobalNotificationUI(props) {
function onClose(e) {
let { onClose } = props;
cancelBubblingEffect(e);
onClose && onClose(e);
}
let { type = '', message, onClick, closeTitle = '', customProps = {}, dataSelectorId, shadowCount, needShadow, eleRef } = props;
let { ExtraProps = {} } = customProps;
return (
<div
ref={eleRef}
className={
` ${style.message}
${needShadow && shadowCount >=2 ?
shadowCount > 2 ? `${style.stackShadowTwo} ${style.stackShadowOne}`: style.stackShadowOne
: ''}
${type ? style[type] : ''}
`}
data-id={`show_${type}_message`}
data-test-id={`show_${type}_message`}
tabIndex={0}
data-selector-id={dataSelectorId}
{...ExtraProps}
>
<Container className={`${style.container}`} alignBox='row' isCover={false} align='vertical' isInline>
<Box className={style.icon}>
<AlertIcons type={type} variant='secondary' />
</Box>
<Box flexible>
<div
className={style.text}
onClick={onClick}
data-id='infoMessage'
data-test-id='infoMessage'
dangerouslySetInnerHTML={{
__html: message
}}
/>
</Box>
<Box className={style.close}>
<AlertClose dataId={`close_${type}_message`} dataTitle={closeTitle} onClose={onClose} type={type} />
</Box>
</Container>
</div>
);
}
GlobalNotificationUI.propTypes = UI_propTypes;
export function GlobalNotificationNew(props) {
return <AutoClose {...props} Element={GlobalNotificationUI} />;
}
GlobalNotificationNew.propTypes = new_propTypes; |