feat: config provider support componentDisabled (#35718)

* feat: config provider support componentDisable

* test: update snapshot

* docs: update

* chore: code

components/config-provider/__tests__/components.test.js

@@ -1,6 +1,6 @@
-import React from 'react';
 import { render } from 'enzyme';
 import moment from 'moment';
+import React from 'react';
 import ConfigProvider from '..';
 import Alert from '../../alert';
 import Anchor from '../../anchor';
@@ -23,15 +23,15 @@ import Drawer from '../../drawer';
 import Dropdown from '../../dropdown';
 import Empty from '../../empty';
 import Form from '../../form';
-import { Row, Col } from '../../grid';
+import { Col, Row } from '../../grid';
 import Input from '../../input';
 import InputNumber from '../../input-number';
 import Layout from '../../layout';
 import List from '../../list';
 import Menu from '../../menu';
 import Modal from '../../modal';
-import Pagination from '../../pagination';
 import PageHeader from '../../page-header';
+import Pagination from '../../pagination';
 import Popconfirm from '../../popconfirm';
 import Popover from '../../popover';
 import Progress from '../../progress';
@@ -102,6 +102,16 @@ describe('ConfigProvider', () => {
           ).toMatchSnapshot();
         });
 
+        it('configProvider componentDisabled', () => {
+          expect(
+            render(
+              <ConfigProvider componentDisabled prefixCls="config">
+                {renderComponent({})}
+              </ConfigProvider>,
+            ),
+          ).toMatchSnapshot();
+        });
+
         it('configProvider virtual and dropdownMatchSelectWidth', () => {
           expect(
             render(

components/config-provider/index.en-US.md

@@ -39,6 +39,7 @@ Some components use dynamic style to support wave effect. You can config `csp` p
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | autoInsertSpaceInButton | Set false to remove space between 2 chinese characters on Button | boolean | true |  |
+| componentDisabled | Config antd component `disabled` | boolean | - |  |
 | componentSize | Config antd component size | `small` \| `middle` \| `large` | - |  |
 | csp | Set [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) config | { nonce: string } | - |  |
 | direction | Set direction of layout. See [demo](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` |  |

components/config-provider/index.tsx

@@ -1,27 +1,28 @@
-import * as React from 'react';
 import IconContext from '@ant-design/icons/lib/components/Context';
 import { FormProvider as RcFormProvider } from 'rc-field-form';
 import type { ValidateMessages } from 'rc-field-form/lib/interface';
 import useMemo from 'rc-util/lib/hooks/useMemo';
-import { RenderEmptyHandler } from './defaultRenderEmpty';
+import * as React from 'react';
+import type { RequiredMark } from '../form/Form';
 import type { Locale } from '../locale-provider';
 import LocaleProvider, { ANT_MARK } from '../locale-provider';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
+import defaultLocale from '../locale/default';
+import message from '../message';
+import notification from '../notification';
 import type { Theme } from './context';
 import {
   ConfigConsumer,
+  ConfigConsumerProps,
   ConfigContext,
   CSPConfig,
   DirectionType,
-  ConfigConsumerProps,
 } from './context';
+import { registerTheme } from './cssVariables';
+import { RenderEmptyHandler } from './defaultRenderEmpty';
+import { DisabledContextProvider } from './DisabledContext';
 import type { SizeType } from './SizeContext';
 import SizeContext, { SizeContextProvider } from './SizeContext';
-import message from '../message';
-import notification from '../notification';
-import type { RequiredMark } from '../form/Form';
-import { registerTheme } from './cssVariables';
-import defaultLocale from '../locale/default';
 
 export {
   RenderEmptyHandler,
@@ -76,6 +77,7 @@ export interface ConfigProviderProps {
     ghost: boolean;
   };
   componentSize?: SizeType;
+  componentDisabled?: boolean;
   direction?: DirectionType;
   space?: {
     size?: SizeType | number;
@@ -161,6 +163,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = props => {
     legacyLocale,
     parentContext,
     iconPrefixCls,
+    componentDisabled,
   } = props;
 
   const getPrefixCls = React.useCallback(
@@ -250,6 +253,12 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = props => {
     childNode = <SizeContextProvider size={componentSize}>{childNode}</SizeContextProvider>;
   }
 
+  if (componentDisabled !== undefined) {
+    childNode = (
+      <DisabledContextProvider disabled={componentDisabled}>{childNode}</DisabledContextProvider>
+    );
+  }
+
   return <ConfigContext.Provider value={memoedConfig}>{childNode}</ConfigContext.Provider>;
 };
 

components/config-provider/index.zh-CN.md

@@ -40,6 +40,7 @@ export default () => (
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | autoInsertSpaceInButton | 设置为 `false` 时，移除按钮中 2 个汉字之间的空格 | boolean | true |  |
+| componentDisabled | 设置 antd 组件禁用状态 | boolean | - |  |
 | componentSize | 设置 antd 组件大小 | `small` \| `middle` \| `large` | - |  |
 | csp | 设置 [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - |  |
 | direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` |  |