perf(theme-default): avoid unnecessary re-render when click page (#446)

* fix(theme-default): fix application always rerender from global delegate click event * test(theme): add test * feat(theme): prettier code * feat(theme): prettier code * feat(theme): prettier code * test(theme): add bubbles event * test(theme): add bubbles event * Update packages/theme-default/src/test/index.test.tsx * Update packages/theme-default/src/test/index.test.tsx Co-authored-by: zhili.wzl <[email protected]> Co-authored-by: zhili.wzl <[email protected]> Co-authored-by: Peach <[email protected]>
umijs · Dec 24, 2020 · b17cff6 · b17cff6
1 parent 685547a
commit b17cff6
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 10 deletions.
diff --git a/packages/theme-default/src/layout.tsx b/packages/theme-default/src/layout.tsx
@@ -27,13 +27,13 @@ const Features = features => (
   <div className="__dumi-default-layout-features">
     {features.map(feat => (
       <dl key={feat.title} style={{ backgroundImage: feat.icon ? `url(${feat.icon})` : undefined }}>
-        {
-          feat.link
-            ? <Link to={feat.link}>
-                <dt>{feat.title}</dt>
-              </Link>
-            : <dt>{feat.title}</dt>
-        }
+        {feat.link ? (
+          <Link to={feat.link}>
+            <dt>{feat.title}</dt>
+          </Link>
+        ) : (
+          <dt>{feat.title}</dt>
+        )}
         <dd dangerouslySetInnerHTML={{ __html: feat.desc }} />
       </dl>
     ))}
@@ -72,7 +72,10 @@ const Layout: React.FC<IRouteComponentProps> = ({ children, location }) => {
       data-show-slugs={String(showSlugs)}
       data-site-mode={isSiteMode}
       data-gapless={String(!!meta.gapless)}
-      onClick={() => setMenuCollapsed(true)}
+      onClick={() => {
+        if (menuCollapsed) return;
+        setMenuCollapsed(true);
+      }}
     >
       <Navbar
         location={location}

diff --git a/packages/theme-default/src/test/index.test.tsx b/packages/theme-default/src/test/index.test.tsx
@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom';
 import React from 'react';
-import { render, queryByAttribute } from '@testing-library/react';
+import { render, queryByAttribute, fireEvent } from '@testing-library/react';
 import { createMemoryHistory, MemoryHistory, Router } from '@umijs/runtime';
 import { context as Context } from 'dumi/theme';
 import SourceCode from '../builtins/SourceCode';
@@ -96,7 +96,10 @@ describe('default theme', () => {
               desc: 'Hero Description',
               actions: [{ text: '开始', link: '/' }],
             },
-            features: [{ title: 'Feat', desc: 'Feature' }, { title: 'Feat2', link: '/' }]
+            features: [
+              { title: 'Feat', desc: 'Feature' },
+              { title: 'Feat2', link: '/' },
+            ],
           },
         }}
       >
@@ -191,6 +194,9 @@ describe('default theme', () => {
       <Router history={history}>
         <Layout {...baseProps}>
           <>
+            <a href="" id="btn">
+              click
+            </a>
             <SourceCode code={code} lang="javascript" />
             <Alert type="info">Alert</Alert>
             <Badge type="info">Badge</Badge>
@@ -247,6 +253,23 @@ describe('default theme', () => {
       { wrapper },
     );
 
+    // toggle side menu display
+    fireEvent(
+      container.querySelector('.__dumi-default-navbar-toggle'),
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+
+    fireEvent(
+      container.querySelector('#btn'),
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+
     // expect SourceCode highlight
     expect(getByText('console')).toHaveClass('token');