fix: Not break string size but warning (#284)

Author: zombieJ

src/DrawerPopup.tsx

@@ -7,6 +7,7 @@ import type ScrollLocker from 'rc-util/lib/Dom/scrollLocker';
 import DrawerContext from './context';
 import type { DrawerContextProps } from './context';
 import KeyCode from 'rc-util/lib/KeyCode';
+import { parseWidthHeight } from './util';
 
 const sentinelStyle: React.CSSProperties = {
   width: 0,
@@ -262,9 +263,9 @@ export default function DrawerPopup(props: DrawerPopupProps) {
   }
 
   if (placement === 'left' || placement === 'right') {
-    wrapperStyle.width = width;
+    wrapperStyle.width = parseWidthHeight(width);
   } else {
-    wrapperStyle.height = height;
+    wrapperStyle.height = parseWidthHeight(height);
   }
 
   const panelNode: React.ReactNode = (

src/util.ts

@@ -0,0 +1,13 @@
+import warning from 'rc-util/lib/warning';
+
+export function parseWidthHeight(value?: number | string) {
+  if (typeof value === 'string' && String(Number(value)) === value) {
+    warning(
+      false,
+      'Invalid value type of `width` or `height` which should be number type instead.',
+    );
+    return Number(value);
+  }
+
+  return value;
+}

tests/index.spec.tsx

@@ -1,5 +1,6 @@
 import { cleanup, fireEvent, render, act } from '@testing-library/react';
 import KeyCode from 'rc-util/lib/KeyCode';
+import { resetWarned } from 'rc-util/lib/warning';
 import React from 'react';
 import type { DrawerProps } from '../src';
 import Drawer from '../src';
@@ -34,7 +35,9 @@ describe('rc-drawer-menu', () => {
     act(() => {
       jest.runAllTimers();
     });
-    expect(document.querySelector('.rc-drawer-content-hidden')).toBeTruthy();
+    expect(
+      document.querySelector('.rc-drawer-content-wrapper-hidden'),
+    ).toBeTruthy();
   });
 
   describe('push', () => {
@@ -311,12 +314,34 @@ describe('rc-drawer-menu', () => {
   });
 
   it('width on the correct element', () => {
+    resetWarned();
+    const errSpy = jest.spyOn(console, 'error');
     const { container } = render(
       <Drawer width="93%" open getContainer={false} />,
     );
 
     expect(container.querySelector('.rc-drawer-content-wrapper')).toHaveStyle({
       width: '93%',
     });
+
+    expect(errSpy).not.toHaveBeenCalled();
+    errSpy.mockRestore();
+  });
+
+  it('warning for string width', () => {
+    resetWarned();
+    const errSpy = jest.spyOn(console, 'error');
+    const { container } = render(
+      <Drawer width="93" open getContainer={false} />,
+    );
+
+    expect(container.querySelector('.rc-drawer-content-wrapper')).toHaveStyle({
+      width: '93px',
+    });
+
+    expect(errSpy).toHaveBeenCalledWith(
+      'Warning: Invalid value type of `width` or `height` which should be number type instead.',
+    );
+    errSpy.mockRestore();
   });
 });