import { __assign } from "tslib";
import React, { useContext, useState } from 'react';
import classNames from 'classnames';
import { CSSTransition } from 'react-transition-group';
import Overlay from '../overlay';
import { ConfigContext } from '../config-provider/config-context';
import { getPrefixCls } from '../_utils/general';
var Drawer = function (props) {
    var visible = props.visible, _a = props.placement, placement = _a === void 0 ? 'right' : _a, _b = props.size, size = _b === void 0 ? 256 : _b, _c = props.closable, closable = _c === void 0 ? true : _c, _d = props.unmountOnClose, unmountOnClose = _d === void 0 ? true : _d, _e = props.maskType, maskType = _e === void 0 ? 'default' : _e, _f = props.maskClosable, maskClosable = _f === void 0 ? true : _f, onClose = props.onClose, customisedCls = props.prefixCls, afterClose = props.afterClose, _g = props.zIndex, zIndex = _g === void 0 ? 1000 : _g, header = props.header, footer = props.footer, className = props.className, maskStyle = props.maskStyle, style = props.style, children = props.children;
    var _h = useState(visible), drawerVisible = _h[0], setDrawerVisible = _h[1];
    var configContext = useContext(ConfigContext);
    var prefixCls = getPrefixCls('drawer', configContext.prefixCls, customisedCls);
    var cls = classNames(prefixCls, className, prefixCls + "_" + placement);
    var sty = placement === 'top' || placement === 'bottom' ? { height: size } : { width: size };
    return (React.createElement(Overlay, { onEnter: function () { return setDrawerVisible(true); }, onExit: function () { return setDrawerVisible(false); }, zIndex: zIndex, type: maskType, unmountOnExit: unmountOnClose, isShow: visible, onExited: afterClose, clickCallback: function (e) {
            maskClosable && onClose ? onClose(e) : undefined;
        }, style: maskStyle },
        React.createElement("div", { className: cls, style: __assign(__assign({}, style), sty) },
            React.createElement(CSSTransition, { appear: true, in: drawerVisible, timeout: 0, classNames: prefixCls + "__content_move" },
                React.createElement("div", { className: prefixCls + "__content", onClick: function (e) { return e.stopPropagation(); } },
                    closable && (React.createElement("div", { className: prefixCls + "__close-btn", onClick: onClose }, "\u2715")),
                    header && React.createElement("div", { className: prefixCls + "__header" }, header),
                    React.createElement("div", { className: prefixCls + "__body" }, children),
                    footer && React.createElement("div", { className: prefixCls + "__footer" }, footer))))));
};
Drawer.displayName = 'Drawer';
export default Drawer;
//# sourceMappingURL=index.js.map