diff --git a/components/checkbox/Group.tsx b/components/checkbox/Group.tsx index 893093b853..a4c8260ce1 100644 --- a/components/checkbox/Group.tsx +++ b/components/checkbox/Group.tsx @@ -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 { +export interface CheckboxOptionType { label: React.ReactNode; value: T; style?: React.CSSProperties; @@ -23,7 +21,7 @@ export interface CheckboxOptionType { +export interface AbstractCheckboxGroupProps { prefixCls?: string; className?: string; rootClassName?: string; @@ -32,8 +30,7 @@ export interface AbstractCheckboxGroupProps - extends AbstractCheckboxGroupProps { +export interface CheckboxGroupProps extends AbstractCheckboxGroupProps { name?: string; defaultValue?: T[]; value?: T[]; @@ -41,8 +38,10 @@ export interface CheckboxGroupProps( + ( props: CheckboxGroupProps, ref: React.ForwardedRef, ) => { @@ -168,6 +167,6 @@ const CheckboxGroup = React.forwardRef( export type { CheckboxGroupContext } from './GroupContext'; export { GroupContext }; -export default CheckboxGroup as ( +export default CheckboxGroup as ( props: CheckboxGroupProps & React.RefAttributes, ) => React.ReactElement; diff --git a/components/checkbox/GroupContext.ts b/components/checkbox/GroupContext.ts index b92b6d84fd..4cf5d6f25c 100644 --- a/components/checkbox/GroupContext.ts +++ b/components/checkbox/GroupContext.ts @@ -1,8 +1,8 @@ import React from 'react'; -import type { CheckboxOptionType, CheckboxValueType } from './Group'; +import type { CheckboxOptionType } from './Group'; -export interface CheckboxGroupContext { +export interface CheckboxGroupContext { name?: string; toggleOption?: (option: CheckboxOptionType) => void; value?: any; diff --git a/components/checkbox/__tests__/group.test.tsx b/components/checkbox/__tests__/group.test.tsx index 1178df5776..b44c5022d8 100644 --- a/components/checkbox/__tests__/group.test.tsx +++ b/components/checkbox/__tests__/group.test.tsx @@ -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) => ; 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); }); diff --git a/components/checkbox/__tests__/type.test.tsx b/components/checkbox/__tests__/type.test.tsx index 802852be82..d69b71dba2 100644 --- a/components/checkbox/__tests__/type.test.tsx +++ b/components/checkbox/__tests__/type.test.tsx @@ -27,4 +27,11 @@ describe('Checkbox.typescript', () => { ); expect(group).toBeTruthy(); }); + it('Checkbox.Group defaultValue', () => { + const defaultValue: React.Key[] = ['1']; + const group = ( + + ); + expect(group).toBeTruthy(); + }); }); diff --git a/components/checkbox/demo/check-all.tsx b/components/checkbox/demo/check-all.tsx index ac092bb3da..e4f2be9d59 100644 --- a/components/checkbox/demo/check-all.tsx +++ b/components/checkbox/demo/check-all.tsx @@ -1,8 +1,6 @@ import React, { useState } from 'react'; import { Checkbox, Divider } from 'antd'; -import type { CheckboxProps, GetProp } from 'antd'; - -type CheckboxValueType = GetProp[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(defaultCheckedList); + const [checkedList, setCheckedList] = useState(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); }; diff --git a/components/checkbox/index.en-US.md b/components/checkbox/index.en-US.md index 1c9988e334..09e4b6a3c3 100644 --- a/components/checkbox/index.en-US.md +++ b/components/checkbox/index.en-US.md @@ -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 diff --git a/components/checkbox/index.zh-CN.md b/components/checkbox/index.zh-CN.md index f18188c508..e82a4e335e 100644 --- a/components/checkbox/index.zh-CN.md +++ b/components/checkbox/index.zh-CN.md @@ -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