walletlink-e
Version:
WalletLink JavaScript SDK
79 lines (78 loc) • 3.59 kB
JavaScript
;
// Copyright (c) 2018-2020 WalletLink.org <https://www.walletlink.org/>
// Copyright (c) 2018-2020 Coinbase, Inc. <https://www.coinbase.com/>
// Licensed under the Apache License, version 2.0
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Snackbar = void 0;
const clsx_1 = __importDefault(require("clsx"));
const preact_1 = require("preact");
const hooks_1 = require("preact/hooks");
const Snackbar_css_1 = __importDefault(require("./Snackbar-css"));
class Snackbar {
constructor(options) {
this.items = new Map();
this.nextItemKey = 0;
this.root = null;
this.darkMode = options.darkMode;
}
attach(el) {
this.root = document.createElement("div");
this.root.className = "-walletlink-snackbar-root";
el.appendChild(this.root);
this.render();
}
presentItem(itemProps) {
const key = this.nextItemKey++;
this.items.set(key, itemProps);
this.render();
return () => {
this.items.delete(key);
this.render();
};
}
clear() {
this.items.clear();
this.render();
}
render() {
if (!this.root) {
return;
}
preact_1.render(preact_1.h(SnackbarContainer, { darkMode: this.darkMode }, Array.from(this.items.entries()).map(([key, itemProps]) => (preact_1.h(SnackbarItem, Object.assign({}, itemProps, { key: key }))))), this.root);
}
}
exports.Snackbar = Snackbar;
const SnackbarContainer = props => (preact_1.h("div", { class: clsx_1.default("-walletlink-snackbar-container", props.darkMode && "-walletlink-snackbar-container-dark") },
preact_1.h("style", null, Snackbar_css_1.default),
preact_1.h("div", { class: "-walletlink-snackbar" }, props.children)));
const SnackbarItem = ({ message, showProgressBar, actions }) => {
const [hidden, setHidden] = hooks_1.useState(true);
const [expanded, setExpanded] = hooks_1.useState(false);
hooks_1.useEffect(() => {
const timers = [
window.setTimeout(() => {
setHidden(false);
}, 1),
window.setTimeout(() => {
setExpanded(true);
}, 10000)
];
return () => {
timers.forEach(window.clearTimeout);
};
});
const toggleExpanded = () => {
setExpanded(!expanded);
};
return (preact_1.h("div", { class: clsx_1.default("-walletlink-snackbar-item", hidden && "-walletlink-snackbar-item-hidden", expanded && "-walletlink-snackbar-item-expanded") },
preact_1.h("div", { class: "-walletlink-snackbar-item-content", onClick: toggleExpanded },
preact_1.h("div", { class: "-walletlink-snackbar-item-content-message" }, message),
preact_1.h("div", { class: "-walletlink-snackbar-item-content-chevron", title: "Expand" })),
showProgressBar && (preact_1.h("div", { class: "-walletlink-snackbar-item-progress-bar" })),
actions && actions.length > 0 && (preact_1.h("div", { class: "-walletlink-snackbar-item-actions" }, actions.map((action, i) => (preact_1.h("div", { class: "-walletlink-snackbar-item-actions-item", key: i },
preact_1.h("span", { class: "-walletlink-snackbar-item-actions-item-info" }, action.info),
preact_1.h("button", { class: "-walletlink-snackbar-item-actions-item-button", onClick: action.onClick }, action.buttonLabel))))))));
};