docs: Cascader displayRender data (#33087)

* docs: Cascader displayRender data * ts: clean up * test: Update rc-resize-observer version * test: fix resize related test case * chore: fix ts error * test: Fix resize logic
2024-11-27 20:49:53 +08:00 · 2021-11-30 17:26:51 +08:00 · 2021-11-30 17:26:51 +08:00 · c6c0662b97
commit c6c0662b97
parent 97ee6df47d
10 changed files with 66 additions and 61 deletions
--- a/components/affix/tests/Affix.test.tsx
+++ b/components/affix/tests/Affix.test.tsx
@ -1,6 +1,5 @@
 import React from 'react';
-import { mount, ReactWrapper, HTMLAttributes } from 'enzyme';
-import ResizeObserverImpl from 'rc-resize-observer';
+import { mount, ReactWrapper } from 'enzyme';
 import Affix, { AffixProps, AffixState } from '..';
 import { getObserverEntities } from '../utils';
 import Button from '../../button';
@ -206,24 +205,7 @@ describe('Affix Render', () => {

      // Mock trigger resize
      updateCalled.mockReset();
-      const resizeObserverInstance: ReactWrapper<HTMLAttributes, unknown, ResizeObserverImpl> =
-        affixMounterWrapper.find('ResizeObserver') as any;
-      resizeObserverInstance
-        .at(index)
-        .instance()
-        .onResize(
-          [
-            {
-              target: {
-                getBoundingClientRect: () => ({ width: 99, height: 99 }),
-              } as Element,
-              contentRect: {} as DOMRect,
-              borderBoxSize: [],
-              contentBoxSize: [],
-            },
-          ],
-          {} as unknown as ResizeObserver,
-        );
+      (affixMounterWrapper as any).triggerResize(index);
      await sleep(20);

      expect(updateCalled).toHaveBeenCalled();
--- a/components/avatar/tests/snapshots/Avatar.test.js.snap
+++ b/components/avatar/tests/snapshots/Avatar.test.js.snap
@ -184,18 +184,25 @@ exports[`Avatar Render should show image on success after a failure state 1`] =
    <ResizeObserver
      onResize={[Function]}
    >
-      <span
-        className="ant-avatar-string"
-        style={
-          Object {
-            "WebkitTransform": "scale(1) translateX(-50%)",
-            "msTransform": "scale(1) translateX(-50%)",
-            "transform": "scale(1) translateX(-50%)",
-          }
-        }
+      <SingleObserver
+        key="rc-observer-key-0"
+        onResize={[Function]}
      >
-        Fallback
-      </span>
+        <DomWrapper>
+          <span
+            className="ant-avatar-string"
+            style={
+              Object {
+                "WebkitTransform": "scale(1) translateX(-50%)",
+                "msTransform": "scale(1) translateX(-50%)",
+                "transform": "scale(1) translateX(-50%)",
+              }
+            }
+          >
+            Fallback
+          </span>
+        </DomWrapper>
+      </SingleObserver>
    </ResizeObserver>
  </span>
 </Avatar>
--- a/components/cascader/tests/index.test.js
+++ b/components/cascader/tests/index.test.js
@ -475,17 +475,30 @@ describe('Cascader', () => {
    expect(onChange).toHaveBeenCalledWith(['Zhejiang', 'Hangzhou', 'West Lake'], expect.anything());
  });

-  it('legacy props', () => {
-    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    const wrapper = mount(<Cascader open popupPlacement="topRight" popupClassName="mock-cls" />);
+  describe('legacy props', () => {
+    it('popupClassName', () => {
+      const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+      const wrapper = mount(<Cascader open popupPlacement="topRight" popupClassName="mock-cls" />);

-    expect(wrapper.exists('.mock-cls')).toBeTruthy();
-    expect(wrapper.find('Trigger').prop('popupPlacement')).toEqual('topRight');
+      expect(wrapper.exists('.mock-cls')).toBeTruthy();
+      expect(wrapper.find('Trigger').prop('popupPlacement')).toEqual('topRight');

-    expect(errorSpy).toHaveBeenCalledWith(
-      'Warning: [antd: Cascader] `popupClassName` is deprecated. Please use `dropdownClassName` instead.',
-    );
+      expect(errorSpy).toHaveBeenCalledWith(
+        'Warning: [antd: Cascader] `popupClassName` is deprecated. Please use `dropdownClassName` instead.',
+      );

-    errorSpy.mockRestore();
+      errorSpy.mockRestore();
+    });
+
+    it('displayRender & multiple', () => {
+      const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+      mount(<Cascader multiple displayRender={() => null} />);
+
+      expect(errorSpy).toHaveBeenCalledWith(
+        'Warning: [antd: Cascader] `displayRender` not work on `multiple`. Please use `tagRender` instead.',
+      );
+
+      errorSpy.mockRestore();
+    });
  });
 });
--- a/components/cascader/index.en-US.md
+++ b/components/cascader/index.en-US.md
@ -28,7 +28,7 @@ Cascade selection box.
 | className | The additional css class | string | - |  |
 | defaultValue | Initial selected value | string\[] \| number\[] | \[] |  |
 | disabled | Whether disabled select | boolean | false |  |
-| displayRender | The render function of displaying selected options | (label, selectedOptions) => ReactNode | label => label.join(`/`) |  |
+| displayRender | The render function of displaying single selected options. You can use tagRender for multiple mode | (label, selectedOptions) => ReactNode | label => label.join(`/`) |  |
 | dropdownClassName | The additional className of popup overlay | string | - | 4.17.0 |
 | dropdownRender | Customize dropdown content | (menus: ReactNode) => ReactNode | - | 4.4.0 |
 | expandIcon | Customize the current item expand icon | ReactNode | - | 4.4.0 |
--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@ -130,6 +130,12 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
      'Cascader',
      '`popupClassName` is deprecated. Please use `dropdownClassName` instead.',
    );
+
+    devWarning(
+      !multiple || !props.displayRender,
+      'Cascader',
+      '`displayRender` not work on `multiple`. Please use `tagRender` instead.',
+    );
  }

  // =================== No Found ====================
--- a/components/cascader/index.zh-CN.md
+++ b/components/cascader/index.zh-CN.md
@ -29,7 +29,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg
 | className | 自定义类名 | string | - |  |
 | defaultValue | 默认的选中项 | string\[] \| number\[] | \[] |  |
 | disabled | 禁用 | boolean | false |  |
-| displayRender | 选择后展示的渲染函数 | (label, selectedOptions) => ReactNode | label => label.join(`/`) |  |
+| displayRender | 单选模式下选择后展示的渲染函数，多选请使用 tagRender | (label, selectedOptions) => ReactNode | label => label.join(`/`) |  |
 | dropdownClassName | 自定义浮层类名 | string | - | 4.17.0 |
 | dropdownRender | 自定义下拉框内容 | (menus: ReactNode) => ReactNode | - | 4.4.0 |
 | expandIcon | 自定义次级菜单展开图标 | ReactNode | - | 4.4.0 |
--- a/components/input/tests/textarea.test.js
+++ b/components/input/tests/textarea.test.js
@ -139,18 +139,7 @@ describe('TextArea', () => {
    const onResize = jest.fn();
    const wrapper = mount(<TextArea onResize={onResize} autoSize />);
    await sleep(100);
-    wrapper
-      .find('ResizeObserver')
-      .instance()
-      .onResize([
-        {
-          target: {
-            getBoundingClientRect() {
-              return {};
-            },
-          },
-        },
-      ]);
+    wrapper.triggerResize();
    await Promise.resolve();

    expect(onResize).toHaveBeenCalledWith(
--- a/components/page-header/tests/index.test.js
+++ b/components/page-header/tests/index.test.js
@ -157,6 +157,6 @@ describe('PageHeader', () => {
    wrapper.triggerResize();
    await Promise.resolve();
    wrapper.update();
-    expect(wrapper.find('.ant-page-header').hasClass('ant-page-header-compact')).toBe(true);
+    expect(wrapper.find('.ant-page-header').hasClass('ant-page-header-compact')).toBeTruthy();
  });
 });
--- a/package.json
+++ b/package.json
@ -138,7 +138,7 @@
    "rc-picker": "~2.5.17",
    "rc-progress": "~3.1.0",
    "rc-rate": "~2.9.0",
-    "rc-resize-observer": "^1.0.0",
+    "rc-resize-observer": "^1.1.0",
    "rc-select": "~13.1.0-alpha.0",
    "rc-slider": "~9.7.4",
    "rc-steps": "~4.1.0",
--- a/tests/setup.js
+++ b/tests/setup.js
@ -1,4 +1,6 @@
 const React = require('react');
+const { _rs: onLibResize } = require('rc-resize-observer/lib/utils/observerUtil');
+const { _rs: onEsResize } = require('rc-resize-observer/es/utils/observerUtil');

 // eslint-disable-next-line no-console
 console.log('Current React Version:', React.version);
@ -44,11 +46,17 @@ const Adapter =
 Enzyme.configure({ adapter: new Adapter() });

 Object.assign(Enzyme.ReactWrapper.prototype, {
-  findObserver() {
-    return this.find('ResizeObserver');
+  findObserver(index = 0) {
+    return this.find('ResizeObserver').at(index);
  },
-  triggerResize() {
-    const ob = this.findObserver();
-    ob.instance().onResize([{ target: ob.getDOMNode() }]);
+  triggerResize(index = 0) {
+    const target = this.findObserver(index).getDOMNode();
+    const originGetBoundingClientRect = target.getBoundingClientRect;
+
+    target.getBoundingClientRect = () => ({ width: 510, height: 903 });
+    onLibResize([{ target }]);
+    onEsResize([{ target }]);
+
+    target.getBoundingClientRect = originGetBoundingClientRect;
  },
 });