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.

Sign up for GitHub

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

Jump to bottom

Feat/better type hint by gneric #2023

Merged
merged 4 commits into from
Feb 28, 2023
Merged

Feat/better type hint by gneric #2023

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1e7b3a4
feat(switch): enhanced switch type hint by generic
NWYLZW Feb 27, 2023
42bf2a2
feat(checkbox): enhanced checkbox group type hint by generic
NWYLZW Feb 27, 2023
93b1c7e
fix(checkbox): type error
NWYLZW Feb 27, 2023
b0440fe
fix(switch,checkbox): fix default props value nont match snap
NWYLZW Feb 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/checkbox/Checkbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { Ref } from 'react';
import React from 'react';
import forwardRefWithStatics from '../_util/forwardRefWithStatics';
import Check, { CheckProps } from '../common/Check';
import CheckboxGroup from './CheckboxGroup';
Expand All @@ -7,7 +7,7 @@ import { checkboxDefaultProps } from './defaultProps';
export type CheckboxProps = Omit<CheckProps, 'type'>;

const Checkbox = forwardRefWithStatics(
(props: CheckboxProps, ref: Ref<HTMLLabelElement>) => <Check ref={ref} type="checkbox" {...props} />,
(props: CheckboxProps, ref: React.Ref<HTMLLabelElement>) => <Check ref={ref} type="checkbox" {...props} />,
{ Group: CheckboxGroup },
);

Expand Down
26 changes: 18 additions & 8 deletions src/checkbox/CheckboxGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,16 @@ import React, { ReactElement, useEffect, useMemo, useState } from 'react';
import classNames from 'classnames';
import isNumber from 'lodash/isNumber';
import useConfig from '../hooks/useConfig';
import { CheckContext, CheckContextValue } from '../common/Check';
import { CheckboxOption, CheckboxOptionObj, TdCheckboxGroupProps, TdCheckboxProps } from './type';
import { CheckContext, CheckContextValue, CheckProps } from '../common/Check';
import { CheckboxGroupValue, CheckboxOption, CheckboxOptionObj, TdCheckboxGroupProps, TdCheckboxProps } from './type';
import { StyledProps } from '../common';
import useControlled from '../hooks/useControlled';
import Checkbox from './Checkbox';
import { checkboxGroupDefaultProps } from './defaultProps';

