@heroku/react-hk-components/dist/HKModal.js

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __assign = (this && this.__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;
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_malibu_1 = require("@heroku/react-malibu");
var classnames = require("classnames");
var React = require("react");
var react_transition_group_1 = require("react-transition-group");
var simple_react_modal_1 = require("simple-react-modal");
var HKButton_1 = require("./HKButton");
var Type;
(function (Type) {
    Type["Actionable"] = "actionable";
    Type["Destructive"] = "destructive";
    Type["Presentation"] = "presentation";
})(Type = exports.Type || (exports.Type = {}));
/*
Dramatis personae of the event flow in this component
* Show: props.show. Used by the controlling component to indicate a desire to show/hide.
* iS: state.isShowing. Initially false.
* iC: state.isClosing. Initially false.
* in: What should be passed as a prop to <Transition in={ aBoolean } ... />

   Show  iS  iC  in
1. F     F   F   -   never displayed
2. T     F   F   -   controlling component wants us to display! gDSFP will derive the state on the following line.
3. T     T   F   T   Shows the modal. In becomes true so transition in happens.
4. *** props.onDismiss() is called, resulting in the controlling component setting show to F ***
5. F     T   F   T   controlling component wants us to hide! gDSFP will derive the following state
6. F     T   T   F   Transition to closed. In becomes false, triggers transition state "exiting"
7. *** Transition out continues until handleExited() fires, setting isShowing to false
8. F     F   T   F   Modal is hidden. Transition state is 'exited'
9. T     F   T   F   Controlling component wants us to display! gDSFP will take us to step 3.
*/
var HKModal = /** @class */ (function (_super) {
    __extends(HKModal, _super);
    function HKModal() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            isClosing: false,
            isShowing: false,
        };
        _this.handleClose = function (e) {
            _this.props.onDismiss('cancel');
        };
        _this.handleButtonClick = function (e) {
            _this.props.onDismiss(e.currentTarget.value);
        };
        _this.handleExited = function (node) {
            node.addEventListener('transitionend', function () {
                _this.setState({ isShowing: false });
            }, false);
        };
        return _this;
    }
    HKModal.getDerivedStateFromProps = function (props, state) {
        if (props.show) {
            // reset state, we're showing the thing and not closing at all
            return { isShowing: true, isClosing: false };
        }
        else {
            // We're somewhere in the process of closing the modal
            // So set isClosing to true.
            // isShowing will be set to false by handleExited(),
            // which is the handler fired at the end of the transition out.
            return { isClosing: true };
        }
    };
    HKModal.prototype.render = function () {
        var _this = this;
        var duration = 250;
        var _a = this.props, children = _a.children, onDismiss = _a.onDismiss, header = _a.header, buttons = _a.buttons, isFlyout = _a.isFlyout, type = _a.type;
        var _b = this.state, isShowing = _b.isShowing, isClosing = _b.isClosing;
        var fadeTransition = {
            transition: "background " + duration + "ms ease-in-out, opacity " + duration + "ms ease-in-out",
        };
        var fadeStyles = {
            entered: { background: 'rgba(0, 0, 0, .2)', opacity: 1 },
            entering: { background: 'rgba(0, 0, 0, 0)', opacity: 0 },
            exited: { background: 'rgba(0, 0, 0, 0)', opacity: 0 },
            exiting: { background: 'rgba(0, 0, 0, .2)', opacity: 1 },
        };
        var innerTransition = isFlyout ? {
            transform: 'translateX(100%)',
            transition: "transform " + duration + "ms cubic-bezier(0,1,0.5,1)",
        } : {};
        var innerStyles = isFlyout ? {
            entered: { transform: 'translateX(0)', width: '350px' },
            entering: { transform: 'translateX(100%)', width: '350px' },
            exited: { transform: 'translateX(100%)', width: '350px' },
            exiting: { transform: 'translateX(0)', width: '350px' },
        } : {};
        var dismissElem = onDismiss && (React.createElement("div", { className: classnames('right-1 absolute pointer', { 'top-1': !header }), onClick: this.handleClose },
            React.createElement(react_malibu_1.MalibuIcon, { name: 'delete-16', fillClass: 'dark-gray', size: 16, extraClasses: 'icon malibu-icon h1 w1 fill-dark-gray o-50 hover-o-100 h-100 v-mid' })));
        var modalParentClass = {
            'items-center justify-center': !isFlyout,
        };
        var modalClass = {
            'fixed right-0 w7 h-100 flex flex-column': isFlyout,
            'w-100 mw7 center br1': !isFlyout,
        };
        var modalChildrenClass = {
            'flex-auto': isFlyout,
        };
        var footer = (buttons || []).map(function (b) { return (React.createElement(HKButton_1.default, { key: b.value, value: b.value, type: b.type, disabled: b.disabled, onClick: _this.handleButtonClick, className: classnames('ml1', b.classNames) }, b.text)); });
        // in={!isClosing} is derived from the state table at the top of this component
        return (React.createElement(react_transition_group_1.Transition, { in: !isClosing, timeout: 0, onExited: this.handleExited }, function (state) { return (React.createElement(simple_react_modal_1.default, { containerStyle: __assign({}, innerTransition, innerStyles[state]), containerClassName: classnames('bg-white shadow-outer-1 relative', modalClass), style: __assign({ bottom: 0, left: 0, position: 'fixed', right: 0, top: 0, zIndex: 9999 }, fadeTransition, fadeStyles[state]), className: classnames('flex flex-column', modalParentClass), closeOnOuterClick: true, show: isShowing, onClose: _this.handleClose },
            React.createElement("div", { className: classnames('hk-modal-header f4 flex items-center justify-center br--top br2', { 'bg-near-white bb b--light-silver pa4': header, 'red': type === 'destructive' }) },
                header,
                dismissElem),
            React.createElement("div", { className: classnames(modalChildrenClass) }, children),
            buttons && React.createElement("div", { className: 'bt b--light-silver w-100 pa3 tr' }, footer))); }));
    };
    HKModal.defaultProps = {
        isFlyout: false,
    };
    return HKModal;
}(React.Component));
exports.default = HKModal;
//# sourceMappingURL=HKModal.js.map