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

refactor(input): turn into controlled component #153

Merged
merged 1 commit into from
Jan 27, 2022
Merged

refactor(input): turn into controlled component #153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
57 changes: 28 additions & 29 deletions src/input/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,37 +32,36 @@ isComponent: true
```

## API

### Input Props

| 名称 | 类型 | 默认值 | 说明 | 必传 |
| ---------------- | --------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 | N |
| align | String | left | 文本内容位置，居左/居中/居右。可选项：left/center/right | N |
| autofocus | Boolean | false | 自动聚焦 | N |
| clearable | Boolean | false | 是否可清空 | N |
| confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起点 | N |
| confirm-type | String | done | 设置键盘右下角按钮的文字，仅在 type='text'时生效。可选项：send/search/next/go/done | N |
| disabled | Boolean | false | 是否禁用输入框 | N |
| error-message | String | - | 错误提示文本，值为空不显示 | N |
| external-classes | Array | - | 组件类名，用于设置组件外层元素、输入框、占位符、错误信息等元素类名。`['t-class', 't-class-input', 't-class-placeholder', 't-class-error-msg']` | N |
| focus | Boolean | false | 自动聚焦 | N |
| maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度 | N |
| maxlength | Number | - | 用户最多可以输入的文本长度。值小于等于 0 的时候，则不限制输入长度 | N |
| name | String | - | 名称 | N |
| placeholder | String | - | 占位符 | N |
| size | String | small | 输入框尺寸。可选项：small/medium。TS 类型：`'medium' | 'small'` | N |
| suffix | String | - | 后置文本内容 | N |
| suffix-icon | String / Slot | - | 组件后置图标 | N |
| type | String | text | 输入框类型。可选项：text/number/idcard/digit/safe-password/password | N |
| value | String / Number | - | 输入框的值。TS 类型：`InputValue`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N |
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 | N
align | String | left | 文本内容位置，居左/居中/居右。可选项：left/center/right | N
clearable | Boolean | false | 是否可清空 | N
confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起点 | N
confirm-type | String | done | 设置键盘右下角按钮的文字，仅在 type='text'时生效。可选项：send/search/next/go/done | N
disabled | Boolean | false | 是否禁用输入框 | N
error-message | String | - | 错误提示文本，值为空不显示 | N
external-classes | Array | - | 组件类名，用于设置组件外层元素、输入框、占位符、错误信息等元素类名。`['t-class', 't-class-input', 't-class-placeholder', 't-class-error-msg']` | N
focus | Boolean | false | 自动聚焦 | N
label | String / Slot | - | 左侧文本 | N
maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 | N
maxlength | Number | - | 用户最多可以输入的文本长度。值小于等于 0 的时候，则不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 | N
placeholder | String | undefined | 占位符 | N
prefix-icon | String / Slot | - | 组件前置图标，值为字符串则表示图标名称 | N
size | String | small | 输入框尺寸。可选项：small/medium。TS 类型：`'medium' | 'small'` | N
suffix | String / Slot | - | 后置图标前的后置内容 | N
suffix-icon | String / Slot | - | 后置文本内容，值为字符串则表示图标名称 | N
type | String | text | 输入框类型。可选项：text/number/idcard/digit/safe-password/password | N
value | String / Number | - | 输入框的值。TS 类型：`InputValue`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N

### Input Events

| 名称 | 参数 | 描述 |
| ------ | ---------------------------------------------------- | ---------------------- |
| blur | `(value: InputValue, context: { e: FocusEvent })` | 失去焦点时触发 |
| change | `(value: InputValue` | 输入框值发生变化时触发 |
| clear | - | 清空按钮点击时触发 |
| enter | `(value: InputValue, context: { e: KeyboardEvent })` | 回车键按下时触发 |
| focus | `(value: InputValue, context: { e: FocusEvent })` | 获得焦点时触发 |
名称 | 参数 | 描述
-- | -- | --
blur | `(value: InputValue, context: { e: FocusEvent })` | 失去焦点时触发
change | `(value: InputValue` | 输入框值发生变化时触发
clear | - | 清空按钮点击时触发
enter | `(value: InputValue, context: { e: KeyboardEvent })` | 回车键按下时触发
focus | `(value: InputValue, context: { e: FocusEvent })` | 获得焦点时触发
42 changes: 15 additions & 27 deletions src/input/input.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,58 +24,46 @@ export default class Input extends SuperComponent {

properties = props;

controlledProps = [
{
key: 'value',
event: 'change',
},
];

data = {
inputValue: '',
classPrefix: name,
classBasePrefix: prefix,
characterLength: 0,
};

/* 组件生命周期 */
lifetimes = {
LeeJim marked this conversation as resolved.
Show resolved Hide resolved
ready() {
this.setData({ inputValue: this.data.value });
},
};

methods = {
onInput(event) {
const { value } = event.detail;
const { maxcharacter } = this.properties;
if (maxcharacter && maxcharacter > 0 && !Number.isNaN(maxcharacter)) {
const { characters = '', length = 0 } = getCharacterLength(value, maxcharacter);

this._trigger('change', { value: characters });
this.setData({
value: characters,
characterLength: length,
});
} else {
this.setData({ inputValue: value });
this._trigger('change', { value });
}

this.triggerEvent('change', {
...event.detail,
});
},
onFocus(event) {
this.triggerEvent('focus', {
...event.detail,
});
this.triggerEvent('focus', event.detail);
},
onBlur(event) {
this.triggerEvent('blur', {
...event.detail,
});
this.triggerEvent('blur', event.detail);
},
onConfirm(event) {
this.triggerEvent('enter', {
...event.detail,
});
this.triggerEvent('enter', event.detail);
},
clearInput(event) {
this.setData({ inputValue: '', value: '' });
this.triggerEvent('clear', {
...event.detail,
});
this.triggerEvent('clear', event.detail);
this._trigger('change', { value: '' });
},
};
}
2 changes: 1 addition & 1 deletion src/input/input.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
class="{{classPrefix}}__control {{suffix || align ==='right' ? classPrefix + '__control--right':''}} {{align === 'center' ? classPrefix + '__control--center':''}} t-class-input"
/>
<view
wx:if="{{ clearable && (inputValue.length > 0 || characterLength > 0)}}"
wx:if="{{ clearable && (value.length > 0 || characterLength > 0)}}"
class="{{classPrefix}}__wrap--icon"
bind:tap="clearInput"
>
Expand Down
31 changes: 19 additions & 12 deletions src/input/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* updated at 2021-11-24 10:58:05
* */

import { TdInputProps } from './type';
Expand Down Expand Up @@ -51,35 +50,37 @@ const props: TdInputProps = {
type: Boolean,
value: false,
},
/** 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度 */
/** 左侧文本 */
label: {
type: String,
},
/** 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 */
maxcharacter: {
type: Number,
},
/** 用户最多可以输入的文本长度。值小于等于 0 的时候，则不限制输入长度 */
/** 用户最多可以输入的文本长度。值小于等于 0 的时候，则不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 */
maxlength: {
type: Number,
},
/** 名称 */
name: {
type: String,
value: '',
},
/** 占位符 */
placeholder: {
type: String,
value: '',
value: undefined,
},
/** 组件前置图标，值为字符串则表示图标名称 */
prefixIcon: {
type: String,
},
/** 输入框尺寸 */
size: {
type: String,
value: 'small',
},
/** 后置文本内容 */
/** 后置图标前的后置内容 */
suffix: {
type: String,
value: '',
},
/** 组件后置图标 */
/** 后置文本内容，值为字符串则表示图标名称 */
suffixIcon: {
type: String,
},
Expand All @@ -92,6 +93,12 @@ const props: TdInputProps = {
value: {
type: String,
optionalTypes: [Number],
value: null,
},
/** 输入框的值，非受控属性 */
defaultValue: {
type: null,
value: undefined,
},
};

Expand Down
38 changes: 25 additions & 13 deletions src/input/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* updated at 2021-11-24 10:58:05
* */

export interface TdInputProps {
Expand Down Expand Up @@ -87,35 +86,41 @@ export interface TdInputProps {
required?: boolean;
};
/**
* 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度
* 左侧文本
*/
label?: {
type: StringConstructor;
value?: string;
required?: boolean;
};
/**
* 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用
*/
maxcharacter?: {
type: NumberConstructor;
value?: number;
required?: boolean;
};
/**
* 用户最多可以输入的文本长度。值小于等于 0 的时候，则不限制输入长度
* 用户最多可以输入的文本长度。值小于等于 0 的时候，则不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用
*/
maxlength?: {
type: NumberConstructor;
value?: number;
required?: boolean;
};
/**
* 名称
* @default ''
* 占位符
*/
name?: {
placeholder?: {
type: StringConstructor;
value?: string;
required?: boolean;
};
/**
* 占位符
* @default ''
* 组件前置图标，值为字符串则表示图标名称
*/
placeholder?: {
prefixIcon?: {
type: StringConstructor;
value?: string;
required?: boolean;
Expand All @@ -130,16 +135,15 @@ export interface TdInputProps {
required?: boolean;
};
/**
* 后置文本内容
* @default ''
* 后置图标前的后置内容
*/
suffix?: {
type: StringConstructor;
value?: string;
required?: boolean;
};
/**
* 组件后置图标
* 后置文本内容，值为字符串则表示图标名称
*/
suffixIcon?: {
type: StringConstructor;
Expand All @@ -164,6 +168,14 @@ export interface TdInputProps {
value?: InputValue;
required?: boolean;
};
};
/**
* 输入框的值，非受控属性
*/
defaultValue?: {
type: StringConstructor;
value?: InputValue;
required?: boolean;
};
}

export type InputValue = string | number;