From 95c9fea1f7b9c0802346a7c5064f97e60b0e46ab Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Thu, 19 Sep 2019 11:17:16 +0800
Subject: [PATCH] feat(Search): add action-text prop (#4501)

---
 src/search/README.md                            | 13 +++++++------
 src/search/README.zh-CN.md                      |  5 +++--
 src/search/demo/index.vue                       |  2 +-
 src/search/index.tsx                            |  8 +++++++-
 .../test/__snapshots__/index.spec.js.snap       | 17 +++++++++++++++++
 src/search/test/index.spec.js                   | 11 +++++++++++
 6 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/src/search/README.md b/src/search/README.md
index b68793134..6c9e751e0 100644
--- a/src/search/README.md
+++ b/src/search/README.md
@@ -43,7 +43,7 @@ export default {
 
 > Tips: There will be a search button on the keyboard when Search is inside a form in iOS.
 
-### Custom Button
+### Custom Action Button
 
 Use `action` slot to custom right button, `cancel` event will no longer be triggered when use this slot
 
@@ -66,15 +66,16 @@ Search support all native properties of input tag，such as `maxlength`、`place
 
 | Attribute | Description | Type | Default | Version |
 |------|------|------|------|------|
-| label | Search label | *string* | - | - |
-| shape | Shape of input, can be set to `round` | *string* | `square` | - |
-| background | Background color | *string* | `#f2f2f2` | - |
+| label | Left side label | *string* | - | - |
+| shape | Shape of field, can be set to `round` | *string* | `square` | - |
+| background | Background color of field | *string* | `#f2f2f2` | - |
 | clearable | Whether to be clearable | *boolean* | `true` | - |
-| show-action | Whether to show right button | *boolean* | `false` | - |
+| show-action | Whether to show right action button | *boolean* | `false` | - |
+| action-text | Text of action button | *boolean* | `Cancel` | 2.2.2 |
 | disabled | Whether to disable field | *boolean* | `false` | - |
 | readonly | Whether to be readonly | *boolean* | `false` | - |
 | error | Whether to show error info | *boolean* | `false` | - |
-| input-align | Input text align, can be set to `center` `right` | *string* | `left` | - |
+| input-align | Text align of field, can be set to `center` `right` | *string* | `left` | - |
 | left-icon | Left icon name | *string* | `search` | - |
 | right-icon | Right icon name | *string* | - | - |
 
diff --git a/src/search/README.zh-CN.md b/src/search/README.zh-CN.md
index 55c8cea1e..e62c42708 100644
--- a/src/search/README.zh-CN.md
+++ b/src/search/README.zh-CN.md
@@ -13,7 +13,7 @@ Vue.use(Search);
 
 ### 基础用法
 
-v-model 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。
+v-model 用于控制搜索框中的文字，background 可以自定义搜索框外部背景色
 
 ```html
 <van-search placeholder="请输入搜索关键词" v-model="value" />
@@ -39,7 +39,7 @@ Search 组件提供了`search`和`cancel`事件，`search`事件在点击键盘
 
 ### 自定义按钮
 
-`van-search` 支持自定义右侧取消按钮，使用名字为 action 的插槽即可。使用此插槽以后，原有的 cancel 事件不再生效。
+使用`action`插槽可以自定义右侧按钮的内容。使用插槽后，cancel 事件将不再触发
 
 ```html
 <van-search
@@ -66,6 +66,7 @@ Search 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`pl
 | background | 搜索框背景色 | *string* | `#f2f2f2` | - |
 | clearable | 是否启用清除控件 | *boolean* | `true` | - |
 | show-action | 是否在搜索框右侧显示取消按钮 | *boolean* | `false` | - |
+| action-text | 取消按钮文字 | *boolean* | `取消` | 2.2.2 |
 | disabled | 是否禁用输入框 | *boolean* | `false` | - |
 | readonly | 是否将输入框设为只读 | *boolean* | `false` | - |
 | error | 是否将输入内容标红 | *boolean* | `false` | - |
diff --git a/src/search/demo/index.vue b/src/search/demo/index.vue
index 5088d01ad..b64350f32 100644
--- a/src/search/demo/index.vue
+++ b/src/search/demo/index.vue
@@ -45,7 +45,7 @@ export default {
     'en-US': {
       label: 'Address',
       placeholder: 'Placeholder',
-      customButton: 'Custom Button',
+      customButton: 'Custom Action Button',
       listenToEvents: 'Listen to Events'
     }
   },
diff --git a/src/search/index.tsx b/src/search/index.tsx
index c966ab09b..eda6a05de 100644
--- a/src/search/index.tsx
+++ b/src/search/index.tsx
@@ -17,6 +17,7 @@ export type SearchProps = {
   rightIcon?: string;
   clearable: boolean;
   background: string;
+  actionText?: string;
   showAction?: boolean;
 };
 
@@ -58,7 +59,11 @@ function Search(
 
     return (
       <div class={bem('action')}>
-        {slots.action ? slots.action() : <div onClick={onCancel}>{t('cancel')}</div>}
+        {slots.action ? (
+          slots.action()
+        ) : (
+          <div onClick={onCancel}>{props.actionText || t('cancel')}</div>
+        )}
       </div>
     );
   }
@@ -112,6 +117,7 @@ Search.props = {
   value: String,
   label: String,
   rightIcon: String,
+  actionText: String,
   showAction: Boolean,
   shape: {
     type: String,
diff --git a/src/search/test/__snapshots__/index.spec.js.snap b/src/search/test/__snapshots__/index.spec.js.snap
index 5f1f82db8..7d722b2c2 100644
--- a/src/search/test/__snapshots__/index.spec.js.snap
+++ b/src/search/test/__snapshots__/index.spec.js.snap
@@ -1,5 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`action-text prop 1`] = `
+<div class="van-search van-search--show-action" style="background: rgb(255, 255, 255);">
+  <div class="van-search__content van-search__content--square">
+    <div class="van-cell van-cell--borderless van-field">
+      <div class="van-field__left-icon"><i class="van-icon van-icon-search">
+          <!----></i></div>
+      <div class="van-cell__value van-cell__value--alone">
+        <div class="van-field__body"><input type="search" class="van-field__control"></div>
+      </div>
+    </div>
+  </div>
+  <div class="van-search__action">
+    <div>Custom Text</div>
+  </div>
+</div>
+`;
+
 exports[`label slot 1`] = `
 <div class="van-search" style="background: rgb(255, 255, 255);">
   <div class="van-search__content van-search__content--square">
diff --git a/src/search/test/index.spec.js b/src/search/test/index.spec.js
index f700bf0b6..3693a8427 100644
--- a/src/search/test/index.spec.js
+++ b/src/search/test/index.spec.js
@@ -104,3 +104,14 @@ test('right-icon slot', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('action-text prop', () => {
+  const wrapper = mount(Search, {
+    propsData: {
+      actionText: 'Custom Text',
+      showAction: true
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});