Merge branch 'master' of github.com:oceanbase/oceanbase-design into h…

…jg-dev
oceanbase · Sep 12, 2023 · f3a628c · f3a628c
2 parents 5754291 + 8ac1f06
commit f3a628c
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 12 deletions.
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
@@ -51,6 +51,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}
@@ -82,7 +84,7 @@ const ConfigProvider = ({ children, theme, navigate, spin, ...restProps }: Confi
     >
       <ExtendedConfigContext.Provider
         value={{
-          navigate,
+          navigate: navigate === undefined ? parentContext.navigate : navigate,
         }}
       >
         <App>

diff --git a/packages/design/src/spin/style/index.ts b/packages/design/src/spin/style/index.ts
@@ -13,13 +13,16 @@ const genSizeStyle = (spinDotSize: number, token: SpinToken): CSSObject => {
   const spinDotWidth = spinDotSize;
   const spinDotHight = spinDotWidth * (295 / 397);
   return {
-    [`${componentCls}-dot`]: {
-      width: spinDotWidth,
-      height: spinDotHight,
-    },
-    [`${componentCls}-text`]: {
-      width: spinDotWidth,
-      color: colorText,
+    // only work for oceanbase indicator
+    [`&${componentCls}-oceanbase`]: {
+      [`${componentCls}-dot`]: {
+        width: spinDotWidth,
+        height: spinDotHight,
+      },
+      [`${componentCls}-text`]: {
+        width: spinDotWidth,
+        color: colorText,
+      },
     },
   };
 };
@@ -35,6 +38,7 @@ const genNestedSizeStyle = (spinDotSize: number, token: SpinToken): CSSObject =>
   const dotMarginTop = -spinDotHight / 2;
   const textPaddingTop = (spinDotHight - fontSize) / 2 + 2;
   return {
+    // only work for oceanbase indicator
     [`&${componentCls}-oceanbase`]: {
       [`${componentCls}-dot`]: {
         marginLeft: dotMarginLeft,
@@ -53,11 +57,10 @@ const genNestedSizeStyle = (spinDotSize: number, token: SpinToken): CSSObject =>
 export const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken): CSSObject => {
   const { componentCls, spinDotSize, spinDotSizeSM, spinDotSizeLG } = token;
   return {
-    // only work for oceanbase indicator
     [`${componentCls}`]: {
-      [`&-oceanbase`]: genSizeStyle(spinDotSize, token),
-      [`&-sm&-oceanbase`]: genSizeStyle(spinDotSizeSM, token),
-      [`&-lg&-oceanbase`]: genSizeStyle(spinDotSizeLG, token),
+      [`&`]: genSizeStyle(spinDotSize, token),
+      [`&-sm`]: genSizeStyle(spinDotSizeSM, token),
+      [`&-lg`]: genSizeStyle(spinDotSizeLG, token),
     },
     [`${componentCls}-nested-loading`]: {
       [`> div > ${componentCls}`]: {