test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 03:59:01 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

fix: fix Checkbox.Group type (#49073)

Browse Source 
* fix: fix Checkbox.Group type

* fix: fix Checkbox.Group type

* fix: fix Checkbox.Group type

* fix: remove type

* fix: any
This commit is contained in:
叶枫 2024-05-27 15:06:38 +08:00 committed by GitHub
parent 2e011a379d
commit 74492676f7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 22 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/checkbox/Group.tsx
View File

@ -10,9 +10,7 @@ import type { CheckboxGroupContext } from './GroupContext';
import GroupContext from './GroupContext';
import useStyle from './style';
export type CheckboxValueType = string | number | boolean;
export interface CheckboxOptionType<T extends CheckboxValueType = CheckboxValueType> {
export interface CheckboxOptionType<T = any> {
label: React.ReactNode;
value: T;
style?: React.CSSProperties;
@ -23,7 +21,7 @@ export interface CheckboxOptionType<T extends CheckboxValueType = CheckboxValueT
required?: boolean;
}
export interface AbstractCheckboxGroupProps<T extends CheckboxValueType = CheckboxValueType> {
export interface AbstractCheckboxGroupProps<T = any> {
prefixCls?: string;
className?: string;
rootClassName?: string;
@ -32,8 +30,7 @@ export interface AbstractCheckboxGroupProps<T extends CheckboxValueType = Checkb
style?: React.CSSProperties;
}
export interface CheckboxGroupProps<T extends CheckboxValueType = CheckboxValueType>
extends AbstractCheckboxGroupProps<T> {
export interface CheckboxGroupProps<T = any> extends AbstractCheckboxGroupProps<T> {
name?: string;
defaultValue?: T[];
value?: T[];
@ -41,8 +38,10 @@ export interface CheckboxGroupProps<T extends CheckboxValueType = CheckboxValueT
children?: React.ReactNode;
}
type InternalCheckboxValueType = string | number | boolean;
const CheckboxGroup = React.forwardRef(
<T extends CheckboxValueType = CheckboxValueType>(
<T extends InternalCheckboxValueType = InternalCheckboxValueType>(
props: CheckboxGroupProps<T>,
ref: React.ForwardedRef<HTMLDivElement>,
) => {
@ -168,6 +167,6 @@ const CheckboxGroup = React.forwardRef(
export type { CheckboxGroupContext } from './GroupContext';
export { GroupContext };
export default CheckboxGroup as <T extends CheckboxValueType = CheckboxValueType>(
export default CheckboxGroup as <T = any>(
props: CheckboxGroupProps<T> & React.RefAttributes<HTMLDivElement>,
) => React.ReactElement;

4
components/checkbox/GroupContext.ts
View File

@ -1,8 +1,8 @@
import React from 'react';
import type { CheckboxOptionType, CheckboxValueType } from './Group';
import type { CheckboxOptionType } from './Group';
export interface CheckboxGroupContext<T extends CheckboxValueType = CheckboxValueType> {
export interface CheckboxGroupContext<T = any> {
name?: string;
toggleOption?: (option: CheckboxOptionType<T>) => void;
value?: any;

3
components/checkbox/__tests__/group.test.tsx
View File

@ -6,7 +6,6 @@ import { fireEvent, render } from '../../../tests/utils';
import Collapse from '../../collapse';
import Input from '../../input';
import Table from '../../table';
import type { CheckboxValueType } from '../Group';
import type { CheckboxGroupProps } from '../index';
import Checkbox from '../index';
@ -89,7 +88,7 @@ describe('CheckboxGroup', () => {
const renderCheckbox = (props: CheckboxGroupProps) => <Checkbox.Group {...props} />;
const { container, rerender } = render(renderCheckbox({ options }));
expect(container.querySelectorAll('.ant-checkbox-checked').length).toBe(0);
rerender(renderCheckbox({ options, value: 'Apple' as unknown as CheckboxValueType[] }));
rerender(renderCheckbox({ options, value: 'Apple' as any }));
expect(container.querySelectorAll('.ant-checkbox-checked').length).toBe(1);
});

7
components/checkbox/__tests__/type.test.tsx
View File

@ -27,4 +27,11 @@ describe('Checkbox.typescript', () => {
);
expect(group).toBeTruthy();
});
it('Checkbox.Group defaultValue', () => {
const defaultValue: React.Key[] = ['1'];
const group = (
<Checkbox.Group options={[{ label: 'test', value: '1' }]} defaultValue={defaultValue} />
);
expect(group).toBeTruthy();
});
});

8
components/checkbox/demo/check-all.tsx
View File

@ -1,8 +1,6 @@
import React, { useState } from 'react';
import { Checkbox, Divider } from 'antd';
import type { CheckboxProps, GetProp } from 'antd';
type CheckboxValueType = GetProp<typeof Checkbox.Group, 'value'>[number];
import type { CheckboxProps } from 'antd';
const CheckboxGroup = Checkbox.Group;
@ -10,12 +8,12 @@ const plainOptions = ['Apple', 'Pear', 'Orange'];
const defaultCheckedList = ['Apple', 'Orange'];
const App: React.FC = () => {
const [checkedList, setCheckedList] = useState<CheckboxValueType[]>(defaultCheckedList);
const [checkedList, setCheckedList] = useState<string[]>(defaultCheckedList);
const checkAll = plainOptions.length === checkedList.length;
const indeterminate = checkedList.length > 0 && checkedList.length < plainOptions.length;
const onChange = (list: CheckboxValueType[]) => {
const onChange = (list: string[]) => {
setCheckedList(list);
};

2
components/checkbox/index.en-US.md
View File

@ -51,7 +51,7 @@ Common props ref：[Common props](/docs/react/common-props)
| name | The `name` property of all `input[type="checkbox"]` children | string | - | |
| options | Specifies options | string\[] \| number\[] \| Option\[] | \[] | |
| value | Used for setting the currently selected value | (string \| number \| boolean)\[] | \[] | |
| onChange | The callback function that is triggered when the state changes | (checkedValue: CheckboxValueType[]) => void | - | |
| onChange | The callback function that is triggered when the state changes | (checkedValue: T[]) => void | - | |
##### Option

2
components/checkbox/index.zh-CN.md
View File

@ -52,7 +52,7 @@ demo:
| name | CheckboxGroup 下所有 `input[type="checkbox"]` 的 `name` 属性 | string | - | |
| options | 指定可选项 | string\[] \| number\[] \| Option\[] | \[] | |
| value | 指定选中的选项 | (string \| number \| boolean)\[] | \[] | |
| onChange | 变化时的回调函数 | (checkedValue: CheckboxValueType[]) => void | - | |
| onChange | 变化时的回调函数 | (checkedValue: T[]) => void | - | |
##### Option