feat(textarea): support readonly and allowInputOverMax props (#3474)

* feat(textarea): support readonly and allowInputOverMax props

* chore(textarea): remove extra demo, adjust word count and maxlength when allowInputOverMax is true

* chore(textarea): generate api

Author: richardji202

src/textarea/README.en-US.md

@@ -2,13 +2,15 @@
 
 ## API
 
+
 ### Textarea Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
 style | Object | - | CSS(Cascading Style Sheets) | N
 custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
 adjust-position | Boolean | true | \- | N
+allow-input-over-max | Boolean | false | \- | N
 autofocus | Boolean | false | \- | N
 autosize | Boolean / Object | false | Typescript：`boolean \| { maxHeight?: number, minHeight?: number }` | N
 bordered | Boolean | false | \- | N
@@ -28,6 +30,7 @@ maxlength | Number | -1 | \- | N
 placeholder | String | undefined | \- | N
 placeholder-class | String | textarea-placeholder | \- | N
 placeholder-style | String | - | \- | N
+readonly | Boolean | undefined | \- | N
 selection-end | Number | -1 | \- | N
 selection-start | Number | -1 | \- | N
 show-confirm-bar | Boolean | true | \- | N

src/textarea/README.md

@@ -65,13 +65,15 @@ isComponent: true
 
 ## API
 
+
 ### Textarea Props
 
 名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 style | Object | - | 样式 | N
 custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
 adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 | N
+allow-input-over-max | Boolean | false | 超出maxlength或maxcharacter之后是否还允许输入 | N
 autofocus | Boolean | false | 自动聚焦，拉起键盘 | N
 autosize | Boolean / Object | false | 是否自动增高，值为 true 时，style.height 不生效。支持传入对象，如 { maxHeight: 120, minHeight: 20 }。TS 类型：`boolean \| { maxHeight?: number, minHeight?: number }` | N
 bordered | Boolean | false | 是否显示外边框 | N
@@ -91,6 +93,7 @@ maxlength | Number | -1 | 用户最多可以输入的字符个数，值为 -1 
 placeholder | String | undefined | 占位符 | N
 placeholder-class | String | textarea-placeholder | 指定 placeholder 的样式类，目前仅支持color,font-size和font-weight | N
 placeholder-style | String | - | 指定 placeholder 的样式，目前仅支持 color ,font-size和font-weight | N
+readonly | Boolean | undefined | 只读状态 | N
 selection-end | Number | -1 | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | N
 selection-start | Number | -1 | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | N
 show-confirm-bar | Boolean | true | 是否显示键盘上方带有”完成“按钮那一栏 | N

src/textarea/__test__/index.test.js

@@ -99,6 +99,54 @@ describe('textarea', () => {
       await simulate.sleep(0);
       expect(component.instance.data.count).toBe(10);
     });
+
+    it(': allowInputOverMax', async () => {
+      const handleChange = jest.fn();
+      const id = simulate.load({
+        template: `<t-textarea
+        class="base"
+        maxcharacter="{{maxcharacter}}"
+        allowInputOverMax
+        value="{{value}}"
+        bind:change="handleChange"
+        >
+        </t-textarea>`,
+        data: {
+          maxcharacter: 10,
+          value: 'tdesign',
+        },
+        methods: {
+          handleChange,
+        },
+        usingComponents: {
+          't-textarea': textarea,
+        },
+      });
+      const comp = simulate.render(id);
+      comp.attach(document.createElement('parent-wrapper'));
+      const component = comp.querySelector('.base');
+      expect(component.instance.data.count).toBe(7);
+
+      const $textarea = comp.querySelector('.base >>> .t-textarea__wrapper-inner');
+
+      $textarea.dispatchEvent('input', { detail: { value: 'tdesign123' } });
+      await simulate.sleep(0);
+      expect(handleChange).toHaveBeenCalledTimes(1);
+      expect(component.instance.data.count).toBe(10);
+
+      $textarea.dispatchEvent('input', { detail: { value: 'textarea用于多行文本信息输入' } });
+      await simulate.sleep(0);
+      expect(handleChange).toHaveBeenCalledTimes(2);
+      expect(component.instance.data.count).toBe(28);
+      expect(handleChange.mock.calls[1][0].detail).toStrictEqual({
+        value: 'textarea用于多行文本信息输入',
+        cursor: undefined,
+      });
+
+      $textarea.dispatchEvent('input', { detail: { value: 'textarea用于567' } });
+      await simulate.sleep(0);
+      expect(component.instance.data.count).toBe(15);
+    });
   });
 
   describe('slots', () => {

src/textarea/props.ts

@@ -11,6 +11,11 @@ const props: TdTextareaProps = {
     type: Boolean,
     value: true,
   },
+  /** 超出maxlength或maxcharacter之后是否还允许输入 */
+  allowInputOverMax: {
+    type: Boolean,
+    value: false,
+  },
   /** 自动聚焦，拉起键盘 */
   autofocus: {
     type: Boolean,
@@ -104,6 +109,11 @@ const props: TdTextareaProps = {
     type: String,
     value: '',
   },
+  /** 只读状态 */
+  readonly: {
+    type: null,
+    value: undefined,
+  },
   /** 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 */
   selectionEnd: {
     type: Number,

src/textarea/textarea.ts

@@ -61,15 +61,20 @@ export default class Textarea extends SuperComponent {
     },
 
     calculateValue(value, maxcharacter, maxlength) {
+      const { allowInputOverMax } = this.properties;
       if (maxcharacter > 0 && !Number.isNaN(maxcharacter)) {
-        const { length, characters } = getCharacterLength('maxcharacter', value, maxcharacter);
+        const { length, characters } = getCharacterLength(
+          'maxcharacter',
+          value,
+          allowInputOverMax ? Infinity : maxcharacter,
+        );
         return {
           value: characters,
           count: length,
         };
       }
       if (maxlength > 0 && !Number.isNaN(maxlength)) {
-        const { length, characters } = getCharacterLength('maxlength', value, maxlength);
+        const { length, characters } = getCharacterLength('maxlength', value, allowInputOverMax ? Infinity : maxlength);
         return {
           value: characters,
           count: length,

src/textarea/textarea.wxml

@@ -13,8 +13,8 @@
     <textarea
       class="{{classPrefix}}__wrapper-inner {{disabled? prefix +  '-is-disabled' : ''}} {{prefix}}-class-textarea"
       style="{{this.textareaStyle(autosize)}}"
-      maxlength="{{maxlength}}"
-      disabled="{{disabled}}"
+      maxlength="{{allowInputOverMax ? -1 : maxlength}}"
+      disabled="{{disabled || readonly}}"
       placeholder="{{placeholder}}"
       placeholder-class="{{classPrefix}}__placeholder {{placeholderClass}}"
       placeholder-style="{{placeholderStyle}}"

src/textarea/type.ts

@@ -13,6 +13,14 @@ export interface TdTextareaProps {
     type: BooleanConstructor;
     value?: boolean;
   };
+  /**
+   * 超出maxlength或maxcharacter之后是否还允许输入
+   * @default false
+   */
+  allowInputOverMax?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
   /**
    * 自动聚焦，拉起键盘
    * @default false
@@ -161,6 +169,13 @@ export interface TdTextareaProps {
     type: StringConstructor;
     value?: string;
   };
+  /**
+   * 只读状态
+   */
+  readonly?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
   /**
    * 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用
    * @default -1