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.

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

feat(input): support enterkeyhint and spellcheck API #553

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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: 4 additions & 0 deletions src/input/Input.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ const Input = forwardRef<InputRefProps, InputProps>((props, ref) => {
borderless,
clearable,
clearTrigger,
enterkeyhint,
disabled,
format,
label,
Expand All @@ -39,6 +40,7 @@ const Input = forwardRef<InputRefProps, InputProps>((props, ref) => {
name,
placeholder,
prefixIcon,
spellcheck,
suffix,
suffixIcon,
tips,
Expand Down Expand Up @@ -216,6 +218,8 @@ const Input = forwardRef<InputRefProps, InputProps>((props, ref) => {
placeholder={placeholder}
readOnly={readonly}
maxLength={resultMaxLength || -1}
enterKeyHint={enterkeyhint}
spellCheck={spellcheck}
onFocus={handleFocus}
onBlur={handleBlur}
onInput={handleInput}
Expand Down
1 change: 1 addition & 0 deletions src/input/defaultProps.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export const inputDefaultProps: TdInputProps = {
layout: 'horizontal',
placeholder: undefined,
readonly: undefined,
spellcheck: false,
status: 'default',
type: 'text',
};
2 changes: 2 additions & 0 deletions src/input/input.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ borderless | Boolean | false | input without border | N
clearTrigger | String | always | show clear icon, clicked to clear input value。options: always / focus | N
clearable | Boolean | false | show clear icon, clicked to clear input value | N
disabled | Boolean | undefined | make input to be disabled | N
enterkeyhint | String | - | attribute of input element, [see here](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)。options: enter/done/go/next/previous/search/send | N
errorMessage | String | - | `deprecated` | N
format | Function | - | input value formatter, `type=number` does not work. if you need to format number, `InputNumber` Component might be better。Typescript:`InputFormatType` `type InputFormatType = (value: InputValue) => string`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/input/type.ts) | N
label | TNode | - | text on the left of input。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
Expand All @@ -27,6 +28,7 @@ placeholder | String | undefined | \- | N
prefixIcon | TElement | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
readonly | Boolean | undefined | \- | N
size | String | medium | `deprecated`。options: small/medium。Typescript:`'medium' \| 'small'` | N
spellcheck | Boolean | false | attribute of input element, [see here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/spellcheck) | N
status | String | default | options: default/success/warning/error | N
suffix | TNode | - | suffix content before suffixIcon。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
suffixIcon | TElement | - | suffix icon of input。Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
Expand Down
2 changes: 2 additions & 0 deletions src/input/input.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ borderless | Boolean | false | 是否开启无边框模式 | N
clearTrigger | String | always | 清空图标触发方式,仅在输入框有值时有效。可选项:always / focus | N
clearable | Boolean | false | 是否可清空 | N
disabled | Boolean | undefined | 是否禁用输入框 | N
enterkeyhint | String | - | 用于控制回车键样式,此 API 仅在部分浏览器支持,HTML5 原生属性,[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)。可选项:enter/done/go/next/previous/search/send | N
errorMessage | String | - | 已废弃。错误提示文本,值为空不显示(废弃属性,如果需要,请更为使用 status 和 tips) | N
format | Function | - | 指定输入框展示值的格式。TS 类型:`InputFormatType` `type InputFormatType = (value: InputValue) => string`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/input/type.ts) | N
label | TNode | - | 左侧文本。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
Expand All @@ -27,6 +28,7 @@ placeholder | String | undefined | 占位符 | N
prefixIcon | TElement | - | 组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
readonly | Boolean | undefined | 只读状态 | N
size | String | medium | 已废弃。输入框尺寸。可选项:small/medium。TS 类型:`'medium' \| 'small'` | N
spellcheck | Boolean | false | 是否开启拼写检查,HTML5 原生属性,[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/spellcheck) | N
status | String | default | 输入框状态。可选项:default/success/warning/error | N
suffix | TNode | - | 后置图标前的后置内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
suffixIcon | TElement | - | 组件后置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
Expand Down
9 changes: 9 additions & 0 deletions src/input/type.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,10 @@ export interface TdInputProps {
* 是否禁用输入框
*/
disabled?: boolean;
/**
* 用于控制回车键样式,此 API 仅在部分浏览器支持,HTML5 原生属性,[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)
*/
enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
/**
* 指定输入框展示值的格式
*/
Expand Down Expand Up @@ -84,6 +88,11 @@ export interface TdInputProps {
* 只读状态
*/
readonly?: boolean;
/**
* 是否开启拼写检查,HTML5 原生属性,[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/spellcheck)
* @default false
*/
spellcheck?: boolean;
/**
* 输入框状态
* @default default
Expand Down
Loading
Loading