Replace render prop with children to simplicity sake

facebook · Jul 15, 2021 · 1566a2c · 1566a2c
1 parent 43ea649
commit 1566a2c
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 68 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogLayout/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogLayout/index.tsx
@@ -15,7 +15,7 @@ import TOC from '@theme/TOC';
 import type {Props} from '@theme/BlogLayout';
 
 function BlogLayout(props: Props): JSX.Element {
-  const {sidebar, contentRender, toc, ...layoutProps} = props;
+  const {sidebar, toc, children, ...layoutProps} = props;
   const hasSidebar = sidebar && sidebar.items.length > 0;
 
   return (
@@ -32,7 +32,7 @@ function BlogLayout(props: Props): JSX.Element {
               'col--7': hasSidebar,
               'col--9': !hasSidebar,
             })}>
-            {contentRender()}
+            {children}
           </main>
           {toc && (
             <div className="col col--2">

diff --git a/packages/docusaurus-theme-classic/src/theme/BlogListPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogListPage/index.tsx
@@ -33,22 +33,18 @@ function BlogListPage(props: Props): JSX.Element {
         // assign unique search tag to exclude this page from search results!
         tag: 'blog_posts_list',
       }}
-      sidebar={sidebar}
-      contentRender={() => (
-        <>
-          {items.map(({content: BlogPostContent}) => (
-            <BlogPostItem
-              key={BlogPostContent.metadata.permalink}
-              frontMatter={BlogPostContent.frontMatter}
-              metadata={BlogPostContent.metadata}
-              truncated={BlogPostContent.metadata.truncated}>
-              <BlogPostContent />
-            </BlogPostItem>
-          ))}
-          <BlogListPaginator metadata={metadata} />
-        </>
-      )}
-    />
+      sidebar={sidebar}>
+      {items.map(({content: BlogPostContent}) => (
+        <BlogPostItem
+          key={BlogPostContent.metadata.permalink}
+          frontMatter={BlogPostContent.frontMatter}
+          metadata={BlogPostContent.metadata}
+          truncated={BlogPostContent.metadata.truncated}>
+          <BlogPostContent />
+        </BlogPostItem>
+      ))}
+      <BlogListPaginator metadata={metadata} />
+    </BlogLayout>
   );
 }
 

diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx
@@ -25,25 +25,23 @@ function BlogPostPage(props: Props): JSX.Element {
       wrapperClassName={ThemeClassNames.wrapper.blogPages}
       pageClassName={ThemeClassNames.page.blogPostPage}
       sidebar={sidebar}
-      contentRender={() => (
-        <>
-          <BlogPostItem
-            frontMatter={frontMatter}
-            metadata={metadata}
-            isBlogPostPage>
-            <BlogPostContents />
-          </BlogPostItem>
-          {(nextItem || prevItem) && (
-            <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />
-          )}
-        </>
-      )}
       toc={
         !hideTableOfContents && BlogPostContents.toc
           ? BlogPostContents.toc
           : undefined
-      }
-    />
+      }>
+      <>
+        <BlogPostItem
+          frontMatter={frontMatter}
+          metadata={metadata}
+          isBlogPostPage>
+          <BlogPostContents />
+        </BlogPostItem>
+        {(nextItem || prevItem) && (
+          <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />
+        )}
+      </>
+    </BlogLayout>
   );
 }
 

diff --git a/packages/docusaurus-theme-classic/src/theme/BlogTagsListPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogTagsListPage/index.tsx
@@ -61,14 +61,10 @@ function BlogTagsListPage(props: Props): JSX.Element {
         // assign unique search tag to exclude this page from search results!
         tag: 'blog_tags_list',
       }}
-      sidebar={sidebar}
-      contentRender={() => (
-        <>
-          <h1>{title}</h1>
-          <section className="margin-vert--lg">{tagsSection}</section>
-        </>
-      )}
-    />
+      sidebar={sidebar}>
+      <h1>{title}</h1>
+      <section className="margin-vert--lg">{tagsSection}</section>
+    </BlogLayout>
   );
 }
 

diff --git a/packages/docusaurus-theme-classic/src/theme/BlogTagsPostsPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogTagsPostsPage/index.tsx
@@ -54,33 +54,29 @@ function BlogTagsPostPage(props: Props): JSX.Element {
         // assign unique search tag to exclude this page from search results!
         tag: 'blog_tags_posts',
       }}
-      sidebar={sidebar}
-      contentRender={() => (
-        <>
-          <header className="margin-bottom--xl">
-            <h1>{title}</h1>
+      sidebar={sidebar}>
+      <header className="margin-bottom--xl">
+        <h1>{title}</h1>
 
-            <Link href={allTagsPath}>
-              <Translate
-                id="theme.tags.tagsPageLink"
-                description="The label of the link targeting the tag list page">
-                View All Tags
-              </Translate>
-            </Link>
-          </header>
+        <Link href={allTagsPath}>
+          <Translate
+            id="theme.tags.tagsPageLink"
+            description="The label of the link targeting the tag list page">
+            View All Tags
+          </Translate>
+        </Link>
+      </header>
 
-          {items.map(({content: BlogPostContent}) => (
-            <BlogPostItem
-              key={BlogPostContent.metadata.permalink}
-              frontMatter={BlogPostContent.frontMatter}
-              metadata={BlogPostContent.metadata}
-              truncated>
-              <BlogPostContent />
-            </BlogPostItem>
-          ))}
-        </>
-      )}
-    />
+      {items.map(({content: BlogPostContent}) => (
+        <BlogPostItem
+          key={BlogPostContent.metadata.permalink}
+          frontMatter={BlogPostContent.frontMatter}
+          metadata={BlogPostContent.metadata}
+          truncated>
+          <BlogPostContent />
+        </BlogPostItem>
+      ))}
+    </BlogLayout>
   );
 }
 

diff --git a/packages/docusaurus-theme-classic/src/types.d.ts b/packages/docusaurus-theme-classic/src/types.d.ts
@@ -55,9 +55,8 @@ declare module '@theme/BlogLayout' {
   import type {BlogSidebar} from '@theme/BlogSidebar';
   import type {TOCItem} from '@docusaurus/types';
 
-  export type Props = Omit<LayoutProps, 'children'> & {
+  export type Props = LayoutProps & {
     readonly sidebar?: BlogSidebar;
-    readonly contentRender: () => React.ReactNode;
     readonly toc?: readonly TOCItem[];
   };