fix: Form warning (#27343)

* fix: Not warning in drawer

* add test case

components/config-provider/context.tsx

@@ -61,6 +61,8 @@ interface ConsumerConfig {
 interface ConstructorProps {
   displayName?: string;
 }
+
+/** @deprecated Use hooks instead. This is a legacy function */
 export function withConfigConsumer<ExportProps extends BasicExportProps>(config: ConsumerConfig) {
   return function withConfigConsumerFunc<ComponentDef>(
     Component: IReactComponent,

components/drawer/__tests__/Drawer.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, mount } from 'enzyme';
 import Drawer from '..';
+import ConfigProvider from '../../config-provider';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 
@@ -134,4 +135,18 @@ describe('Drawer', () => {
     );
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('ConfigProvider should not warning', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    mount(
+      <ConfigProvider virtual>
+        <Drawer visible>Bamboo is Light</Drawer>
+      </ConfigProvider>,
+    );
+
+    expect(errorSpy).not.toHaveBeenCalled();
+
+    errorSpy.mockRestore();
+  });
 });

components/drawer/index.tsx

@@ -4,9 +4,7 @@ import getScrollBarSize from 'rc-util/lib/getScrollBarSize';
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import classNames from 'classnames';
 import omit from 'omit.js';
-
-import { ConfigConsumerProps } from '../config-provider';
-import { withConfigConsumer, ConfigConsumer } from '../config-provider/context';
+import { ConfigContext } from '../config-provider';
 import { tuple } from '../_util/type';
 
 const DrawerContext = React.createContext<Drawer | null>(null);
@@ -58,8 +56,12 @@ export interface IDrawerState {
   push?: boolean;
 }
 
+interface InternalDrawerProps extends DrawerProps {
+  direction: 'rtl' | 'ltr' | undefined;
+}
+
 const defaultPushState: PushState = { distance: 180 };
-class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerState> {
+class Drawer extends React.Component<InternalDrawerProps, IDrawerState> {
   static defaultProps = {
     width: 256,
     height: 256,
@@ -275,20 +277,8 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
   renderProvider = (value: Drawer) => {
     this.parentDrawer = value;
 
-    return (
-      <ConfigConsumer>
-        {({ getPopupContainer, getPrefixCls }) => {
-          const {
-            prefixCls: customizePrefixCls,
-            placement,
-            className,
-            mask,
-            direction,
-            visible,
-            ...rest
-          } = this.props;
+    const { prefixCls, placement, className, mask, direction, visible, ...rest } = this.props;
 
-          const prefixCls = getPrefixCls('select', customizePrefixCls);
     const drawerClassName = classNames(
       {
         'no-mask': !mask,
@@ -304,7 +294,6 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
           handler={false}
           {...omit(rest, [
             'zIndex',
-                  'style',
             'closable',
             'closeIcon',
             'destroyOnClose',
@@ -313,28 +302,12 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
             'bodyStyle',
             'footerStyle',
             'footer',
-                  'locale',
             'title',
             'push',
             'visible',
-                  'getPopupContainer',
-                  'rootPrefixCls',
-                  'getPrefixCls',
-                  'renderEmpty',
-                  'csp',
-                  'pageHeader',
-                  'autoInsertSpaceInButton',
             'width',
             'height',
-                  'dropdownMatchSelectWidth',
-                  'getTargetContainer',
           ])}
-                getContainer={
-                  // 有可能为 false，所以不能直接判断
-                  rest.getContainer === undefined && getPopupContainer
-                    ? () => getPopupContainer(document.body)
-                    : rest.getContainer
-                }
           {...offsetStyle}
           prefixCls={prefixCls}
           open={visible}
@@ -347,9 +320,6 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
         </RcDrawer>
       </DrawerContext.Provider>
     );
-        }}
-      </ConfigConsumer>
-    );
   };
 
   render() {
@@ -357,6 +327,22 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
   }
 }
 
-export default withConfigConsumer<DrawerProps>({
-  prefixCls: 'drawer',
-})(Drawer);
+const DrawerWrapper: React.FC<DrawerProps> = props => {
+  const { prefixCls: customizePrefixCls, getContainer: customizeGetContainer } = props;
+  const { getPopupContainer, getPrefixCls, direction } = React.useContext(ConfigContext);
+
+  const prefixCls = getPrefixCls('drawer', customizePrefixCls);
+  const getContainer =
+    // 有可能为 false，所以不能直接判断
+    customizeGetContainer === undefined && getPopupContainer
+      ? () => getPopupContainer(document.body)
+      : customizeGetContainer;
+
+  return (
+    <Drawer {...props} prefixCls={prefixCls} getContainer={getContainer} direction={direction} />
+  );
+};
+
+DrawerWrapper.displayName = 'DrawerWrapper';
+
+export default DrawerWrapper;