@zohodesk/dot
Version:
In this Library, we Provide Some Basic Components to Build Your Application
74 lines (73 loc) • 2.46 kB
JavaScript
import React, { Component } from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import Title from "../../lookup/header/Title/Title";
import { Container, Box } from '@zohodesk/components/es/Layout';
import { Icon } from '@zohodesk/icons';
import Close from "../../lookup/header/Close/Close";
import style from "./AlertHeader.module.css";
export default class AlertHeader extends Component {
render() {
let {
title,
palette,
needIcon,
iconType,
onClose,
iconName,
iconSize,
closeTitle,
children,
breakChildren,
dataId,
iconClass
} = this.props;
let iconObj = {
delete: 'ZD-socialDelete',
alert: 'ZD-exclamationThincircle',
remoteAssist: 'ZD-taskDemo',
splitTicket: 'ZD-splitNew',
update: 'ZD-update'
};
return /*#__PURE__*/React.createElement(Container, {
align: "vertical",
alignBox: "row",
className: `${style.container} ${style[palette]}`,
isCover: false,
wrap: "wrap",
dataId: `${dataId}_alertHeader`
}, needIcon ? /*#__PURE__*/React.createElement("div", {
className: style.iconContainer
}, /*#__PURE__*/React.createElement(Icon, {
size: iconSize,
name: iconName ? iconName : iconObj[iconType] ? iconObj[iconType] : iconName,
iconClass: `${style.iconStyle} ${iconObj[iconType] && !iconSize ? style[`icon_${iconType}`] : ''} ${style[`text_${palette}`]} ${iconClass}`
})) : null, /*#__PURE__*/React.createElement(Box, {
flexible: true
}, /*#__PURE__*/React.createElement(Container, {
alignBox: "row",
align: "vertical",
wrap: breakChildren ? 'wrap' : null
}, /*#__PURE__*/React.createElement(Box, {
className: style.title,
shrink: true
}, /*#__PURE__*/React.createElement(Title, {
text: title,
palette: palette
})), children ? /*#__PURE__*/React.createElement(Box, {
adjust: true,
flexible: true
}, children) : null)), onClose ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Close, {
onClose: onClose,
title: closeTitle,
dataId: `${dataId}_close`
})) : null);
}
}
AlertHeader.propTypes = propTypes;
AlertHeader.defaultProps = defaultProps; // if (__DOCS__) {
// AlertHeader.docs = {
// componentGroup: 'AlertHeader',
// folderName: 'Alert'
// };
// }