fix(design): navigate should work in nested ConfigProvider, fix #123

oceanbase · Sep 9, 2023 · 647773a · 647773a
1 parent 44fc2d3
commit 647773a
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 1 deletion.
diff --git a/packages/design/src/config-provider/__tests__/__snapshots__/spin.test.tsx.snap b/packages/design/src/config-provider/__tests__/__snapshots__/spin.test.tsx.snap
@@ -15,3 +15,36 @@ exports[`ConfigProvider spin spin.indicator should work 1`] = `
   </div>
 </div>
 `;
+
+exports[`ConfigProvider spin spin.indicator should work in nested ConfigProvider 1`] = `
+<div
+  class="ant-app"
+>
+  <div
+    class="ant-app"
+  >
+    <div
+      aria-busy="true"
+      aria-live="polite"
+      class="ant-spin ant-spin-spinning"
+    >
+      <div
+        class="custom-indicator-1 ant-spin-dot"
+      />
+    </div>
+  </div>
+  <div
+    class="ant-app"
+  >
+    <div
+      aria-busy="true"
+      aria-live="polite"
+      class="ant-spin ant-spin-spinning"
+    >
+      <div
+        class="custom-indicator-2 ant-spin-dot"
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/design/src/config-provider/__tests__/navigate.test.tsx b/packages/design/src/config-provider/__tests__/navigate.test.tsx
@@ -26,4 +26,46 @@ describe('ConfigProvider navigate', () => {
     );
     render(<Demo />);
   });
+
+  it('navigate should work in nested ConfigProvider', () => {
+    const SubChild1 = () => {
+      const { navigate } = useContext(ConfigProvider.ExtendedConfigContext);
+      expect(typeof navigate).toBe('function');
+      return <div />;
+    };
+    const SubChild2 = () => {
+      const { navigate } = useContext(ConfigProvider.ExtendedConfigContext);
+      expect(navigate).toBe(null);
+      return <div />;
+    };
+    const Child = () => {
+      const { navigate } = useContext(ConfigProvider.ExtendedConfigContext);
+      expect(typeof navigate).toBe('function');
+      return (
+        <>
+          <ConfigProvider>
+            <SubChild1 />
+          </ConfigProvider>
+          <ConfigProvider navigate={null}>
+            <SubChild2 />
+          </ConfigProvider>
+        </>
+      );
+    };
+    const Parent = () => {
+      const navigate = useNavigate();
+      return (
+        <ConfigProvider navigate={navigate}>
+          <Child />
+        </ConfigProvider>
+      );
+    };
+    const Demo = () => (
+      // useNavigate() may be used only in the context of a <Router> component
+      <BrowserRouter>
+        <Parent />
+      </BrowserRouter>
+    );
+    render(<Demo />);
+  });
 });
diff --git a/packages/design/src/config-provider/__tests__/spin.test.tsx b/packages/design/src/config-provider/__tests__/spin.test.tsx
@@ -18,4 +18,29 @@ describe('ConfigProvider spin', () => {
     expect(container.querySelector('.ant-spin-oceanbase')).toBeFalsy();
     expect(asFragment().firstChild).toMatchSnapshot();
   });
+
+  it('spin.indicator should work in nested ConfigProvider', () => {
+    const { container, asFragment } = render(
+      <ConfigProvider
+        spin={{
+          indicator: <div className="custom-indicator-1" />,
+        }}
+      >
+        <ConfigProvider>
+          <Spin />
+        </ConfigProvider>
+        <ConfigProvider
+          spin={{
+            indicator: <div className="custom-indicator-2" />,
+          }}
+        >
+          <Spin />
+        </ConfigProvider>
+      </ConfigProvider>
+    );
+    expect(container.querySelectorAll('.custom-indicator-1').length).toBe(1);
+    expect(container.querySelectorAll('.custom-indicator-2').length).toBe(1);
+    expect(container.querySelectorAll('.ant-spin-oceanbase').length).toBe(0);
+    expect(asFragment().firstChild).toMatchSnapshot();
+  });
 });
diff --git a/packages/design/src/config-provider/index.tsx b/packages/design/src/config-provider/index.tsx
@@ -49,6 +49,8 @@ const { defaultSeed, components } = defaultTheme;
 // ConfigProvider 默认设置主题和内嵌 App，支持 message, notification 和 Modal 等静态方法消费 ConfigProvider 配置
 // ref: https://ant.design/components/app-cn
 const ConfigProvider = ({ children, theme, navigate, spin, ...restProps }: ConfigProviderProps) => {
+  // inherit from parent ConfigProvider
+  const parentContext = React.useContext<ExtendedConfigConsumerProps>(ExtendedConfigContext);
   return (
     <AntConfigProvider
       spin={spin}
@@ -79,7 +81,7 @@ const ConfigProvider = ({ children, theme, navigate, spin, ...restProps }: Confi
     >
       <ExtendedConfigContext.Provider
         value={{
-          navigate,
+          navigate: navigate === undefined ? parentContext.navigate : navigate,
         }}
       >
         <App>