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 { ConfigContext } from '../config-provider';
-import { ConfigConsumerProps } from '../config-provider';
-import { withConfigConsumer, ConfigConsumer } from '../config-provider/context';
 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,80 +277,48 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
   renderProvider = (value: Drawer) => {
     this.parentDrawer = value;
 
+    const { prefixCls, placement, className, mask, direction, visible, ...rest } = this.props;
+
+    const drawerClassName = classNames(
+      {
+        'no-mask': !mask,
+        [`${prefixCls}-rtl`]: direction === 'rtl',
+      },
+      className,
+    );
+    const offsetStyle = mask ? this.getOffsetStyle() : {};
+
     return (
-      <ConfigConsumer>
+      <DrawerContext.Provider value={this}>
-        {({ getPopupContainer, getPrefixCls }) => {
+        <RcDrawer
-          const {
+          handler={false}
-            prefixCls: customizePrefixCls,
+          {...omit(rest, [
-            placement,
+            'zIndex',
-            className,
+            'closable',
-            mask,
+            'closeIcon',
-            direction,
+            'destroyOnClose',
-            visible,
+            'drawerStyle',
-            ...rest
+            'headerStyle',
-          } = this.props;
+            'bodyStyle',
-
+            'footerStyle',
-          const prefixCls = getPrefixCls('select', customizePrefixCls);
+            'footer',
-          const drawerClassName = classNames(
+            'title',
-            {
+            'push',
-              'no-mask': !mask,
+            'visible',
-              [`${prefixCls}-rtl`]: direction === 'rtl',
+            'width',
-            },
+            'height',
-            className,
+          ])}
-          );
+          {...offsetStyle}
-          const offsetStyle = mask ? this.getOffsetStyle() : {};
+          prefixCls={prefixCls}
-
+          open={visible}
-          return (
+          showMask={mask}
-            <DrawerContext.Provider value={this}>
+          placement={placement}
-              <RcDrawer
+          style={this.getRcDrawerStyle()}
-                handler={false}
+          className={drawerClassName}
-                {...omit(rest, [
+        >
-                  'zIndex',
+          {this.renderBody()}
-                  'style',
+        </RcDrawer>
-                  'closable',
+      </DrawerContext.Provider>
-                  'closeIcon',
-                  'destroyOnClose',
-                  'drawerStyle',
-                  'headerStyle',
-                  '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}
-                showMask={mask}
-                placement={placement}
-                style={this.getRcDrawerStyle()}
-                className={drawerClassName}
-              >
-                {this.renderBody()}
-              </RcDrawer>
-            </DrawerContext.Provider>
-          );
-        }}
-      </ConfigConsumer>
     );
   };
 
@@ -357,6 +327,22 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
   }
 }
 
-export default withConfigConsumer<DrawerProps>({
+const DrawerWrapper: React.FC<DrawerProps> = props => {
-  prefixCls: 'drawer',
+  const { prefixCls: customizePrefixCls, getContainer: customizeGetContainer } = props;
-})(Drawer);
+  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;