Fix/input

demo/app.json

@@ -29,7 +29,7 @@
     "pages/DatePicker/index",
     "pages/Input/index",
     "pages/InputSearchBar/index",
-    "pages/InputBase/index",
+    "pages/InputTextarea/index",
     "pages/Badge/index",
     "pages/Button/index",
     "pages/ButtonInline/index",

demo/pages/Form/index.axml

@@ -94,6 +94,15 @@
   ref="handleRef"
 />
 
+<form-textarea
+  label="说明"
+  name="description"
+  placeholder="请输入说明"
+  allowClear
+  autoHeight
+  ref="handleRef"
+/>
+
 <form-rate
   label="评分"
   name="rate"

demo/pages/Form/index.json

@@ -14,6 +14,7 @@
     "form-selector": "../../../src/Form/FormSelector/index",
     "form-upload-image": "../../../src/Form/FormImageUpload/index",
     "form-rate": "../../../src/Form/FormRate/index",
+    "form-textarea": "../../../src/Form/FormTextarea/index",
     "button": "../../../src/Button/index"
   }
 }

demo/pages/Form/index.less

@@ -4,3 +4,7 @@
   background: @COLOR_CARD;
   padding: 12px 12px 48px 12px;
 }
+
+textarea {
+  min-height: 100px;
+}

demo/pages/Input/index.axml

@@ -63,3 +63,16 @@
     <view slot="suffix">RMB</view>
   </input>
 </container>
+
+<container title="非受控模式通过ref修改input">
+  <input
+    placeholder="请输入内容"
+    onChange="onChange"
+    ref="handleRef"
+  />
+
+  <view>
+    <button inline onTap="clearByInputRef">clear</button>
+  </view>
+</container>
+

demo/pages/Input/index.js

@@ -25,4 +25,10 @@ Page({
       value: '',
     });
   },
+  handleRef(input) {
+    this.input = input;
+  },
+  clearByInputRef() {
+    this.input.update('');
+  }
 });

demo/pages/Input/index.less

