robust-react-ui/build/components/AlertDialogue/AlertDialogue.js

A React component library, built with a focus on accessibility, extensibility and reusability.

'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var index = require('../../utils/getClassNames/index.js');
var index$1 = require('../Typography/index2.js');
var index$2 = require('../Button/index2.js');

// Generated with util/create-component.js
var AlertDialogue = function (_a) {
    var open = _a.open, titleText = _a.titleText, bodyText = _a.bodyText, _b = _a.confirmButtonText, confirmButtonText = _b === void 0 ? 'Confrim' : _b, _c = _a.cancelButtonText, cancelButtonText = _c === void 0 ? 'Cancel' : _c, onCloseActionFunction = _a.onCloseActionFunction, onConfirmActionFunction = _a.onConfirmActionFunction;
    var ref = React__default.createRef();
    var ref2 = React__default.createRef();
    var focusOnButton = function () { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus(); };
    React.useEffect(function () {
        if (open) {
            focusOnButton();
        }
    }, [open]);
    var handleKeyDown = function (event) {
        if (event.key === 'Escape') {
            onCloseActionFunction();
        }
    };
    var handleCancelKeyDown = function (event) {
        var _a, _b;
        var keyCode = event.keyCode, shiftKey = event.shiftKey;
        if (keyCode === 9) {
            event.preventDefault();
            if (shiftKey) {
                // handle back
                (_a = ref2.current) === null || _a === void 0 ? void 0 : _a.focus();
            }
            else {
                // handle tab forward
                (_b = ref2.current) === null || _b === void 0 ? void 0 : _b.focus();
            }
        }
        if (keyCode === 38 || keyCode === 40) {
            // stop vert scrolling
            event.preventDefault();
        }
    };
    var handleConfirmKeyDown = function (event) {
        var _a, _b;
        var keyCode = event.keyCode, shiftKey = event.shiftKey;
        if (keyCode === 9) {
            event.preventDefault();
            if (shiftKey) {
                // handle back
                (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
            }
            else {
                // handle tab forward
                (_b = ref.current) === null || _b === void 0 ? void 0 : _b.focus();
            }
        }
        if (keyCode === 38 || keyCode === 40) {
            // stop vert scrolling
            event.preventDefault();
        }
    };
    return (
    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
    React__default.createElement("div", { onKeyDown: handleKeyDown, "data-testid": "AlertDialogue", className: index({
            'rrui-modal__overlay': true,
            'rrui-modal__overlay--active': open,
        }) },
        React__default.createElement("div", { id: "alert_dialog", role: "alertdialog", "aria-modal": "true", "aria-labelledby": "dialog_label", "aria-describedby": "dialog_desc", className: "rrui-modal__content" },
            React__default.createElement(index$1.Heading, { level: 2, id: "dialog_label" }, titleText),
            React__default.createElement("div", { id: "dialog_desc", className: "dialog_desc" },
                React__default.createElement(index$1.Paragraph, null, bodyText)),
            React__default.createElement("div", { className: "rrui-modal__actions" },
                React__default.createElement(index$2, { onKeyDownFunction: handleCancelKeyDown, variant: "secondary", ref: ref, onClickFunction: onCloseActionFunction }, cancelButtonText),
                React__default.createElement(index$2, { onKeyDownFunction: handleConfirmKeyDown, ref: ref2, onClickFunction: onConfirmActionFunction }, confirmButtonText)))));
};

module.exports = AlertDialogue;
//# sourceMappingURL=AlertDialogue.js.map