toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-09-20 16:07:33 +03: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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 12 deletions
Show Stats 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 { toast as basicToast } from '@affine/component';
import { DebugLogger } from '@affine/debug';
const logger = new DebugLogger('toast');
export const toast = (message: string, options?: ToastOptions) => {
const mainContainer = document.querySelector(
'.main-container'
) as HTMLElement;
logger.debug(`toast with message: "${message}"`, options);
window.dispatchEvent(
new CustomEvent('affine-toast:emit', { detail: message })
);
return basicToast(message, {
portal: mainContainer || document.body,
...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
import { DebugLogger } from '@affine/debug';
import type { TemplateResult } from 'lit';
import { css, html } from 'lit';
const logger = new DebugLogger('toast');
export const sleep = (ms = 0) =>
new Promise(resolve => setTimeout(resolve, ms));
@ -18,7 +21,7 @@ const htmlToElement = <T extends ChildNode>(html: string | TemplateResult) => {
template.innerHTML = html;
} else {
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], '');
}
return template.content.firstChild as T;
@ -92,22 +95,32 @@ export const toast = (
element.textContent = message;
ToastContainer.appendChild(element);
logger.debug(`toast with message: "${message}"`);
window.dispatchEvent(
new CustomEvent('affine-toast:emit', { detail: message })
);
const fadeIn = [
{
opacity: 0,
},
{ opacity: 1 },
];
const options = {
duration: 230,
easing: 'cubic-bezier(0.21, 1.02, 0.73, 1)',
fill: 'forwards' as const,
}; // satisfies KeyframeAnimationOptions;
} satisfies KeyframeAnimationOptions;
element.animate(fadeIn, options);
setTimeout(async () => {
if (typeof element.animate !== 'function') return;
const fadeOut = fadeIn.reverse();
const animation = element.animate(fadeOut, options);
const animation = element.animate(
// fade out
fadeIn.reverse(),
options
);
await animation.finished;
element.style.maxHeight = '0';
element.style.margin = '0';