chore(deps): update dependency @types/react to v18.2.66 (#47798)

* chore(deps): update dependency @types/react to v18.2.66 * Update package.json Signed-off-by: afc163 <afc163@gmail.com> * fix: React LegacyRef * type: fix ref type * type: fix ref type * type: fix ref type * type: fix ref type * type: fix ref type * type: fix ref type * chore: fix lint errors --------- Signed-off-by: afc163 <afc163@gmail.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: afc163 <afc163@gmail.com>
2024-11-24 02:59:58 +08:00 · 2024-03-16 21:41:25 +08:00 · 2024-03-16 21:41:25 +08:00 · bcc5d113bc
commit bcc5d113bc
parent 8ba9900c56
4 changed files with 42 additions and 75 deletions
--- a/components/_util/type.ts
+++ b/components/_util/type.ts
@ -20,7 +20,9 @@ export type GetProp<
  PropName extends keyof GetProps<T>,
 > = NonNullable<GetProps<T>[PropName]>;

-type ReactRefComponent<Props extends { ref?: React.Ref<any> }> = (props: Props) => React.ReactNode;
+type ReactRefComponent<Props extends { ref?: React.Ref<any> | string }> = (
+  props: Props,
+) => React.ReactNode;

 export type GetRef<T extends ReactRefComponent<any> | React.Component<any>> =
  T extends React.Component<any>
--- a/components/radio/tests/group.test.tsx
+++ b/components/radio/tests/group.test.tsx
@ -1,4 +1,3 @@
-import type { RefAttributes } from 'react';
 import React from 'react';

 import type { RadioGroupProps } from '..';
@ -6,24 +5,22 @@ import Radio from '..';
 import { fireEvent, render } from '../../../tests/utils';

 describe('Radio Group', () => {
-  function createRadioGroup(props?: RadioGroupProps & RefAttributes<HTMLDivElement>) {
-    return (
-      <Radio.Group {...props}>
-        <Radio value="A">A</Radio>
-        <Radio value="B">B</Radio>
-        <Radio value="C">C</Radio>
-      </Radio.Group>
-    );
-  }
+  const RadioGroupComponent: React.FC<RadioGroupProps> = (props) => (
+    <Radio.Group {...props}>
+      <Radio value="A">A</Radio>
+      <Radio value="B">B</Radio>
+      <Radio value="C">C</Radio>
+    </Radio.Group>
+  );

-  function createRadioGroupByOption(props?: RadioGroupProps & RefAttributes<HTMLDivElement>) {
+  const RadioGroupByOptions = React.forwardRef<HTMLDivElement, RadioGroupProps>((props, ref) => {
    const options = [
      { label: 'A', value: 'A' },
      { label: 'B', value: 'B' },
      { label: 'C', value: 'C' },
    ];
-    return <Radio.Group {...props} options={options} />;
-  }
+    return <Radio.Group {...props} options={options} ref={ref} />;
+  });

  it('responses hover events', () => {
    const onMouseEnter = jest.fn();
@ -45,20 +42,11 @@ describe('Radio Group', () => {
  it('fire change events when value changes', () => {
    const onChange = jest.fn();

-    const { container, rerender } = render(
-      createRadioGroup({
-        onChange,
-      }),
-    );
+    const { container, rerender } = render(<RadioGroupComponent onChange={onChange} />);
    const radios = container.querySelectorAll('input');

    // controlled component
-    rerender(
-      createRadioGroup({
-        onChange,
-        value: 'A',
-      }),
-    );
+    rerender(<RadioGroupComponent value="A" onChange={onChange} />);
    fireEvent.click(radios[1]);
    expect(onChange.mock.calls.length).toBe(1);
  });
@ -127,26 +115,17 @@ describe('Radio Group', () => {
  it("won't fire change events when value not changes", () => {
    const onChange = jest.fn();

-    const { container, rerender } = render(
-      createRadioGroup({
-        onChange,
-      }),
-    );
+    const { container, rerender } = render(<RadioGroupComponent onChange={onChange} />);
    const radios = container.querySelectorAll('input');

    // controlled component
-    rerender(
-      createRadioGroup({
-        onChange,
-        value: 'A',
-      }),
-    );
+    rerender(<RadioGroupComponent value="A" onChange={onChange} />);
    fireEvent.click(radios[0]);
    expect(onChange.mock.calls.length).toBe(0);
  });

  it('optional should correct render', () => {
-    const { container } = render(createRadioGroupByOption());
+    const { container } = render(<RadioGroupByOptions />);
    const radios = container.querySelectorAll('input');

    expect(radios.length).toBe(3);
@ -154,7 +133,7 @@ describe('Radio Group', () => {

  it('all children should have a name property', () => {
    const GROUP_NAME = 'GROUP_NAME';
-    const { container } = render(createRadioGroup({ name: GROUP_NAME }));
+    const { container } = render(<RadioGroupComponent name={GROUP_NAME} />);

    container.querySelectorAll<HTMLInputElement>('input[type="radio"]').forEach((el) => {
      expect(el.name).toEqual(GROUP_NAME);
@ -173,11 +152,11 @@ describe('Radio Group', () => {
  it('should forward ref', () => {
    let radioGroupRef: HTMLDivElement;
    const { container } = render(
-      createRadioGroupByOption({
-        ref(ref: HTMLDivElement) {
+      <RadioGroupByOptions
+        ref={(ref: HTMLDivElement) => {
          radioGroupRef = ref;
-        },
-      }),
+        }}
+      />,
    );

    expect(radioGroupRef!).toBe(container.querySelector<HTMLDivElement>('.ant-radio-group'));
@ -185,10 +164,7 @@ describe('Radio Group', () => {

  it('should support data-* or aria-* props', () => {
    const { container } = render(
-      createRadioGroup({
-        'data-radio-group-id': 'radio-group-id',
-        'aria-label': 'radio-group',
-      } as RadioGroupProps),
+      <RadioGroupComponent data-radio-group-id="radio-group-id" aria-label="radio-group" />,
    );
    expect((container.firstChild as HTMLDivElement)?.getAttribute('data-radio-group-id')).toBe(
      'radio-group-id',
--- a/components/radio/tests/radio-button.test.tsx
+++ b/components/radio/tests/radio-button.test.tsx
@ -1,4 +1,3 @@
-import type { RefAttributes } from 'react';
 import React from 'react';
 import type { RadioGroupProps } from '..';
 import Radio, { Button } from '..';
@ -36,15 +35,13 @@ describe('Radio Button', () => {
 });

 describe('Radio Group', () => {
-  function createRadioGroup(props?: RadioGroupProps & RefAttributes<HTMLDivElement>) {
-    return (
-      <Radio.Group {...props}>
-        <Button value="A">A</Button>
-        <Button value="B">B</Button>
-        <Button value="C">C</Button>
-      </Radio.Group>
-    );
-  }
+  const RadioGroupComponent = React.forwardRef<HTMLDivElement, RadioGroupProps>((props, ref) => (
+    <Radio.Group {...props} ref={ref}>
+      <Radio value="A">A</Radio>
+      <Radio value="B">B</Radio>
+      <Radio value="C">C</Radio>
+    </Radio.Group>
+  ));

  it('responses hover events', () => {
    const onMouseEnter = jest.fn();
@ -66,12 +63,12 @@ describe('Radio Group', () => {
  it('fire change events when value changes', () => {
    const onChange = jest.fn();

-    const { container, rerender } = render(createRadioGroup({ onChange }));
+    const { container, rerender } = render(<RadioGroupComponent onChange={onChange} />);

    const radios = container.querySelectorAll('input');

    // controlled component
-    rerender(createRadioGroup({ onChange, value: 'A' }));
+    rerender(<RadioGroupComponent value="A" onChange={onChange} />);
    fireEvent.click(radios[1]);
    expect(onChange.mock.calls.length).toBe(1);
  });
@ -137,23 +134,18 @@ describe('Radio Group', () => {
  it("won't fire change events when value not changes", () => {
    const onChange = jest.fn();

-    const { container, rerender } = render(
-      createRadioGroup({
-        onChange,
-      }),
-    );
+    const { container, rerender } = render(<RadioGroupComponent onChange={onChange} />);
    const radios = container.querySelectorAll('input');

    // controlled component
-    rerender(createRadioGroup({ onChange, value: 'A' }));
+    rerender(<RadioGroupComponent value="A" onChange={onChange} />);
    fireEvent.click(radios[0]);
    expect(onChange.mock.calls.length).toBe(0);
  });

  it('all children should have a name property', () => {
    const GROUP_NAME = 'GROUP_NAME';
-    const { container } = render(createRadioGroup({ name: GROUP_NAME }));
-
+    const { container } = render(<RadioGroupComponent name={GROUP_NAME} />);
    container.querySelectorAll<HTMLInputElement>('input[type="radio"]').forEach((el) => {
      expect(el.name).toEqual(GROUP_NAME);
    });
@ -171,11 +163,11 @@ describe('Radio Group', () => {
  it('should forward ref', () => {
    let radioGroupRef: HTMLDivElement;
    const { container } = render(
-      createRadioGroup({
-        ref(ref: HTMLDivElement) {
+      <RadioGroupComponent
+        ref={(ref: HTMLDivElement) => {
          radioGroupRef = ref;
-        },
-      }),
+        }}
+      />,
    );

    expect(radioGroupRef!).toBe(container.querySelector('.ant-radio-group'));
@ -183,10 +175,7 @@ describe('Radio Group', () => {

  it('should support data-* or aria-* props', () => {
    const { container } = render(
-      createRadioGroup({
-        'data-radio-group-id': 'radio-group-id',
-        'aria-label': 'radio-group',
-      } as RadioGroupProps),
+      <RadioGroupComponent data-radio-group-id="radio-group-id" aria-label="radio-group" />,
    );
    expect((container.firstChild as HTMLDivElement)?.getAttribute('data-radio-group-id')).toBe(
      'radio-group-id',
--- a/package.json
+++ b/package.json
@ -208,7 +208,7 @@
    "@types/prismjs": "^1.26.3",
    "@types/progress": "^2.0.7",
    "@types/qs": "^6.9.12",
-    "@types/react": "18.2.60",
+    "@types/react": "^18.2.66",
    "@types/react-copy-to-clipboard": "^5.0.7",
    "@types/react-dom": "^18.2.22",
    "@types/react-highlight-words": "^0.16.7",