Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: fix GetRef for some case #47983

Merged
merged 5 commits into from Mar 21, 2024
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
16 changes: 16 additions & 0 deletions components/_util/__tests__/type.test.tsx
Expand Up @@ -65,6 +65,22 @@ describe('type', () => {

expect(<RefFC ref={ref} />).toBeTruthy();
});

it('Support ForwardRefExoticComponent type', () => {
interface InnerProps {
test: number;
}
interface InnerRef {
bamboo: number;
}
type TestComponent = React.ForwardRefExoticComponent<
InnerProps & React.RefAttributes<InnerRef>
>;
type ExtractedTestRef = GetRef<TestComponent>;

const a: ExtractedTestRef = { bamboo: 123 };
expect(a).toBeTruthy();
});
});

describe('GetProp', () => {
Expand Down
45 changes: 45 additions & 0 deletions components/_util/index.en-US.md
@@ -0,0 +1,45 @@
---
category: Components
title: Util
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YSm4RI3iOJ8AAAAAAAAAAAAADrJ8AQ/original
li-jia-nan marked this conversation as resolved.
Show resolved Hide resolved
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*03dxS64LxeQAAAAAAAAAAAAADrJ8AQ/original
demo:
cols: 2
group:
title: Other
order: 99
---

工具类用于辅助开发,提供一些常用的工具方法。
li-jia-nan marked this conversation as resolved.
Show resolved Hide resolved

## GetRef

Get the `ref` property definition of the component, which is very useful for components that are not directly exposed or child components.

```tsx
import type { GetRef, Select } from 'antd';

type SelectRefType = GetRef<typeof Select>; // BaseSelectRef
```

## GetProps

Get the `props` property definition of the component:

```tsx
import type { Checkbox, GetProps } from 'antd';

type CheckboxGroupType = GetProps<typeof Checkbox.Group>;
```

## GetProp

Get the single `props` property definition of the component. It has encapsulated `NonNullable`, so you don't have to worry about being empty:

```tsx
import type { GetProp, Select, SelectProps } from 'antd';

// Both of this can work
type SelectOptionType1 = GetProp<SelectProps, 'options'>[number];
type SelectOptionType2 = GetProp<typeof Select, 'options'>[number];
```
46 changes: 46 additions & 0 deletions components/_util/index.zh-CN.md
@@ -0,0 +1,46 @@
---
category: Components
title: Util
subtitle: 工具类
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YSm4RI3iOJ8AAAAAAAAAAAAADrJ8AQ/original
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*03dxS64LxeQAAAAAAAAAAAAADrJ8AQ/original
demo:
cols: 2
group:
title: 其他
order: 99
---

工具类用于辅助开发,提供一些常用的工具方法。

## GetRef

获取组件的 `ref` 属性定义,这对于未直接暴露或者子组件的 `ref` 属性定义非常有用。

```tsx
import type { GetRef, Select } from 'antd';

type SelectRefType = GetRef<typeof Select>; // BaseSelectRef
```

## GetProps

获取组件的 `props` 属性定义:

```tsx
import type { Checkbox, GetProps } from 'antd';

type CheckboxGroupType = GetProps<typeof Checkbox.Group>;
```

## GetProp

获取组件的单个 `props` 属性定义。它已经将 `NonNullable` 进行了封装,所以不用在考虑为空的情况:

```tsx
import type { GetProp, Select, SelectProps } from 'antd';

// 以下两种都可以生效
type SelectOptionType1 = GetProp<SelectProps, 'options'>[number];
type SelectOptionType2 = GetProp<typeof Select, 'options'>[number];
```
6 changes: 4 additions & 2 deletions components/_util/type.ts
Expand Up @@ -22,9 +22,11 @@ export type GetProp<

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

type ExtractRefAttributesRef<T> = T extends React.RefAttributes<infer P> ? P : never;

export type GetRef<T extends ReactRefComponent<any> | React.Component<any>> =
T extends React.Component<any>
? T
: T extends ReactRefComponent<React.RefAttributes<infer RefType>>
? RefType
: T extends React.ComponentType<infer P>
? ExtractRefAttributesRef<P>
: never;