Fix/input

demo/pages/Input/index.axml

@@ -1,11 +1,12 @@
 <container title="基础用法">
-  <input placeholder="请输入内容" onChange="onChange"/>
+  <input placeholder="请输入内容" onChange="onChange" />
 </container>
 
-<container title="带有value">
+<container title="初始值">
   <input
     placeholder="请输入内容"
-    value="小程序"
+    defaultValue="这是antd mini小程序组件"
+    onChange="onChange"
   />
 </container>
 
@@ -17,18 +18,63 @@
   </input>
 </container>
 
+<container title="带有前缀后缀">
+  <input
+    placeholder="请输入内容"
+    onChange="onChange"
+    allowClear
+  >
+    <icon slot="prefix" type="SearchOutline" />
+  </input>
+</container>
+
+<container title="输入金额">
+  <input
+    placeholder="请输入金额"
+    onChange="onChange"
+    type="digit"
+    className="input money"
+    focusClassName="border"
+  >
+    <icon slot="prefix" type="PayOutline" />
+    <view slot="suffix">
+      RMB
+    </view>
+  </input>
+</container>
+
+<container title="搜索">
+  <input
+    placeholder="请输入内容"
+    onChange="onChange"
+    className="input"
+    focusClassName="border"
+    allowClear
+  >
+    <icon slot="prefix" type="SearchOutline" />
+    <icon slot="suffix" type="AudioOutline" />
+  </input>
+</container>
+
 <container title="禁用状态">
   <input
     placeholder="被禁用的输入框"
     disabled="{{true}}"
   />
 </container>
 
+<container title="控制focus、blur">
+  <input placeholder="请输入内容" ref="handleRef" />
+  <button onTap="focus" inline style="margin: 8px;">focus</button>
+  <button onTap="blur" inline>blur</button>
+</container>
+
 
-<container title="修改value">
+<container title="受控模式">
   <input
     value="{{value}}"
-    placeholder="请输入内容"
+    placeholder="请输入数字"
+    type="digit"
     allowClear
     onChange="handleChange"
     onClear="handleClear"

demo/pages/Input/index.js

@@ -6,6 +6,10 @@ Page({
     console.log(value, e);
   },
   handleChange(value) {
+    if (isNaN(Number(value))) {
+      return;
+    }
+    console.log(value);
     this.setData({
       value,
     });
@@ -14,5 +18,14 @@ Page({
     this.setData({
       value: '',
     });
-  }
+  },
+  handleRef(ref) {
+    this.input = ref;
+  },
+  focus() {
+    this.input.focus();
+  },
+  blur() {
+    this.input.blur();
+  },
 });

demo/pages/Input/index.json

@@ -2,6 +2,8 @@
   "defaultTitle": "Input",
   "usingComponents": {
     "input": "../../../src/Input/index",
+    "button": "../../../src/Button/index",
+    "icon": "../../../src/Icon/index",
     "container": "../../../src/Container/index"
   }
 }

demo/pages/Input/index.less

@@ -0,0 +1,16 @@
+@import "../../../src/style/themes/color.less";
+
+.input {
+  padding: 4px 0 4px 0;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  transition: all 1s;
+}
+
+.money {
+  width: 180px;
+}
+
+.border {
+  border-color: @COLOR_BRAND1;
+}

src/Icon/index.axml

@@ -1,4 +1,5 @@
 <text
   class="amd-icon amd-icon-{{type}} {{className ? className : ''}}"
-  style="{{size ? `fontSize: ${size}px;` : ''}}{{style || ''}}"
+  style="{{style}}"
+  onTap="onTap"
 />

src/Icon/index.less

@@ -9,7 +9,6 @@
   /* stylelint-disable font-family-no-missing-generic-family-keyword */
   font-family: antdmini-icon !important;
   font-style: normal;
-  font-size: 28 * @rpx;
   -webkit-font-smoothing: antialiased;
   line-height: @line-height-base;
 }

src/Icon/index.md

@@ -22,5 +22,4 @@ toc: 'content'
 | -----|:-----:|:-----:|:-----:|----- |
 | type | string | 是 | - | icon 图标的类型 |
 | className | string | 否 | - | 类名 |
-| size | number | 否 | - | 图标字体大小，单位px |
 | style | string | 否 | - | 整体样式 |

src/Icon/index.ts

@@ -1,6 +1,13 @@
 import { IconDefaultProps } from './props';
