@geneui/components
Version:
The Gene UI components library designed for BI tools
99 lines (95 loc) • 6.26 kB
JavaScript
import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import React__default from 'react';
import PropTypes from 'prop-types';
import { c as classnames } from '../index-031ff73c.js';
import { s as screenTypes } from '../configs-00612ce0.js';
import '../dateValidation-67caec66.js';
import 'react-dom';
import useDeviceType from '../hooks/useDeviceType.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\"] .alert-holder{background:var(--background);border-radius:.6rem;width:100%;word-break:break-word}[data-gene-ui-version=\"2.16.5\"] .toaster-holder.top .alert-holder.mobile-view:first-child,[data-gene-ui-version=\"2.16.5\"] .toaster-holder.top .alert-holder.mobile-view:first-child .alert-box{border-top-left-radius:0;border-top-right-radius:0}[data-gene-ui-version=\"2.16.5\"] .toaster-holder.bottom .alert-holder.mobile-view:last-child,[data-gene-ui-version=\"2.16.5\"] .toaster-holder.bottom .alert-holder.mobile-view:last-child .alert-box{border-bottom-left-radius:0;border-bottom-right-radius:0}[data-gene-ui-version=\"2.16.5\"] .alert-box{background:rgba(var(--confirm-rgb),.1);border:1px solid var(--confirm);border-radius:.6rem;display:flex;min-height:4.2rem;padding:.8rem .7rem;width:100%}[data-gene-ui-version=\"2.16.5\"] .alert-box.type-info{--confirm:var(--hero);--confirm-hover:var(--hero-hover);--confirm-sc:var(--hero-sc);--confirm-rgb:var(--hero-rgb);--confirm-sc-rgb:var(--hero-sc-rgb)}[data-gene-ui-version=\"2.16.5\"] .alert-box.type-warning{--confirm:var(--warning);--confirm-hover:var(--warning-hover);--confirm-sc:var(--warning-sc);--confirm-rgb:var(--warning-rgb);--confirm-sc-rgb:var(--warning-sc-rgb)}[data-gene-ui-version=\"2.16.5\"] .alert-box.type-error{--confirm:var(--danger);--confirm-hover:var(--danger-hover);--confirm-sc:var(--danger-sc);--confirm-rgb:var(--danger-rgb);--confirm-sc-rgb:var(--danger-sc-rgb)}[data-gene-ui-version=\"2.16.5\"] .alert-box.type-note{--confirm:var(--note);--confirm-hover:var(--note-hover);--confirm-sc:var(--note-sc);--confirm-rgb:var(--note-rgb);--confirm-sc-rgb:var(--note-sc-rgb)}[data-gene-ui-version=\"2.16.5\"] .alert-box.type-message{--confirm:var(--message);--confirm-hover:var(--message-hover);--confirm-sc:var(--message-sc);--confirm-rgb:var(--message-rgb);--confirm-sc-rgb:var(--message-sc-rgb)}[data-gene-ui-version=\"2.16.5\"] .alert-holder.mobile-view .alert-box{border-bottom-color:rgba(var(--background-sc-rgb),.1);border-width:0 0 1px}[data-gene-ui-version=\"2.16.5\"] .toaster-holder:not(.top,.bottom,.center) .alert-holder.mobile-view .alert-box{border-radius:0}[data-gene-ui-version=\"2.16.5\"] .alert-box>li{flex-shrink:0;padding:0 .7rem}[data-gene-ui-version=\"2.16.5\"] .alert-box>li.ab-c-c{align-self:center;flex:auto;margin:.4rem 0}[data-gene-ui-version=\"2.16.5\"] .alert-box>li.ab-bc-icon-c{max-width:100%}[data-gene-ui-version=\"2.16.5\"] .alert-box>li a,[data-gene-ui-version=\"2.16.5\"] .alert-box>li.ab-bc-icon-c{color:var(--confirm)}[data-gene-ui-version=\"2.16.5\"] .alert-box .bc-icon-close{cursor:pointer}@media (hover:hover){[data-gene-ui-version=\"2.16.5\"] .alert-box .bc-icon-close:hover{color:var(--confirm)}}[data-gene-ui-version=\"2.16.5\"] .alert-box a{color:var(--hero);font-weight:600}[data-gene-ui-version=\"2.16.5\"] .alert-box-title{font:600 1.4rem/1.8rem var(--font-family)}[data-gene-ui-version=\"2.16.5\"] .alert-text{font:600 1.2rem/1.42 var(--font-family);margin:.8rem 0 0}";
styleInject(css_248z);
const alertTypes = ['success', 'info', 'warning', 'error', 'note', 'message'];
function Alert(_ref) {
let {
type,
title,
onClose,
message,
screenType,
iconProps,
swapIcon,
className,
...rest
} = _ref;
const {
isMobile
} = useDeviceType(screenType);
return /*#__PURE__*/React__default.createElement("div", _extends({
className: classnames('alert-holder', {
'mobile-view': isMobile
}, className)
}, rest), /*#__PURE__*/React__default.createElement("ul", {
className: classnames('alert-box', "type-".concat(type))
}, (swapIcon || iconProps) && /*#__PURE__*/React__default.createElement("li", {
className: "ab-bc-icon-c"
}, swapIcon || /*#__PURE__*/React__default.createElement(Icon, {
type: "bc-icon-".concat(type === 'warning' ? 'info' : type).concat(iconProps.isFilled ? '-fill' : '')
})), /*#__PURE__*/React__default.createElement("li", {
className: "ab-c-c"
}, /*#__PURE__*/React__default.createElement("div", {
className: "alert-box-title"
}, title), message && /*#__PURE__*/React__default.createElement("div", {
className: "alert-text"
}, message)), !!onClose && /*#__PURE__*/React__default.createElement("li", {
className: "ab-action-c",
onClick: onClose
}, /*#__PURE__*/React__default.createElement(Icon, {
type: "bc-icon-close"
}))));
}
Alert.propTypes = {
/**
* Alert type is for specifying information message to be delivered. Also a corresponding "Icon" atom will be displayed
*/
type: PropTypes.oneOf(alertTypes),
/**
* Main field to describe alert information. Any valid React node
*/
title: PropTypes.node.isRequired,
/**
* Additional classname
*/
className: PropTypes.string,
/**
* Use this field for describing information more verbose. Any valid React node
*/
message: PropTypes.node,
/**
* The switch between mobile and desktop version of Alert will be applied automatically, when the prop is not specified.
* When the prop is present it must be changed from outside.
*/
screenType: PropTypes.oneOf(screenTypes),
/**
* When function is passed an "Icon" atom("type": "bc-icon-close") will be displayed((event: Event) => void).
*/
onClose: PropTypes.func,
/**
* Same as "Icon" atom props
*/
iconProps: PropTypes.shape({
...Icon.propTypes
}),
/**
* Use this prop for replace main "Icon". Note that when the prop is specified "type" prop will not work(will be overlooked).
*/
swapIcon: PropTypes.node
};
Alert.defaultProps = {
type: 'info'
};
export { alertTypes, Alert as default };