@@ -9,7 +9,6 @@
 
 .money {
   width: 180px;
-  margin-bottom: 80px;
 }
 
 .border {

demo/pages/InputTextarea/index.axml

@@ -0,0 +1,56 @@
+<container title="基础用法">
+  <textarea
+    placeholder="请输入内容"
+    autoHeight
+    onChange="onChange"
+  />
+</container>
+
+<container title="初始值">
+  <textarea
+    placeholder="请输入内容"
+    defaultValue="这是antd mini小程序组件"
+    autoHeight
+    onChange="onChange"
+  />
+</container>
+
+<container title="带清除按钮">
+  <textarea
+    placeholder="请输入内容"
+    autoHeight
+    allowClear
+  >
+  </textarea>
+</container>
+
+<container title="禁用状态">
+  <textarea
+    placeholder="被禁用的输入框"
+    disabled
+  />
+</container>
+
+<container title="受控模式">
+  <textarea
+    value="{{value}}"
+    placeholder="请输入内容"
+    allowClear
+    onChange="handleChange"
+    onClear="clear"
+  />
+  <button onTap="clear" inline size="small">clear</button>
+</container>
+
+<container title="非受控模式通过ref修改input">
+  <textarea
+    placeholder="请输入内容"
+    allowClear
+    onChange="onChange"
+    ref="handleRef"
+  />
+  <view>
+    <button inline onTap="clearByInputRef">clear</button>
+  </view>
+</container>
+

demo/pages/InputBase/index.js → demo/pages/InputTextarea/index.js

@@ -1,13 +1,25 @@
 Page({
   data: {
-    value: undefined,
-    focus: false,
+    value: '',
+    money: '',
   },
-  randomValue() {
+  onChange(value, e) {
+    console.log(value, e);
+  },
+  handleChange(value) {
     this.setData({
-      value: Math.random(),
+      value,
     });
   },
+  handleMoney(value) {
+    console.log(value);
+    if (isNaN(Number(value))) {
+      return;
+    }
+    this.setData({
+      money: value,
+    })
+  },
   clear() {
     this.setData({
       value: '',
@@ -16,19 +28,6 @@ Page({
   handleRef(input) {
     this.input = input;
   },
-  onChange(value) {
-    // setTimeout(() => {})
-    // this.input.update(value + '1');
-    console.log(value);
-  },
-  handleChange(value) {
-    console.log(value);
-    if (!isNaN(Number(value))) {
-      this.setData({
-        value,
-      });
-    }
-  },
   clearByInputRef() {
     this.input.update('');
   }

demo/pages/InputTextarea/index.json

@@ -0,0 +1,8 @@
+{
+  "defaultTitle": "Input",
+  "usingComponents": {
+    "textarea": "../../../src/Input/Textarea/index",
+    "button": "../../../src/Button/index",
+    "container": "../../../src/Container/index"
+  }
+}

demo/pages/InputTextarea/index.less

@@ -0,0 +1,9 @@
+@import "../../../src/style/themes/color.less";
+
+textarea {
+  min-height: 100px;
+}
+
+button {
+  margin-top: 8px;
+}

src/Form/FormInput/index.axml

@@ -1,5 +1,3 @@
-<import-sjs from="./index.sjs" name="utils" />
-
 <form-item
   className="{{className}}"
   position="{{position}}"
@@ -16,8 +14,6 @@
     ref="handleRef"
     allowClear="{{allowClear}}"
     enableNative="{{enableNative}}"
-    className="{{inputClassName}}"
-    style="{{inputStyle}}"
     disabled="{{disabled}}"
     type="{{type}}"
     password="{{password}}"
@@ -35,7 +31,6 @@
     onBlur="onBlur"
     onFocus="onFocus"
     onConfirm="onConfirm"
-    onClear="onClear"
   />
   <view slot="extra">
     <slot name="extra">

src/Form/FormInput/index.less

@@ -1,85 +0,0 @@
-@import (reference) "./variable.less";
-
-@inputItemPrefix: ant-input-item;
-.@{inputItemPrefix} {
-  display: flex;
-  align-items: center;
-  background: @COLOR_CARD;
-  // &-disabled {
-  //   opacity: 0.4;
-  // }
-  &-line {
-    position: relative;
-    flex: 1;
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-  }
-  &-extra {
-    margin-right: 24 * @rpx;
-    margin-left: 16 * @rpx;
-    &:empty {
-      display: none;
-    }
-  }
-  &-layer {
-    display: flex;
-    flex: 1;
-    &-vertical {
-      flex-direction: column;
-      .ant-input-item-label {
-        align-self: flex-start;
-        font-size: 30 * @rpx;
-        color: red;
-      }
-      .a-input-placeholder {
-        margin-left: -6 * @rpx;
-      }
-      .@{inputItemPrefix}-content {
-        align-self: stretch;
-        color: #333;
-        font-size: 30 * @rpx;
-      }
-    }
-  }
-  &-content {
-    flex: 1;
-    display: flex;
-    align-self: center;
-    padding: 0;
-    font-size: 34 * @rpx;
-    text-align: left;
-    color: @input-item-color;
-    background: @COLOR_CARD;
-    .a-input-placeholder {
-      font-size: 34 * @rpx;
-      color: @input-item-placeholder-color;
-    }
-  }
-
-  &-content .a-input-wrap {
-    flex: 1;
-  }
-
-  &-clear {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 16 * @rpx;
-    &-icon {
-      color: @COLOR_TEXT_WEAK;
-      font-size: 34 * @rpx;
-    }
-  }
-
-  &-clear.show {
-    visibility: visible;
-  }
-  &-clear.hidden {
-    visibility: hidden;
-    pointer-events: none;
-  }
-  &-placeholder-base {
-    color: @input-item-placeholder-color;
-  }
-}