feat: 对齐 textarea 属性

jd-opensource · Sep 7, 2018 · 50a1102 · 50a1102
1 parent ac36240
commit 50a1102
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 1 deletion.
diff --git a/@types/textarea.d.ts b/@types/textarea.d.ts
@@ -14,6 +14,14 @@ export interface AtTextareaProps {
 
   autoFocus?: boolean
 
+  focus?: boolean
+
+  showConfirmBar?: boolean
+
+  selectionStart?: number
+
+  selectionEnd?: number
+
   count?: number
 
   fixed?: boolean
@@ -31,6 +39,8 @@ export interface AtTextareaProps {
   obBlur?: BaseEventFunction
 
   onConfirm?: BaseEventFunction
+
+  onLinechange?: BaseEventFunction
 }
 
 declare const AtTextarea: ComponentClass<AtTextareaProps>

diff --git a/docs/markdown/textarea.md b/docs/markdown/textarea.md
@@ -57,6 +57,10 @@ import { AtTextarea } from 'taro-ui'
 | placeholder | 占位符  | String | - | - |
 | disabled | 是否禁用  | String | - | false |
 | autoFocus| 是否自动聚焦  | Boolean | - | false |
+| focus| 获取焦点  | Boolean | - | false |
+| showConfirmBar| 是否显示键盘上方带有” 完成 “按钮那一栏  | Boolean | - | false |
+| selectionStart| 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用  | Number | - | -1 |
+| selectionEnd| 光标结束位置，自动聚集时有效，需与 selectionStart 搭配使用  | Number | - | -1 |
 | count | 是否显示字数  | Boolean | - | true |
 | fixed| 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true  | Boolean | - | false|
 | textOverflowForbidden | 文字超出最大长度时是否禁止输入，若否，则还可以在 maxlength 的基础上输入500字符，并右下角红字提示  | Boolean | - | true |
@@ -71,3 +75,4 @@ import { AtTextarea } from 'taro-ui'
 | onFocus | 输入框获得焦点时触发 | event  |
 | onBlur | 输入框失去焦点时触发 | event  |
 | onConfirm | 点击完成时触发 | event  |
+| onLinechange | 输入框行数变化时调用 | event  |
diff --git a/src/components/textarea/index.js b/src/components/textarea/index.js
@@ -16,10 +16,15 @@ export default class AtTextarea extends AtComponent {
     placeholder: '',
     disabled: false,
     autoFocus: false,
+    focus: false,
+    showConfirmBar: false,
+    selectionStart: -1,
+    selectionEnd: -1,
     count: true,
     fixed: false,
     height: '',
     textOverflowForbidden: true,
+    onLinechange: defaultFunc,
     onChange: defaultFunc,
     onFocus: defaultFunc,
     onBlur: defaultFunc,
@@ -37,10 +42,15 @@ export default class AtTextarea extends AtComponent {
     placeholder: PropTypes.string,
     disabled: PropTypes.bool,
     autoFocus: PropTypes.bool,
+    focus: PropTypes.bool,
+    showConfirmBar: PropTypes.bool,
+    selectionStart: PropTypes.number,
+    selectionEnd: PropTypes.number,
     count: PropTypes.bool,
     textOverflowForbidden: PropTypes.bool,
     fixed: PropTypes.bool,
     height: PropTypes.string,
+    onLinechange: PropTypes.func,
     onChange: PropTypes.func,
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
@@ -63,6 +73,10 @@ export default class AtTextarea extends AtComponent {
     this.props.onConfirm(e, ...arguments)
   }
 
+  handleLinechange (e) {
+    this.props.onLinechange(e, ...arguments)
+  }
+
   render () {
     const {
       style,
@@ -73,6 +87,10 @@ export default class AtTextarea extends AtComponent {
       count,
       disabled,
       autoFocus,
+      focus,
+      showConfirmBar,
+      selectionStart,
+      selectionEnd,
       fixed,
       textOverflowForbidden,
       height
@@ -90,17 +108,21 @@ export default class AtTextarea extends AtComponent {
         cursorSpacing={cursorSpacing}
         className='at-textarea__textarea'
         value={value}
-        showConfirmBar={false}
         confirmType='完成'
         maxlength={actualMaxlength}
         placeholder={placeholder}
         disabled={disabled}
         autoFocus={autoFocus}
+        focus={focus}
+        showConfirmBar={showConfirmBar}
+        selectionStart={selectionStart}
+        selectionEnd={selectionEnd}
         fixed={fixed}
         onInput={this.handleInput.bind(this)}
         onFocus={this.handleFocus.bind(this)}
         onBlur={this.handleBlur.bind(this)}
         onConfirm={this.handleConfirm.bind(this)}
+        onLinechange={this.handleLinechange.bind(this)}
       />
       {
         count