feat: ConfigProvider support virtual and dropdownMatchSelectWidth (#23841)

* feat: ConfigProvider support virtual and dropdownMatchSelectWidth

* update snap

* Update demo.test.js.snap

* update snap

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

@@ -102,6 +102,16 @@ describe('ConfigProvider', () => {
             ),
           ).toMatchSnapshot();
         });
+
+        it('configProvider virtual and dropdownMatchSelectWidth', () => {
+          expect(
+            render(
+              <ConfigProvider virtual={false} dropdownMatchSelectWidth={false}>
+                {renderComponent({})}
+              </ConfigProvider>,
+            ),
+          ).toMatchSnapshot();
+        });
       });
     }
 

components/config-provider/context.tsx

@@ -26,6 +26,8 @@ export interface ConfigConsumerProps {
   space?: {
     size?: SizeType | number;
   };
+  virtual?: boolean;
+  dropdownMatchSelectWidth?: boolean;
 }
 
 export const ConfigContext = React.createContext<ConfigConsumerProps>({

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

@@ -47,9 +47,11 @@ Some components use dynamic style to support wave effect. You can config `csp` p
 | getTargetContainer | Config Affix, Anchor scroll target container. | () => HTMLElement | () => window | 4.2.0 |
 | locale | language package setting, you can find the packages in [antd/es/locale](http://unpkg.com/antd/es/locale/) | object |  |
 | prefixCls | set prefix class. `Note:` This will discard default styles from `antd`. | string | ant |  |
-| pageHeader | Unify the ghost of PageHeader, ref [PageHeader](/components/page-header) | { ghost:boolean } | 'true' |  |
+| pageHeader | Unify the ghost of PageHeader, ref [PageHeader](/components/page-header) | { ghost:boolean } | true |  |
 | direction | set direction of layout. See [demo](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` |  |
 | space | set Space `size`, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 |
+| virtual | Disable virtual scroll when set to `false` | boolean | - | 4.3.0 |
+| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. `false` will disable virtual scroll | boolean \| number | - | 4.3.0 |
 
 ## FAQ
 

components/config-provider/index.tsx

@@ -49,6 +49,8 @@ export interface ConfigProviderProps {
   space?: {
     size?: SizeType | number;
   };
+  virtual?: boolean;
+  dropdownMatchSelectWidth?: boolean;
 }
 
 const ConfigProvider: React.FC<ConfigProviderProps> = props => {
@@ -90,6 +92,8 @@ const ConfigProvider: React.FC<ConfigProviderProps> = props => {
       componentSize,
       direction,
       space,
+      virtual,
+      dropdownMatchSelectWidth,
     } = props;
 
     const config: ConfigConsumerProps = {
@@ -100,6 +104,8 @@ const ConfigProvider: React.FC<ConfigProviderProps> = props => {
       locale: locale || legacyLocale,
       direction,
       space,
+      virtual,
+      dropdownMatchSelectWidth,
     };
 
     if (getTargetContainer) {

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

@@ -48,9 +48,11 @@ return (
 | getTargetContainer | 配置 Affix、Anchor 滚动监听容器。 | () => HTMLElement | () => window | 4.2.0 |
 | locale | 语言包配置，语言包可到 [antd/es/locale](http://unpkg.com/antd/es/locale/) 目录下寻找 | object | - |  |
 | prefixCls | 设置统一样式前缀。`注意：这将不会应用由 antd 提供的默认样式` | string | ant |  |
-| pageHeader | 统一设置 PageHeader 的 ghost，参考 [PageHeader](/components/page-header) | { ghost: boolean } | 'true' |  |
+| pageHeader | 统一设置 PageHeader 的 ghost，参考 [PageHeader](/components/page-header) | { ghost: boolean } | true |  |
 | direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` |  |
 | space | 设置 Space 的 `size`，参考 [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 |
+| virtual | 设置 `false` 时关闭虚拟滚动 | boolean | - | 4.3.0 |
+| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`。`false` 时会关闭虚拟滚动 | boolean \| number | - | 4.3.0 |
 
 ## FAQ
 

components/select/index.tsx

@@ -81,6 +81,8 @@ class Select<ValueType extends SelectValue = SelectValue> extends React.Componen
     getPrefixCls,
     renderEmpty,
     direction,
+    virtual,
+    dropdownMatchSelectWidth,
   }: ConfigConsumerProps) => {
     const {
       prefixCls: customizePrefixCls,
@@ -142,6 +144,8 @@ class Select<ValueType extends SelectValue = SelectValue> extends React.Componen
           return (
             <RcSelect<ValueType>
               ref={this.selectRef}
+              virtual={virtual}
+              dropdownMatchSelectWidth={dropdownMatchSelectWidth}
               {...selectProps}
               listHeight={listHeight}
               listItemHeight={listItemHeight}

components/tree-select/index.tsx

@@ -79,6 +79,8 @@ class TreeSelect<T> extends React.Component<TreeSelectProps<T>, {}> {
     getPrefixCls,
     renderEmpty,
     direction,
+    virtual,
+    dropdownMatchSelectWidth,
   }: ConfigConsumerProps) => {
     const {
       prefixCls: customizePrefixCls,
@@ -154,6 +156,8 @@ class TreeSelect<T> extends React.Component<TreeSelectProps<T>, {}> {
 
           return (
             <RcTreeSelect
+              virtual={virtual}
+              dropdownMatchSelectWidth={dropdownMatchSelectWidth}
               {...selectProps}
               ref={this.selectRef}
               prefixCls={prefixCls}

components/tree/Tree.tsx

@@ -142,7 +142,7 @@ interface CompoundedComponent
 }
 
 const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
-  const { getPrefixCls, direction } = React.useContext(ConfigContext);
+  const { getPrefixCls, direction, virtual } = React.useContext(ConfigContext);
   const {
     prefixCls: customizePrefixCls,
     className,
@@ -158,6 +158,7 @@ const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
     <RcTree
       itemHeight={20}
       ref={ref}
+      virtual={virtual}
       {...props}
       prefixCls={prefixCls}
       className={classNames(className, {