From e3b105f1cdcbdf938f11787fc4264707f54b3176 Mon Sep 17 00:00:00 2001
From: pdx <39936160+qiuqfang@users.noreply.github.com>
Date: Wed, 30 Aug 2023 05:20:30 +0800
Subject: [PATCH] feat(core): use enter change workspace the name (#4007)

Co-authored-by: Alex Yang <himself65@outlook.com>
---
 .../new-workspace-setting-detail/profile.tsx  | 33 ++++++++++++++++---
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/apps/core/src/components/affine/new-workspace-setting-detail/profile.tsx b/apps/core/src/components/affine/new-workspace-setting-detail/profile.tsx
index 5b49e8c8f..700ffc35f 100644
--- a/apps/core/src/components/affine/new-workspace-setting-detail/profile.tsx
+++ b/apps/core/src/components/affine/new-workspace-setting-detail/profile.tsx
@@ -7,7 +7,12 @@ import { IconButton } from '@toeverything/components/button';
 import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-block-suite-workspace-avatar-url';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
 import clsx from 'clsx';
-import { useCallback, useState } from 'react';
+import {
+  type KeyboardEvent,
+  startTransition,
+  useCallback,
+  useState,
+} from 'react';
 
 import { Upload } from '../../pure/file-upload';
 import { type WorkspaceSettingDetailProps } from './index';
@@ -38,6 +43,25 @@ export const ProfilePanel = ({ workspace, isOwner }: ProfilePanelProps) => {
     [setName, t]
   );
 
+  const handleSetInput = useCallback((value: string) => {
+    startTransition(() => {
+      setInput(value);
+    });
+  }, []);
+
+  const handleKeyUp = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.code === 'Enter' && name !== input) {
+        handleUpdateWorkspaceName(input);
+      }
+    },
+    [handleUpdateWorkspaceName, input, name]
+  );
+
+  const handleClick = useCallback(() => {
+    handleUpdateWorkspaceName(input);
+  }, [handleUpdateWorkspaceName, input]);
+
   return (
     <div className={style.profileWrapper}>
       <div className={clsx(style.avatarWrapper, { disable: !isOwner })}>
@@ -69,14 +93,13 @@ export const ProfilePanel = ({ workspace, isOwner }: ProfilePanelProps) => {
             placeholder={t['Workspace Name']()}
             maxLength={64}
             minLength={0}
-            onChange={setInput}
+            onChange={handleSetInput}
+            onKeyUp={handleKeyUp}
           />
           {input === workspace.blockSuiteWorkspace.meta.name ? null : (
             <IconButton
               data-testid="save-workspace-name"
-              onClick={() => {
-                handleUpdateWorkspaceName(input);
-              }}
+              onClick={handleClick}
               active={true}
               style={{
                 marginLeft: '12px',