+import fmtEvent from '../_util/fmtEvent';
 
 Component({
   props: IconDefaultProps,
-  methods: {},
+  methods: {
+    onTap(e) {
+      if (this.props.onTap) {
+        this.props.onTap(fmtEvent(this.props, e));
+      }
+    },
+  },
 });

src/Icon/props.d.ts

@@ -10,5 +10,10 @@ export interface IIconProps<T = any> extends IBaseProps {
    * @default ""
    */
   type: string;
+
+  /**
+   * 点击图标
+   */
+  onTap?: (e: any) => void;
 }
 export declare const IconDefaultProps: Partial<IIconProps>;

src/Input/index.axml

@@ -1,21 +1,33 @@
 <import-sjs from="../_util/getValue.sjs" name="utils" />
 
-<view class="amd-input-item {{disabled ? 'amd-input-item-disabled' : ''}} {{className ? className : ''}}">
+<view class="amd-input-item 
+    {{disabled ? 'amd-input-item-disabled' : ''}}
+    {{className ? className : ''}}
+    {{utils.getValue(undefined, selfFocus, defaultFocus) ? (focusClassName ? focusClassName : '') : '' }}"
+  style="{{(style || '') + ';' + (focusStyle || '')}}"
+  onTap="onTap"
+>
+  <view class="amd-input-item-prefix">
+    <slot name="prefix">
+      {{prefix}}
+    </slot>
+  </view>
   <view class="amd-input-item-line">
     <view class="amd-input-item-layer">
-      <input 
+      <input
         enableNative="{{enableNative}}" 
-        class="amd-input-item-content {{inputClassName ? inputClassName : ''}}"
-        style="{{inputStyle}}" 
+        name="{{name}}"
+        controlled="{{typeof value !== 'undefined' && type && type !== 'text'}}"
+        class="amd-input-item-content"
         disabled="{{disabled}}" 
-        value="{{utils.getValue(value, selfValue)}}" 
+        value="{{utils.getValue(value, selfValue, defaultValue)}}" 
         type="{{type}}"
         password="{{password}}"
         placeholder="{{placeholder}}" 
         placeholder-class="amd-input-item-placeholder-base {{placeholderClass ? placeholderClass : ''}}" 
         placeholder-style="{{placeholderStyle ? placeholderStyle : ''}}" 
         maxlength="{{maxLength}}" 
-        focus="{{defaultFocus}}" 
+        focus="{{utils.getValue(undefined, selfFocus, defaultFocus)}}"
         confirm-type="{{confirmType}}" 
         confirm-hold="{{confirmHold}}" 
         cursor="{{cursor}}"
@@ -30,9 +42,14 @@
     </view>
     <view
       a:if="{{allowClear}}"
-      class="amd-input-item-clear {{utils.getValue(value, selfValue).length > 0 && utils.getValue(undefined, selfFocus, defaultFocus) ? 'show' : 'hidden'}}" 
+      class="amd-input-item-clear {{utils.getValue(value, selfValue, defaultValue).length > 0 && utils.getValue(undefined, selfFocus, defaultFocus) ? 'show' : 'hidden'}}" 
       onTap="onClear">
       <icon size="x-small" class="amd-input-item-clear-icon" type="CloseCircleFill" ></icon>
     </view>
   </view>
+  <view class="amd-input-item-suffix">
+    <slot name="suffix">
+      {{suffix}}
+    </slot>
+  </view>
 </view>

src/Input/index.less

@@ -15,6 +15,16 @@
     align-items: center;
     overflow: hidden;
   }
