feat(search-bar): 支持不同type input搜索

ant-design · Apr 27, 2022 · 9124f7f · 9124f7f
1 parent ec9aef7
commit 9124f7f
Show file tree

Hide file tree

Showing 7 changed files with 120 additions and 66 deletions.
diff --git a/demo/pages/SearchBar/index.axml b/demo/pages/SearchBar/index.axml
@@ -35,4 +35,12 @@
       onClear="handleVoiceClear"
       onBizIconTap="handleTapVoice"/>
   </demo-block>
+  <demo-block title="支持唤起数字键盘" background="#f5f5f5" padding="0">
+    <search-bar 
+      placeholder="请输入内容" 
+      value="{{numberValue}}" 
+      type="number"
+      onInput="handleNumberInput" 
+      onClear="handleNumberClear"/>
+  </demo-block>
 </view>
diff --git a/demo/pages/SearchBar/index.js b/demo/pages/SearchBar/index.js
@@ -6,6 +6,7 @@ Page({
     basicValue: '',
     withCancelValue: '',
     voiceValue: '',
+    numberValue: '',
     focusWithCancelValue: '',
     focusWithCancelFocus: false,
   },
@@ -50,4 +51,10 @@ Page({
   handleFocusCancelWithBlur() {
     this.setData({ focusWithCancelFocus: false });
   },
+  handleNumberInput(value) {
+    this.setData({ numberValue: value });
+  },
+  handleNumberClear() {
+    this.setData({ numberValue: '' });
+  },
 });
diff --git a/scripts/docs/src/markdown/const/index.ts b/scripts/docs/src/markdown/const/index.ts
@@ -9,14 +9,13 @@ export const CLASS_TABLE_PREFIX = `| 类名 | 说明 |\n| -----|----- |\n`;
 export const CSS_VAR_TABLE_PREFIX = `| CSS 变量名称 | 说明 |\n| -----|----- |\n`;
 export const EXCLUED_DIR = ['.umi', 'Avatar', 'Badge',
     'Button', 'Checkbox', 'CheckboxGroup',
-    'Collapse', 'Container', 'Dialog',
-    'Filter', 'Form', 'Icon',
-    'ImageIcon', 'InputItem', 'List',
+    'Checklist', 'Collapse', 'Container', 'Dialog',
+    'Empty', 'Filter', 'Form', 'Icon',
+    'ImageIcon', 'InputItem', 'List', 'Loading',
     'Mask', 'Modal', 'NoticeBar', 'Picker',
     'Popover', 'Popup', 'RadioGroup',
-    'Result', 'SafeArea', 'SearchBar',
-    'Selector', 'Stepper', 'Steps',
-    'SwipeAction', 'Switch', 'Tabs',
+    'Result', 'SafeArea', 'Selector', 'Stepper',
+    'Steps', 'SwipeAction', 'Switch', 'Tabs',
     'Tag', 'TapModal', 'Terms',
     'Tips', 'VTabs', '_base',
     '_util', 'mixins', 'style']

diff --git a/src/SearchBar/index.axml b/src/SearchBar/index.axml
@@ -7,7 +7,7 @@
         size="x-small" />
     </view>
     <input class="amd-search-bar-value"
-      type="text"
+      type="{{type}}"
       confirm-type="search"
       id="{{id}}"
       name="{{name}}"

diff --git a/src/SearchBar/index.md b/src/SearchBar/index.md
@@ -10,7 +10,7 @@ toc: false
 # SearchBar 搜索框
 搜索场景的输入框组件
 ## 何时使用
-搜索场景的输入框组件	在信息池中缩小范围，快速而轻松地获取目标信息
+搜索场景的输入框组件    在信息池中缩小范围，快速而轻松地获取目标信息
 
 ## 注意事项
 
@@ -21,49 +21,66 @@ toc: false
 ### 基本使用
 <code src='../../demo/pages/SearchBar'></code>
 
+## 属性 
+
 
-## 属性
 | 属性 | 类型 | 必填 | 默认值 | 说明 |
 | -----|-----|-----|-----|----- |
+| bizIconType | string | 否 | 'AudioFill' | 辅助图标类型 |
+| cancelText | string | 否 | "取消" | 取消按钮文案 |
 | controlled | boolean | 否 | false | 是否受控模式 |
-| borderColor | string | '' | false | 输入框边框颜色 |
-| enableNative | boolean | 否 | - | 是否启用 Native 渲染 |
-| value | string | 否 | - | 搜索框的值 |
+| enableNative | boolean | 否 | false | 是否启用 Native 渲染 |
+| maxLength | number | 否 | - | 最大长度 |
 | placeholder | string | 否 | - | 提示文字 |
+| showBizIcon | boolean | 否 | false | 是否展示辅助图标 |
 | showCancelButton | boolean | 否 | false | 是否显示取消按钮 |
-| cancelText | string | 否 | '取消' | 取消按钮文案 |
-| maxLength | number | 否 | - | 最大长度 |
-| showBizIcon | boolean | 否 | false | 是否展示额外图标 |
-| bizIconType | string | 否 | 'AudioFill' | 额外图标类型 |
+| showVoice | boolean | 否 | false | 是否展示语音图标 |
+| type | 'text' &verbar; 'number' &verbar; 'idcard' &verbar; 'digit' &verbar; 'numberpad' &verbar; 'digitpad' &verbar; 'idcardpad' | 否 | 'text' | 搜索框的类型 |
+| value | string | 否 | - | 搜索框的值 |
 | autoFocus | boolean | 否 | false | 自动聚焦，ios 可能会失效 |
-| id | string | 否 | - | 表单元素 id |
+| id | string |  | 否 | 表单元素 id |
 | name | string | 否 | - | 表单元素 name |
 | disabled | boolean | 否 | false | 是否禁用 |
 | className | string | 否 | - | 类名 |
 
-## 事件
+## 事件 
+
+
 | 事件名 | 说明 | 类型 |
-| -----|-----|-----|
-| onVoiceTap | 点击话筒图标，触发此回调 | () => void |
-| onInput | 监听输入框输入动作，触发此回调 | ( v: string ) => void |
-| onSubmit | input 组件的 onConfirm 事件 | ( v: string ) => void |
-| onCancel | 点击最右侧取消按钮，触发此回调 | ( v: string ) => void |
-| onClear | 点击清除图标，触发此回调 | ( v: string ) => void |
-| onFocus | 输入框对焦，触发此回调 | ( v: string ) => void |
-| onBlur | 输入框失焦，触发此回调 | ( v: string ) => void |
-| onChange | 输入文本，触发此回调 | ( v: string ) => void |
-| onBizIconTap | 点击辅助图标，触发此回调 | ( ) => void |
-
-## 样式类
+| -----|-----|----- |
+| onBizIconTap | 点击语音图标回调 | () => void |
+| onCancel | 点击取消回调 | (v: string) => void |
+| onClear | 点击删除回调 | (v: string) => void |
+| onInput | input 输入回调 | (v: string) => void |
+| onSubmit | submit 回调 | (v: string) => void |
+| onVoiceTap | 点击语音图标回调 | () => void |
+| onFocus | 聚焦时触发回调 | (v: string) => void |
+| onBlur | 失去焦点时触发回调 | (v: string) => void |
+| onChange | 表单触发变更回调 | (v: any) => void |
+
+## 样式类 
+
 | 类名 | 说明 |
-| -----|-----|
+| -----|----- |
 | amd-search-bar | 整体样式 |
+| amd-search-bar-focus | 获取焦点时整体样式 |
 | amd-search-bar-input | 内部输入框样式 |
+| amd-search-bar-input-focus | 获取焦点时输入框样式 |
 | amd-search-bar-synthetic | search 图标样式 |
 | amd-search-bar-synthetic-icon | search 图标样式 |
 | amd-search-bar-value | input 组件样式 |
 | amd-search-bar-clear-icon | 清除图标样式 |
 | amd-search-bar-biz-icon | 额外图标样式 |
+| amd-search-bar-cancel-container | 取消按钮样式 |
+| amd-search-bar-cancel-container-show |  取消按钮样式 |
+| amd-search-bar-cancel | 取消按钮样式 |
+
+## CSS 变量 
+
+| CSS 变量名称 | 说明 |
+| -----|----- |
+| --am-color-brand-1 | 输入光标颜色 |
+
 
 <style> 
 table th:first-of-type { width: 180px; } 

diff --git a/src/SearchBar/props.d.ts b/src/SearchBar/props.d.ts
@@ -5,77 +5,99 @@ import { IBaseFormItemProps } from '../_base';
 
 export interface ISearchBarProps extends IBaseFormItemProps<string> {
   /**
-   * @description 搜索框的值
-   */
-  value?: string;
-  /**
-   * @description 提示文字
+   * @description 辅助图标类型
+   * @default 'AudioFill'
    */
-  placeholder?: string;
+  bizIconType: string;
+
   /**
-   * @description submit 回调
+   * @description 取消按钮文案
+   * @default "取消"
    */
-  onSubmit?: (v: string) => void;
+  cancelText?: string;
+
   /**
-   * @description 点击取消回调
+   * @description 是否受控模式
+   * @default false
    */
-  onCancel?: (v: string) => void;
+  controlled?: boolean;
+
   /**
-   * @description 点击删除回调
+   * @description 是否启用 Native 渲染
+   * @default false
    */
-  onClear?: (v: string) => void;
+  enableNative?: boolean;
+
   /**
-   * @description 是否显示取消按钮
-   * @default false
+   * @description 最大长度
    */
-  showCancelButton?: boolean;
+  maxLength?: number;
+
   /**
-   * @description 取消按钮文案
-   * @default "取消"
+   * @description 提示文字
    */
-  cancelText?: string;
+  placeholder?: string;
+
   /**
-   * @description 最大长度
+   * @description 是否展示辅助图标
+   * @default false
    */
-  maxLength?: number;
+  showBizIcon?: boolean;
+
   /**
-   * @description 辅助图标类型
-   * @default AudioFill
+   * @description 是否显示取消按钮
+   * @default false
    */
-  bizIconType: string;
+  showCancelButton?: boolean;
+
   /**
    * @deprecated
    * @description 是否展示语音图标
    * @default false
    */
   showVoice?: boolean;
+
   /**
-   * @description 是否展示辅助图标
-   * @default false
+   * @description 搜索框的类型
+   * @default 'text'
    */
-  showBizIcon?: boolean;
+  type: 'text' | 'number' | 'idcard' | 'digit' | 'numberpad' | 'digitpad' | 'idcardpad'
+
   /**
-   * @description 是否受控模式
-   * @default false
+   * @description 搜索框的值
    */
-  controlled?: boolean;
+  value?: string;
+
   /**
    * @deprecated
    * @description 点击语音图标回调
    */
-  onVoiceTap?: () => void;
+  onBizIconTap?: () => void;
+
   /**
-   * @deprecated
-   * @description 点击语音图标回调
+   * @description 点击取消回调
    */
-  onBizIconTap?: () => void;
+  onCancel?: (v: string) => void;
+  /**
+   * @description 点击删除回调
+   */
+  onClear?: (v: string) => void;
+
   /**
    * @description input 输入回调
    */
   onInput?: (v: string) => void;
+
   /**
-   * @description 是否启用 Native 渲染
+   * @description submit 回调
    */
-  enableNative?: boolean;
+  onSubmit?: (v: string) => void;
+
+  /**
+   * @deprecated
+   * @description 点击语音图标回调
+   */
+  onVoiceTap?: () => void;
 }
+
 export declare const SearchBarDefaultProps: Partial<ISearchBarProps>;
diff --git a/src/SearchBar/props.js b/src/SearchBar/props.js
@@ -7,4 +7,5 @@ export const SearchBarDefaultProps = {
   autoFocus: false,
   disabled: false,
   bizIconType: 'AudioOutline',
+  type: 'text',
 };