@up-group-ui/react-controls
Version:
Up shared react controls
64 lines • 3.86 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.UpToast = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var Heading_1 = (0, tslib_1.__importDefault)(require("../Heading"));
var helpers_1 = require("../../../Common/utils/helpers");
var theming_1 = (0, tslib_1.__importStar)(require("../../../Common/theming"));
var Notification_1 = (0, tslib_1.__importDefault)(require("../Notification"));
var SvgIcon_1 = (0, tslib_1.__importDefault)(require("../SvgIcon"));
var styles_1 = require("./styles");
var UpToast = function (props) {
var manualClosingTimeout;
var autoClosingTimeout;
var message = props.message, children = props.children, intent = props.intent, title = props.title, duration = props.duration, theme = props.theme, autoDismissable = props.autoDismissable;
var _a = react_1.default.useState(true), isVisible = _a[0], setIsVisible = _a[1];
var _b = react_1.default.useState(false), isUnmounting = _b[0], setIsUnmounting = _b[1];
react_1.default.useEffect(function () {
if (duration && autoDismissable) {
setIsUnmounting(false);
setIsVisible(true);
autoClosingTimeout = new helpers_1.setTimeOutWithPause(function () {
handleClose();
}, duration);
}
return function () {
autoClosingTimeout && autoClosingTimeout.clearTimeout();
manualClosingTimeout && clearTimeout(manualClosingTimeout);
};
}, [duration, autoDismissable]);
var handleClose = function () {
setIsUnmounting(true);
manualClosingTimeout = setTimeout(function () {
if (props.onClose) {
props.onClose();
}
setIsUnmounting(false);
setIsVisible(false);
}, 1000);
};
var onMouseOver = function () {
if (autoClosingTimeout)
autoClosingTimeout.pause();
};
var onMouseLeave = function () {
if (autoClosingTimeout)
autoClosingTimeout.resume();
};
if (!isVisible) {
return null;
}
return ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: (0, classnames_1.default)((0, styles_1.wrapperToastStyle)(isUnmounting), (0, styles_1.getIntentStyle)(intent, theme)), onMouseEnter: onMouseOver, onMouseLeave: onMouseLeave }, { children: [title && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Heading_1.default, (0, tslib_1.__assign)({ tag: 'h4', margin: 'none', className: (0, classnames_1.default)(styles_1.toastTitleStyle, 'up-toast-title') }, { children: title }), void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: (0, classnames_1.default)(styles_1.buttonStyle, 'up-toast-close'), onClick: handleClose }, { children: (0, jsx_runtime_1.jsx)(SvgIcon_1.default, { width: '15px', height: '15px', iconName: 'close' }, void 0) }), void 0)] }, void 0)), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'up-toast-body' }, { children: (message != null || children != null) && ((0, jsx_runtime_1.jsx)(Notification_1.default, (0, tslib_1.__assign)({ iconSize: '32px', className: 'up-toast-message', message: message, intent: intent, onCloseClick: !title && handleClose, durationBeforeClosing: props.autoDismissable && (0, styles_1.convertDurationFromMsToSecond)(duration) }, { children: children }), void 0)) }), void 0)] }), void 0));
};
exports.UpToast = UpToast;
UpToast.defaultProps = {
intent: 'default',
duration: 3000,
autoDismissable: true,
theme: theming_1.default,
};
exports.default = (0, theming_1.withTheme)(UpToast);
//# sourceMappingURL=UpToast.js.map