fix(core): values in edit not saved when closing info modal (#7465)

Before the modification, when the modal is closed, if a value is being edited, the input's on blur event cannot be triggered to automatically save. https://github.com/toeverything/AFFiNE/assets/102217452/60235cec-0022-4c4d-b213-28f2331a0c5b
toeverything · Jul 22, 2024 · e3c3d1a · e3c3d1a
1 parent bd02797
commit e3c3d1a
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 10 deletions.
diff --git a/packages/frontend/core/src/components/affine/page-properties/info-modal/info-modal.css.ts b/packages/frontend/core/src/components/affine/page-properties/info-modal/info-modal.css.ts
@@ -1,14 +1,47 @@
 import { cssVar } from '@toeverything/theme';
-import { style } from '@vanilla-extract/css';
+import { createVar, keyframes, style } from '@vanilla-extract/css';
 
-export const container = style({
-  maxWidth: 480,
-  minWidth: 360,
-  padding: '20px 0',
-  alignSelf: 'start',
-  marginTop: '120px',
+export const animationTimeout = createVar();
+
+const contentShow = keyframes({
+  from: {
+    opacity: 0,
+  },
+  to: {
+    opacity: 1,
+  },
+});
+const contentHide = keyframes({
+  to: {
+    opacity: 0,
+  },
+  from: {
+    opacity: 1,
+  },
+});
+
+export const overlay = style({
+  selectors: {
+    '&.entered, &.entering': {
+      animation: `${contentShow} ${animationTimeout} forwards`,
+    },
+    '&.exited, &.exiting': {
+      animation: `${contentHide} ${animationTimeout} forwards`,
+    },
+  },
 });
 
+export const container = style([
+  overlay,
+  {
+    maxWidth: 480,
+    minWidth: 360,
+    padding: '20px 0',
+    alignSelf: 'start',
+    marginTop: '120px',
+  },
+]);
+
 export const titleContainer = style({
   display: 'flex',
   width: '100%',
@@ -37,3 +70,9 @@ export const scrollBar = style({
   width: 6,
   transform: 'translateX(-4px)',
 });
+
+export const hiddenInput = style({
+  width: '0',
+  height: '0',
+  position: 'absolute',
+});
diff --git a/packages/frontend/core/src/components/affine/page-properties/info-modal/info-modal.tsx b/packages/frontend/core/src/components/affine/page-properties/info-modal/info-modal.tsx
@@ -12,7 +12,17 @@ import {
   useService,
   type Workspace,
 } from '@toeverything/infra';
-import { Suspense, useCallback, useContext, useMemo, useRef } from 'react';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import clsx from 'clsx';
+import {
+  Suspense,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import { useTransition } from 'react-transition-state';
 
 import { BlocksuiteHeaderTitle } from '../../../blocksuite/block-suite-header/title';
 import { managerContext } from '../common';
@@ -27,6 +37,8 @@ import * as styles from './info-modal.css';
 import { TagsRow } from './tags-row';
 import { TimeRow } from './time-row';
 
+const animationTimeout = 120;
+
 export const InfoModal = ({
   open,
   onOpenChange,
@@ -39,7 +51,17 @@ export const InfoModal = ({
   workspace: Workspace;
 }) => {
   const titleInputHandleRef = useRef<InlineEditHandle>(null);
+
+  const [{ status }, toggle] = useTransition({
+    timeout: animationTimeout,
+  });
+
+  useEffect(() => {
+    toggle(open);
+  }, [open, toggle]);
+
   const manager = usePagePropertiesManager(page);
+
   const handleClose = useCallback(() => {
     onOpenChange(false);
   }, [onOpenChange]);
@@ -58,11 +80,20 @@ export const InfoModal = ({
 
   return (
     <Modal
+      overlayOptions={{
+        className: clsx(styles.overlay, status),
+        style: assignInlineVars({
+          [styles.animationTimeout]: `${animationTimeout}ms`,
+        }),
+      }}
       contentOptions={{
-        className: styles.container,
+        className: clsx(styles.container, status),
         'aria-describedby': undefined,
+        style: assignInlineVars({
+          [styles.animationTimeout]: `${animationTimeout}ms`,
+        }),
       }}
-      open={open}
+      open={status !== 'exited'}
       onOpenChange={onOpenChange}
       withoutCloseButton
     >