baseui
Version:
A React Component library implementing the Base design language
288 lines (285 loc) • 10.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.ToasterContainer = void 0;
var React = _interopRequireWildcard(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _overrides = require("../helpers/overrides");
var _constants = require("./constants");
var _styledComponents = require("./styled-components");
var _toast = _interopRequireDefault(require("./toast"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /*
Copyright (c) Uber Technologies, Inc.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
let toasterRef;
class ToasterContainer extends React.Component {
constructor(_props) {
super(_props);
_defineProperty(this, "state", {
isMounted: false,
// @ts-ignore
toasts: []
});
_defineProperty(this, "dismissHandlers", {});
_defineProperty(this, "toastId", 0);
_defineProperty(this, "getToastProps", props => {
const {
autoFocus,
autoHideDuration,
closeable
} = this.props;
const key = props.key || `toast-${this.toastId++}`;
return {
autoFocus,
autoHideDuration,
closeable,
...props,
key
};
});
// @ts-expect-error todo(flow->ts): default value does not look correct and also probably do is never used
_defineProperty(this, "show", (props = {}) => {
// @ts-ignore
if (this.state.toasts.map(t => t.key).includes(props.key)) {
// @ts-ignore
this.update(props.key, props);
// @ts-ignore
return props.key;
}
const toastProps = this.getToastProps(props);
this.setState(({
toasts
}) => {
return {
toasts: [...toasts, toastProps]
};
});
return toastProps.key;
});
_defineProperty(this, "update", (key, props) => {
this.setState(({
toasts
}) => {
const updatedToasts = toasts.map(toast => {
if (toast.key === key) {
const updatedToastProps = {
...toast,
...this.getToastProps({
autoHideDuration: toast.autoHideDuration,
...props
}),
key,
...(this.props.resetAutoHideTimerOnUpdate ?
// @ts-ignore
{
__updated: (+toast.__updated || 0) + 1
} : {})
};
return updatedToastProps;
}
return toast;
});
return {
toasts: updatedToasts
};
});
});
_defineProperty(this, "dismiss", key => {
// @ts-ignore
if (this.dismissHandlers[key]) {
// @ts-ignore
this.dismissHandlers[key]();
}
});
_defineProperty(this, "clearAll", () => {
Object.keys(this.dismissHandlers).forEach(key => {
// @ts-ignore
this.dismissHandlers[key]();
});
});
_defineProperty(this, "clear", key => {
key === undefined ? this.clearAll() : this.dismiss(key);
});
_defineProperty(this, "internalOnClose", key => {
// @ts-ignore
delete this.dismissHandlers[key];
this.setState(({
toasts
}) => ({
toasts: toasts.filter(t => {
return !(t.key === key);
})
}));
});
_defineProperty(this, "getOnCloseHandler", (key, onClose) => {
return () => {
this.internalOnClose(key);
typeof onClose === 'function' && onClose();
};
});
_defineProperty(this, "renderToast", toastProps => {
const {
onClose,
children,
key,
...restProps
} = toastProps;
const {
// @ts-ignore
ToastBody: BodyOverride,
// @ts-ignore
ToastCloseIcon: CloseIconOverride,
// @ts-ignore
ToastInnerContainer: InnerContainerOverride
} = this.props.overrides;
const globalToastOverrides = (0, _overrides.mergeOverrides)({
Body: _styledComponents.Body,
CloseIcon: _styledComponents.CloseIconSvg,
InnerContainer: _styledComponents.InnerContainer
}, {
Body: BodyOverride || {},
CloseIcon: CloseIconOverride || {},
InnerContainer: InnerContainerOverride || {}
});
const toastOverrides = (0, _overrides.mergeOverrides)(globalToastOverrides, toastProps.overrides);
return /*#__PURE__*/React.createElement(_toast.default, _extends({}, restProps, {
overrides: toastOverrides,
key: key,
onClose: this.getOnCloseHandler(key, onClose)
}), ({
dismiss
}) => {
// @ts-ignore
this.dismissHandlers[key] = dismiss;
return children;
});
});
_defineProperty(this, "getSharedProps", () => {
const {
placement
} = this.props;
return {
$placement: placement
};
});
toasterRef = this;
}
componentDidMount() {
this.setState({
isMounted: true
});
}
render() {
const sharedProps = this.getSharedProps();
// @ts-ignore
const {
Root: RootOverride
} = this.props.overrides;
const [Root, rootProps] = (0, _overrides.getOverrides)(RootOverride, _styledComponents.Root);
const toastsLength = this.state.toasts.length;
const toastsToRender = [];
// render the toasts from the newest at the start
// to the oldest at the end
// eslint-disable-next-line for-direction
for (let i = toastsLength - 1; i >= 0; i--) {
// @ts-ignore
toastsToRender.push(this.renderToast(this.state.toasts[i]));
}
const root = /*#__PURE__*/React.createElement(Root, _extends({
"data-baseweb": "toaster"
}, sharedProps, rootProps), toastsToRender);
let maybePortal;
if (this.state.isMounted) {
//Only render the portal in the browser, otherwise render the toasts and children
maybePortal = this.props.usePortal && typeof document !== 'undefined' && document.body ? /*#__PURE__*/_reactDom.default.createPortal(root, document.body) : root;
}
return /*#__PURE__*/React.createElement(React.Fragment, null, maybePortal, this.props.children);
}
}
exports.ToasterContainer = ToasterContainer;
_defineProperty(ToasterContainer, "defaultProps", {
autoFocus: false,
autoHideDuration: 0,
children: null,
closeable: true,
overrides: {},
placement: _constants.PLACEMENT.top,
resetAutoHideTimerOnUpdate: true,
usePortal: true
});
const toaster = {
getRef: function () {
return toasterRef;
},
show: function (children, props = {}) {
// toasts can not be added until Toaster is mounted
// no SSR for the `toaster.show()`
const toasterInstance = this.getRef();
if (toasterInstance) {
return toasterInstance.show({
...props,
children
});
} else if (process.env.NODE_ENV !== "production") {
throw new Error('Please make sure to add the ToasterContainer to your application, and it is mounted, before adding toasts! You can find more information here: https://baseweb.design/components/toast');
}
},
info: function (children, props = {}) {
// @ts-ignore
return this.show(children, {
...props,
kind: _constants.KIND.info
});
},
positive: function (children, props = {}) {
// @ts-ignore
return this.show(children, {
...props,
kind: _constants.KIND.positive
});
},
warning: function (children, props = {}) {
// @ts-ignore
return this.show(children, {
...props,
kind: _constants.KIND.warning
});
},
negative: function (children, props = {}) {
// @ts-ignore
return this.show(children, {
...props,
kind: _constants.KIND.negative
});
},
update: function (key, props) {
const toasterInstance = this.getRef();
if (toasterInstance) {
// @ts-ignore
toasterInstance.update(key, props);
} else if (process.env.NODE_ENV !== "production") {
// eslint-disable-next-line no-console
console.error('No ToasterContainer is mounted yet.');
}
},
clear: function (key) {
const toasterInstance = this.getRef();
if (toasterInstance) {
// @ts-ignore
toasterInstance.clear(key);
} else if (process.env.NODE_ENV !== "production") {
// eslint-disable-next-line no-console
console.error('No ToasterContainer is mounted yet.');
}
}
};
var _default = exports.default = toaster;