From 44d569ca669f362e61e87421543972277173e991 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Tue, 31 Jan 2023 12:22:00 +0800 Subject: [PATCH] feat: add FlexWrapper in layout component --- packages/app/src/components/import/index.tsx | 6 +-- .../components/page-list/OperationCell.tsx | 10 ++-- .../src/components/workspace-modal/Footer.tsx | 6 +-- .../workspace-modal/WorkspaceCard.tsx | 6 +-- .../src/components/workspace-modal/index.tsx | 6 +-- .../workspace-setting/member/MembersPage.tsx | 6 +-- packages/app/src/ui/layout/Wrapper.tsx | 49 +++++++++++++++---- 7 files changed, 60 insertions(+), 29 deletions(-) diff --git a/packages/app/src/components/import/index.tsx b/packages/app/src/components/import/index.tsx index a594b08e35..05fd28182c 100644 --- a/packages/app/src/components/import/index.tsx +++ b/packages/app/src/components/import/index.tsx @@ -1,7 +1,7 @@ import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal'; import { StyledButtonWrapper, StyledTitle } from './styles'; import { Button } from '@/ui/button'; -import { Wrapper, Content } from '@/ui/layout'; +import { Wrapper, Content, FlexWrapper } from '@/ui/layout'; import Loading from '@/components/loading'; import { usePageHelper } from '@/hooks/use-page-helper'; import { useAppState } from '@/providers/app-state-provider'; @@ -116,7 +116,7 @@ export const ImportModal = ({ open, onClose }: ImportModalProps) => { )} {status === 'importing' && ( - { OOOOPS! Sorry forgot to remind you that we are working on the import function - + )} diff --git a/packages/app/src/components/page-list/OperationCell.tsx b/packages/app/src/components/page-list/OperationCell.tsx index ca59efa60a..a9efc634c4 100644 --- a/packages/app/src/components/page-list/OperationCell.tsx +++ b/packages/app/src/components/page-list/OperationCell.tsx @@ -1,7 +1,7 @@ import { useConfirm } from '@/providers/ConfirmProvider'; import { PageMeta } from '@/providers/app-state-provider'; import { Menu, MenuItem } from '@/ui/menu'; -import { Wrapper } from '@/ui/layout'; +import { FlexWrapper } from '@/ui/layout'; import { IconButton } from '@/ui/button'; import { MoreVerticalIcon, @@ -63,13 +63,13 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => { ); return ( - + - + ); }; @@ -80,7 +80,7 @@ export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => { const { confirm } = useConfirm(); const { t } = useTranslation(); return ( - + { > - + ); }; diff --git a/packages/app/src/components/workspace-modal/Footer.tsx b/packages/app/src/components/workspace-modal/Footer.tsx index ea38de2a9c..0aef077900 100644 --- a/packages/app/src/components/workspace-modal/Footer.tsx +++ b/packages/app/src/components/workspace-modal/Footer.tsx @@ -1,5 +1,5 @@ import { CloudInsyncIcon, LogOutIcon } from '@blocksuite/icons'; -import { Wrapper } from '@/ui/layout'; +import { FlexWrapper } from '@/ui/layout'; import { WorkspaceAvatar } from '@/components/workspace-avatar'; import { IconButton } from '@/ui/button'; import { useAppState } from '@/providers/app-state-provider'; @@ -18,7 +18,7 @@ export const Footer = ({ {user && ( <> - + {user.name}

{user.email}

