mirror of
https://github.com/discourse/discourse.git
synced 2024-11-24 15:49:55 +08:00
552cf56afe
- more subtle animation when showing a toast - resumes auto close when removing the mouse from the toast - correctly follows reduced motion - uses output with role status as element: https://web.dev/articles/building/a-toast-component - shows toasts inside a section element - prevents toast to all have the same width - fixes a bug on mobile where we would limit the width and the close button wouldn't show correctly aligned I would prefer to have tests for this, but the conjunction of css/animations and our helper changing `discourseLater` to 0 in tests is making it quite challenging for a rather low value. We have system specs using toasts ensuring they show when they should.
115 lines
3.2 KiB
JavaScript
115 lines
3.2 KiB
JavaScript
import { tracked } from "@glimmer/tracking";
|
|
import { getOwner } from "@ember/application";
|
|
import { action } from "@ember/object";
|
|
import Service from "@ember/service";
|
|
import { TrackedArray } from "@ember-compat/tracked-built-ins";
|
|
import DDefaultToast from "float-kit/components/d-default-toast";
|
|
import DToastInstance from "float-kit/lib/d-toast-instance";
|
|
|
|
export default class Toasts extends Service {
|
|
@tracked activeToasts = new TrackedArray();
|
|
|
|
/**
|
|
* Render a toast
|
|
*
|
|
* @param {Object} [options] - options passed to the toast component as `@toast` argument
|
|
* @param {String} [options.duration] - The duration (ms) of the toast, will be closed after this time
|
|
* @param {Boolean} [options.autoClose=true] - When true, the toast will autoClose after the duration
|
|
* @param {ComponentClass} [options.component] - A component to render, will use `DDefaultToast` if not provided
|
|
* @param {String} [options.class] - A class added to the d-toast element
|
|
* @param {Object} [options.data] - An object which will be passed as the `@data` argument to the component
|
|
*
|
|
* @returns {DToastInstance} - a toast instance
|
|
*/
|
|
@action
|
|
show(options = {}) {
|
|
const instance = new DToastInstance(getOwner(this), options);
|
|
this.activeToasts.push(instance);
|
|
return instance;
|
|
}
|
|
|
|
/**
|
|
* Render a DDefaultToast toast with the default theme
|
|
*
|
|
* @param {Object} [options] - @see show
|
|
*
|
|
* @returns {DToastInstance} - a toast instance
|
|
*/
|
|
@action
|
|
default(options = {}) {
|
|
options.data.theme = "default";
|
|
|
|
return this.show({ ...options, component: DDefaultToast });
|
|
}
|
|
|
|
/**
|
|
* Render a DDefaultToast toast with the success theme
|
|
*
|
|
* @param {Object} [options] - @see show
|
|
*
|
|
* @returns {DToastInstance} - a toast instance
|
|
*/
|
|
@action
|
|
success(options = {}) {
|
|
options.data.theme = "success";
|
|
options.data.icon = "check";
|
|
|
|
return this.show({ ...options, component: DDefaultToast });
|
|
}
|
|
|
|
/**
|
|
* Render a DDefaultToast toast with the error theme
|
|
*
|
|
* @param {Object} [options] - @see show
|
|
*
|
|
* @returns {DToastInstance} - a toast instance
|
|
*/
|
|
@action
|
|
error(options = {}) {
|
|
options.data.theme = "error";
|
|
options.data.icon = "exclamation-triangle";
|
|
|
|
return this.show({ ...options, component: DDefaultToast });
|
|
}
|
|
|
|
/**
|
|
* Render a DDefaultToast toast with the warning theme
|
|
*
|
|
* @param {Object} [options] - @see show
|
|
*
|
|
* @returns {DToastInstance} - a toast instance
|
|
*/
|
|
@action
|
|
warning(options = {}) {
|
|
options.data.theme = "warning";
|
|
options.data.icon = "exclamation-circle";
|
|
|
|
return this.show({ ...options, component: DDefaultToast });
|
|
}
|
|
|
|
/**
|
|
* Render a DDefaultToast toast with the info theme
|
|
*
|
|
* @param {Object} [options] - @see show
|
|
*
|
|
* @returns {DToastInstance} - a toast instance
|
|
*/
|
|
@action
|
|
info(options = {}) {
|
|
options.data.theme = "info";
|
|
options.data.icon = "info-circle";
|
|
|
|
return this.show({ ...options, component: DDefaultToast });
|
|
}
|
|
|
|
/**
|
|
* Close a toast. Any object containg a valid `id` property can be used as a toast parameter.
|
|
*/
|
|
@action
|
|
close(toast) {
|
|
this.activeToasts = new TrackedArray(
|
|
this.activeToasts.filter((activeToast) => activeToast.id !== toast.id)
|
|
);
|
|
}
|
|
}
|