diff --git a/apps/core/package.json b/apps/core/package.json
index 52fc54127..c4f39642f 100644
--- a/apps/core/package.json
+++ b/apps/core/package.json
@@ -40,7 +40,7 @@
"@mui/material": "^5.14.13",
"@radix-ui/react-select": "^2.0.0",
"@react-hookz/web": "^23.1.0",
- "@toeverything/components": "^0.0.43",
+ "@toeverything/components": "^0.0.45",
"async-call-rpc": "^6.3.1",
"css-spring": "^4.1.0",
"cssnano": "^6.0.1",
diff --git a/apps/core/src/components/affine/create-workspace-modal/index.tsx b/apps/core/src/components/affine/create-workspace-modal/index.tsx
index 37694dc7d..373b86a58 100644
--- a/apps/core/src/components/affine/create-workspace-modal/index.tsx
+++ b/apps/core/src/components/affine/create-workspace-modal/index.tsx
@@ -3,7 +3,11 @@ import { DebugLogger } from '@affine/debug';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { HelpIcon } from '@blocksuite/icons';
import { Button } from '@toeverything/components/button';
-import { Modal } from '@toeverything/components/modal';
+import {
+ ConfirmModal,
+ type ConfirmModalProps,
+ Modal,
+} from '@toeverything/components/modal';
import { Tooltip } from '@toeverything/components/tooltip';
import type {
LoadDBFileResult,
@@ -34,14 +38,13 @@ interface ModalProps {
onCreate: (id: string) => void;
}
-interface NameWorkspaceContentProps {
- onClose: () => void;
+interface NameWorkspaceContentProps extends ConfirmModalProps {
onConfirmName: (name: string) => void;
}
const NameWorkspaceContent = ({
onConfirmName,
- onClose,
+ ...props
}: NameWorkspaceContentProps) => {
const [workspaceName, setWorkspaceName] = useState('');
@@ -59,11 +62,23 @@ const NameWorkspaceContent = ({
);
const t = useAFFiNEI18N();
return (
-
-
- {t['com.affine.nameWorkspace.title']()}
-
-
{t['com.affine.nameWorkspace.description']()}
+
{
if (ref) {
@@ -76,24 +91,9 @@ const NameWorkspaceContent = ({
maxLength={64}
minLength={0}
onChange={setWorkspaceName}
+ size="large"
/>
-
-
-
-
-
+
);
};
@@ -342,15 +342,6 @@ export const CreateWorkspaceModal = ({
[createLocalWorkspace, onCreate]
);
- const nameWorkspaceNode =
- step === 'name-workspace' ? (
-
- ) : null;
-
const setDBLocationNode =
step === 'set-db-location' ? (
+ );
+ }
return (
- {nameWorkspaceNode}
{setDBLocationNode}
{setSyncingModeNode}
diff --git a/apps/core/src/components/affine/enable-affine-cloud-modal/index.tsx b/apps/core/src/components/affine/enable-affine-cloud-modal/index.tsx
index 7b32dd857..ec1f77b14 100644
--- a/apps/core/src/components/affine/enable-affine-cloud-modal/index.tsx
+++ b/apps/core/src/components/affine/enable-affine-cloud-modal/index.tsx
@@ -38,7 +38,6 @@ export const EnableAffineCloudModal = ({
return (
{
+ const { onConfirm } = props;
const [workspaceName] = useBlockSuiteWorkspaceName(
workspace.blockSuiteWorkspace
);
@@ -27,6 +28,12 @@ export const WorkspaceDeleteModal = ({
const allowDelete = deleteStr === workspaceName;
const t = useAFFiNEI18N();
+ const handleOnEnter = useCallback(() => {
+ if (allowDelete) {
+ return onConfirm?.();
+ }
+ }, [allowDelete, onConfirm]);
+
return (
Deleting (
-
+
{{ workspace: workspaceName } as any}
-
+
) cannot be undone, please proceed with caution. All contents will be
lost.
) : (
Deleting (
-
+
{{ workspace: workspaceName } as any}
-
+
) will delete both local and cloud data, this operation cannot be
undone, please proceed with caution.
)}
-
+
{
if (ref) {
@@ -67,11 +74,11 @@ export const WorkspaceDeleteModal = ({
}}
onChange={setDeleteStr}
data-testid="delete-workspace-input"
+ onEnter={handleOnEnter}
placeholder={t['com.affine.workspaceDelete.placeholder']()}
- width={315}
- height={42}
+ size="large"
/>
-
+
);
};
diff --git a/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/style.css.ts b/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/style.css.ts
new file mode 100644
index 000000000..d08eca58e
--- /dev/null
+++ b/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/style.css.ts
@@ -0,0 +1,29 @@
+import { style } from '@vanilla-extract/css';
+
+export const modalWrapper = style({
+ position: 'relative',
+ padding: '0px',
+ width: '560px',
+ background: 'var(--affine-background-overlay-panel-color)',
+ borderRadius: '12px',
+});
+
+export const modalHeader = style({
+ margin: '44px 0px 12px 0px',
+ width: '560px',
+ fontWeight: '600',
+ fontSize: '20px;',
+ textAlign: 'center',
+});
+
+export const inputContent = style({
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'center',
+ margin: '24px 0',
+ fontSize: 'var(--affine-font-base)',
+});
+
+export const workspaceName = style({
+ fontWeight: '600',
+});
diff --git a/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/style.ts b/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/style.ts
deleted file mode 100644
index 4a20d28c8..000000000
--- a/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/style.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { styled } from '@affine/component';
-
-export const StyledModalWrapper = styled('div')(() => {
- return {
- position: 'relative',
- padding: '0px',
- width: '560px',
- background: 'var(--affine-background-overlay-panel-color)',
- borderRadius: '12px',
- // height: '312px',
- };
-});
-
-export const StyledModalHeader = styled('div')(() => {
- return {
- margin: '44px 0px 12px 0px',
- width: '560px',
- fontWeight: '600',
- fontSize: '20px;',
- textAlign: 'center',
- };
-});
-
-export const StyledInputContent = styled('div')(() => {
- return {
- display: 'flex',
- flexDirection: 'row',
- justifyContent: 'center',
- margin: '24px 0',
- fontSize: 'var(--affine-font-base)',
- };
-});
-
-export const StyledWorkspaceName = styled('span')(() => {
- return {
- fontWeight: '600',
- };
-});
diff --git a/apps/core/src/components/affine/setting-modal/account-setting/index.tsx b/apps/core/src/components/affine/setting-modal/account-setting/index.tsx
index 130fedcc9..d1bb55ccb 100644
--- a/apps/core/src/components/affine/setting-modal/account-setting/index.tsx
+++ b/apps/core/src/components/affine/setting-modal/account-setting/index.tsx
@@ -88,12 +88,13 @@ export const AvatarAndName = () => {
const user = useCurrentUser();
const [input, setInput] = useState(user.name);
- const handleUpdateUserName = useCallback(
- (newName: string) => {
- user.update({ name: newName }).catch(console.error);
- },
- [user]
- );
+ const allowUpdate = !!input && input !== user.name;
+ const handleUpdateUserName = useCallback(() => {
+ if (!allowUpdate) {
+ return;
+ }
+ user.update({ name: input }).catch(console.error);
+ }, [allowUpdate, input, user]);
return (
<>
@@ -119,20 +120,19 @@ export const AvatarAndName = () => {
width={280}
height={28}
onChange={setInput}
+ onEnter={handleUpdateUserName}
/>
- {input && input === user.name ? null : (
+ {allowUpdate ? (
- )}
+ ) : null}
diff --git a/packages/component/package.json b/packages/component/package.json
index e1229a1df..c218e358f 100644
--- a/packages/component/package.json
+++ b/packages/component/package.json
@@ -38,7 +38,7 @@
"@radix-ui/react-toast": "^1.1.5",
"@toeverything/hooks": "workspace:*",
"@toeverything/infra": "workspace:*",
- "@toeverything/theme": "^0.7.18",
+ "@toeverything/theme": "^0.7.20",
"@vanilla-extract/dynamic": "^2.0.3",
"check-password-strength": "^2.0.7",
"clsx": "^2.0.0",
diff --git a/packages/component/src/components/member-components/invite-modal.tsx b/packages/component/src/components/member-components/invite-modal.tsx
index ab69c7e08..9371a50a7 100644
--- a/packages/component/src/components/member-components/invite-modal.tsx
+++ b/packages/component/src/components/member-components/invite-modal.tsx
@@ -48,7 +48,6 @@ export const InviteModal = ({
onChange({ ...value, name })}
+ onEnter={onSaveCollection}
/>
diff --git a/packages/component/src/components/share-menu/disable-public-link/index.tsx b/packages/component/src/components/share-menu/disable-public-link/index.tsx
index 55d81aab2..5402eff74 100644
--- a/packages/component/src/components/share-menu/disable-public-link/index.tsx
+++ b/packages/component/src/components/share-menu/disable-public-link/index.tsx
@@ -9,7 +9,6 @@ export const PublicLinkDisableModal = (props: ConfirmModalProps) => {
return (
(function Input(
>
{preFix}