export interface CheckboxGroupProps extends TdCheckboxGroupProps, StyledProps {
export interface CheckboxGroupProps<T extends CheckboxGroupValue = CheckboxGroupValue>
extends TdCheckboxGroupProps<T>,
StyledProps {
children?: React.ReactNode;
}

Expand All @@ -32,7 +34,8 @@ const getCheckboxValue = (v: CheckboxOption): string | number => {
/**
* 多选选项组，里面可以嵌套 <Checkbox />
*/
const CheckboxGroup = (props: CheckboxGroupProps) => {
const CheckboxGroup = <T extends CheckboxGroupValue = CheckboxGroupValue>(props: CheckboxGroupProps<T>) => {
type ItemType = T[number];
const { classPrefix } = useConfig();
const { onChange, disabled, className, style, children, max, options = [] } = props;

Expand All @@ -53,8 +56,8 @@ const CheckboxGroup = (props: CheckboxGroupProps) => {
const [localMax, setLocalMax] = useState(max);

const checkedSet = useMemo(() => {
if (!Array.isArray(internalValue)) return new Set([]);
return new Set([].concat(internalValue));
if (!Array.isArray(internalValue)) return new Set<ItemType>([]);
return new Set<ItemType>([].concat(internalValue));
}, [internalValue]);

// 用于决定全选状态的属性
Expand All @@ -78,7 +81,13 @@ const CheckboxGroup = (props: CheckboxGroupProps) => {
}, [max, checkedSet]);

const context: CheckContextValue = {
inject: (checkProps) => {
inject: (
checkProps: CheckProps & {
// check 组件不关心 value 的类型，只关心是否存在，所以为了兼容 checkbox group 的类型
// 此处覆盖 checkbox 默认 value 的类型，使用 checkbox group 的 generic type 代替
value: ItemType;
},
) => {
// 如果已经受控，则不注入
if (typeof checkProps.checked !== 'undefined') {
return checkProps;
Expand Down Expand Up @@ -111,7 +120,8 @@ const CheckboxGroup = (props: CheckboxGroupProps) => {
checkedSet.delete(checkValue);
}

setInternalValue(Array.from(checkedSet), {
// 此处 `as` 是因为 `Array.from` 会导致 `checkSet` 的 generic type 丢失
setInternalValue(Array.from(checkedSet) as T, {
e,
current: checkProps.checkAll ? undefined : (checkValue as TdCheckboxProps),
type: checked ? 'check' : 'uncheck',
Expand Down
12 changes: 6 additions & 6 deletions src/checkbox/checkbox.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
:: BASE_DOC ::

## API

### Checkbox Props

name | type | default | description | required
Expand All @@ -17,8 +16,9 @@ indeterminate | Boolean | false | \- | N
label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
name | String | - | \- | N
readonly | Boolean | false | \- | N
value | String / Number | - | Typescript：`string \| number` | N
value | String / Number / Boolean | - | value of checkbox。Typescript：`string \| number \| boolean` | N
onChange | Function | | Typescript：`(checked: boolean, context: { e: ChangeEvent }) => void`<br/> | N
onClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/>trigger on click | N

### CheckboxGroup Props

Expand All @@ -29,7 +29,7 @@ style | Object | - | 样式，Typescript：`React.CSSProperties` | N
disabled | Boolean | - | \- | N
max | Number | undefined | \- | N
name | String | - | \- | N
options | Array | [] | Typescript：`Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string \| TNode; value?: string \| number; disabled?: boolean; name?: string; checkAll?: true }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts) | N
value | Array | [] | Typescript：`CheckboxGroupValue` `type CheckboxGroupValue = Array<string \| number>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts) | N
defaultValue | Array | [] | uncontrolled property。Typescript：`CheckboxGroupValue` `type CheckboxGroupValue = Array<string \| number>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts) | N
onChange | Function | | Typescript：`(value: CheckboxGroupValue, context: CheckboxGroupChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts)。<br/>`interface CheckboxGroupChangeContext { e: ChangeEvent; current: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`<br/> | N
options | Array | - | Typescript：`Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string \| TNode; value?: string \| number; disabled?: boolean; name?: string; checkAll?: true }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts) | N
value | Array | [] | Typescript：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts) | N
defaultValue | Array | [] | uncontrolled property。Typescript：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts) | N
onChange | Function | | Typescript：`(value: T, context: CheckboxGroupChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts)。<br/>`interface CheckboxGroupChangeContext { e: ChangeEvent; current: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`<br/> | N
15 changes: 8 additions & 7 deletions src/checkbox/checkbox.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,24 +16,25 @@ checkAll | Boolean | false | 用于标识是否为「全选选项」。单独使
checked | Boolean | false | 是否选中 | N
defaultChecked | Boolean | false | 是否选中。非受控属性 | N
children | TNode | - | 多选框内容，同 label。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
disabled | Boolean | undefined | 是否禁用组件 | N
disabled | Boolean | undefined | 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。Checkbox.disabled 优先级高于 CheckboxGroup.disabled | N
indeterminate | Boolean | false | 是否为半选 | N
label | TNode | - | 主文案。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
name | String | - | HTML 元素原生属性 | N
readonly | Boolean | false | 只读状态 | N
value | String / Number | - | 多选框的值。TS 类型：`string \| number` | N
value | String / Number / Boolean | - | 多选框的值。TS 类型：`string \| number \| boolean` | N
onChange | Function | | TS 类型：`(checked: boolean, context: { e: ChangeEvent }) => void`<br/>值变化时触发 | N
onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击时出发，一般用于外层阻止冒泡场景 | N

### CheckboxGroup Props

名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
className | String | - | 类名 | N
style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
disabled | Boolean | - | 是否禁用组件 | N
disabled | Boolean | - | 是否禁用组件，默认为 false。CheckboxGroup.disabled 优先级低于 Checkbox.disabled | N
max | Number | undefined | 支持最多选中的数量 | N
name | String | - | 统一设置内部复选框 HTML 属性 | N
options | Array | [] | 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」。TS 类型：`Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string \| TNode; value?: string \| number; disabled?: boolean; name?: string; checkAll?: true }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts) | N
value | Array | [] | 选中值。TS 类型：`CheckboxGroupValue` `type CheckboxGroupValue = Array<string \| number>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts) | N
defaultValue | Array | [] | 选中值。非受控属性。TS 类型：`CheckboxGroupValue` `type CheckboxGroupValue = Array<string \| number>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts) | N
onChange | Function | | TS 类型：`(value: CheckboxGroupValue, context: CheckboxGroupChangeContext) => void`<br/>值变化时触发，`context.current` 表示当前变化的数据值，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中；`context.option` 表示当前变化的数据项。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts)。<br/>`interface CheckboxGroupChangeContext { e: ChangeEvent; current: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`<br/> | N
options | Array | - | 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」。TS 类型：`Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string \| TNode; value?: string \| number; disabled?: boolean; name?: string; checkAll?: true }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts) | N
value | Array | [] | 选中值。TS 类型：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts) | N
defaultValue | Array | [] | 选中值。非受控属性。TS 类型：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts) | N
onChange | Function | | TS 类型：`(value: T, context: CheckboxGroupChangeContext) => void`<br/>值变化时触发，`context.current` 表示当前变化的数据值，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中；`context.option` 表示当前变化的数据项。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts)。<br/>`interface CheckboxGroupChangeContext { e: ChangeEvent; current: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`<br/> | N
5 changes: 1 addition & 4 deletions src/checkbox/defaultProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,4 @@ export const checkboxDefaultProps: TdCheckboxProps = {
readonly: false,
};

export const checkboxGroupDefaultProps: TdCheckboxGroupProps = {
max: undefined,
defaultValue: [],
};
export const checkboxGroupDefaultProps: TdCheckboxGroupProps = { max: undefined, defaultValue: [] };
18 changes: 8 additions & 10 deletions src/checkbox/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* */

import { TNode } from '../common';
import { ChangeEvent, MouseEvent } from 'react';
import { MouseEvent, ChangeEvent } from 'react';

export interface TdCheckboxProps {
/**
Expand All @@ -28,7 +28,7 @@ export interface TdCheckboxProps {
*/
children?: TNode;
/**
* 是否禁用组件
* 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。Checkbox.disabled 优先级高于 CheckboxGroup.disabled
*/
disabled?: boolean;
/**
Expand Down Expand Up @@ -64,10 +64,9 @@ export interface TdCheckboxProps {
onClick?: (context: { e: MouseEvent<HTMLLabelElement> }) => void;
}

export interface TdCheckboxGroupProps {
export interface TdCheckboxGroupProps<T = CheckboxGroupValue> {
/**
* 是否禁用组件
* @default false
* 是否禁用组件，默认为 false。CheckboxGroup.disabled 优先级低于 Checkbox.disabled
*/
disabled?: boolean;
/**
Expand All @@ -81,23 +80,22 @@ export interface TdCheckboxGroupProps {
name?: string;
/**
* 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」
* @default []
*/
options?: Array<CheckboxOption>;
/**
* 选中值
* @default []
*/
value?: CheckboxGroupValue;
value?: T;
/**
* 选中值，非受控属性
* @default []
*/
defaultValue?: CheckboxGroupValue;
defaultValue?: T;
/**
* 值变化时触发，`context.current` 表示当前变化的数据值，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中；`context.option` 表示当前变化的数据项
*/
onChange?: (value: CheckboxGroupValue, context: CheckboxGroupChangeContext) => void;
onChange?: (value: T, context: CheckboxGroupChangeContext) => void;
}

export type CheckboxOption = string | number | CheckboxOptionObj;
Expand All @@ -110,7 +108,7 @@ export interface CheckboxOptionObj {
checkAll?: true;
}

export type CheckboxGroupValue = Array<string | number>;
export type CheckboxGroupValue = Array<string | number | boolean>;

export interface CheckboxGroupChangeContext {
e: ChangeEvent<HTMLDivElement>;
Expand Down
12 changes: 8 additions & 4 deletions src/switch/Switch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@ import Loading from '../loading';
import useConfig from '../hooks/useConfig';
import { StyledProps } from '../common';
import useCommonClassName from '../_util/useCommonClassName';
import { TdSwitchProps } from './type';
import { SwitchValue, TdSwitchProps } from './type';
import { switchDefaultProps } from './defaultProps';
import log from '../_common/js/log';
import parseTNode from '../_util/parseTNode';

export type SwitchChangeEventHandler = (value: boolean, event: React.MouseEvent<HTMLButtonElement>) => void;
export type SwitchClickEventHandler = SwitchChangeEventHandler;

export interface SwitchProps extends TdSwitchProps, StyledProps {}
export interface SwitchProps<T extends SwitchValue = SwitchValue> extends TdSwitchProps<T>, StyledProps {}

const Switch = forwardRef((props: SwitchProps, ref: React.Ref<HTMLButtonElement>) => {
const Switch = forwardRef<HTMLButtonElement, SwitchProps>((props, ref) => {
const { classPrefix } = useConfig();
const { className, value, defaultValue, disabled, loading, size, label, customValue, onChange, ...restProps } = props;
const [activeValue = true, inactiveValue = false] = customValue || [];
Expand Down Expand Up @@ -80,4 +80,8 @@ const Switch = forwardRef((props: SwitchProps, ref: React.Ref<HTMLButtonElement>
Switch.displayName = 'Switch';
Switch.defaultProps = switchDefaultProps;

export default Switch;
export default Switch as <T extends SwitchValue = SwitchValue>(
props: SwitchProps<T> & {
ref?: React.Ref<HTMLButtonElement>;
},
) => React.ReactElement;
7 changes: 3 additions & 4 deletions src/switch/switch.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
:: BASE_DOC ::

## API

### Switch Props

name | type | default | description | required
Expand All @@ -13,6 +12,6 @@ disabled | Boolean | - | \- | N
label | TNode | [] | Typescript：`Array<string \| TNode> \| TNode<{ value: SwitchValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
loading | Boolean | false | \- | N
size | String | medium | options：small/medium/large | N
value | String / Number / Boolean | - | Typescript：`SwitchValue` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/switch/type.ts) | N
defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript：`SwitchValue` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/switch/type.ts) | N
onChange | Function | | Typescript：`(value: SwitchValue) => void`<br/> | N
value | String / Number / Boolean | - | Typescript：`T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/switch/type.ts) | N
defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript：`T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/switch/type.ts) | N
onChange | Function | | Typescript：`(value: T) => void`<br/> | N
8 changes: 4 additions & 4 deletions src/switch/switch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@
className | String | - | 类名 | N
style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
customValue | Array | - | 用于自定义开关的值，[打开时的值，关闭时的值]。默认为 [true, false]。示例：[1, 0]、['open', 'close']。TS 类型：`Array<SwitchValue>` | N
disabled | Boolean | - | 是否禁用组件 | N
disabled | Boolean | - | 是否禁用组件，默认为 false | N
label | TNode | [] | 开关内容，[开启时内容，关闭时内容]。示例：['开', '关'] 或 (value) => value ? '开' : '关'。TS 类型：`Array<string \| TNode> \| TNode<{ value: SwitchValue }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
loading | Boolean | false | 是否处于加载中状态 | N
size | String | medium | 开关尺寸。可选项：small/medium/large | N
value | String / Number / Boolean | - | 开关值。TS 类型：`SwitchValue` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/switch/type.ts) | N
defaultValue | String / Number / Boolean | - | 开关值。非受控属性。TS 类型：`SwitchValue` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/switch/type.ts) | N
onChange | Function | | TS 类型：`(value: SwitchValue) => void`<br/>数据发生变化时触发 | N
value | String / Number / Boolean | - | 开关值。TS 类型：`T` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/switch/type.ts) | N
defaultValue | String / Number / Boolean | - | 开关值。非受控属性。TS 类型：`T` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/switch/type.ts) | N
onChange | Function | | TS 类型：`(value: T) => void`<br/>数据发生变化时触发 | N
Loading