From ff0d386f737c40a2b22036ebc51ddbd2c78e062b Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Fri, 9 Dec 2022 01:47:14 +0800 Subject: [PATCH] feat: refactor layout component --- packages/app/src/pages/all-page.tsx | 2 +- packages/app/src/ui/Layout/content.tsx | 23 --------- packages/app/src/ui/Layout/styles.ts | 50 ------------------- packages/app/src/ui/Layout/wrapper.tsx | 42 ---------------- packages/app/src/ui/layout/content.tsx | 42 ++++++++++++++++ .../app/src/ui/{Layout => layout}/index.ts | 0 packages/app/src/ui/layout/wrapper.tsx | 37 ++++++++++++++ 7 files changed, 80 insertions(+), 116 deletions(-) delete mode 100644 packages/app/src/ui/Layout/content.tsx delete mode 100644 packages/app/src/ui/Layout/styles.ts delete mode 100644 packages/app/src/ui/Layout/wrapper.tsx create mode 100644 packages/app/src/ui/layout/content.tsx rename packages/app/src/ui/{Layout => layout}/index.ts (100%) create mode 100644 packages/app/src/ui/layout/wrapper.tsx diff --git a/packages/app/src/pages/all-page.tsx b/packages/app/src/pages/all-page.tsx index 94a82375cc..2cef69aa69 100644 --- a/packages/app/src/pages/all-page.tsx +++ b/packages/app/src/pages/all-page.tsx @@ -7,7 +7,7 @@ import { IconButton } from '@/ui/button'; import { MoreVertical_24pxIcon } from '@blocksuite/icons'; import { Menu, MenuItem } from '@/ui/menu'; import { PageMeta, useEditor } from '@/providers/editor-provider'; -import { Wrapper } from '@/ui/Layout'; +import { Wrapper } from '@/ui/layout'; import { MiddleFavouritesIcon, diff --git a/packages/app/src/ui/Layout/content.tsx b/packages/app/src/ui/Layout/content.tsx deleted file mode 100644 index ed0ccf1ec0..0000000000 --- a/packages/app/src/ui/Layout/content.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React, { CSSProperties, HTMLAttributes, PropsWithChildren } from 'react'; -import { StyledContent } from '@/ui/Layout/styles'; - -// This component should be just used to be contained the text content -export type ContentProps = { - width?: CSSProperties['width']; - maxWidth?: CSSProperties['maxWidth']; - color?: CSSProperties['color']; - fontSize?: CSSProperties['fontSize']; - fontWeight?: CSSProperties['fontWeight']; - lineHeight?: CSSProperties['lineHeight']; - ellipsis?: boolean; - lineNum?: number; - children: string; -}; -export const Content = ({ - children, - ...props -}: ContentProps & HTMLAttributes) => { - return {children}; -}; - -export default Content; diff --git a/packages/app/src/ui/Layout/styles.ts b/packages/app/src/ui/Layout/styles.ts deleted file mode 100644 index e4043f6831..0000000000 --- a/packages/app/src/ui/Layout/styles.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { styled, textEllipsis } from '@/styles'; -import { WrapperProps } from './wrapper'; -import { ContentProps } from '@/ui/Layout/content'; - -export const StyledWrapper = styled.div( - ({ - display, - justifyContent, - alignItems, - flexWrap, - flexDirection, - flexShrink, - flexGrow, - }) => { - return { - display, - justifyContent, - alignItems, - flexWrap, - flexDirection, - flexShrink, - flexGrow, - }; - } -); - -export const StyledContent = styled.div( - ({ - theme, - color, - fontSize, - fontWeight, - lineHeight, - ellipsis, - lineNum, - width, - maxWidth, - }) => { - return { - width, - maxWidth, - display: 'inline-block', - color: color ?? theme.colors.textColor, - fontSize: fontSize ?? theme.font.base, - fontWeight: fontWeight ?? 400, - lineHeight: lineHeight ?? 1.5, - ...(ellipsis ? textEllipsis(lineNum) : {}), - }; - } -); diff --git a/packages/app/src/ui/Layout/wrapper.tsx b/packages/app/src/ui/Layout/wrapper.tsx deleted file mode 100644 index ea16ab7027..0000000000 --- a/packages/app/src/ui/Layout/wrapper.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import type { CSSProperties, HTMLAttributes, PropsWithChildren } from 'react'; -import { StyledWrapper } from './styles'; - -// 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 type WrapperProps = { - display?: CSSProperties['display']; - flexDirection?: CSSProperties['flexDirection']; - justifyContent?: CSSProperties['justifyContent']; - alignItems?: CSSProperties['alignItems']; - flexWrap?: CSSProperties['flexWrap']; - flexShrink?: CSSProperties['flexShrink']; - flexGrow?: CSSProperties['flexGrow']; -}; - -export const Wrapper = ({ - children, - display = 'flex', - justifyContent = 'flex-start', - alignItems = 'center', - flexWrap = 'nowrap', - flexDirection = 'row', - flexShrink = '0', - flexGrow = '0', - ...props -}: PropsWithChildren>) => { - return ( - - {children} - - ); -}; - -export default Wrapper; diff --git a/packages/app/src/ui/layout/content.tsx b/packages/app/src/ui/layout/content.tsx new file mode 100644 index 0000000000..e04fe23c59 --- /dev/null +++ b/packages/app/src/ui/layout/content.tsx @@ -0,0 +1,42 @@ +import React, { CSSProperties } from 'react'; +import { styled, textEllipsis } from '@/styles'; + +// This component should be just used to be contained the text content +export type ContentProps = { + width?: CSSProperties['width']; + maxWidth?: CSSProperties['maxWidth']; + color?: CSSProperties['color']; + fontSize?: CSSProperties['fontSize']; + fontWeight?: CSSProperties['fontWeight']; + lineHeight?: CSSProperties['lineHeight']; + ellipsis?: boolean; + lineNum?: number; + children: string; +}; + +export const Content = styled.div( + ({ + theme, + color, + fontSize, + fontWeight, + lineHeight, + ellipsis, + lineNum, + width, + maxWidth, + }) => { + return { + width, + maxWidth, + display: 'inline-block', + color: color ?? theme.colors.textColor, + fontSize: fontSize ?? theme.font.base, + fontWeight: fontWeight ?? 400, + lineHeight: lineHeight ?? 1.5, + ...(ellipsis ? textEllipsis(lineNum) : {}), + }; + } +); + +export default Content; diff --git a/packages/app/src/ui/Layout/index.ts b/packages/app/src/ui/layout/index.ts similarity index 100% rename from packages/app/src/ui/Layout/index.ts rename to packages/app/src/ui/layout/index.ts diff --git a/packages/app/src/ui/layout/wrapper.tsx b/packages/app/src/ui/layout/wrapper.tsx new file mode 100644 index 0000000000..8096b87dc2 --- /dev/null +++ b/packages/app/src/ui/layout/wrapper.tsx @@ -0,0 +1,37 @@ +import type { CSSProperties, HTMLAttributes, PropsWithChildren } from 'react'; +import { styled } from '@/styles'; + +export type WrapperProps = { + display?: CSSProperties['display']; + flexDirection?: CSSProperties['flexDirection']; + justifyContent?: CSSProperties['justifyContent']; + alignItems?: CSSProperties['alignItems']; + flexWrap?: CSSProperties['flexWrap']; + flexShrink?: CSSProperties['flexShrink']; + flexGrow?: CSSProperties['flexGrow']; +}; + +// 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( + ({ + display = 'flex', + justifyContent = 'flex-start', + alignItems = 'center', + flexWrap = 'nowrap', + flexDirection = 'row', + flexShrink = '0', + flexGrow = '0', + }) => { + return { + display, + justifyContent, + alignItems, + flexWrap, + flexDirection, + flexShrink, + flexGrow, + }; + } +); + +export default Wrapper;