@up-group-ui/react-controls/dist/Components/Display/Notification/UpNotification.js

Up shared react controls

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.UpNotification = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var React = (0, tslib_1.__importStar)(require("react"));
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var Grid_1 = require("../../Containers/Grid");
var UpModal_1 = (0, tslib_1.__importDefault)(require("../../Containers/Modal/UpModal"));
var Heading_1 = (0, tslib_1.__importDefault)(require("../../Display/Heading"));
var iconMap_1 = (0, tslib_1.__importDefault)(require("../../../Common/theming/iconMap"));
var SvgIcon_1 = (0, tslib_1.__importDefault)(require("../SvgIcon"));
var theming_1 = (0, tslib_1.__importDefault)(require("../../../Common/theming"));
var styles_1 = require("./styles");
var withTheme_1 = (0, tslib_1.__importDefault)(require("../../../Common/theming/withTheme"));
var Box_1 = (0, tslib_1.__importDefault)(require("../../Containers/Box"));
var helpers_1 = require("../../../Common/utils/helpers");
var typestyle_1 = require("typestyle");
var utils_1 = require("../../../Common/theming/utils");
var UpNotification = function (props) {
    var children = props.children, message = props.message, intent = props.intent, theme = props.theme, title = props.title, className = props.className, durationBeforeClosing = props.durationBeforeClosing, dismissable = props.dismissable, onCloseClick = props.onCloseClick;
    var icon = null;
    var cancelIcon = null;
    var autoClosingTimeout;
    var iconSize = props.iconSize || (theme && theme.notificationIconSize != null ? theme.notificationIconSize : 60);
    var _a = React.useState(true), isVisible = _a[0], setIsVisible = _a[1];
    React.useEffect(function () {
        if (durationBeforeClosing && dismissable) {
            autoClosingTimeout = new helpers_1.setTimeOutWithPause(function () {
                setIsVisible(false);
            }, durationBeforeClosing * 1000);
        }
        return function () {
            autoClosingTimeout && autoClosingTimeout.clearTimeout();
        };
    }, [durationBeforeClosing, dismissable]);
    if (intent && iconMap_1.default[intent]) {
        icon = (0, jsx_runtime_1.jsx)(SvgIcon_1.default, { iconName: iconMap_1.default[intent], width: iconSize, height: iconSize }, void 0);
    }
    if (onCloseClick || dismissable) {
        cancelIcon = (0, jsx_runtime_1.jsx)(SvgIcon_1.default, { iconName: iconMap_1.default['error'], width: '10px', height: '10px' }, void 0);
    }
    var handleIconClick = function () {
        setIsVisible(false);
        if (onCloseClick)
            onCloseClick();
    };
    var NotificationRender = function () { return ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'up-notification', style: { overflow: 'hidden' } }, { children: (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: (0, classnames_1.default)((0, styles_1.getStyles)(props), className, 'up-notification-container') }, { children: [(0, jsx_runtime_1.jsxs)(Grid_1.UpGrid, (0, tslib_1.__assign)({ className: 'up-notification' }, { children: [props.displayMode !== 'modal' && title && ((0, jsx_runtime_1.jsx)(Grid_1.UpRow, { children: (0, jsx_runtime_1.jsx)(Grid_1.UpCol, (0, tslib_1.__assign)({ span: 24 }, { children: (0, jsx_runtime_1.jsx)(Heading_1.default, (0, tslib_1.__assign)({ tag: 'h2', textAlign: 'left', className: (0, typestyle_1.style)({
                                        marginLeft: (0, utils_1.toRem)(25),
                                    }) }, { children: title }), void 0) }), void 0) }, void 0)), (0, jsx_runtime_1.jsx)(Grid_1.UpRow, { children: (0, jsx_runtime_1.jsxs)(Box_1.default, (0, tslib_1.__assign)({ flexDirection: 'row', alignContent: 'flex-start', justifyContent: 'center', alignItems: 'center' }, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: "up-notification-icon-container" }, { children: icon }), void 0), (message || children) && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: "up-notification-message" }, { children: message || children }), void 0)] }), void 0) }, void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: "cancel-icon", onClick: handleIconClick }, { children: cancelIcon }), void 0)] }), void 0), durationBeforeClosing && ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: "up-notification-progress-bar-container" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "up-notification-progress-bar" }, void 0) }), void 0))] }), void 0) }), void 0)); };
    if (!isVisible) {
        return null;
    }
    if (props.displayMode == 'modal') {
        return ((0, jsx_runtime_1.jsx)(UpModal_1.default, (0, tslib_1.__assign)({ header: title, showModal: true }, { children: (0, jsx_runtime_1.jsx)(NotificationRender, {}, void 0) }), void 0));
    }
    return (0, jsx_runtime_1.jsx)(NotificationRender, {}, void 0);
};
exports.UpNotification = UpNotification;
UpNotification.defaultProps = {
    message: '',
    theme: theming_1.default,
    displayMode: 'inline',
    intent: 'info',
    iconSize: '15px',
};
exports.default = (0, withTheme_1.default)(UpNotification);
//# sourceMappingURL=UpNotification.js.map