@geneui/components
Version:
The Gene UI components library designed for BI tools
121 lines (117 loc) • 6.25 kB
JavaScript
import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import React__default from 'react';
import { c as classnames } from '../index-031ff73c.js';
import PropTypes from 'prop-types';
import '../dateValidation-67caec66.js';
import 'react-dom';
import useDeviceType from '../hooks/useDeviceType.js';
import { s as screenTypes } from '../configs-00612ce0.js';
import Icon from '../Icon/index.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import '../_commonjsHelpers-24198af3.js';
import '../hooks/useWindowSize.js';
import '../hooks/useDebounce.js';
var css_248z = "[data-gene-ui-version=\"2.16.5\"] .notifier-block{align-items:flex-start;background:var(--background);border:1px solid rgba(var(--background-sc-rgb),.1);border-radius:1rem;box-shadow:0 .2rem .4rem 0 #0000001a;cursor:pointer;display:flex;height:8.5rem;transition:border-color .3s;width:100%}[data-gene-ui-version=\"2.16.5\"] .notifier-block.mobile-view{border-radius:0;border-width:0 0 1px;box-shadow:none}[data-gene-ui-version=\"2.16.5\"] .notifier-block>li{flex-shrink:0}[data-gene-ui-version=\"2.16.5\"] .notifier-block>li.notifier-icon{align-self:stretch}[data-gene-ui-version=\"2.16.5\"] .notifier-block>li.notifier-content{flex:auto;overflow:hidden;padding:1.2rem 1.4rem;width:10rem}[data-gene-ui-version=\"2.16.5\"] .notifier-block>li.notifier-action{padding:1rem 1.5rem 0 0}html[dir=rtl] .notifier-block>li.notifier-action{padding:1rem 0 0 1.5rem}[data-gene-ui-version=\"2.16.5\"] .notifier-block>li.notifier-action .icon{cursor:pointer}@media (hover:hover){[data-gene-ui-version=\"2.16.5\"] .notifier-block>li.notifier-action .icon:hover{color:var(--hero)}[data-gene-ui-version=\"2.16.5\"] .notifier-block:hover{border-color:var(--hero)}}[data-gene-ui-version=\"2.16.5\"] .notifier-icon{align-items:center;background:rgba(var(--hero-rgb),.28);border-radius:.9rem 0 0 .9rem;color:var(--background);display:flex;font-size:4.2rem;justify-content:center;width:8.5rem}html[dir=rtl] .notifier-icon{border-radius:0 .9rem .9rem 0}[data-gene-ui-version=\"2.16.5\"] .notifier-block.mobile-view .notifier-icon{border-radius:0}[data-gene-ui-version=\"2.16.5\"] .type-clean .notifier-icon{background:none;color:rgba(var(--hero-rgb),.48)}html:not([dir=rtl]) .type-clean .notifier-icon{border-right:1px solid rgba(var(--background-sc-rgb),.1)}html[dir=rtl] .type-clean .notifier-icon{border-left:1px solid rgba(var(--background-sc-rgb),.1)}[data-gene-ui-version=\"2.16.5\"] .notifier-title{font:600 1.4rem/1.36 var(--font-family);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-gene-ui-version=\"2.16.5\"] .notifier-c-t{margin:.8rem 0 0}[data-gene-ui-version=\"2.16.5\"] .notifier-c-t>ul{display:grid;font:600 1.2rem/1.42 var(--font-family);grid-template-areas:\"c1 c2\";grid-template-columns:auto 1fr}[data-gene-ui-version=\"2.16.5\"] .notifier-c-t>ul>li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-gene-ui-version=\"2.16.5\"] .notifier-c-t>ul>li:first-child{grid-area:c1;opacity:.5;width:6.4rem}[data-gene-ui-version=\"2.16.5\"] .notifier-c-t>ul>li:nth-child(2){grid-area:c2}";
styleInject(css_248z);
const notificationTypes = ['default', 'clean'];
function Notification(_ref) {
let {
type,
onClose,
closable,
content,
title,
heading,
className,
screenType,
additionalHeading,
notificationIcon,
onContentClick,
description,
additionalDescription,
...restProps
} = _ref;
const {
isMobile
} = useDeviceType(screenType);
return /*#__PURE__*/React__default.createElement("ul", _extends({
onClick: onContentClick,
className: classnames('notifier-block', className, "type-".concat(type), {
'mobile-view': isMobile
})
}, restProps), type && /*#__PURE__*/React__default.createElement("li", {
className: classnames('notifier-icon', notificationIcon)
}), /*#__PURE__*/React__default.createElement("li", {
className: "notifier-content"
}, /*#__PURE__*/React__default.createElement("div", {
className: "notifier-title"
}, title), content || /*#__PURE__*/React__default.createElement("div", {
className: "notifier-c-t"
}, heading && /*#__PURE__*/React__default.createElement("ul", null, /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement("span", null, heading)), /*#__PURE__*/React__default.createElement("li", null, description)), additionalHeading && /*#__PURE__*/React__default.createElement("ul", null, /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement("span", null, additionalHeading)), /*#__PURE__*/React__default.createElement("li", null, additionalDescription)))), closable && /*#__PURE__*/React__default.createElement("li", {
className: "notifier-action",
onClick: onClose
}, /*#__PURE__*/React__default.createElement(Icon, {
type: "bc-icon-close"
})));
}
Notification.propTypes = {
/**
* Type of the Notification component.
*/
type: PropTypes.oneOf(notificationTypes),
/**
* If true displays close button
*/
closable: PropTypes.bool,
/**
* CSS class name for element
*/
className: PropTypes.string,
/**
* Fires event when user clicks on close button
* (event: Event) => void
*/
onClose: PropTypes.func,
/**
* Custom content form notification
*/
content: PropTypes.element,
/**
* Fires when user click on notification modal
* (event: Event) => void
*/
onContentClick: PropTypes.func,
/**
* Heading text for notification modal
*/
heading: PropTypes.string,
/**
* Descriptions text fro notification
*/
description: PropTypes.string,
/**
* Controls screen type
*/
screenType: PropTypes.oneOf(screenTypes),
/**
* Additional heading text for notification
*/
additionalHeading: PropTypes.string,
/**
* Notification icon
*/
notificationIcon: PropTypes.string.isRequired,
/**
* Additional info for notification
*/
additionalDescription: PropTypes.string,
/**
* Title for notification
*/
title: PropTypes.string.isRequired
};
Notification.defaultProps = {
type: notificationTypes[0],
closable: false
};
export { Notification as default, notificationTypes };