feat: refactor the usage of toast (#1699)

apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/index.tsx

@@ -1,11 +1,4 @@
-import {
+import { Button, IconButton, Menu, MenuItem, Wrapper } from '@affine/component';
-  Button,
-  IconButton,
-  Menu,
-  MenuItem,
-  toast,
-  Wrapper,
-} from '@affine/component';
 import { PermissionType } from '@affine/datacenter';
 import { useTranslation } from '@affine/i18n';
 import { WorkspaceFlavour } from '@affine/workspace/type';
@@ -19,6 +12,7 @@ import { useCallback, useState } from 'react';
 
 import { useMembers } from '../../../../../hooks/affine/use-members';
 import type { AffineWorkspace, LocalWorkspace } from '../../../../../shared';
+import { toast } from '../../../../../utils';
 import { Unreachable } from '../../../affine-error-eoundary';
 import { TransformWorkspaceToAffineModal } from '../../../transform-workspace-to-affine-modal';
 import type { PanelProps } from '../../index';

apps/web/src/components/affine/workspace-setting-detail/panel/publish/index.tsx

@@ -3,7 +3,6 @@ import {
   Content,
   FlexWrapper,
   Input,
-  toast,
   Wrapper,
 } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
@@ -18,6 +17,7 @@ import type {
   AffineWorkspace,
   LocalWorkspace,
 } from '../../../../../shared';
+import { toast } from '../../../../../utils';
 import { Unreachable } from '../../../affine-error-eoundary';
 import { EnableAffineCloudModal } from '../../../enable-affine-cloud-modal';
 import type { WorkspaceSettingDetailProps } from '../../index';

apps/web/src/components/blocksuite/block-suite-page-list/page-list/OperationCell.tsx

@@ -6,7 +6,6 @@ import {
   MenuItem,
   Tooltip,
 } from '@affine/component';
-import { toast } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import {
   DeletePermanentlyIcon,
@@ -21,6 +20,8 @@ import type { PageMeta } from '@blocksuite/store';
 import type React from 'react';
 import { useState } from 'react';
 
+import { toast } from '../../../../utils';
+
 export type OperationCellProps = {
   pageMeta: PageMeta;
   onOpenPageInNewTab: (pageId: string) => void;

apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx

@@ -5,7 +5,7 @@ import {
   TableHead,
   TableRow,
 } from '@affine/component';
-import { Content, IconButton, toast, Tooltip } from '@affine/component';
+import { Content, IconButton, Tooltip } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import {
   EdgelessIcon,
@@ -29,6 +29,7 @@ import {
   usePageMetaHelper,
 } from '../../../../hooks/use-page-meta';
 import type { BlockSuiteWorkspace } from '../../../../shared';
+import { toast } from '../../../../utils';
 import DateCell from './DateCell';
 import Empty from './Empty';
 import { OperationCell, TrashOperationCell } from './OperationCell';

apps/web/src/components/blocksuite/header/editor-mode-switch/index.tsx

@@ -1,4 +1,3 @@
-import { toast } from '@affine/component';
 import { assertExists } from '@blocksuite/store';
 import { useAtomValue, useSetAtom } from 'jotai';
 import type { CSSProperties } from 'react';
@@ -6,6 +5,7 @@ import type { CSSProperties } from 'react';
 import { workspacePreferredModeAtom } from '../../../../atoms';
 import { usePageMeta } from '../../../../hooks/use-page-meta';
 import type { BlockSuiteWorkspace } from '../../../../shared';
+import { toast } from '../../../../utils';
 import { StyledEditorModeSwitch } from './style';
 import { EdgelessSwitchItem, PageSwitchItem } from './switch-items';
 

apps/web/src/components/blocksuite/header/header-right-items/EditorOptionMenu.tsx

@@ -1,7 +1,6 @@
 // fixme(himself65): refactor this file
 import { Confirm, FlexWrapper, Menu, MenuItem } from '@affine/component';
 import { IconButton } from '@affine/component';
-import { toast } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import {
   DeleteTemporarilyIcon,
@@ -25,6 +24,7 @@ import {
   usePageMeta,
   usePageMetaHelper,
 } from '../../../../hooks/use-page-meta';
+import { toast } from '../../../../utils';
 
 export const EditorOptionMenu = () => {
   const { t } = useTranslation();

apps/web/src/components/pure/message-center/index.tsx

@@ -1,4 +1,3 @@
-import { toast } from '@affine/component';
 import { MessageCode } from '@affine/datacenter';
 import { messages } from '@affine/datacenter';
 import type React from 'react';
@@ -6,6 +5,7 @@ import { memo, useEffect, useState } from 'react';
 
 import { useAffineLogOut } from '../../../hooks/affine/use-affine-log-out';
 import { apis } from '../../../shared/apis';
+import { toast } from '../../../utils';
 
 declare global {
   interface DocumentEventMap {

apps/web/src/hooks/affine/use-affine-log-in.ts

@@ -1,4 +1,3 @@
-import { toast } from '@affine/component';
 import {
   createAffineAuth,
   setLoginStorage,
@@ -8,6 +7,7 @@ import { useRouter } from 'next/router';
 import { useCallback } from 'react';
 
 import { apis } from '../../shared/apis';
+import { toast } from '../../utils';
 
 export const affineAuth = createAffineAuth();
 

apps/web/src/pages/_debug/broadcast.dev.tsx

@@ -1,4 +1,4 @@
-import { Button, toast } from '@affine/component';
+import { Button } from '@affine/component';
 import { DebugLogger } from '@affine/debug';
 import { createEmptyBlockSuiteWorkspace } from '@affine/workspace/utils';
 import { nanoid } from '@blocksuite/store';
@@ -10,6 +10,7 @@ import { createBroadCastChannelProvider } from '../../blocksuite/providers';
 import PageList from '../../components/blocksuite/block-suite-page-list/page-list';
 import { StyledPage, StyledWrapper } from '../../layouts/styles';
 import type { BroadCastChannelProvider } from '../../shared';
+import { toast } from '../../utils';
 
 const logger = new DebugLogger('broadcast');
 

apps/web/src/pages/_debug/login.dev.tsx

@@ -1,4 +1,4 @@
-import { Button, toast } from '@affine/component';
+import { Button } from '@affine/component';
 import { currentAffineUserAtom } from '@affine/workspace/affine/atom';
 import {
   clearLoginStorage,
@@ -14,6 +14,8 @@ import type { NextPage } from 'next';
 import dynamic from 'next/dynamic';
 import { useMemo } from 'react';
 
+import { toast } from '../../utils';
+
 const Viewer = dynamic(
   () => import('@rich-data/viewer').then(m => ({ default: m.JsonViewer })),
   { ssr: false }

apps/web/src/utils/index.ts

@@ -1,20 +1,5 @@
-export function stringToColour(str: string) {
+export * from './blocksuite';
-  str = str || 'affine';
+export * from './create-emotion-cache';
-  let colour = '#';
+export * from './is-valid-ip-address';
-  let hash = 0;
+export * from './string2color';
-  // str to hash
+export * from './toast';
-  for (
-    let i = 0;
-    i < str.length;
-    hash = str.charCodeAt(i++) + ((hash << 5) - hash)
-  );
-
-  // int/hash to hex
-  for (
-    let i = 0;
-    i < 3;
-    colour += ('00' + ((hash >> (i++ * 8)) & 0xff).toString(16)).slice(-2)
-  );
-
-  return colour;
-}

apps/web/src/utils/string2color.ts

@@ -0,0 +1,20 @@
+export function stringToColour(str: string) {
+  str = str || 'affine';
+  let colour = '#';
+  let hash = 0;
+  // str to hash
+  for (
+    let i = 0;
+    i < str.length;
+    hash = str.charCodeAt(i++) + ((hash << 5) - hash)
+  );
+
+  // int/hash to hex
+  for (
+    let i = 0;
+    i < 3;
+    colour += ('00' + ((hash >> (i++ * 8)) & 0xff).toString(16)).slice(-2)
+  );
+
+  return colour;
+}

apps/web/src/utils/toast.ts

@@ -0,0 +1,12 @@
+import type { ToastOptions } from '@affine/component';
+import { toast as basicToast } from '@affine/component';
+
+export const toast = (message: string, options?: ToastOptions) => {
+  const mainContainer = document.querySelector(
+    '.main-container'
+  ) as HTMLElement;
+  return basicToast(message, {
+    portal: mainContainer || document.body,
+    ...options,
+  });
+};

packages/component/src/ui/toast/toast.ts

@@ -24,7 +24,8 @@ const htmlToElement = <T extends ChildNode>(html: string | TemplateResult) => {
   return template.content.firstChild as T;
 };
 
-const createToastContainer = (portalQuery?: string) => {
+const createToastContainer = (portal?: HTMLElement) => {
+  portal = portal || document.body;
   const styles = css`
     position: absolute;
     z-index: 9999;
@@ -39,14 +40,13 @@ const createToastContainer = (portalQuery?: string) => {
   `;
   const template = html`<div style="${styles}"></div>`;
   const element = htmlToElement<HTMLDivElement>(template);
-  const portal = portalQuery && document.querySelector(portalQuery);
+  portal.appendChild(element);
-  (portal || document.body).appendChild(element);
   return element;
 };
 
 export type ToastOptions = {
-  duration: number;
+  duration?: number;
-  portalQuery?: string;
+  portal?: HTMLElement;
 };
 
 /**
@@ -57,12 +57,12 @@ export type ToastOptions = {
  */
 export const toast = (
   message: string,
-  { duration, portalQuery = '.main-container' }: ToastOptions = {
+  { duration, portal }: ToastOptions = {
     duration: 2500,
   }
 ) => {
   if (!ToastContainer) {
-    ToastContainer = createToastContainer(portalQuery);
+    ToastContainer = createToastContainer(portal);
   }
 
   const styles = css`