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}