feat: support gif toast (#3389)

2024-12-24 21:43:40 +03:00 · 2023-07-27 13:37:18 +08:00 · 2023-07-27 13:37:18 +08:00 · bc27412425
commit bc27412425
parent fa8086d525
5 changed files with 137 additions and 30 deletions
--- a/apps/storybook/src/stories/notification-center.stories.tsx
+++ b/apps/storybook/src/stories/notification-center.stories.tsx
@ -12,6 +12,12 @@ export default {
 } satisfies Meta<typeof NotificationCenter>;

 let id = 0;
+const image = (
+  <video autoPlay muted loop>
+    <source src="/editingVideo.mp4" type="video/mp4" />
+    <source src="/editingVideo.webm" type="video/webm" />
+  </video>
+);
 export const Basic = () => {
  const push = useSetAtom(pushNotificationAtom);
  const expand = useAtomValue(expandNotificationCenterAtom);
@ -196,6 +202,27 @@ export const Basic = () => {
          dark error
        </button>
      </div>
+      <div>
+        <button
+          onClick={() => {
+            const key = id++;
+            push({
+              key: `${key}`,
+              title: `${key} title`,
+              message: `gif test`,
+              type: 'info',
+              multimedia: image,
+              timeout: 3000,
+              undo: async () => {
+                console.log('undo');
+              },
+              progressingBar: true,
+            });
+          }}
+        >
+          gif
+        </button>
+      </div>
      <NotificationCenter />
    </>
  );
--- a/packages/component/src/components/notification-center/index.css.ts
+++ b/packages/component/src/components/notification-center/index.css.ts
@ -2,7 +2,12 @@
 // License on the MIT
 // https://github.com/emilkowalski/sonner/blob/5cb703edc108a23fd74979235c2f3c4005edd2a7/src/styles.css

-import { keyframes, style, styleVariants } from '@vanilla-extract/css';
+import {
+  globalStyle,
+  keyframes,
+  style,
+  styleVariants,
+} from '@vanilla-extract/css';

 const swipeOut = keyframes({
  '0%': {
@ -19,12 +24,28 @@ const swipeOut = keyframes({

 export const notificationCenterViewportStyle = style({
  position: 'fixed',
-  bottom: '200px',
-  right: '60px',
+  height: '500px',
+  bottom: '20px',
+  right: '20px',
  width: '380px',
-  margin: 0,
  zIndex: 2147483647,
  outline: 'none',
+  display: 'flex',
+  alignItems: 'flex-end',
+});
+export const notificationMultimediaStyle = style({
+  position: 'relative',
+  width: '100%',
+  height: '230px',
+  borderRadius: '8px 8px 0 0',
+  overflow: 'hidden',
+  marginBottom: '16px',
+});
+globalStyle(`${notificationMultimediaStyle} > *`, {
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+  cursor: 'unset',
 });

 export const notificationStyle = style({
@ -128,18 +149,32 @@ export const notificationStyle = style({
 export const notificationIconStyle = style({
  fontSize: '24px',
  marginLeft: '18px',
-  marginRight: '12px',
+  marginRight: '8px',
  color: 'var(--affine-processing-color)',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
 });
+export const hasMediaStyle = style({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  paddingTop: '0',
+  paddingBottom: '16px',
+  width: '380px',
+  borderRadius: '8px',
+  boxShadow: 'var(--affine-shadow-1)',
+  border: '1px solid var(--affine-border-color)',
+  background: 'var(--affine-white)',
+  transition: 'all 0.3s',
+});
 export const notificationContentStyle = style({
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
-  padding: '16px 0',
-  width: '100%',
+  paddingTop: '16px',
+  paddingBottom: '16px',
+  width: '380px',
  borderRadius: '8px',
  boxShadow: 'var(--affine-shadow-1)',
  border: '1px solid var(--affine-border-color)',
@ -181,6 +216,26 @@ export const closeButtonStyle = style({
 export const closeButtonWithoutUndoStyle = style({
  marginLeft: '92px',
 });
+export const closeButtonWithMediaStyle = style({
+  position: 'absolute',
+  width: '22px',
+  height: '22px',
+  fontSize: '16px',
+  top: '6px',
+  right: '6px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  cursor: 'pointer',
+  borderRadius: '4px',
+  color: 'var(--affine-pure-black)',
+  ':hover': {
+    background: 'var(--affine-hover-color)',
+  },
+});
+export const closeButtonColorStyle = style({
+  color: 'var(--affine-white)',
+});
 export const undoButtonStyle = style({
  fontSize: 'var(--affine-font-sm)',
  background: 'var(--affine-hover-color)',
@ -189,6 +244,10 @@ export const undoButtonStyle = style({
  color: 'var(--affine-processing-color)',
  cursor: 'pointer',
 });
+export const undoButtonWithMediaStyle = style({
+  marginLeft: 'auto',
+  marginRight: '16px',
+});
 export const messageStyle = style({
  fontSize: 'var(--affine-font-sm)',
  width: '200px',
--- a/packages/component/src/components/notification-center/index.jotai.ts
+++ b/packages/component/src/components/notification-center/index.jotai.ts
@ -8,6 +8,7 @@ export type Notification = {
  theme?: 'light' | 'dark';
  timeout?: number;
  progressingBar?: boolean;
+  multimedia?: React.ReactNode | JSX.Element | HTMLElement;
  // actions
  undo?: () => Promise<void>;
 };
--- a/packages/component/src/components/notification-center/index.tsx
+++ b/packages/component/src/components/notification-center/index.tsx
@ -288,10 +288,20 @@ function NotificationCard(props: NotificationCardProps): ReactElement {
      }}
    >
      <div
-        className={clsx(styles.notificationContentStyle, {
+        className={clsx({
          [typeStyle]: notification.theme,
+          [styles.hasMediaStyle]: notification.multimedia,
+          [styles.notificationContentStyle]: !notification.multimedia,
        })}
      >
+        {notification.multimedia ? (
+          <div className={styles.notificationMultimediaStyle}>
+            <>{notification.multimedia}</>
+            <IconButton className={styles.closeButtonWithMediaStyle}>
+              <CloseIcon onClick={onClickRemove} />
+            </IconButton>
+          </div>
+        ) : null}
        <Toast.Title
          className={clsx(styles.notificationTitleStyle, {
            [styles.darkColorStyle]: notification.theme === 'dark',
@ -312,12 +322,14 @@ function NotificationCard(props: NotificationCardProps): ReactElement {
            <div
              className={clsx(styles.undoButtonStyle, {
                [styles.darkColorStyle]: notification.theme === 'dark',
+                [styles.undoButtonWithMediaStyle]: notification.multimedia,
              })}
              onClick={onClickUndo}
            >
              UNDO
            </div>
          )}
+          {notification.multimedia ? null : (
            <IconButton
              className={clsx(styles.closeButtonStyle, {
                [styles.closeButtonWithoutUndoStyle]: !notification.undo,
@ -331,6 +343,7 @@ function NotificationCard(props: NotificationCardProps): ReactElement {
            >
              <CloseIcon onClick={onClickRemove} />
            </IconButton>
+          )}
        </Toast.Title>
        <Toast.Description
          className={clsx(styles.messageStyle, {
--- a/packages/component/src/components/page-list/operation-menu-items/export.tsx
+++ b/packages/component/src/components/page-list/operation-menu-items/export.tsx
@ -9,6 +9,7 @@ import {
  ExportToPdfIcon,
  ExportToPngIcon,
 } from '@blocksuite/icons';
+import { uuidv4 } from '@blocksuite/store';
 import { useSetAtom } from 'jotai';
 import { useCallback } from 'react';

@ -36,7 +37,7 @@ export const ExportToPdfMenuItem = ({
        .then(() => {
          onSelect?.({ type: 'pdf' });
          setPushNotification({
-            key: 'export-to-pdf',
+            key: uuidv4(),
            title: t['com.affine.export.success.title'](),
            message: t['com.affine.export.success.message'](),
            type: 'success',
@ -45,7 +46,7 @@ export const ExportToPdfMenuItem = ({
        .catch(err => {
          console.error(err);
          setPushNotification({
-            key: 'export-to-pdf',
+            key: uuidv4(),
            title: t['com.affine.export.error.title'](),
            message: t['com.affine.export.error.message'](),
            type: 'error',
@ -59,7 +60,7 @@ export const ExportToPdfMenuItem = ({
        .then(() => {
          onSelect?.({ type: 'pdf' });
          setPushNotification({
-            key: 'export-to-pdf',
+            key: uuidv4(),
            title: t['com.affine.export.success.title'](),
            message: t['com.affine.export.success.message'](),
            type: 'success',
@ -68,7 +69,7 @@ export const ExportToPdfMenuItem = ({
        .catch(err => {
          console.error(err);
          setPushNotification({
-            key: 'export-to-pdf',
+            key: uuidv4(),
            title: t['com.affine.export.error.title'](),
            message: t['com.affine.export.error.message'](),
            type: 'error',
@ -104,7 +105,7 @@ export const ExportToHtmlMenuItem = ({
      .then(() => {
        onSelect?.({ type: 'html' });
        setPushNotification({
-          key: 'export-to-html',
+          key: uuidv4(),
          title: t['com.affine.export.success.title'](),
          message: t['com.affine.export.success.message'](),
          type: 'success',
@ -112,6 +113,12 @@ export const ExportToHtmlMenuItem = ({
      })
      .catch(err => {
        console.error(err);
+        setPushNotification({
+          key: uuidv4(),
+          title: t['com.affine.export.error.title'](),
+          message: t['com.affine.export.error.message'](),
+          type: 'error',
+        });
      });
    onSelect?.({ type: 'html' });
  }, [currentEditor, onSelect, setPushNotification, t]);
@ -146,7 +153,7 @@ export const ExportToPngMenuItem = ({
      .then(() => {
        onSelect?.({ type: 'png' });
        setPushNotification({
-          key: 'export-to-png',
+          key: uuidv4(),
          title: t['com.affine.export.success.title'](),
          message: t['com.affine.export.success.message'](),
          type: 'success',
@ -155,7 +162,7 @@ export const ExportToPngMenuItem = ({
      .catch(err => {
        console.error(err);
        setPushNotification({
-          key: 'export-to-png',
+          key: uuidv4(),
          title: t['com.affine.export.error.title'](),
          message: t['com.affine.export.error.message'](),
          type: 'error',
@ -192,7 +199,7 @@ export const ExportToMarkdownMenuItem = ({
      .then(() => {
        onSelect?.({ type: 'markdown' });
        setPushNotification({
-          key: 'export-to-markdown',
+          key: uuidv4(),
          title: t['com.affine.export.success.title'](),
          message: t['com.affine.export.success.message'](),
          type: 'success',
@ -201,7 +208,7 @@ export const ExportToMarkdownMenuItem = ({
      .catch(err => {
        console.error(err);
        setPushNotification({
-          key: 'export-to-markdown',
+          key: uuidv4(),
          title: t['com.affine.export.error.title'](),
          message: t['com.affine.export.error.message'](),
          type: 'error',