Skip to content

Commit 96c5142

Browse files
anlyyaoanlyyao
authored
feat(Search): support cursor-color prop (#857)
* feat(Search): support cursor-color prop * fix: fix cr
1 parent 6f30c4f commit 96c5142

File tree

5 files changed

+34
-18
lines changed

5 files changed

+34
-18
lines changed

‎src/search/Search.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,9 @@ const Search: FC<SearchProps> = (props) => {
130130
value={searchValue}
131131
type="search"
132132
className={`${inputClasses}`}
133+
style={
134+
props.cursorColor ? ({ '--td-search-cursor-color': props.cursorColor } as React.CSSProperties) : undefined
135+
}
133136
autoFocus={focus}
134137
placeholder={placeholder}
135138
readOnly={readonly}

‎src/search/defaultProps.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,11 @@ export const searchDefaultProps: TdSearchProps = {
88
action: '',
99
center: false,
1010
clearable: true,
11+
cursorColor: '#0052d9',
1112
disabled: false,
1213
focus: false,
1314
leftIcon: 'search',
1415
placeholder: '',
15-
readonly: false,
16+
readonly: undefined,
1617
shape: 'square',
1718
};

‎src/search/search.en-US.md‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,28 +7,29 @@
77
name | type | default | description | required
88
-- | -- | -- | -- | --
99
className | String | - | className of component | N
10-
style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
11-
action | TNode | '' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
12-
autocompleteOptions | Array | - | autocomplete words list。Typescript：`Array<AutocompleteOption>` `type AutocompleteOption = string \| { label: string \| TNode; group?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/search/type.ts) | N
10+
style | Object | - | CSS(Cascading Style Sheets)，Typescript: `React.CSSProperties` | N
11+
action | TNode | '' | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
12+
autocompleteOptions | Array | - | autocomplete words list。Typescript: `Array<AutocompleteOption>` `type AutocompleteOption = string \| { label: string \| TNode; group?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/search/type.ts) | N
1313
center | Boolean | false | \- | N
1414
clearable | Boolean | true | \- | N
15+
cursorColor | String | #0052d9 | `0.21.2` | N
1516
disabled | Boolean | false | \- | N
1617
focus | Boolean | false | \- | N
17-
leftIcon | TNode | 'search' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
18+
leftIcon | TNode | 'search' | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
1819
placeholder | String | '' | \- | N
19-
prefixIcon | TElement | - | `deprecated`。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
20-
readonly | Boolean | false | \- | N
20+
prefixIcon | TElement | - | `deprecated`。Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
21+
readonly | Boolean | undefined | \- | N
2122
shape | String | 'square' | options: square/round | N
22-
suffixIcon | TElement | - | `deprecated`。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
23+
suffixIcon | TElement | - | `deprecated`。Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
2324
value | String | - | \- | N
2425
defaultValue | String | - | uncontrolled property | N
25-
onActionClick | Function | | Typescript：`({}) => void`<br/> | N
26-
onBlur | Function | | Typescript：`(context: { value: string; e: FocusEvent }) => void`<br/> | N
27-
onChange | Function | | Typescript：`(value: string, context: { trigger: 'input-change' \| 'option-click'; e?: InputEvent \| MouseEvent }) => void`<br/> | N
28-
onClear | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
29-
onFocus | Function | | Typescript：`(context: { value: string; e: FocusEvent }) => void`<br/> | N
30-
onSearch | Function | | Typescript：`(context?: { value: string; trigger: 'submit' \| 'option-click' \| 'clear'; e?: InputEvent \| MouseEvent }) => void`<br/> | N
31-
onSubmit | Function | | Typescript：`(context: { value: string; e: KeyboardEvent }) => void`<br/> | N
26+
onActionClick | Function | | Typescript: `({}) => void`<br/> | N
27+
onBlur | Function | | Typescript: `(context: { value: string; e: FocusEvent }) => void`<br/> | N
28+
onChange | Function | | Typescript: `(value: string, context: { trigger: 'input-change' \| 'option-click'; e?: InputEvent \| MouseEvent }) => void`<br/> | N
29+
onClear | Function | | Typescript: `(context: { e: MouseEvent }) => void`<br/> | N
30+
onFocus | Function | | Typescript: `(context: { value: string; e: FocusEvent }) => void`<br/> | N
31+
onSearch | Function | | Typescript: `(context?: { value: string; trigger: 'submit' \| 'option-click' \| 'clear'; e?: InputEvent \| MouseEvent }) => void`<br/> | N
32+
onSubmit | Function | | Typescript: `(context: { value: string; e: KeyboardEvent }) => void`<br/> | N
3233

3334
### CSS Variables
3435

@@ -39,6 +40,7 @@ Name | Default Value | Description
3940
--td-search-bg-color | @bg-color-secondarycontainer | -
4041
--td-search-clear-icon-color | @text-color-placeholder | -
4142
--td-search-clear-icon-size | 24px | -
43+
--td-search-cursor-color | @brand-color | -
4244
--td-search-font | @font-body-large | -
4345
--td-search-height | 40px | -
4446
--td-search-icon-color | @text-color-placeholder | -

‎src/search/search.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,13 @@ action | TNode | '' | 自定义右侧操作按钮文字。TS 类型：`string \|
1212
autocompleteOptions | Array | - | 【讨论中】联想词列表，如果不存在或长度为 0 则不显示联想框。可以使用函数 `label` 自定义联想词为任意内容；也可使用插槽 `option` 定义联想词内容，插槽参数为 `{ option: AutocompleteOption; index: number }`。如果 `group` 值为 `true` 则表示当前项为分组标题。TS 类型：`Array<AutocompleteOption>` `type AutocompleteOption = string \| { label: string \| TNode; group?: boolean }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/search/type.ts) | N
1313
center | Boolean | false | 是否居中 | N
1414
clearable | Boolean | true | 是否启用清除控件 | N
15+
cursorColor | String | #0052d9 | `0.21.2`。光标颜色 | N
1516
disabled | Boolean | false | 是否禁用 | N
1617
focus | Boolean | false | 是否聚焦 | N
1718
leftIcon | TNode | 'search' | 左侧图标。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
1819
placeholder | String | '' | 占位符 | N
1920
prefixIcon | TElement | - | 已废弃。前置图标，默认为搜索图标。值为 `null` 时则不显示。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
20-
readonly | Boolean | false | 只读状态 | N
21+
readonly | Boolean | undefined | 只读状态 | N
2122
shape | String | 'square' | 搜索框形状。可选项：square/round | N
2223
suffixIcon | TElement | - | 已废弃。后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
2324
value | String | - | 值 | N
@@ -39,6 +40,7 @@ onSubmit | Function | | TS 类型：`(context: { value: string; e: KeyboardEven
3940
--td-search-bg-color | @bg-color-secondarycontainer | -
4041
--td-search-clear-icon-color | @text-color-placeholder | -
4142
--td-search-clear-icon-size | 24px | -
43+
--td-search-cursor-color | @brand-color | -
4244
--td-search-font | @font-body-large | -
4345
--td-search-height | 40px | -
4446
--td-search-icon-color | @text-color-placeholder | -

‎src/search/type.ts‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,21 @@ export interface TdSearchProps {
2222
* @default false
2323
*/
2424
center?: boolean;
25+
/**
26+
* 清空图标触发方式，仅在输入框有值时有效
27+
* @default always
28+
*/
29+
clearTrigger?: 'always' | 'focus';
2530
/**
2631
* 是否启用清除控件
2732
* @default true
2833
*/
2934
clearable?: boolean;
35+
/**
36+
* 光标颜色
37+
* @default #0052d9
38+
*/
39+
cursorColor?: string;
3040
/**
3141
* 是否禁用
3242
* @default false
@@ -49,7 +59,6 @@ export interface TdSearchProps {
4959
placeholder?: string;
5060
/**
5161
* 只读状态
52-
* @default false
5362
*/
5463
readonly?: boolean;
5564
/**
@@ -69,7 +78,6 @@ export interface TdSearchProps {
6978
defaultValue?: string;
7079
/**
7180
* 点击右侧操作按钮文字时触发
72-
* @default ''
7381
*/
7482
onActionClick?: ({}) => void;
7583
/**

0 commit comments

Comments
 (0)