From a46cb92969b2e0b834d41e40307e3197dd7c5f7f Mon Sep 17 00:00:00 2001 From: eternalsky Date: Thu, 14 Mar 2024 20:22:35 +0800 Subject: [PATCH] refactor(Checkbox): improve doc --- .../__docs__/demo/all-check/index.tsx | 2 +- components/checkbox/__docs__/index.en-us.md | 76 ++++++---- components/checkbox/__docs__/index.md | 81 ++++++---- components/checkbox/checkbox-group.tsx | 49 +----- components/checkbox/checkbox.tsx | 65 +------- components/checkbox/index.tsx | 2 +- components/checkbox/types.ts | 140 +++++++++++++----- 7 files changed, 216 insertions(+), 199 deletions(-) diff --git a/components/checkbox/__docs__/demo/all-check/index.tsx b/components/checkbox/__docs__/demo/all-check/index.tsx index 451580e226..6d2b6dd4fd 100644 --- a/components/checkbox/__docs__/demo/all-check/index.tsx +++ b/components/checkbox/__docs__/demo/all-check/index.tsx @@ -13,7 +13,7 @@ const App = () => { const [indeterminate, setIndeterminate] = React.useState(true); const [checkAll, setCheckAll] = React.useState(false); - const onChange: GroupProps['onChange'] = list => { + const onChange: GroupProps['onChange'] = (list: string[]) => { setCheckedList(list); setIndeterminate(!!list.length && list.length < plainOptions.length); setCheckAll(list.length === plainOptions.length); diff --git a/components/checkbox/__docs__/index.en-us.md b/components/checkbox/__docs__/index.en-us.md index 7defeb1fd2..6c5c70286b 100644 --- a/components/checkbox/__docs__/index.en-us.md +++ b/components/checkbox/__docs__/index.en-us.md @@ -13,41 +13,67 @@ Checkbox ### When to Use Checkbox is used to verify which options you want selected from a group. If you have only a single option, do not use the checkbox, use the on/off switch. + ## API ### Checkbox -| Param | Description | Type | Default Value | -| ------------------------ |---------------------------- | ------------ | ------------- | -| id | checkbox id, mounted on input | String | - | -| checked | Set the status to be checked | Boolean | - | -| defaultChecked | Set the default status to be checked | Boolean | false | -| disabled | Set the status to be disabled | Boolean | - | -| label | Set the label by property | String | - | -| indeterminate | The intermediate state of the Checkbox will only affect the style of the Checkbox and does not affect its checked property. | Boolean | - | -| defaultIndeterminate | Set the default status to intermediate, it will only affect the style of the Checkbox and does not affect its checked property. | Boolean | false | -| onChange | Callback function triggered when the state changes

**signatures**:
Function(checked: Boolean, e: Event) => void
**params**:
_checked_: {Boolean} The checked value of the underlying checkbox input
_e_: {Event} Dom event object | Function | func.noop | -| onMouseEnter | Callback function triggered when the mouse pointer enters the element.

**signatures**:
Function(e: Event) => void
**params**:
_e_: {Event} Dom event object | Function | func.noop | -| onMouseLeave | Callback function triggered when the mouse pointer leaves the element.

**signatures**:
Function(e: Event) => void
**params**:
_e_: {Event} Dom event object | Function | func.noop | -|value | The value of the Checkbox | String/Number/Boolean | - | +| Param | Description | Type | Default Value | Required | Supported Version | +| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------- | -------- | ----------------- | +| className | ClassName | string | - | | - | +| id | Checkbox id, mounted on the input | string | - | | - | +| style | Custom inline style | React.CSSProperties | - | | - | +| checked | Checked status | boolean | - | | - | +| value | Checkbox value | IValue | - | | - | +| name | Name | string | - | | - | +| defaultChecked | Default checked status | boolean | false | | - | +| disabled | Disabled | boolean | - | | - | +| label | Label | React.ReactNode | - | | - | +| indeterminate | Checkbox middle status, only affects the style of Checkbox, and does not affect its checked property | boolean | - | | - | +| defaultIndeterminate | Checkbox default middle status, only affects the style of Checkbox, and does not affect its checked property | boolean | false | | - | +| onChange | Status change event | (checked: boolean, e: React.ChangeEvent) => void | - | | - | +| onMouseEnter | Mouse enter event | (e: React.MouseEvent) => void | - | | - | +| onMouseLeave | Mouse leave event | (e: React.MouseEvent) => void | - | | - | +| isPreview | Is preview | boolean | false | | 1.19 | +| renderPreview | Custom rendering content

**signature**:
**params**:
_checked_: Is checked
_props_: All props
**return**:
Custom rendering content | (checked: boolean, props: CheckboxProps) => React.ReactNode | - | | 1.19 | ### Checkbox.Group -| params | desc | type | default | -| ---------------- | --------------------------------------------------- | -------- | ------------- | -| disabled | Set the status of all checkbox in group to be checked | Boolean | - | -| dataSource | Optional list, data item can be String or Object, for example `['apple', 'pear', 'orange']` or `[{value: 'apple', label: 'Apple',}, {value: 'pear', label: 'Pear'}, {value: 'orange', label: 'Orange'}]` | Array<any> | \[] | -| value | The values of selected optional list | Array/String/Number/Boolean | - | -| defaultValue | The values of default selected optional list | Array/String/Number/Boolean | - | -| children | To set nested checkbox by children components | Array<ReactElement> | - | -| onChange | Callback function triggered when the selected value changes

**signatures**:
Function(value: Array, e: Event) => void
**params**:
_value_: {Array} values of selected optional list
_e_: {Event} Dom event object | Function | () => { } | -| direction | The direction of item's aligning
- hoz: horizontal (default)
- ver: vertical

**Allowed values**:
'hoz', 'ver' | Enum | 'hoz' | +| Param | Description | Type | Default Value | Required | Supported Version | +| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -------- | ----------------- | +| className | Custom className | string | - | | - | +| style | Custom inline style | React.CSSProperties | - | | - | +| disabled | Entirely disabled | boolean | - | | - | +| dataSource | Option list | Array \| Array | - | | - | +| value | Selected value list | IValue[] \| IValue | - | | - | +| defaultValue | Default selected value list | IValue[] \| IValue | - | | - | +| name | Name | string | - | | - | +| children | Set internal checkbox through child elements | React.ReactNode | - | | - | +| onChange | Selected value change event | (value: IValue[], e: React.ChangeEvent) => void | - | | - | +| direction | Arrangement of subitems | 'hoz' \| 'ver' | - | | - | +| itemDirection | [Deprecated] Arrangement of subitems | 'hoz' \| 'ver' | - | | - | +| isPreview | Is preview | boolean | - | | 1.19 | +| renderPreview | Custom rendering content

**signature**:
**params**:
_previewed_: Previewed value [\{label: '', value:''\},...]
_props_: All props
**return**:
Custom rendering content | (
previewed: {
label: string \| React.ReactNode;
value: string \| React.ReactNode;
}[],
props: object
) => React.ReactNode | - | | 1.19 | + +### IValue +```typescript +export type IValue = string | number | boolean; +``` +### CheckboxData +```typescript +export type CheckboxData = { + value: IValue; + label?: React.ReactNode; + disabled?: boolean; + [propName: string]: unknown; +}; +``` ## ARIA and KeyBoard -| KeyBoard | Descripiton | -| :---------- | :------------------------------ | -| SPACE | Select or cancel the current item | +| KeyBoard | Descripiton | +| :------- | :-------------------------------- | +| SPACE | Select or cancel the current item | diff --git a/components/checkbox/__docs__/index.md b/components/checkbox/__docs__/index.md index a8b1db55ab..46969e002d 100644 --- a/components/checkbox/__docs__/index.md +++ b/components/checkbox/__docs__/index.md @@ -18,39 +18,62 @@ ### Checkbox -| 参数 | 说明 | 类型 | 默认值 | 版本支持 | -| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | --------- | ---- | -| id | checkbox id, 挂载在input上 | String | - | | -| checked | 选中状态 | Boolean | - | | -| defaultChecked | 默认选中状态 | Boolean | false | | -| disabled | 禁用 | Boolean | - | | -| label | 通过属性配置label， | ReactNode | - | | -| indeterminate | Checkbox 的中间状态，只会影响到 Checkbox 的样式，并不影响其 checked 属性 | Boolean | - | | -| defaultIndeterminate | Checkbox 的默认中间态，只会影响到 Checkbox 的样式，并不影响其 checked 属性 | Boolean | false | | -| onChange | 状态变化时触发的事件

**签名**:
Function(checked: Boolean, e: Event) => void
**参数**:
_checked_: {Boolean} 是否选中
_e_: {Event} Dom 事件对象 | Function | func.noop | | -| onMouseEnter | 鼠标进入enter事件

**签名**:
Function(e: Event) => void
**参数**:
_e_: {Event} Dom 事件对象 | Function | func.noop | | -| onMouseLeave | 鼠标离开Leave事件

**签名**:
Function(e: Event) => void
**参数**:
_e_: {Event} Dom 事件对象 | Function | func.noop | | -| value | checkbox 的value | String/Number/Boolean | - | | -| name | name | String | - | | -| isPreview | 是否为预览态 | Boolean | false | 1.19 | -| renderPreview | 预览态模式下渲染的内容

**签名**:
Function(checked: Boolean, props: Object) => reactNode
**参数**:
_checked_: {Boolean} 是否选中
_props_: {Object} 所有传入的参数
**返回值**:
{reactNode} Element 渲染内容
| Function | - | 1.19 | +| 参数 | 说明 | 类型 | 默认值 | 是否必填 | 支持版本 | +| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | ------ | -------- | -------- | +| className | 自定义类名 | string | - | | - | +| id | checkbox id, 挂载在 input 上 | string | - | | - | +| style | 自定义内联样式 | React.CSSProperties | - | | - | +| checked | 选中状态 | boolean | - | | - | +| value | checkbox 的 value | IValue | - | | - | +| name | name | string | - | | - | +| defaultChecked | 默认选中状态 | boolean | false | | - | +| disabled | 禁用 | boolean | - | | - | +| label | 通过属性配置 label， | React.ReactNode | - | | - | +| indeterminate | Checkbox 的中间状态，只会影响到 Checkbox 的样式，并不影响其 checked 属性 | boolean | - | | - | +| defaultIndeterminate | Checkbox 的默认中间态，只会影响到 Checkbox 的样式，并不影响其 checked 属性 | boolean | false | | - | +| onChange | 状态变化时触发的事件 | (checked: boolean, e: React.ChangeEvent) => void | - | | - | +| onMouseEnter | 鼠标进入 enter 事件 | (e: React.MouseEvent) => void | - | | - | +| onMouseLeave | 鼠标离开 Leave 事件 | (e: React.MouseEvent) => void | - | | - | +| isPreview | 是否为预览态 | boolean | false | | 1.19 | +| renderPreview | 预览态模式下渲染的内容

**签名**:
**参数**:
_checked_: 是否选中
_props_: 所有传入的参数
**返回值**:
定制渲染内容 | (checked: boolean, props: CheckboxProps) => React.ReactNode | - | | 1.19 | ### Checkbox.Group -| 参数 | 说明 | 类型 | 默认值 | 版本支持 | -| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | -------- | ---- | -| disabled | 整体禁用 | Boolean | - | | -| dataSource | 可选项列表, 数据项可为 String 或者 Object, 如 `['apple', 'pear', 'orange']` 或者 `[{value: 'apple', label: '苹果',}, {value: 'pear', label: '梨'}, {value: 'orange', label: '橙子'}]` | Array<String>/Array<Object> | \[] | | -| value | 被选中的值列表 | Array/String/Number/Boolean | - | | -| defaultValue | 默认被选中的值列表 | Array/String/Number/Boolean | - | | -| children | 通过子元素方式设置内部 checkbox | Array<ReactElement> | - | | -| onChange | 选中值改变时的事件

**签名**:
Function(value: Array, e: Event) => void
**参数**:
_value_: {Array} 选中项列表
_e_: {Event} Dom 事件对象 | Function | () => {} | | -| direction | 子项目的排列方式
- hoz: 水平排列 (default)
- ver: 垂直排列

**可选值**:
'hoz', 'ver' | Enum | 'hoz' | | -| isPreview | 是否为预览态 | Boolean | false | 1.19 | -| renderPreview | 预览态模式下渲染的内容

**签名**:
Function(previewed: Array, props: Object) => reactNode
**参数**:
_previewed_: {Array} 预览值 [{label: '', value:''},...]
_props_: {Object} 所有传入的参数
**返回值**:
{reactNode} Element 渲染内容
| Function | - | 1.19 | +| 参数 | 说明 | 类型 | 默认值 | 是否必填 | 支持版本 | +| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- | -------- | +| className | 自定义类名 | string | - | | - | +| style | 自定义内联样式 | React.CSSProperties | - | | - | +| disabled | 整体禁用 | boolean | - | | - | +| dataSource | 可选项列表 | Array \| Array | - | | - | +| value | 被选中的值列表 | IValue[] \| IValue | - | | - | +| defaultValue | 默认被选中的值列表 | IValue[] \| IValue | - | | - | +| name | name | string | - | | - | +| children | 通过子元素方式设置内部 checkbox | React.ReactNode | - | | - | +| onChange | 选中值改变时的事件 | (value: IValue[], e: React.ChangeEvent) => void | - | | - | +| direction | 子项目的排列方式 | 'hoz' \| 'ver' | - | | - | +| itemDirection | [废弃] 子项目的排列方式 | 'hoz' \| 'ver' | - | | - | +| isPreview | 是否为预览态 | boolean | - | | 1.19 | +| renderPreview | 预览态模式下渲染的内容

**签名**:
**参数**:
_previewed_: 预览值 [\{label: '', value:''\},...]
_props_: 所有传入的参数
**返回值**:
定制渲染内容 | (
previewed: {
label: string \| React.ReactNode;
value: string \| React.ReactNode;
}[],
props: object
) => React.ReactNode | - | | 1.19 | + +### IValue + +```typescript +export type IValue = string | number | boolean; +``` + +### CheckboxData + +```typescript +export type CheckboxData = { + value: IValue; + label?: React.ReactNode; + disabled?: boolean; + [propName: string]: unknown; +}; +``` ## 无障碍键盘操作指南 -| 按键 | 说明 | -| :---- | :------- | +| 按键 | 说明 | +| :---- | :--------------- | | SPACE | 选择或取消当前项 | diff --git a/components/checkbox/checkbox-group.tsx b/components/checkbox/checkbox-group.tsx index 74f7bb01d5..4152afbbd6 100644 --- a/components/checkbox/checkbox-group.tsx +++ b/components/checkbox/checkbox-group.tsx @@ -5,7 +5,7 @@ import { polyfill } from 'react-lifecycles-compat'; import { clone } from 'lodash'; import { obj } from '../util'; import Checkbox from './checkbox'; -import type { CheckboxData, GroupProps, GroupState, IValue } from './types'; +import type { CheckboxData, GroupProps, GroupState, ValueItem } from './types'; const { pickOthers } = obj; @@ -14,72 +14,29 @@ class CheckboxGroup extends React.Component { static propTypes = { prefix: PropTypes.string, rtl: PropTypes.bool, - /** - * 自定义类名 - */ className: PropTypes.string, - /** - * 自定义内敛样式 - */ style: PropTypes.object, - /** - * 整体禁用 - */ disabled: PropTypes.bool, - /** - * 可选项列表，数据项可为 String 或者 Object, 如 `['apple', 'pear', 'orange']` 或者 `[{value: 'apple', label: '苹果',}, {value: 'pear', label: '梨'}, {value: 'orange', label: '橙子'}]` - */ dataSource: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.object), ]), - /** - * 被选中的值列表 - */ value: PropTypes.oneOfType([ PropTypes.array, PropTypes.string, PropTypes.number, PropTypes.bool, ]), - /** - * 默认被选中的值列表 - */ defaultValue: PropTypes.oneOfType([ PropTypes.array, PropTypes.string, PropTypes.number, PropTypes.bool, ]), - /** - * 通过子元素方式设置内部 checkbox - */ children: PropTypes.arrayOf(PropTypes.element), - /** - * 选中值改变时的事件 - * @param value - 选中项列表 - * @param e - Dom 事件对象 - */ onChange: PropTypes.func, - - /** - * 子项目的排列方式 - * - hoz: 水平排列 (default) - * - ver: 垂直排列 - */ direction: PropTypes.oneOf(['hoz', 'ver']), - /** - * 是否为预览态 - * @version 1.19 - */ isPreview: PropTypes.bool, - /** - * 预览态模式下渲染的内容 - * @param previewed - 预览值 [\{label: '', value:''\},...] - * @param props - 所有传入的参数 - * @returns Element 渲染内容 - * @version 1.19 - */ renderPreview: PropTypes.func, }; @@ -161,7 +118,7 @@ class CheckboxGroup extends React.Component { return null; } - onChange(currentValue: IValue, event: React.ChangeEvent) { + onChange(currentValue: ValueItem, event: React.ChangeEvent) { const { value } = this.state; const index = value.indexOf(currentValue); const valTemp = clone(value); @@ -194,7 +151,7 @@ class CheckboxGroup extends React.Component { this.props.children, ( child: React.ReactElement<{ - value: IValue; + value: ValueItem; children?: string; rtl?: boolean; }> diff --git a/components/checkbox/checkbox.tsx b/components/checkbox/checkbox.tsx index f919176356..1e5e615e79 100644 --- a/components/checkbox/checkbox.tsx +++ b/components/checkbox/checkbox.tsx @@ -37,78 +37,21 @@ class Checkbox extends UIState { ...ConfigProvider.propTypes, prefix: PropTypes.string, rtl: PropTypes.bool, - /** - * 自定义类名 - */ className: PropTypes.string, - /** - * checkbox id, 挂载在 input 上 - */ id: PropTypes.string, - /** - * 自定义内敛样式 - */ style: PropTypes.object, - /** - * 选中状态 - */ checked: PropTypes.bool, - /** - * 默认选中状态 - */ defaultChecked: PropTypes.bool, - /** - * 禁用 - */ disabled: PropTypes.bool, - /** - * 通过属性配置 label， - */ label: PropTypes.node, - /** - * Checkbox 的中间状态，只会影响到 Checkbox 的样式，并不影响其 checked 属性 - */ indeterminate: PropTypes.bool, - /** - * Checkbox 的默认中间态，只会影响到 Checkbox 的样式，并不影响其 checked 属性 - */ defaultIndeterminate: PropTypes.bool, - /** - * 状态变化时触发的事件 - * @param checked - 是否选中 - * @param e - Dom 事件对象 - */ onChange: PropTypes.func, - /** - * 鼠标进入 enter 事件 - * @param e - Dom 事件对象 - */ onMouseEnter: PropTypes.func, - /** - * 鼠标离开 Leave 事件 - * @param e - Dom 事件对象 - */ onMouseLeave: PropTypes.func, - /** - * checkbox 的 value - */ value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]), - /** - * name - */ name: PropTypes.string, - /** - * 是否为预览态 - * @version 1.19 - */ isPreview: PropTypes.bool, - /** - * 预览态模式下渲染的内容 - * @param checked - 是否选中 - * @param props - 所有传入的参数 - * @returns Element 渲染内容 - * @version 1.19 - */ renderPreview: PropTypes.func, }; @@ -245,7 +188,7 @@ class Checkbox extends UIState { { } export default ConfigProvider.config( - withCheckboxContext( - polyfill>( - Checkbox as React.ComponentType - ) - ) + withCheckboxContext(polyfill(Checkbox) as React.ComponentType) ); diff --git a/components/checkbox/index.tsx b/components/checkbox/index.tsx index d7252cf667..afb8076fe9 100644 --- a/components/checkbox/index.tsx +++ b/components/checkbox/index.tsx @@ -18,6 +18,6 @@ const CheckboxWithGroup = assignSubComponent(Checkbox, { }), }); -export type { CheckboxProps, GroupProps } from './types'; +export type { CheckboxProps, GroupProps, CheckboxData, ValueItem } from './types'; export default CheckboxWithGroup; diff --git a/components/checkbox/types.ts b/components/checkbox/types.ts index 9e0d65459a..c6cc61e414 100644 --- a/components/checkbox/types.ts +++ b/components/checkbox/types.ts @@ -4,162 +4,234 @@ import { type CommonProps } from '../util'; interface HTMLAttributesWeak extends Omit, 'onChange' | 'defaultValue'> {} -export type IValue = string | number | boolean; - +/** + * @api + */ +export type ValueItem = string | number | boolean; + +/** + * @api + */ export type CheckboxData = { - value: IValue; + value: ValueItem; label?: React.ReactNode; disabled?: boolean; [propName: string]: unknown; }; +/** + * @api Checkbox.Group + */ export interface GroupProps extends HTMLAttributesWeak, CommonProps { /** * 自定义类名 + * @en Custom className */ className?: string; /** - * 自定义内敛样式 + * 自定义内联样式 + * @en Custom inline style */ style?: React.CSSProperties; /** * 整体禁用 + * @en Entirely disabled */ disabled?: boolean; /** - * 是否为预览态 + * 可选项列表 + * @en Option list + * @remarks + * 数据项可为 String 或者 Object, 如 `['apple', 'pear', 'orange']` 或者 `[{value: 'apple', label: '苹果',}, {value: 'pear', label: '梨'}, {value: 'orange', label: '橙子'}]` + * - + * Data item can be String or Object, such as `['apple', 'pear', 'orange']` or `[{value: 'apple', label: 'Apple',}, {value: 'pear', label: 'Pear'}, {value: 'orange', label: 'Orange'}]` */ - isPreview?: boolean; - - renderPreview?: ( - checked: { - label: string | React.ReactNode; - value: string | React.ReactNode; - }[], - props: object - ) => React.ReactNode; - - /** - * 可选项列表，数据项可为 String 或者 Object, 如 `['apple', 'pear', 'orange']` 或者 `[{value: 'apple', label: '苹果',}, {value: 'pear', label: '梨'}, {value: 'orange', label: '橙子'}]` - */ - dataSource?: Array | Array; + dataSource?: Array | Array; /** * 被选中的值列表 + * @en Selected value list */ - value?: IValue[] | IValue; + value?: ValueItem[] | ValueItem; /** * 默认被选中的值列表 + * @en Default selected value list */ - defaultValue?: IValue[] | IValue; + defaultValue?: ValueItem[] | ValueItem; /** * name + * @en name */ name?: string; /** * 通过子元素方式设置内部 checkbox + * @en Set internal checkbox through child elements */ children?: React.ReactNode; /** * 选中值改变时的事件 + * @en Selected value change event */ - onChange?: (value: IValue[], e: React.ChangeEvent) => void; + onChange?: (value: ValueItem[], e: React.ChangeEvent) => void; /** * 子项目的排列方式 - * - hoz: 水平排列 (default) - * - ver: 垂直排列 + * @en Arrangement of subitems + * @remarks + * hoz: 水平排列 (default), + * ver: 垂直排列 + * - + * hoz: Horizontal arrangement (default), + * ver: Vertical arrangement */ direction?: 'hoz' | 'ver'; + /** + * [废弃] 子项目的排列方式 + * @en [Deprecated] Arrangement of subitems + * @deprecated Use `direction` instead + */ itemDirection?: 'hoz' | 'ver'; + + /** + * 是否为预览态 + * @en Is preview + * @version 1.19 + */ + isPreview?: boolean; + + /** + * 预览态模式下渲染的内容 + * @en Custom rendering content + * @version 1.19 + * @param previewed - 预览值 [\{label: '', value:''\},...] - Previewed value [\{label: '', value:''\},...] + * @param props - 所有传入的参数 - All props + * @returns 定制渲染内容 - Custom rendering content + */ + renderPreview?: ( + previewed: { + label: string | React.ReactNode; + value: string | React.ReactNode; + }[], + props: object + ) => React.ReactNode; } export interface GroupState { - value: IValue[]; + value: ValueItem[]; } +/** + * @api Checkbox + */ export interface CheckboxProps extends HTMLAttributesWeak, CommonProps { /** * 自定义类名 + * @en className */ className?: string; - renderPreview?: (checked: boolean, props: CheckboxProps) => React.ReactNode; - /** * checkbox id, 挂载在 input 上 + * @en Checkbox id, mounted on the input */ id?: string; /** - * 自定义内敛样式 + * 自定义内联样式 + * @en Custom inline style */ style?: React.CSSProperties; /** * 选中状态 + * @en Checked status */ checked?: boolean; /** * checkbox 的 value + * @en Checkbox value */ - value?: string | number | boolean; + value?: ValueItem; /** * name + * @en name */ name?: string; /** * 默认选中状态 + * @en Default checked status + * @defaultValue false */ defaultChecked?: boolean; /** * 禁用 + * @en Disabled */ disabled?: boolean; /** * 通过属性配置 label， + * @en Label */ label?: React.ReactNode; /** * Checkbox 的中间状态，只会影响到 Checkbox 的样式，并不影响其 checked 属性 + * @en Checkbox middle status, only affects the style of Checkbox, and does not affect its checked property */ indeterminate?: boolean; /** * Checkbox 的默认中间态，只会影响到 Checkbox 的样式，并不影响其 checked 属性 + * @en Checkbox default middle status, only affects the style of Checkbox, and does not affect its checked property + * @defaultValue false */ defaultIndeterminate?: boolean; - /** - * 是否为预览态 - */ - isPreview?: boolean; - /** * 状态变化时触发的事件 + * @en Status change event */ onChange?: (checked: boolean, e: React.ChangeEvent) => void; /** * 鼠标进入 enter 事件 + * @en Mouse enter event */ onMouseEnter?: (e: React.MouseEvent) => void; /** * 鼠标离开 Leave 事件 + * @en Mouse leave event */ onMouseLeave?: (e: React.MouseEvent) => void; + + /** + * 是否为预览态 + * @en Is preview + * @defaultValue false + * @version 1.19 + */ + isPreview?: boolean; + + /** + * 预览态模式下渲染的内容 + * @en Custom rendering content + * @version 1.19 + * @param checked - 是否选中 - Is checked + * @param props - 所有传入的参数 - All props + * @returns 定制渲染内容 - Custom rendering content + */ + renderPreview?: (checked: boolean, props: CheckboxProps) => React.ReactNode; }