From 12afd6be681c05112174548996e84f93327d9150 Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Fri, 26 Aug 2022 19:50:17 +0800 Subject: [PATCH] refactor: remove useBlockRender --- .../src/blocks/grid-item/GridItemRender.tsx | 11 ++--------- .../components/editor-blocks/src/blocks/grid/Grid.tsx | 3 +-- .../editor-core/src/render-block/Context.tsx | 9 +++++++-- .../editor-core/src/render-block/RenderBlock.tsx | 5 +++-- .../src/render-block/RenderBlockChildren.tsx | 3 +-- .../src/render-block/WithTreeViewChildren.tsx | 3 +-- libs/components/editor-core/src/render-block/index.ts | 2 +- 7 files changed, 16 insertions(+), 20 deletions(-) diff --git a/libs/components/editor-blocks/src/blocks/grid-item/GridItemRender.tsx b/libs/components/editor-blocks/src/blocks/grid-item/GridItemRender.tsx index 1dece91699..620a25dba6 100644 --- a/libs/components/editor-blocks/src/blocks/grid-item/GridItemRender.tsx +++ b/libs/components/editor-blocks/src/blocks/grid-item/GridItemRender.tsx @@ -1,4 +1,4 @@ -import { useBlockRender } from '@toeverything/components/editor-core'; +import { RenderBlockChildren } from '@toeverything/components/editor-core'; import { ChildrenView, CreateView } from '@toeverything/framework/virgo'; export const GridItemRender = function ( @@ -6,14 +6,7 @@ export const GridItemRender = function ( ) { const GridItem = function (props: CreateView) { const { block } = props; - const { BlockRender } = useBlockRender(); - const children = ( - <> - {block.childrenIds.map(id => { - return ; - })} - - ); + const children = ; return <>{creator({ ...props, children })}; }; return GridItem; diff --git a/libs/components/editor-blocks/src/blocks/grid/Grid.tsx b/libs/components/editor-blocks/src/blocks/grid/Grid.tsx index 4b5bfd49b3..a8e69125d0 100644 --- a/libs/components/editor-blocks/src/blocks/grid/Grid.tsx +++ b/libs/components/editor-blocks/src/blocks/grid/Grid.tsx @@ -1,4 +1,4 @@ -import { useBlockRender } from '@toeverything/components/editor-core'; +import { BlockRender } from '@toeverything/components/editor-core'; import { styled } from '@toeverything/components/ui'; import { Protocol } from '@toeverything/datasource/db-service'; import { CreateView } from '@toeverything/framework/virgo'; @@ -31,7 +31,6 @@ export const Grid = function (props: CreateView) { const originalLeftWidth = useRef(gridItemMinWidth); const originalRightWidth = useRef(gridItemMinWidth); const [alertHandleId, setAlertHandleId] = useState(null); - const { BlockRender } = useBlockRender(); const getLeftRightGridItemDomByIndex = (index: number) => { const gridItems = Array.from(gridContainerRef.current?.children).filter( diff --git a/libs/components/editor-core/src/render-block/Context.tsx b/libs/components/editor-core/src/render-block/Context.tsx index 90c89eec0e..d34f5d6801 100644 --- a/libs/components/editor-core/src/render-block/Context.tsx +++ b/libs/components/editor-core/src/render-block/Context.tsx @@ -3,7 +3,7 @@ import { createContext, PropsWithChildren, useContext } from 'react'; import { RenderBlockProps } from './RenderBlock'; type BlockRenderProps = { - blockRender: (args: RenderBlockProps) => JSX.Element | null; + blockRender: (args: RenderBlockProps) => JSX.Element; }; export const BlockRenderContext = createContext( @@ -27,9 +27,14 @@ export const BlockRenderProvider = ({ ); }; -export const useBlockRender = () => { +const useBlockRender = () => { const { blockRender } = useContext(BlockRenderContext); return { BlockRender: blockRender, }; }; + +export const BlockRender = (props: RenderBlockProps) => { + const { BlockRender } = useBlockRender(); + return ; +}; diff --git a/libs/components/editor-core/src/render-block/RenderBlock.tsx b/libs/components/editor-core/src/render-block/RenderBlock.tsx index c843274166..a7ebc53789 100644 --- a/libs/components/editor-core/src/render-block/RenderBlock.tsx +++ b/libs/components/editor-core/src/render-block/RenderBlock.tsx @@ -7,7 +7,8 @@ import { useBlock } from '../hooks'; /** * Render nothing */ -export const NullBlockRender = (): null => null; +// eslint-disable-next-line react/jsx-no-useless-fragment +export const NullBlockRender = () => <>; export interface RenderBlockProps { blockId: string; @@ -22,7 +23,7 @@ export function RenderBlock({ const { block } = useBlock(blockId); const setRef = useCallback( - (dom: HTMLElement) => { + (dom: HTMLElement | null) => { if (block != null && dom != null) { block.dom = dom; } diff --git a/libs/components/editor-core/src/render-block/RenderBlockChildren.tsx b/libs/components/editor-core/src/render-block/RenderBlockChildren.tsx index d79d0cd002..3ff9892949 100644 --- a/libs/components/editor-core/src/render-block/RenderBlockChildren.tsx +++ b/libs/components/editor-core/src/render-block/RenderBlockChildren.tsx @@ -1,6 +1,6 @@ import { styled } from '@toeverything/components/ui'; import type { AsyncBlock } from '../editor'; -import { useBlockRender } from './Context'; +import { BlockRender } from './Context'; import { NullBlockRender } from './RenderBlock'; export interface RenderChildrenProps { @@ -12,7 +12,6 @@ export const RenderBlockChildren = ({ block, indent = true, }: RenderChildrenProps) => { - const { BlockRender } = useBlockRender(); if (BlockRender === NullBlockRender) { return null; } diff --git a/libs/components/editor-core/src/render-block/WithTreeViewChildren.tsx b/libs/components/editor-core/src/render-block/WithTreeViewChildren.tsx index 8c3642ef6d..6dccd49ace 100644 --- a/libs/components/editor-core/src/render-block/WithTreeViewChildren.tsx +++ b/libs/components/editor-core/src/render-block/WithTreeViewChildren.tsx @@ -7,7 +7,7 @@ import type { } from 'react'; import { forwardRef } from 'react'; import { CreateView } from '../editor'; -import { useBlockRender } from './Context'; +import { BlockRender } from './Context'; import { NullBlockRender } from './RenderBlock'; type WithChildrenConfig = { @@ -60,7 +60,6 @@ export const withTreeViewChildren = ( return (props: CreateView) => { const { block } = props; - const { BlockRender } = useBlockRender(); const collapsed = block.getProperty('collapsed')?.value; const childrenIds = block.childrenIds; const showChildren = diff --git a/libs/components/editor-core/src/render-block/index.ts b/libs/components/editor-core/src/render-block/index.ts index 5d3c6d122e..bc071cf5a2 100644 --- a/libs/components/editor-core/src/render-block/index.ts +++ b/libs/components/editor-core/src/render-block/index.ts @@ -1,4 +1,4 @@ -export { BlockRenderProvider, useBlockRender } from './Context'; +export { BlockRender, BlockRenderProvider } from './Context'; export { NullBlockRender, RenderBlock } from './RenderBlock'; export { RenderBlockChildren } from './RenderBlockChildren'; export { KanbanBlockRender } from './RenderKanbanBlock';