Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-27 10:52:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: regression on toast component (#2502)

Browse Source
This commit is contained in:
Himself65
2023-05-24 13:10:25 +08:00
committed by GitHub
parent 48c109e149
commit 49f1ba676f
2 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/web/src/utils/toast.ts
View File

@@ -1,17 +1,10 @@
import type { ToastOptions } from '@affine/component'; import type { ToastOptions } from '@affine/component';
import { toast as basicToast } from '@affine/component'; import { toast as basicToast } from '@affine/component';
import { DebugLogger } from '@affine/debug';
const logger = new DebugLogger('toast');
export const toast = (message: string, options?: ToastOptions) => { export const toast = (message: string, options?: ToastOptions) => {
const mainContainer = document.querySelector( const mainContainer = document.querySelector(
'.main-container' '.main-container'
) as HTMLElement; ) as HTMLElement;
logger.debug(`toast with message: "${message}"`, options);
window.dispatchEvent(
new CustomEvent('affine-toast:emit', { detail: message })
);
return basicToast(message, { return basicToast(message, {
portal: mainContainer || document.body, portal: mainContainer || document.body,
...options, ...options,

23
packages/component/src/ui/toast/toast.ts
View File

@@ -1,7 +1,10 @@
// Copyright: https://github.com/toeverything/blocksuite/commit/8032ef3ab97aefce01664b36502fc392c5db8b78#diff-bf5b41be21936f9165a8400c7f20e24d3dbc49644ba57b9258e0943f0dc1c464 // Copyright: https://github.com/toeverything/blocksuite/commit/8032ef3ab97aefce01664b36502fc392c5db8b78#diff-bf5b41be21936f9165a8400c7f20e24d3dbc49644ba57b9258e0943f0dc1c464
import { DebugLogger } from '@affine/debug';
import type { TemplateResult } from 'lit'; import type { TemplateResult } from 'lit';
import { css, html } from 'lit'; import { css, html } from 'lit';
const logger = new DebugLogger('toast');
export const sleep = (ms = 0) => export const sleep = (ms = 0) =>
new Promise(resolve => setTimeout(resolve, ms)); new Promise(resolve => setTimeout(resolve, ms));
@@ -18,7 +21,7 @@ const htmlToElement = <T extends ChildNode>(html: string | TemplateResult) => {
template.innerHTML = html; template.innerHTML = html;
} else { } else {
const { strings, values } = html; const { strings, values } = html;
const v = [...values, '']; // + last emtpty part const v = [...values, '']; // + last empty part
template.innerHTML = strings.reduce((acc, cur, i) => acc + cur + v[i], ''); template.innerHTML = strings.reduce((acc, cur, i) => acc + cur + v[i], '');
} }
return template.content.firstChild as T; return template.content.firstChild as T;
@@ -92,22 +95,32 @@ export const toast = (
element.textContent = message; element.textContent = message;
ToastContainer.appendChild(element); ToastContainer.appendChild(element);
logger.debug(`toast with message: "${message}"`);
window.dispatchEvent(
new CustomEvent('affine-toast:emit', { detail: message })
);
const fadeIn = [ const fadeIn = [
{ {
opacity: 0, opacity: 0,
}, },
{ opacity: 1 }, { opacity: 1 },
]; ];
const options = { const options = {
duration: 230, duration: 230,
easing: 'cubic-bezier(0.21, 1.02, 0.73, 1)', easing: 'cubic-bezier(0.21, 1.02, 0.73, 1)',
fill: 'forwards' as const, fill: 'forwards' as const,
}; // satisfies KeyframeAnimationOptions; } satisfies KeyframeAnimationOptions;
element.animate(fadeIn, options);
setTimeout(async () => { setTimeout(async () => {
if (typeof element.animate !== 'function') return; const animation = element.animate(
const fadeOut = fadeIn.reverse(); // fade out
const animation = element.animate(fadeOut, options); fadeIn.reverse(),
options
);
await animation.finished; await animation.finished;
element.style.maxHeight = '0'; element.style.maxHeight = '0';
element.style.margin = '0'; element.style.margin = '0';