feat(zarm/panel): Improved panel component

packages/zarm/src/panel/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,29 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Panel renders correctly 1`] = `
-<div>
+exports[`Panel snapshots with title and more props 1`] = `
+<div
+  class="za-panel za-panel--bordered"
+>
   <div
-    class="za-panel za-panel--bordered"
+    class="za-panel__header"
   >
     <div
-      class="za-panel__header"
+      class="za-panel__header__title"
     >
-      <div
-        class="za-panel__header__title"
-      >
-        title
-      </div>
-      <div
-        class="za-panel__header__more"
-      >
-        more
-      </div>
+      title
     </div>
     <div
-      class="za-panel__body"
+      class="za-panel__header__more"
     >
-      body
+      more
     </div>
   </div>
+  <div
+    class="za-panel__body"
+  >
+    body
+  </div>
 </div>
 `;

packages/zarm/src/panel/__tests__/index.test.tsx

@@ -1,14 +1,69 @@
-import React from 'react';
 import { render } from '@testing-library/react';
+import { createBEM } from '@zarm-design/bem';
+import React, { useEffect, useRef } from 'react';
+import { defaultConfig } from '../../config-provider/ConfigProvider';
 import Panel from '../index';
 
+const bem = createBEM('panel', { prefixCls: defaultConfig.prefixCls });
+
 describe('Panel', () => {
-  it('renders correctly', () => {
-    const { container } = render(
+  test('snapshots with title and more props', () => {
+    const { asFragment } = render(
       <Panel title="title" more="more">
         body
       </Panel>,
     );
-    expect(container).toMatchSnapshot();
+    expect(asFragment().firstChild).toMatchSnapshot();
+  });
+
+  test('should not render header if do not have title and more props', () => {
+    const { container } = render(<Panel>body</Panel>);
+    expect(container.children).toHaveLength(1);
+    expect(container.querySelector(`.${bem('header')}`)).not.toBeInTheDocument();
+    expect(container.querySelector(`.${bem('body')}`)).toBeInTheDocument();
+  });
+
+  test('should accept custom css vars', () => {
+    const { container } = render(
+      <Panel title="title" style={{ '--header-padding': 0 }}>
+        body
+      </Panel>,
+    );
+    expect(container.querySelector(`.${bem('header')}`)).toHaveStyle({
+      padding: 'var(--header-padding)',
+    });
+  });
+
+  test('should forward ref created by React.createRef() API', (done) => {
+    const ref = React.createRef<HTMLDivElement>();
+    render(
+      <Panel bordered={false} ref={ref}>
+        body
+      </Panel>,
+    );
+    if (!ref.current) return done('ref.current does not exist');
+    expect(ref.current.className).toEqual('za-panel');
+    expect(ref.current.nodeName.toLocaleLowerCase()).toBe('div');
+    done();
+  });
+
+  test('should forward ref created by useRef() hook', (done) => {
+    expect.assertions(2);
+    const TestComp = () => {
+      const ref = useRef<HTMLDivElement>(null);
+      useEffect(() => {
+        if (ref.current) {
+          expect(ref.current.className).toEqual('za-panel');
+          expect(ref.current.nodeName.toLocaleLowerCase()).toBe('div');
+          done();
+        }
+      }, []);
+      return (
+        <Panel bordered={false} ref={ref}>
+          body
+        </Panel>
+      );
+    };
+    render(<TestComp />);
   });
 });

packages/zarm/src/panel/index.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
 import { createBEM } from '@zarm-design/bem';
+import React from 'react';
 import { ConfigContext } from '../config-provider';
 import type { BasePanelProps } from './interface';
-import type { HTMLProps } from '../utils/utilityTypes';
+
 
 export interface PanelCssVars {
   '--header-padding'?: React.CSSProperties['padding'];
@@ -15,23 +15,28 @@ export interface PanelCssVars {
   '--spacing-padding-horizontal'?: React.CSSProperties['padding'];
 }
 
-export type PanelProps = BasePanelProps & React.PropsWithChildren<HTMLProps<PanelCssVars>>;
+export type PanelProps = Omit<React.ComponentPropsWithRef<'div'>, 'title'> &
+  BasePanelProps & {
+    style?: Partial<PanelCssVars>;
+  };
+
 
 const Panel = React.forwardRef<HTMLDivElement, PanelProps>((props, ref) => {
   const { className, title, more, spacing, bordered, children, ...restProps } = props;
 
-  const panelRef = ref || React.createRef<HTMLDivElement>();
   const { prefixCls } = React.useContext(ConfigContext);
   const bem = createBEM('panel', { prefixCls });
 
   const cls = bem([{ spacing, bordered }, className]);
 
   return (
-    <div className={cls} ref={panelRef} {...restProps}>
-      <div className={bem('header')}>
-        {title && <div className={bem('header__title')}>{title}</div>}
-        {more && <div className={bem('header__more')}>{more}</div>}
-      </div>
+    <div className={cls} ref={ref} {...restProps}>
+      {(title || more) && (
+        <div className={bem('header')}>
+          {title && <div className={bem('header__title')}>{title}</div>}
+          {more && <div className={bem('header__more')}>{more}</div>}
+        </div>
+      )}
       <div className={bem('body')}>{children}</div>
     </div>
   );