Merge pull request #153 from Tencent/fix/input/controlled

refactor(input): turn into controlled component
Tencent · Jan 27, 2022 · 6d262c4 · 6d262c4
2 parents ed98ce4 + b0e667b
commit 6d262c4
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 82 deletions.
diff --git a/src/input/README.md b/src/input/README.md
@@ -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 })` | 获得焦点时触发
diff --git a/src/input/input.ts b/src/input/input.ts
@@ -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 = {
-    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: '' });
     },
   };
 }
diff --git a/src/input/input.wxml b/src/input/input.wxml
@@ -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"
       >

diff --git a/src/input/props.ts b/src/input/props.ts
@@ -2,7 +2,6 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-11-24 10:58:05
  * */
 
 import { TdInputProps } from './type';
@@ -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,
   },
@@ -92,6 +93,12 @@ const props: TdInputProps = {
   value: {
     type: String,
     optionalTypes: [Number],
+    value: null,
+  },
+  /** 输入框的值，非受控属性 */
+  defaultValue: {
+    type: null,
+    value: undefined,
   },
 };
 

diff --git a/src/input/type.ts b/src/input/type.ts
@@ -2,7 +2,6 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-11-24 10:58:05
  * */
 
 export interface TdInputProps {
@@ -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;
@@ -130,16 +135,15 @@ export interface TdInputProps {
     required?: boolean;
   };
   /**
-   * 后置文本内容
-   * @default ''
+   * 后置图标前的后置内容
    */
   suffix?: {
     type: StringConstructor;
     value?: string;
     required?: boolean;
   };
   /**
-   * 组件后置图标
+   * 后置文本内容，值为字符串则表示图标名称
    */
   suffixIcon?: {
     type: StringConstructor;
@@ -164,6 +168,14 @@ export interface TdInputProps {
     value?: InputValue;
     required?: boolean;
   };
-};
+  /**
+   * 输入框的值，非受控属性
+   */
+  defaultValue?: {
+    type: StringConstructor;
+    value?: InputValue;
+    required?: boolean;
+  };
+}
 
 export type InputValue = string | number;