@littlespoon/drawer/lib/Drawer.js

Little Spoon drawer

"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SHOW_HIDE_ANIMATION_DURATION = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
var icons_1 = require("@littlespoon/icons");
var token_1 = require("@littlespoon/theme/lib/colors/token");
var react_1 = require("react");
var react_focus_on_1 = require("react-focus-on");
var Backdrop_1 = __importDefault(require("./Backdrop"));
var DrawerBase_1 = require("./DrawerBase");
var Portal_1 = __importDefault(require("./Portal"));
// Show/Hide animation duration in milliseconds
exports.SHOW_HIDE_ANIMATION_DURATION = 300;
function Drawer(_a) {
    var ariaLabel = _a["aria-label"], children = _a.children, className = _a.className, _b = _a.closeButtonTitle, closeButtonTitle = _b === void 0 ? 'Close' : _b, _c = _a["data-test"], dataTest = _c === void 0 ? '@modal:drawer' : _c, _d = _a.disableBackdropClick, disableBackdropClick = _d === void 0 ? false : _d, _e = _a.disableEscapeKeyDown, disableEscapeKeyDown = _e === void 0 ? false : _e, onClose = _a.onClose, _f = _a.open, open = _f === void 0 ? false : _f, _g = _a.showCloseButton, showCloseButton = _g === void 0 ? false : _g, _h = _a.useFullHeight, useFullHeight = _h === void 0 ? false : _h;
    var initialBackdropOpacity = 0;
    var initialDrawerMargin = -1000;
    var finalBackdropOpacity = 1;
    var finalDrawerMargin = 0;
    var _j = (0, react_1.useState)(false), isOpen = _j[0], setIsOpen = _j[1];
    var _k = (0, react_1.useState)(initialDrawerMargin), drawerMargin = _k[0], setDrawerMargin = _k[1];
    var _l = (0, react_1.useState)(initialBackdropOpacity), backdropOpacity = _l[0], setBackdropOpacity = _l[1];
    var playShowDrawerAnimation = function () {
        // We want to execute it after the rerender
        setTimeout(function () {
            setDrawerMargin(finalDrawerMargin);
            setBackdropOpacity(finalBackdropOpacity);
        }, 1);
    };
    var playHideDrawerAnimation = function () {
        // We want to execute it after the rerender
        setTimeout(function () {
            setBackdropOpacity(initialBackdropOpacity);
            setDrawerMargin(initialDrawerMargin);
        }, 1);
    };
    (0, react_1.useEffect)(function () {
        var timeoutId = null;
        if (isOpen && !open) {
            // If the drawer is already open and we want to close it by updating the `open` prop, then play the hide animation
            playHideDrawerAnimation();
            timeoutId = setTimeout(function () {
                setIsOpen(false);
            }, exports.SHOW_HIDE_ANIMATION_DURATION);
        }
        else {
            setIsOpen(open);
        }
        return function () {
            if (timeoutId) {
                clearTimeout(timeoutId);
            }
        };
    }, [open]);
    (0, react_1.useEffect)(function () {
        if (isOpen) {
            playShowDrawerAnimation();
        }
        else {
            playHideDrawerAnimation();
        }
    }, [isOpen]);
    if (!isOpen) {
        return null;
    }
    var handleClose = function () {
        if (!onClose) {
            return;
        }
        playHideDrawerAnimation();
        setTimeout(function () {
            setIsOpen(false);
            onClose();
        }, exports.SHOW_HIDE_ANIMATION_DURATION);
    };
    var onEscapeKey = disableEscapeKeyDown ? undefined : handleClose;
    var onBackdropClick = disableBackdropClick ? undefined : handleClose;
    return ((0, jsx_runtime_1.jsx)(Portal_1.default, { children: (0, jsx_runtime_1.jsxs)(react_focus_on_1.FocusOn, __assign({ onEscapeKey: onEscapeKey }, { children: [(0, jsx_runtime_1.jsx)(Backdrop_1.default, { onClick: onBackdropClick, open: isOpen, opacity: backdropOpacity }), (0, jsx_runtime_1.jsxs)(DrawerBase_1.DrawerBase, __assign({ hiddenMargin: drawerMargin, "aria-label": ariaLabel, "aria-modal": true, className: className, "data-test": dataTest, role: "dialog", showCloseButton: showCloseButton }, { children: [(0, jsx_runtime_1.jsx)(DrawerBase_1.DrawerContent, __assign({ tabIndex: -1, useFullHeight: useFullHeight, "data-testid": "".concat(dataTest, ":content") }, { children: children })), showCloseButton && ((0, jsx_runtime_1.jsx)(DrawerBase_1.DrawerCloseButton, __assign({ "aria-label": closeButtonTitle, "data-test": "@button:closeDrawer", onClick: handleClose, title: closeButtonTitle }, { children: (0, jsx_runtime_1.jsx)(icons_1.CloseIcon, { "aria-hidden": true, fill: token_1.shadeBlack, stroke: token_1.shadeWhite }) })))] }))] })) }));
}
exports.default = Drawer;
//# sourceMappingURL=Drawer.js.map