File size: 2,562 Bytes
74e8f2f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
/**
* @license
* Copyright Big Vision Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* @fileoverview A list of dismissable info/warning/error messages.
*/
import {html, LitElement} from 'lit';
import {unsafeHTML} from 'lit/directives/unsafe-html.js';
import {customElement} from 'lit/decorators.js';
import styles from './message-list.scss';
enum MessageType {
INFO = 'info',
WARNING = 'warning',
ERROR = 'error',
}
interface Message {
message: string;
type: MessageType;
rawHtml: boolean;
}
/**
* Shows info/warning/error messages that remain until closed by user.
*/
@customElement('message-list')
export class MessageList extends LitElement {
static override styles = [styles];
messages: Message[] = [];
addMessage(message: Message) {
this.messages.push(message);
this.requestUpdate();
}
info(message: string, {rawHtml = false}: {rawHtml?: boolean} = {}) {
this.addMessage({message, type: MessageType.INFO, rawHtml});
}
warning(message: string, {rawHtml = false}: {rawHtml?: boolean} = {}) {
this.addMessage({message, type: MessageType.WARNING, rawHtml});
}
error(message: string, {rawHtml = false}: {rawHtml?: boolean} = {}) {
this.addMessage({message, type: MessageType.ERROR, rawHtml});
}
removeMessage(event: Event, idx: number) {
this.messages.splice(idx, 1);
(event.target! as HTMLElement).closest('.message')!.remove();
}
clear() {
this.messages = [];
while (this.firstChild) this.firstChild.remove();
}
override render() {
return this.messages.map(
(message: Message, idx: number) => html`
<div class="${message.type} message">
<span class="label">${
message.rawHtml ? unsafeHTML(message.message) :
message.message}</span>
<span @click=${(e: Event) => {
this.removeMessage(e, idx);
}} class="close">✖</span>
</div>
`);
}
}
declare global {
interface HTMLElementTagNameMap {
'message-list': MessageList;
}
}
|