- + { onLogout(); diff --git a/packages/app/src/components/workspace-modal/WorkspaceCard.tsx b/packages/app/src/components/workspace-modal/WorkspaceCard.tsx index 1a6032d65f..f3177fbafe 100644 --- a/packages/app/src/components/workspace-modal/WorkspaceCard.tsx +++ b/packages/app/src/components/workspace-modal/WorkspaceCard.tsx @@ -8,7 +8,7 @@ import { PublishIcon, UsersIcon } from '@blocksuite/icons'; import { WorkspaceUnit } from '@affine/datacenter'; import { useAppState } from '@/providers/app-state-provider'; import { StyleWorkspaceInfo, StyleWorkspaceTitle, StyledCard } from './styles'; -import { Wrapper } from '@/ui/layout'; +import { FlexWrapper } from '@/ui/layout'; export const WorkspaceCard = ({ workspaceData, @@ -26,9 +26,9 @@ export const WorkspaceCard = ({ }} active={workspaceData.id === currentWorkspace?.id} > - + - + diff --git a/packages/app/src/components/workspace-modal/index.tsx b/packages/app/src/components/workspace-modal/index.tsx index 93b1bb7279..88ab7a979f 100644 --- a/packages/app/src/components/workspace-modal/index.tsx +++ b/packages/app/src/components/workspace-modal/index.tsx @@ -1,5 +1,5 @@ import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal'; -import { Wrapper } from '@/ui/layout'; +import { FlexWrapper } from '@/ui/layout'; import { useState } from 'react'; import { CreateWorkspaceModal } from '../create-workspace'; import { Tooltip } from '@/ui/tooltip'; @@ -101,11 +101,11 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => { setCreateWorkspaceOpen(true); }} > - + - + New workspace diff --git a/packages/app/src/components/workspace-setting/member/MembersPage.tsx b/packages/app/src/components/workspace-setting/member/MembersPage.tsx index b1b64ffa0e..986853652f 100644 --- a/packages/app/src/components/workspace-setting/member/MembersPage.tsx +++ b/packages/app/src/components/workspace-setting/member/MembersPage.tsx @@ -25,7 +25,7 @@ import { useConfirm } from '@/providers/ConfirmProvider'; import { toast } from '@/ui/toast'; import useMembers from '@/hooks/use-members'; import Loading from '@/components/loading'; -import { Wrapper } from '@/ui/layout'; +import { FlexWrapper } from '@/ui/layout'; import { useTranslation } from '@affine/i18n'; import { EnableWorkspaceButton } from '@/components/enable-workspace'; @@ -41,9 +41,9 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => { {!loaded && ( - + - + )} {loaded && members.length === 0 && ( diff --git a/packages/app/src/ui/layout/Wrapper.tsx b/packages/app/src/ui/layout/Wrapper.tsx index 00584b20f0..a463312abf 100644 --- a/packages/app/src/ui/layout/Wrapper.tsx +++ b/packages/app/src/ui/layout/Wrapper.tsx @@ -2,6 +2,14 @@ import type { CSSProperties } from 'react'; import { styled } from '@/styles'; export type WrapperProps = { + display?: CSSProperties['display']; + width?: CSSProperties['width']; + height?: CSSProperties['height']; + padding?: CSSProperties['padding']; + margin?: CSSProperties['margin']; +}; + +export type FlexWrapperProps = { display?: CSSProperties['display']; flexDirection?: CSSProperties['flexDirection']; justifyContent?: CSSProperties['justifyContent']; @@ -13,9 +21,22 @@ export type WrapperProps = { // Sometimes we just want to wrap a component with a div to set flex or other styles, but we don't want to create a new component for it. export const Wrapper = styled('div', { + shouldForwardProp: prop => { + return !['display', 'width', 'height', 'padding', 'margin'].includes(prop); + }, +})(({ display, width, height, padding, margin }) => { + return { + display, + width, + height, + padding, + margin, + }; +}); + +export const FlexWrapper = styled(Wrapper, { shouldForwardProp: prop => { return ![ - 'display', 'justifyContent', 'alignItems', 'wrap', @@ -24,18 +45,17 @@ export const Wrapper = styled('div', { 'flexGrow', ].includes(prop); }, -})( +})( ({ - display = 'flex', - justifyContent = 'flex-start', - alignItems = 'center', + justifyContent, + alignItems, wrap = false, - flexDirection = 'row', - flexShrink = '0', - flexGrow = '0', + flexDirection, + flexShrink, + flexGrow, }) => { return { - display, + display: 'flex', justifyContent, alignItems, flexWrap: wrap ? 'wrap' : 'nowrap', @@ -46,4 +66,15 @@ export const Wrapper = styled('div', { } ); +// TODO: Complete me +export const GridWrapper = styled(Wrapper, { + shouldForwardProp: prop => { + return ![''].includes(prop); + }, +})(() => { + return { + display: 'grid', + }; +}); + export default Wrapper;