@blueprintjs/core
Version:
Core styles & components
146 lines (144 loc) • 6.82 kB
JavaScript
/*
* Copyright 2016 Palantir Technologies, Inc. All rights reserved.
* Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
* of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
* and https://github.com/palantir/blueprint/blob/master/PATENTS
*/
;
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
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;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var classNames = require("classnames");
var PureRender = require("pure-render-decorator");
var React = require("react");
var ReactDOM = require("react-dom");
var abstractComponent_1 = require("../../common/abstractComponent");
var Classes = require("../../common/classes");
var errors_1 = require("../../common/errors");
var keys_1 = require("../../common/keys");
var position_1 = require("../../common/position");
var utils_1 = require("../../common/utils");
var overlay_1 = require("../overlay/overlay");
var toast_1 = require("./toast");
var Toaster = (function (_super) {
__extends(Toaster, _super);
function Toaster() {
var _this = this;
_super.apply(this, arguments);
this.state = {
toasts: [],
};
// auto-incrementing identifier for un-keyed toasts
this.toastId = 0;
this.getDismissHandler = function (toast) { return function (timeoutExpired) {
_this.dismiss(toast.key, timeoutExpired);
}; };
this.handleClose = function (e) {
// NOTE that `e` isn't always a KeyboardEvent but that's the only type we care about
if (e.which === keys_1.ESCAPE) {
_this.clear();
}
};
}
/**
* Create a new `Toaster` instance that can be shared around your application.
* The `Toaster` will be rendered into a new element appended to the given container.
*/
Toaster.create = function (props, container) {
if (container === void 0) { container = document.body; }
if (props != null && props.inline != null) {
console.warn(errors_1.TOASTER_INLINE_WARNING);
}
var containerElement = document.createElement("div");
container.appendChild(containerElement);
return ReactDOM.render(React.createElement(Toaster, __assign({}, props, {inline: true})), containerElement);
};
Toaster.prototype.show = function (props) {
var options = this.createToastOptions(props);
this.setState(function (prevState) { return ({
toasts: [options].concat(prevState.toasts),
}); });
return options.key;
};
Toaster.prototype.update = function (key, props) {
var options = this.createToastOptions(props, key);
this.setState(function (prevState) { return ({
toasts: prevState.toasts.map(function (t) { return t.key === key ? options : t; }),
}); });
};
Toaster.prototype.dismiss = function (key, timeoutExpired) {
if (timeoutExpired === void 0) { timeoutExpired = false; }
this.setState(function (_a) {
var toasts = _a.toasts;
return ({
toasts: toasts.filter(function (t) {
var matchesKey = t.key === key;
if (matchesKey) {
utils_1.safeInvoke(t.onDismiss, timeoutExpired);
}
return !matchesKey;
}),
});
});
};
Toaster.prototype.clear = function () {
this.state.toasts.map(function (t) { return utils_1.safeInvoke(t.onDismiss, false); });
this.setState({ toasts: [] });
};
Toaster.prototype.getToasts = function () {
return this.state.toasts;
};
Toaster.prototype.render = function () {
// $pt-transition-duration * 3 + $pt-transition-duration / 2
var classes = classNames(Classes.TOAST_CONTAINER, this.getPositionClasses(), this.props.className);
return (React.createElement(overlay_1.Overlay, {autoFocus: this.props.autoFocus, canEscapeKeyClose: this.props.canEscapeKeyClear, canOutsideClickClose: false, className: classes, enforceFocus: false, hasBackdrop: false, inline: this.props.inline, isOpen: this.state.toasts.length > 0, onClose: this.handleClose, transitionDuration: 350, transitionName: "pt-toast"}, this.state.toasts.map(this.renderToast, this)));
};
Toaster.prototype.validateProps = function (props) {
if (props.position === position_1.Position.LEFT || props.position === position_1.Position.RIGHT) {
throw new Error("Toaster does not support LEFT or RIGHT positions.");
}
};
Toaster.prototype.renderToast = function (toast) {
return React.createElement(toast_1.Toast, __assign({}, toast, {onDismiss: this.getDismissHandler(toast)}));
};
Toaster.prototype.createToastOptions = function (props, key) {
if (key === void 0) { key = "toast-" + this.toastId++; }
// clone the object before adding the key prop to avoid leaking the mutation
var options = utils_1.shallowClone(props);
options.key = key;
return options;
};
Toaster.prototype.getPositionClasses = function () {
var positions = position_1.Position[this.props.position].split("_");
// NOTE that there is no -center class because that's the default style
return positions.map(function (p) { return (Classes.TOAST_CONTAINER + "-" + p.toLowerCase()); });
};
Toaster.defaultProps = {
autoFocus: false,
canEscapeKeyClear: true,
inline: false,
position: position_1.Position.TOP,
};
Toaster = __decorate([
PureRender
], Toaster);
return Toaster;
}(abstractComponent_1.AbstractComponent));
exports.Toaster = Toaster;
//# sourceMappingURL=toaster.js.map