diff --git a/src/search/Search.tsx b/src/search/Search.tsx index f86f5918..7ca68c8d 100644 --- a/src/search/Search.tsx +++ b/src/search/Search.tsx @@ -130,6 +130,9 @@ const Search: FC = (props) => { value={searchValue} type="search" className={`${inputClasses}`} + style={ + props.cursorColor ? ({ '--td-search-cursor-color': props.cursorColor } as React.CSSProperties) : undefined + } autoFocus={focus} placeholder={placeholder} readOnly={readonly} diff --git a/src/search/defaultProps.ts b/src/search/defaultProps.ts index 63202208..a71a5fbd 100644 --- a/src/search/defaultProps.ts +++ b/src/search/defaultProps.ts @@ -8,10 +8,11 @@ export const searchDefaultProps: TdSearchProps = { action: '', center: false, clearable: true, + cursorColor: '#0052d9', disabled: false, focus: false, leftIcon: 'search', placeholder: '', - readonly: false, + readonly: undefined, shape: 'square', }; diff --git a/src/search/search.en-US.md b/src/search/search.en-US.md index c9b11fcf..1595d181 100644 --- a/src/search/search.en-US.md +++ b/src/search/search.en-US.md @@ -7,28 +7,29 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | className of component | N -style | Object | - | CSS(Cascading Style Sheets),Typescript:`React.CSSProperties` | N -action | TNode | '' | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N -autocompleteOptions | Array | - | autocomplete words list。Typescript:`Array` `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 +style | Object | - | CSS(Cascading Style Sheets),Typescript: `React.CSSProperties` | N +action | TNode | '' | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +autocompleteOptions | Array | - | autocomplete words list。Typescript: `Array` `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 center | Boolean | false | \- | N clearable | Boolean | true | \- | N +cursorColor | String | #0052d9 | `0.21.2` | N disabled | Boolean | false | \- | N focus | Boolean | false | \- | N -leftIcon | TNode | 'search' | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +leftIcon | TNode | 'search' | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N placeholder | String | '' | \- | N -prefixIcon | TElement | - | `deprecated`。Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N -readonly | Boolean | false | \- | N +prefixIcon | TElement | - | `deprecated`。Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +readonly | Boolean | undefined | \- | N shape | String | 'square' | options: square/round | N -suffixIcon | TElement | - | `deprecated`。Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +suffixIcon | TElement | - | `deprecated`。Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N value | String | - | \- | N defaultValue | String | - | uncontrolled property | N -onActionClick | Function | | Typescript:`({}) => void`
| N -onBlur | Function | | Typescript:`(context: { value: string; e: FocusEvent }) => void`
| N -onChange | Function | | Typescript:`(value: string, context: { trigger: 'input-change' \| 'option-click'; e?: InputEvent \| MouseEvent }) => void`
| N -onClear | Function | | Typescript:`(context: { e: MouseEvent }) => void`
| N -onFocus | Function | | Typescript:`(context: { value: string; e: FocusEvent }) => void`
| N -onSearch | Function | | Typescript:`(context?: { value: string; trigger: 'submit' \| 'option-click' \| 'clear'; e?: InputEvent \| MouseEvent }) => void`
| N -onSubmit | Function | | Typescript:`(context: { value: string; e: KeyboardEvent }) => void`
| N +onActionClick | Function | | Typescript: `({}) => void`
| N +onBlur | Function | | Typescript: `(context: { value: string; e: FocusEvent }) => void`
| N +onChange | Function | | Typescript: `(value: string, context: { trigger: 'input-change' \| 'option-click'; e?: InputEvent \| MouseEvent }) => void`
| N +onClear | Function | | Typescript: `(context: { e: MouseEvent }) => void`
| N +onFocus | Function | | Typescript: `(context: { value: string; e: FocusEvent }) => void`
| N +onSearch | Function | | Typescript: `(context?: { value: string; trigger: 'submit' \| 'option-click' \| 'clear'; e?: InputEvent \| MouseEvent }) => void`
| N +onSubmit | Function | | Typescript: `(context: { value: string; e: KeyboardEvent }) => void`
| N ### CSS Variables @@ -39,6 +40,7 @@ Name | Default Value | Description --td-search-bg-color | @bg-color-secondarycontainer | - --td-search-clear-icon-color | @text-color-placeholder | - --td-search-clear-icon-size | 24px | - +--td-search-cursor-color | @brand-color | - --td-search-font | @font-body-large | - --td-search-height | 40px | - --td-search-icon-color | @text-color-placeholder | - diff --git a/src/search/search.md b/src/search/search.md index 7904a4a2..3e7db633 100644 --- a/src/search/search.md +++ b/src/search/search.md @@ -12,12 +12,13 @@ action | TNode | '' | 自定义右侧操作按钮文字。TS 类型:`string \| autocompleteOptions | Array | - | 【讨论中】联想词列表,如果不存在或长度为 0 则不显示联想框。可以使用函数 `label` 自定义联想词为任意内容;也可使用插槽 `option` 定义联想词内容,插槽参数为 `{ option: AutocompleteOption; index: number }`。如果 `group` 值为 `true` 则表示当前项为分组标题。TS 类型:`Array` `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 center | Boolean | false | 是否居中 | N clearable | Boolean | true | 是否启用清除控件 | N +cursorColor | String | #0052d9 | `0.21.2`。光标颜色 | N disabled | Boolean | false | 是否禁用 | N focus | Boolean | false | 是否聚焦 | N leftIcon | TNode | 'search' | 左侧图标。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N placeholder | String | '' | 占位符 | N prefixIcon | TElement | - | 已废弃。前置图标,默认为搜索图标。值为 `null` 时则不显示。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N -readonly | Boolean | false | 只读状态 | N +readonly | Boolean | undefined | 只读状态 | N shape | String | 'square' | 搜索框形状。可选项:square/round | N suffixIcon | TElement | - | 已废弃。后置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N value | String | - | 值 | N @@ -39,6 +40,7 @@ onSubmit | Function | | TS 类型:`(context: { value: string; e: KeyboardEven --td-search-bg-color | @bg-color-secondarycontainer | - --td-search-clear-icon-color | @text-color-placeholder | - --td-search-clear-icon-size | 24px | - +--td-search-cursor-color | @brand-color | - --td-search-font | @font-body-large | - --td-search-height | 40px | - --td-search-icon-color | @text-color-placeholder | - diff --git a/src/search/type.ts b/src/search/type.ts index 02ad2faa..83076fed 100644 --- a/src/search/type.ts +++ b/src/search/type.ts @@ -22,11 +22,21 @@ export interface TdSearchProps { * @default false */ center?: boolean; + /** + * 清空图标触发方式,仅在输入框有值时有效 + * @default always + */ + clearTrigger?: 'always' | 'focus'; /** * 是否启用清除控件 * @default true */ clearable?: boolean; + /** + * 光标颜色 + * @default #0052d9 + */ + cursorColor?: string; /** * 是否禁用 * @default false @@ -49,7 +59,6 @@ export interface TdSearchProps { placeholder?: string; /** * 只读状态 - * @default false */ readonly?: boolean; /** @@ -69,7 +78,6 @@ export interface TdSearchProps { defaultValue?: string; /** * 点击右侧操作按钮文字时触发 - * @default '' */ onActionClick?: ({}) => void; /**