+  &-prefix {
+    color: @COLOR_TEXT_WEAK;
+    font-size: 34 * @rpx;
+    margin: 0 8 * @rpx 0 8 * @rpx;
+  }
+  &-suffix {
+    color: @COLOR_TEXT_WEAK;
+    font-size: 34 * @rpx;
+    margin: 0 8 * @rpx 0 8 * @rpx;
+  }
   &-extra {
     margin-right: 24 * @rpx;
     margin-left: 16 * @rpx;

src/Input/index.md

@@ -18,32 +18,57 @@ toc: 'content'
 <code src='../../demo/pages/Input'></code>
 
 
-## 属性
+# API
+## Input
 | 属性 | 说明 | 类型 | 默认值 |
 | -----|-----|-----|-----|
 | allowClear | 可以点击清除图标删除内容 | `boolean` | false |  
 | defaultFocus | 聚焦初始值值 | `boolean` | false | 
+| defaultValue | 始值值 | `boolean` | - | 
 | className | 类名| `string` | - |
-| confirmType | 设置键盘右下角按钮的文字，有效值：done（显示“完成”）、go（显示“前往”）、next（显示“下一个”）、search（显示“搜索”）、send（显示“发送”），平台不同显示的文字略有差异。注意：只有在 type=text 时有效 | 'done' &verbar; 'go' &verbar; 'next' &verbar; 'search' &verbar; 'send' | 'done' | 
-| cursor | 指定 focus 时的光标位置 | `number` | - | 
-| disabled | 是否禁用 | `boolean` | false | 
-| enableNative | 是否启用 Native 渲染，一般不需要使用[查看为什么需要](https://opendocs.alipay.com/mini/component/input#%E5%A6%82%E4%BD%95%E8%A7%A3%E5%86%B3%20input%20%E8%BE%93%E5%85%A5%E6%A1%86%E5%9C%A8%20iOS%20%E5%AE%A2%E6%88%B7%E7%AB%AF%E7%9A%84%E5%85%89%E6%A0%87%E6%BC%82%E7%A7%BB%E9%97%AE%E9%A2%98%EF%BC%9F) | `boolean` | - |
-| inputClassName | input 输入框的样式类名 | `string` | - | 
-| inputStyle | input 输入框的样式 | `string` | - | 
-| maxLength | 最大长度 | `number` | 140 | 
+| confirmType | type=text 时有效。设置键盘右下角按钮的文字 可选：`done`（完成）\| `go`（前往）\| `next`（下一个）\| `search`（搜索）\| `send`（显示“发送”）| `string` | - |
+| cursor | 指定 focus 时的光标位置 | `number` | - |
+| disabled | 是否禁用 | `boolean` | false |
+| enableNative | 是否启用 Native 渲染，一般不需要使用。[查看为什么需要](https://opendocs.alipay.com/mini/component/input#%E5%A6%82%E4%BD%95%E8%A7%A3%E5%86%B3%20input%20%E8%BE%93%E5%85%A5%E6%A1%86%E5%9C%A8%20iOS%20%E5%AE%A2%E6%88%B7%E7%AB%AF%E7%9A%84%E5%85%89%E6%A0%87%E6%BC%82%E7%A7%BB%E9%97%AE%E9%A2%98%EF%BC%9F) | `boolean` | - |
+| focusClassName | input 输入框focus的样式类名 | `string` | - |
+| focusStyle | input 输入框focus的样式 | `string` | - |
+| maxLength | 最大长度 | `number` | 140 |
+| name | 组件名字，用于表单获取数据 | `string` | - |
 | password | 是否是密码类型 | `boolean` | false |  |
 | placeholder | 占位符 | `string` | - |
 | placeholderClassName | 占位符类名 | `string` | - |
 | placeholderStyle | 占位符样式 | `string` | - |
 | style | 样式| `string` | - |
-| type | 输入框的类型 | 'text' &verbar; 'number' &verbar; 'idcard' &verbar; 'digit' &verbar; 'numberpad' &verbar; 'digitpad' &verbar; 'idcardpad' | 'text'|
-| value | 输入框的值 | `string` | - | 
+| type | 输入框的类型，可选 `text` \| `number` \| `idcard` \| `digit` \| `numberpad` \| `digitpad` \| `idcardpad` | `text` | `string` | `test` |
+| value | 输入框的值。 | `string` | - | 
 | onConfirm | 	点击键盘完成时触发此回调 | (event: `Event` => void | - |
 | onClear | 清除输入内容时触发此回调 | (event: `Event`) => void | - |
 | onFocus | 聚焦时触发触发此回调 | (event: `Event`) => void | - |
 | onBlur | 失焦时触发此回调 | (event: `Event`) => void | - |
 | onChange | 输入时触发此回调 | (value: `string`, event: `Event`) => void | - |
 
+## Input Methods
+注意，使用这个方法需要在 `mini.project.json` 开启 `component2: true`。
+```html
+<input ref="handleRef" />
+<button onTap="focus">focus</button>
+<button onTap="blur">blur</button>
+```
+```js
+Page({
+  handleRef(ref) {
+    this.input = ref;
+  },
+  focus() {
+    this.input.focus();
+  },
+  blur() {
+    this.input.blur();
+  }
+})
+```
 
-
-
+| 方法 | 说明 | 类型 |
+| -----|-----|-----|
+| focus | 获取焦点 | () => void | - |
+| blue | 取消焦点 | () => void | - |