From 980786c821cadc1b9843b248f57f459e7d1c8446 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Mon, 30 Jan 2023 14:59:32 +0800 Subject: [PATCH] chore: unified mui compoent entry to ui file --- packages/app/src/components/edgeless-toolbar/index.tsx | 6 +++--- packages/app/src/components/header/Header.tsx | 2 +- packages/app/src/components/help-island/index.tsx | 6 +++--- packages/app/src/components/shortcuts-modal/index.tsx | 6 +++--- .../app/src/components/workspace-setting/general/style.ts | 2 +- .../workspace-setting/member/InviteMemberModal.tsx | 4 ++-- .../app/src/components/workspace-setting/member/style.ts | 2 +- .../WorkspaceSelector/WorkspaceItem/styles.ts | 2 +- .../workspace-slider-bar/WorkspaceSelector/styles.ts | 2 +- packages/app/src/components/workspace-slider-bar/index.tsx | 6 +++--- packages/app/src/pages/invite/[invite_code].tsx | 1 - packages/app/src/ui/mui.ts | 7 +++++++ 12 files changed, 26 insertions(+), 20 deletions(-) create mode 100644 packages/app/src/ui/mui.ts diff --git a/packages/app/src/components/edgeless-toolbar/index.tsx b/packages/app/src/components/edgeless-toolbar/index.tsx index 33784928b9..e261899860 100644 --- a/packages/app/src/components/edgeless-toolbar/index.tsx +++ b/packages/app/src/components/edgeless-toolbar/index.tsx @@ -14,8 +14,8 @@ import { UndoIcon, RedoIcon, } from './Icons'; +import { MuiSlide } from '@/ui/mui'; import { Tooltip } from '@/ui/tooltip'; -import Slide from '@mui/material/Slide'; import useCurrentPageMeta from '@/hooks/use-current-page-meta'; import { useAppState } from '@/providers/app-state-provider'; import useHistoryUpdated from '@/hooks/use-history-update'; @@ -127,7 +127,7 @@ export const EdgelessToolbar = () => { const { mode } = useCurrentPageMeta() || {}; return ( - { - + ); }; diff --git a/packages/app/src/components/header/Header.tsx b/packages/app/src/components/header/Header.tsx index a8a50bfefe..1226f91561 100644 --- a/packages/app/src/components/header/Header.tsx +++ b/packages/app/src/components/header/Header.tsx @@ -6,7 +6,7 @@ import { StyledBrowserWarning, StyledCloseButton, } from './styles'; -import CloseIcon from '@mui/icons-material/Close'; +import { CloseIcon } from '@blocksuite/icons'; import { useWarningMessage, shouldShowWarning } from './utils'; import EditorOptionMenu from './header-right-items/EditorOptionMenu'; import TrashButtonGroup from './header-right-items/TrashButtonGroup'; diff --git a/packages/app/src/components/help-island/index.tsx b/packages/app/src/components/help-island/index.tsx index d6aad0c891..9fb883481d 100644 --- a/packages/app/src/components/help-island/index.tsx +++ b/packages/app/src/components/help-island/index.tsx @@ -6,7 +6,7 @@ import { StyledTransformIcon, } from './style'; import { CloseIcon, ContactIcon, HelpIcon, KeyboardIcon } from './Icons'; -import Grow from '@mui/material/Grow'; +import { MuiGrow } from '@/ui/mui'; import { Tooltip } from '@/ui/tooltip'; import { useTranslation } from '@affine/i18n'; import { useModal } from '@/providers/GlobalModalProvider'; @@ -35,7 +35,7 @@ export const HelpIsland = ({ setShowContent(false); }} > - + {showList.includes('contact') && ( @@ -66,7 +66,7 @@ export const HelpIsland = ({ )} - +
{ : windowsKeyboardShortcuts; return createPortal( - + <> @@ -81,7 +81,7 @@ export const ShortcutsModal = ({ open, onClose }: ModalProps) => { })} - , + , document.body ); }; diff --git a/packages/app/src/components/workspace-setting/general/style.ts b/packages/app/src/components/workspace-setting/general/style.ts index d2e8d7b4d2..e52519ad5d 100644 --- a/packages/app/src/components/workspace-setting/general/style.ts +++ b/packages/app/src/components/workspace-setting/general/style.ts @@ -1,5 +1,5 @@ import { displayFlex, styled } from '@/styles'; -import MuiAvatar from '@mui/material/Avatar'; +import { MuiAvatar } from '@/ui/mui'; import IconButton from '@/ui/button/IconButton'; import Input from '@/ui/input'; diff --git a/packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx b/packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx index 7bd542efb6..fb93b53197 100644 --- a/packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx +++ b/packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx @@ -4,7 +4,7 @@ import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal'; import { Button } from '@/ui/button'; import Input from '@/ui/input'; import { useState } from 'react'; -import { Avatar } from '@mui/material'; +import { MuiAvatar } from '@/ui/mui'; import useMembers from '@/hooks/use-members'; import { User } from '@affine/datacenter'; import { useTranslation } from '@affine/i18n'; @@ -102,7 +102,7 @@ export const InviteMemberModal = ({ ) : ( {userData?.avatar ? ( - + ) : ( diff --git a/packages/app/src/components/workspace-setting/member/style.ts b/packages/app/src/components/workspace-setting/member/style.ts index ce18dcb0ad..b7b67fe144 100644 --- a/packages/app/src/components/workspace-setting/member/style.ts +++ b/packages/app/src/components/workspace-setting/member/style.ts @@ -1,5 +1,5 @@ import { styled } from '@/styles'; -import MuiAvatar from '@mui/material/Avatar'; +import { MuiAvatar } from '@/ui/mui'; export const StyledMemberTitleContainer = styled('li')(() => { return { diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/styles.ts b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/styles.ts index add82c90c7..d56661de3a 100644 --- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/styles.ts +++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/styles.ts @@ -1,4 +1,4 @@ -import MuiAvatar from '@mui/material/Avatar'; +import { MuiAvatar } from '@/ui/mui'; import { styled } from '@/styles'; export const WorkspaceItemWrapper = styled('div')(({ theme }) => ({ diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/styles.ts b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/styles.ts index e9c231c69e..e700d8cd81 100644 --- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/styles.ts +++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/styles.ts @@ -1,4 +1,4 @@ -import MuiAvatar from '@mui/material/Avatar'; +import { MuiAvatar } from '@/ui/mui'; import { styled } from '@/styles'; import { StyledPopperContainer } from '@/ui/shared/Container'; diff --git a/packages/app/src/components/workspace-slider-bar/index.tsx b/packages/app/src/components/workspace-slider-bar/index.tsx index ce6f8d43d3..b0f24c7ada 100644 --- a/packages/app/src/components/workspace-slider-bar/index.tsx +++ b/packages/app/src/components/workspace-slider-bar/index.tsx @@ -11,7 +11,6 @@ import { StyledSubListItem, } from './style'; import { Arrow } from './icons'; -import Collapse from '@mui/material/Collapse'; import { ArrowDownIcon, SearchIcon, @@ -23,6 +22,7 @@ import { SettingsIcon, } from '@blocksuite/icons'; import Link from 'next/link'; +import { MuiCollapse } from '@/ui/mui'; import { Tooltip } from '@/ui/tooltip'; import { useModal } from '@/providers/GlobalModalProvider'; import { useAppState } from '@/providers/app-state-provider'; @@ -39,7 +39,7 @@ const FavoriteList = ({ showList }: { showList: boolean }) => { const { t } = useTranslation(); const favoriteList = pageList.filter(p => p.favorite && !p.trash); return ( - + {favoriteList.map((pageMeta, index) => { const active = router.query.pageId === pageMeta.id; return ( @@ -61,7 +61,7 @@ const FavoriteList = ({ showList }: { showList: boolean }) => { {favoriteList.length === 0 && ( {t('No item')} )} - + ); }; export const WorkSpaceSliderBar = () => { diff --git a/packages/app/src/pages/invite/[invite_code].tsx b/packages/app/src/pages/invite/[invite_code].tsx index 872b3f927a..ff86784661 100644 --- a/packages/app/src/pages/invite/[invite_code].tsx +++ b/packages/app/src/pages/invite/[invite_code].tsx @@ -1,7 +1,6 @@ import { useWorkspaceHelper } from '@/hooks/use-workspace-helper'; import { styled } from '@/styles'; import { Empty } from '@/ui/empty'; -// import { Avatar } from '@mui/material'; import { useRouter } from 'next/router'; import { useEffect, useState } from 'react'; diff --git a/packages/app/src/ui/mui.ts b/packages/app/src/ui/mui.ts new file mode 100644 index 0000000000..1d0a7f0b57 --- /dev/null +++ b/packages/app/src/ui/mui.ts @@ -0,0 +1,7 @@ +import MuiBreadcrumbs from '@mui/material/Breadcrumbs'; +import MuiCollapse from '@mui/material/Collapse'; +import MuiSlide from '@mui/material/Slide'; +import MuiAvatar from '@mui/material/Avatar'; +import MuiGrow from '@mui/material/Grow'; + +export { MuiBreadcrumbs, MuiCollapse, MuiSlide, MuiAvatar, MuiGrow };