feat: classNames & styles support content (#428)

Author: kiner-tang

src/DrawerPopup.tsx

@@ -313,8 +313,11 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
  id={id}
  containerRef={motionRef}
  prefixCls={prefixCls}
- className={className}
- style={style}
+ className={classNames(className, drawerClassNames?.content)}
+ style={{
+ ...style,
+ ...styles?.content,
+ }}
  {...eventHandlers}
  >
  {children}

src/inter.ts

@@ -1,9 +1,11 @@
 export interface DrawerClassNames {
  mask?: string;
  wrapper?: string;
+ content?: string;
 }
 
 export interface DrawerStyles {
  mask?: React.CSSProperties;
  wrapper?: React.CSSProperties;
+ content?: React.CSSProperties;
 }

tests/index.spec.tsx

@@ -401,6 +401,7 @@ describe('rc-drawer-menu', () => {
  <Drawer classNames={{
  wrapper: 'customer-wrapper',
  mask: 'customer-mask',
+ content: 'customer-content',
  }} open />
  );
  expect(
@@ -409,13 +410,17 @@ describe('rc-drawer-menu', () => {
  expect(
  document.querySelector('.rc-drawer-mask')
  ).toHaveClass('customer-mask');
+ expect(
+ document.querySelector('.rc-drawer-content')
+ ).toHaveClass('customer-content');
  unmount();
  });
  it('should support styles', () => {
  const { unmount } = render(
  <Drawer styles={{
  wrapper: { background: 'red' },
  mask: { background: 'blue' },
+ content: { background: 'green' },
  }} open />
  );
  expect(
@@ -424,6 +429,9 @@ describe('rc-drawer-menu', () => {
  expect(
  document.querySelector('.rc-drawer-mask')
  ).toHaveStyle('background: blue');
+ expect(
+ document.querySelector('.rc-drawer-content')
+ ).toHaveStyle('background: green');
  unmount();
  });
 });