feat: 新增 searchbar 组件 (#186)

src/config.json

@@ -414,6 +414,16 @@
           "show": true,
           "author": "swag~jun"
         },
+        {
+          "version": "1.0.0",
+          "name": "SearchBar",
+          "type": "component",
+          "cName": "搜索栏",
+          "desc": "用于搜索场景的输入框组件",
+          "sort": 16,
+          "show": true,
+          "author": "Ymm0008"
+        },
         {
           "version": "1.0.0",
           "name": "NumberKeyboard",

src/locales/base.ts

@@ -31,6 +31,7 @@ export interface BaseLang {
     end: string
     start: string
     title: string
+    // eslint-disable-next-line @typescript-eslint/ban-types
     monthTitle: Function
     today: string
     loadPreviousMonth: string
@@ -86,7 +87,20 @@ export interface BaseLang {
   }
   comment: {
     complaintsText: string
+    // eslint-disable-next-line @typescript-eslint/ban-types
     additionalReview: Function
+    // eslint-disable-next-line @typescript-eslint/ban-types
     additionalImages: Function
   }
+  searchbar: {
+    basePlaceholder: string
+    text: string
+    test: string
+    title1: string
+    title2: string
+    title3: string
+    title4: string
+    title5: string
+    title6: string
+  }
 }

src/locales/en-US.ts

@@ -90,5 +90,16 @@ const enUS: BaseLang = {
     additionalImages: (length: number) =>
       `There are ${length} follow-up comments`,
   },
+  searchbar: {
+    basePlaceholder: 'Go to jd.com and buy good things',
+    text: 'text',
+    test: 'test',
+    title1: 'basic usage',
+    title2: 'search box shape and maximum length',
+    title3: 'background settings inside and outside the search box',
+    title4: 'search box text settings',
+    title5: 'custom icon settings',
+    title6: 'data change monitoring',
+  },
 }
 export default enUS

src/locales/id-ID.ts

@@ -90,5 +90,16 @@ const idID: BaseLang = {
       `Ulas setelah ${day} hari dari pembelian`,
     additionalImages: (length: number) => `Terdapat ${length} komentar lainnya`,
   },
+  searchbar: {
+    basePlaceholder: 'pergi ke jd.com, membeli barang baik',
+    text: 'teks',
+    test: 'tes',
+    title1: 'penggunaan dasar',
+    title2: 'bentuk kotak pencarian dan panjang maksimum',
+    title3: 'pengaturan latar belakang di dalam dan diluar kotak pencarian',
+    title4: 'tetapan teks kotak pencarian',
+    title5: 'pengaturan ikon suai',
+    title6: 'Monitor perubahan data',
+  },
 }
 export default idID

src/locales/zh-CN.ts

@@ -91,5 +91,16 @@ const zhCN: BaseLang = {
     additionalReview: (day: number) => `购买${day}天后追评`,
     additionalImages: (length: number) => `${length}张追评图片`,
   },
+  searchbar: {
+    basePlaceholder: '上京东，购好物',
+    text: '文本',
+    test: '测试',
+    title1: '基础用法',
+    title2: '搜索框形状及最大长度',
+    title3: '搜索框内外背景设置',
+    title4: '搜索框文本设置',
+    title5: '自定义图标设置',
+    title6: '数据改变监听',
+  },
 }
 export default zhCN

src/locales/zh-TW.ts

@@ -89,5 +89,16 @@ const zhTW: BaseLang = {
     additionalReview: (day: number) => `購買${day}天後追評`,
     additionalImages: (length: number) => `${length}張追評圖片`,
   },
+  searchbar: {
+    basePlaceholder: '上京東，購好物',
+    text: '文字',
+    test: '測試',
+    title1: '基礎用法',
+    title2: '蒐索框形狀及最大長度',
+    title3: '蒐索框內外背景設定',
+    title4: '蒐索框文字設定',
+    title5: '自定義圖標設定',
+    title6: '數據改變監聽',
+  },
 }
 export default zhTW

src/packages/layout/demo.scss

@@ -3,25 +3,6 @@
   margin-bottom: 20px;
   padding: 20px 0;
 }
-.demo .nut-row {
-  overflow: hidden;
-  &:not(:last-child) .nut-col {
-    margin-bottom: 15px;
-  }
-}
-.flex-content {
-  line-height: 40px;
-  color: #fff;
-  text-align: center;
-  border-radius: 6px;
-  background: #ff8881;
-  &.flex-content-light {
-    background: #ffc7c4;
-  }
-  &.flex-content-height {
-    height: 50px;
-  }
-}
 .demo {
   padding-left: 0px !important;
   padding-right: 0px !important;

src/packages/searchbar/demo.tsx

+import React, { useState } from 'react'
+import Icon from '../icon'
+import { SearchBar } from './searchbar'
+import { useConfig } from '@/packages/configprovider'
+
+const SearchBarDemo = () => {
+  const { locale } = useConfig()
+
+  const [value, setValue] = useState('')
+  const change = (val: string, e: Event) => {
+    setValue(val)
+  }
+  return (
+    <>
+      <div className="demo">
+        <h2>{locale.searchbar.title1}</h2>
+        <SearchBar placeholder={locale.searchbar.basePlaceholder} />
+        <h2>{locale.searchbar.title2}</h2>
+        <SearchBar shape="round" maxLength={5} />
+        <h2>{locale.searchbar.title3}</h2>
+        <SearchBar
+          background="linear-gradient(to right, #9866F0, #EB4D50)"
+          inputBackground="#999"
+          align="right"
+        />
+        <h2>{locale.searchbar.title4}</h2>
+        <SearchBar
+          label={locale.searchbar.text}
+          actionText={locale.searchbar.test}
+        />
+        <h2>{locale.searchbar.title5}</h2>
+        <SearchBar
+          leftoutIcon={<Icon name="heart-fill1" size="14" />}
+          rightoutIcon={<Icon name="star-fill" size="14" />}
+        />
+        <h2>{locale.searchbar.title6}</h2>
+        <SearchBar
+          onChange={(val: string, e: Event) => change(val, e)}
+          maxLength={10}
+        />
+        <span className="val-text">value：{value}</span>
+      </div>
+    </>
+  )
+}
+
+export default SearchBarDemo

src/packages/searchbar/doc.en-US.md

+#  SearchBar
+
+### introduce
+
+The input box component used to search the scene.
+
+### Install
+
+```javascript
+import { SearchBar } from '@nutui/nutui-react';
+
+```
+
+## Code demonstration
+
+### Basic usage
+
+`SearchBar`'s `placeholder` 'attribute supports customization.
+
+:::demo
+```tsx
+import React from "react";
+import { SearchBar } from '@nutui/nutui-react';
+
+const App = () => {
+  return <>
+    <SearchBar placeholder="Go to jd.com and buy good things" />
+  </>
+}
+export default App;
+```
+:::
+
+### Search box shape and maximum length
+
+`SearchBar`'s `round` Attribute supports defining fillet right angles，`maxLength` Can control the maximum length of input characters。
+
+:::demo
+```tsx
+import React from "react";
+import { SearchBar } from '@nutui/nutui-react';
+
+const App = () => {
+  return <>
+    <SearchBar shape="round" maxLength={5} />
+  </>
+}
+export default App;
+```
+:::
+
+
+### Background settings inside and outside the search box
+
+`SearchBar`'s `background` Property to set the background color outside the search box，`inputBackground` Property to set the background color of the search box，`align` Set text alignment
+
+:::demo
+```tsx
+import React from "react";
+import { SearchBar } from '@nutui/nutui-react';
+
+const App = () => {
+  return <>
+    <SearchBar
+      background="linear-gradient(to right, #9866F0, #EB4D50)"
+      inputBackground="#999"
+      align="right"
+    />
+  </>
+}
+export default App;
+```
+:::
+
+### Search box text settings
+
+`SearchBar`’s `label` Property to set the text on the left side of the search box，`actionText` Property to set the Cancel button text
+
+:::demo
+```tsx
+import React from "react";
+import { SearchBar } from '@nutui/nutui-react';
+
+const App = () => {
+  return <>
+    <SearchBar label="text" actionText="test" />
+  </>
+}
+export default App;
+
+```
+:::
+
+
+### Customize icon settings
+
+`SearchBar`'s `leftoutIcon` `rightoutIcon` Property can set the left and right icons or customize the content
+
+:::demo
+```tsx
+import React from "react";
+import { SearchBar, Icon } from '@nutui/nutui-react';
+
+const App = () => {
+  return <>
+    <SearchBar
+      leftoutIcon={<Icon name="heart-fill1" size="14" />}
+      rightoutIcon={<Icon name="star-fill" size="14" />}
+    />
+  </>
+}
+export default App;
+
+```
+:::
+
+
+
+### Data change monitoring
+
+`SearchBar`'s `change` You can get the input content.
+
+:::demo
+```tsx
+import React, { useState } from 'react'
+import { SearchBar } from '@nutui/nutui-react';
+
+const App = () => {
+  const [value, setValue] = useState('')
+  const change = (val: string, e: Event) => {
+    setValue(val)
+  }
+  return <>
+    <SearchBar
+      change={(val: string, e: Event) => change(val, e)}
+      maxLength={10}
+    />
+    value：{value}
+  </>
+}
+export default App;
+```
+:::
+
+
+## API
+
+### Props
+
+|Parameter | description | type | default value|
+|--------------|----------------------------------|--------|------------------|
+|value | current input value | _string_ | - |
+|placeholder | input box default dark texture | _string_ | ` Please enter `|
+|classname | custom class name | _string_ | '' |
+|shape | search box shape, the optional value is 'round '| _string_ | ` square` |
+|disabled | whether to disable the input box | _boolean_ | ` false` |
+|readonly | the input box is read-only | _boolean_ | ` false` |
+|maxLength | maximum input length | _number_ | ` 9999` |
+|clearable | whether to display the clear button | _boolean_ | ` true` |
+|background | search box external background color |_string_ | - |
+|inputbackground | search box background color |_string_ | - |
+|inputalign | alignment, optional `center` `right` | _string_ | ` left` |
+|autofocus | auto focus | _boolean_ | ` false` |
+|label | left text of search box | _string_ | '' |
+|actiontext | cancel button text | _ReactNode_ | '' |
+|leftinicon | input box, left Icon | _ReactNode_ | `< Icon name="search" size="12" />` |
+|rightinicon | input box, right icon | _ReactNode_ | - |
+|leftouticon | outside the input box, left Icon | _ReactNode_ | - |
+|rightouticon | outside the input box, right icon | _ReactNode_ | - |
+
+### Events
+
+|Event name | description | callback parameters|
+|--------|----------------|--------------|
+|onChange | triggered when entering content | _val: string, event: Event_ |
+|onFocus | triggered when focusing | _val: string, event: Event_ |
+|onBlur | triggered when out of focus | _val: string, event: Event_ |
+|onClear | triggered when clicking clear | _event: Event_ |
+|onSearch | trigger when confirming search | _val: string, event: Event_ |
+|onClickInput | triggered when clicking the input area | _event: Event_ |
+|onClickLeftinIcon | triggered when clicking the icon on the left side of the input box | _val: string, event: Event_ |
+|onClickLeftoutIcon | triggered when clicking the icon on the left outside of the input box | _val: string, event: Event_ |
+|onClickRightinIcon | triggered when clicking the icon on the right side of the input box | _val: string, event: Event_ |
+|onClickRightoutIcon | triggered when clicking the icon on the right side of the input box | _val: string, event: Event_ |

src/packages/searchbar/doc.md

+#  SearchBar组件
+
+### 介绍
+
+用于搜索场景的输入框组件。
+
+### 安装
+
+```javascript
+import { SearchBar } from '@nutui/nutui-react';
+
+```
+
+## 代码演示
+
+### 基础用法
+
+`SearchBar` 的 `placeholder` 属性支持自定义。
+
+:::demo
+```tsx
+import React from "react";
+import { SearchBar } from '@nutui/nutui-react';
+
+const App = () => {
+  return <>
+    <SearchBar placeholder="上京东，购好物" />
+  </>
+}
+export default App;
+```
+:::
+
+### 搜索框形状及最大长度
+
+`SearchBar` 的 `round` 属性支持定义圆角直角，`maxLength` 可控制输入字符的最大长度。
+
+:::demo
+```tsx
+import React from "react";
+import { SearchBar } from '@nutui/nutui-react';
+
+const App = () => {
+  return <>
+    <SearchBar shape="round" maxLength={5} />
+  </>
+}
+export default App;
+```
+:::
+
+
+### 搜索框内外背景设置
+
+`SearchBar` 的 `background` 属性可以设置搜索框外部的背景色，`inputBackground` 属性可以设置搜索框的背景色，
+`align` 设置文本对齐方式
+
+:::demo
+```tsx
+import React from "react";
+import { SearchBar } from '@nutui/nutui-react';
+
+const App = () => {
+  return <>
+    <SearchBar
+      background="linear-gradient(to right, #9866F0, #EB4D50)"
+      inputBackground="#999"
+      align="right"
+    />
+  </>
+}
+export default App;
+```
+:::
+
+### 搜索框文本设置
+
+`SearchBar` 的 `label` 属性可以设置搜索框左侧文本，`actionText` 属性可以设置取消按钮文本
+
+:::demo
+```tsx
+import React from "react";
+import { SearchBar } from '@nutui/nutui-react';
+
+const App = () => {
+  return <>
+    <SearchBar label="文本" actionText="测试" />
+  </>
+}
+export default App;
+
+```
+:::
+
+
+### 自定义图标设置
+
+`SearchBar` 的 `leftoutIcon` `rightoutIcon` 属性可以设置左右的图标或者自定义内容
+
+:::demo
+```tsx
+import React from "react";
+import { SearchBar, Icon } from '@nutui/nutui-react';
+
+const App = () => {
+  return <>
+    <SearchBar
+      leftoutIcon={<Icon name="heart-fill1" size="14" />}
+      rightoutIcon={<Icon name="star-fill" size="14" />}
+    />
+  </>
+}
+export default App;
+
+```
+:::
+
+
+
+### 数据改变监听
+
+`SearchBar` 的 `change` 可获取输入的内容。
+
+:::demo
+```tsx
+import React, { useState } from 'react'
+import { SearchBar } from '@nutui/nutui-react';
+
+const App = () => {
+  const [value, setValue] = useState('')
+  const change = (val: string, e: Event) => {
+    setValue(val)
+  }
+  return <>
+    <SearchBar
+      change={(val: string, e: Event) => change(val, e)}
+      maxLength={10}
+    />
+    value：{value}
+  </>
+}
+export default App;
+```
+:::
+
+
+## API
+
+### Props
+
+| 参数         | 说明                             | 类型   | 默认值           |
+|--------------|----------------------------------|--------|------------------|
+| value         | 当前输入的值               | _string_ | -                |
+| placeholder        | 输入框默认暗纹  | _string_ | `请输入`   |
+| className | 自定义class类名 | _string_ | '' |
+| shape | 搜索框形状，可选值为 `round` | _string_ | `square` |
+| disabled | 是否禁用输入框 | _boolean_ | `false` |
+| readonly | 输入框只读 | _boolean_ | `false` |
+| maxLength         | 最大输入长度   | _number_ | `9999`   |
+| clearable          | 是否展示清除按钮 | _boolean_ | `true`     |
+| background          | 搜索框外部背景色 | _string_ | -     |
+| inputBackground          | 搜索框背景色 | _string_ | -     |
+| inputAlign | 对齐方式，可选 `center` `right` | _string_ | `left` |
+| autofocus  | 是否自动聚焦 | _boolean_ | `false` |
+| label | 搜索框左侧文本 | _string_ | '' |
+| actionText | 取消按钮文本 | _ReactNode_ | '' |
+| leftinIcon     | 输入框内，左icon  | _ReactNode_ | `<Icon name="search" size="12" />` |
+| rightinIcon     | 输入框内，右icon | _ReactNode_ | - |
+| leftoutIcon     | 输入框外，左icon | _ReactNode_ | - |
+| rightoutIcon    | 输入框外，右icon | _ReactNode_ | - |
+
+### Events
+
+| 事件名 | 说明           | 回调参数     |
+|--------|----------------|--------------|
+| onChange  | 输入内容时触发 | _val: string, event: Event_ |
+| onFocus  | 聚焦时触发 | _val: string, event: Event_ |
+| onBlur  | 失焦时触发 | _val: string, event: Event_ |
+| onClear  | 点击清空时触发 | _event: Event_ |
+| onSearch  | 确定搜索时触发 | _val: string, event: Event_ |
+| onClickInput |	点击输入区域时触发	 |	_event: Event_ |
+| onClickLeftinIcon |	点击输入框`内左侧`图标时触发 |	_val: string, event: Event_ |
+| onClickLeftoutIcon |	点击输入框`外左侧`图标时触发 |	_val: string, event: Event_ |
+| onClickRightinIcon |	点击输入框`内右侧`图标时触发 |	_val: string, event: Event_ |
+| onClickRightoutIcon |	点击输入框`外右侧`图标时触发 |	_val: string, event: Event_ |

src/packages/searchbar/doc.zh-TW.md

+# SearchBar組件
+
+### 介紹
+
+用於蒐索場景的輸入框組件。
+
+### 安裝
+
+```javascript
+import { SearchBar } from '@nutui/nutui-react';
+
+```
+
+## 程式碼演示
+
+### 基礎用法
+
+`SearchBar` 的 `placeholder` 内容支持自定義。
+
+:::demo
+```tsx
+import React from "react";
+import { SearchBar } from '@nutui/nutui-react';
+
+const App = () => {
+  return <>
+    <SearchBar placeholder="上京東，購好物" />
+  </>
+}
+export default App;
+```
+:::
+
+### 蒐索框形狀及最大長度
+
+`SearchBar`的`round`内容支持定義圓角直角，`maxLength`可控制輸入字元的最大長度。
+
+:::demo
+```tsx
+import React from "react";
+import { SearchBar } from '@nutui/nutui-react';
+
+const App = () => {
+  return <>
+    <SearchBar shape="round" maxLength={5} />
+  </>
+}
+export default App;
+```
+:::
+
+
+### 蒐索框內外背景設定
+
+`SearchBar`的`background`内容可以設定蒐索框外部的背景色，`inputBackground`内容可以設定蒐索框的背景色，`align`設定文字對齊管道
+
+:::demo
+```tsx
+import React from "react";
+import { SearchBar } from '@nutui/nutui-react';
+
+const App = () => {
+  return <>
+    <SearchBar
+      background="linear-gradient(to right, #9866F0, #EB4D50)"
+      inputBackground="#999"
+      align="right"
+    />
+  </>
+}
+export default App;
+```
+:::
+
+### 蒐索框文字設定
+
+`SearchBar`的`label`内容可以設定蒐索框左側文字，`actionText`内容可以設定取消按鈕文字
+
+:::demo
+```tsx
+import React from "react";
+import { SearchBar } from '@nutui/nutui-react';
+
+const App = () => {
+  return <>
+    <SearchBar label="文本" actionText="测试" />
+  </>
+}
+export default App;
+
+```
+:::
+
+
+### 自定義圖標設定
+
+`SearchBar`的`leftoutIcon` `rightoutIcon`内容可以設定左右的圖標或者自定義內容
+
+:::demo
+```tsx
+import React from "react";
+import { SearchBar, Icon } from '@nutui/nutui-react';
+
+const App = () => {
+  return <>
+    <SearchBar
+      leftoutIcon={<Icon name="heart-fill1" size="14" />}
+      rightoutIcon={<Icon name="star-fill" size="14" />}
+    />
+  </>
+}
+export default App;
+
+```
+:::
+
+
+
+### 數據改變監聽
+
+`SearchBar`的`change`可獲取輸入的內容。
+
+:::demo
+```tsx
+import React, { useState } from 'react'
+import { SearchBar } from '@nutui/nutui-react';
+
+const App = () => {
+  const [value, setValue] = useState('')
+  const change = (val: string, e: Event) => {
+    setValue(val)
+  }
+  return <>
+    <SearchBar
+      change={(val: string, e: Event) => change(val, e)}
+      maxLength={10}
+    />
+    value：{value}
+  </>
+}
+export default App;
+```
+:::
+
+
+## API
+
+### Props
+
+|參數|說明|類型|預設值|
+|--------------|----------------------------------|--------|------------------|
+| value |當前輸入的值| _string_ | - |
+| placeholder |輸入框默認暗紋| _string_ | ` 請輸入` |
+| className |自定義class類名| _string_ | '' |
+| shape |蒐索框形狀，可選值為`round` | _string_ | ` square` |
+| disabled |是否禁用輸入框| _boolean_ | ` false` |
+| readonly |輸入框只讀| _boolean_ | ` false` |
+| maxLength |最大輸入長度| _number_ | ` 9999` |
+| clearable |是否展示清除按鈕| _boolean_ | ` true` |
+| background |蒐索框外部背景色| _string_ | - |
+| inputBackground |蒐索框背景色| _string_ | - |
+| inputAlign |對齊管道，可選`center` `right` | _string_ | ` left` |
+| autofocus |是否自動聚焦| _boolean_ | ` false` |
+| label |蒐索框左側文字| _string_ | '' |
+| actionText |取消按鈕文字| _ReactNode_ | '' |
+| leftinIcon |輸入框內，左icon | _ReactNode_ | `< Icon name=“search”size=“12”/>` |
+| rightinIcon |輸入框內，右icon | _ReactNode_ | - |
+| leftoutIcon |輸入框外，左icon | _ReactNode_ | - |
+| rightoutIcon |輸入框外，右icon | _ReactNode_ | - |
+
+### Events
+
+|事件名|說明|回檔參數|
+|--------|----------------|--------------|
+| onChange |輸入內容時觸發| _val: string，event: Event_ |
+| onFocus |聚焦時觸發| _val: string，event: Event_ |
+| onBlur |失焦時觸發| _val: string，event: Event_ |
+| onClear |點擊清空時觸發| _event: Event_ |
+| onSearch |確定蒐索時觸發| _val: string，event: Event_ |
+| onClickInput |點擊輸入區域時觸發| _event: Event_ |
+| onClickLeftinIcon |點擊輸入框`內左側`圖標時觸發| _val: string，event: Event_ |
+| onClickLeftoutIcon |點擊輸入框`外左側`圖標時觸發| _val: string，event: Event_ |
+| onClickRightinIcon |點擊輸入框`內右側`圖標時觸發| _val: string，event: Event_ |
+| onClickRightoutIcon |點擊輸入框`外右側`圖標時觸發| _val: string，event: Event_ |

src/packages/searchbar/index.ts

+import { SearchBar } from './searchbar'
+
+export default SearchBar

src/packages/searchbar/searchbar.scss

+.nut-theme-dark {
+  .nut-searchbar {
+    background: $black;
+    &__search-label {
+      color: $white;
+    }
+    .nut-searchbar__input-clear {
+      & .nut-searchbar__nut-icon-mask-close {
+        color: $white;
+        &:hover {
+          cursor: pointer;
+          color: $white;
+        }
+      }
+    }
+    &__right-search-icon,
+    &__left-search-icon {
+      color: $white;
+    }
+  }
+}
+.val-text {
+  font-size: 12px;
+  color: $title-color2;
+  padding: 0 20px;
+}
+.nut-searchbar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: $searchbar-width;
+  padding: $searchbar-padding;
+  background: $searchbar-background;
+  box-sizing: border-box;
+  &__content {
+    position: relative;
+    flex: 1;
+  }
+  &__icon {
+    position: absolute !important;
+    z-index: 888;
+    transform: translate(-50%, -50%);
+    width: 15px;
+    overflow: hidden;
+  }
+  &__leftin-icon {
+    left: 15px;
+    top: 53%;
+  }
+  &__rightin-icon {
+    right: 5px;
+    top: 53%;
+  }
+  &__input {
+    display: flex;
+    align-items: center;
+    width: $searchbar-input-width;
+    height: $searchbar-input-height;
+    flex: 1;
+    padding: $searchbar-input-padding;
+    border-radius: 0;
+    font-size: $font-size-small;
+    // box-shadow: $searchbar-input-box-shadow;
+    background: $searchbar-input-background;
+  }
+  &__round {
+    border-radius: $searchbar-input-border-radius;
+  }
+  &__disabled {
+    cursor: not-allowed;
+  }
+  &__clear {
+    position: absolute !important;
+    z-index: 888;
+    right: 3px;
+    top: 47%;
+    transform: translate(-50%, -40%);
+  }
+  .pos-right {
+    right: 40px;
+  }
+  &__left {
+    text-align: left;
+  }
+  &__right {
+    text-align: right;
+  }
+  &__center {
+    text-align: center;
+  }
+  &__label,
+  &__action-text {
+    padding: 0 8px 0 0;
+    font-size: 12px;
+    color: $searchbar-action-text-color;
+  }
+  &__action-text {
+    padding: 0 0 0 8px;
+  }
+  &__leftout-icon {
+    margin-right: 10px;
+  }
+  &__rightout-icon {
+    margin-left: 10px;
+  }
+}

src/packages/searchbar/searchbar.tsx

+import React, { FunctionComponent, useEffect, useRef, useState } from 'react'
+import bem from '@/utils/bem'
+import { useConfig } from '@/packages/configprovider'
+import Icon from '@/packages/icon'
+
+type TIconDirection = 'in-left' | 'out-left' | 'in-right' | 'out-right'
+export interface SearchBarProps {
+  /** 文本值	 */
+  value?: number | string
+  /** 输入框占位提示文字	 */
+  placeholder?: string
+  /** 搜索框形状，可选值为 round	 */
+  shape?: 'square' | 'round'
+  /** 自定义class名	 */
+  className?: string
+  /** 是否禁用输入框	 */
+  disabled?: boolean
+  /** 最大输入长度	 */
+  maxLength?: number
+  /** 是否启用清除图标，点击清除图标后会清空输入框	 */
+  clearable?: boolean
+  /** 搜索框外部背景色	 */
+  background?: string
+  /** 搜索框背景色	 */
+  inputBackground?: string
+  /** 输入框内容对齐方式	 */
+  align?: string
+  /** 是否将输入框设为只读状态，只读状态下无法输入内容   */
+  readOnly?: boolean
+  /**  是否自动聚焦，iOS 系统不支持该属性	 */
+  autoFocus?: boolean
+  /** 搜索框左侧文本	 */
+  label?: React.ReactNode
+  /** 输入框内 左icon   */
+  leftinIcon?: React.ReactNode
+  /** 输入框内 右icon  */
+  rightinIcon?: React.ReactNode
+  /** 输入框外 左icon  */
+  leftoutIcon?: React.ReactNode
+  /** 输入框外 右icon  */
+  rightoutIcon?: React.ReactNode
+  /** 取消按钮文字	 */
+  actionText?: React.ReactNode
+  /**  确定搜索时触发	 */
+  onSearch?: (val: string) => void
+  /** 输入框内容变化时触发	 */
+  onChange?: (value: string, event: Event) => void
+  /** 输入框获得焦点时触发	 */
+  onFocus?: (value: string, event: Event) => void
+  /** 输入框失去焦点时触发	 */
+  onBlur?: (value: string, event: Event) => void
+  /** 点击清除按钮后触发	 */
+  onClear?: (event: Event) => void
+  /** 点击输入区域时触发	 */
+  onClickInput?: (event: Event) => void
+  /** 点击输入框内左侧图标时触发	 */
+  onClickLeftinIcon?: (value: string, event: Event) => void
+  /** 点击输入框外左侧图标时触发	 */
+  onClickLeftoutIcon?: (value: string, event: Event) => void
+  /** 点击输入框内右侧图标时触发	 */
+  onClickRightinIcon?: (value: string, event: Event) => void
+  /** 点击输入框外右侧图标时触发	 */
+  onClickRightoutIcon?: (value: string, event: Event) => void
+}
+const defaultProps = {
+  placeholder: '',
+  shape: 'square',
+  disabled: false,
+  maxLength: 9999,
+  clearable: true,
+  align: 'left',
+  readonly: true,
+  autoFocus: false,
+  label: '',
+  leftinIcon: <Icon name="search" size="12" />,
+} as SearchBarProps
+export const SearchBar: FunctionComponent<
+  Partial<SearchBarProps> &
+    Omit<
+      React.HTMLAttributes<HTMLDivElement>,
+      'onChange' | 'onFocus' | 'onBlur'
+    >
+> = (props) => {
+  const searchbarBem = bem('searchbar')
+
+  const { locale } = useConfig()
+  const searchRef = useRef<HTMLInputElement>(null)
+  const [value, setValue] = useState(() => props.value)
+
+  const {
+    placeholder,
+    shape,
+    className,
+    disabled,
+    maxLength,
+    clearable,
+    align,
+    readOnly,
+    autoFocus,
+    label,
+    actionText,
+    leftinIcon,
+    rightinIcon,
+    leftoutIcon,
+    rightoutIcon,
+    onChange,
+    onFocus,
+    onBlur,
+    onClear,
+    onSearch,
+    onClickInput,
+    onClickLeftinIcon,
+    onClickLeftoutIcon,
+    onClickRightinIcon,
+    onClickRightoutIcon,
+  } = {
+    ...defaultProps,
+    ...props,
+  }
+
+  const alignClass = `${align}`
+
+  const change = (event: Event) => {
+    const { value } = event.target as any
+    onChange && onChange?.(value, event)
+    setValue(value)
+  }
+  const focus = (event: Event) => {
+    const { value } = event.target as any
+    onFocus && onFocus?.(value, event)
+  }
+  const blur = (event: Event) => {
+    const searchSelf: HTMLInputElement | null = searchRef.current
+    searchSelf && searchSelf.blur()
+    const { value } = event.target as any
+    onBlur && onBlur?.(value, event)
+  }
+
+  useEffect(() => {
+    setValue(props.value)
+  }, [props.value])
+
+  useEffect(() => {
+    if (autoFocus) {
+      const searchSelf: HTMLInputElement | null = searchRef.current
+      searchSelf && searchSelf.focus()
+    }
+  }, [autoFocus])
+
+  const renderField = () => {
+    return (
+      <input
+        className={`${searchbarBem('input')}  ${searchbarBem(alignClass)} ${
+          shape === 'round' ? searchbarBem('round') : ''
+        } ${clearable ? searchbarBem('input-clear') : ''}`}
+        ref={searchRef}
+        style={{ ...props.style, background: props.inputBackground }}
+        value={value || ''}
+        placeholder={placeholder || locale.placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+        maxLength={maxLength}
+        onChange={(e: any) => change(e)}
+        onFocus={(e: any) => focus(e)}
+        onBlur={(e: any) => blur(e)}
+        onClick={(e: any) => clickInput(e)}
+      />
+    )
+  }
+
+  const clickInput = (e: Event) => {
+    onClickInput && onClickInput(e)
+  }
+
+  const renderLeftinIcon = () => {
+    if (!leftinIcon) return null
+    return (
+      <div
+        className={`${searchbarBem('leftin-icon')} ${searchbarBem('icon')}`}
+        onClick={(e: any) => clickLeftIcon('in-left', e)}
+      >
+        {leftinIcon}
+      </div>
+    )
+  }
+  const renderLeftoutIcon = () => {
+    if (!leftoutIcon) return null
+    return (
+      <div
+        className={`${searchbarBem('leftout-icon')}`}
+        onClick={(e: any) => clickLeftIcon('out-left', e)}
+      >
+        {leftoutIcon}
+      </div>
+    )
+  }
+  const clickLeftIcon = (flag: TIconDirection, event: Event) => {
+    if (flag === 'in-left') {
+      onClickLeftinIcon && onClickLeftinIcon(value as string, event)
+    } else {
+      onClickLeftoutIcon && onClickLeftoutIcon(value as string, event)
+    }
+  }
+
+  const renderRightinIcon = () => {
+    if (!rightinIcon) return null
+    return (
+      <div
+        className={`${searchbarBem('rightin-icon')} ${searchbarBem('icon')}`}
+        onClick={(e: any) => clickRightIcon('in-right', e)}
+      >
+        {rightinIcon}
+      </div>
+    )
+  }
+  const renderRightoutIcon = () => {
+    if (!rightoutIcon) return null
+    return (
+      <div
+        className={`${searchbarBem('rightout-icon')}`}
+        onClick={(e: any) => clickRightIcon('out-right', e)}
+      >
+        {rightoutIcon}
+      </div>
+    )
+  }
+  const clickRightIcon = (flag: TIconDirection, event: Event) => {
+    if (flag === 'in-left') {
+      onClickRightinIcon && onClickRightinIcon(value as string, event)
+    } else {
+      onClickRightoutIcon && onClickRightoutIcon(value as string, event)
+    }
+  }
+
+  const handleClear = () => {
+    return (
+      <div
+        className={`${searchbarBem('clear')} ${rightinIcon ? 'pos-right' : ''}`}
+        onClick={(e: any) => clearaVal(e)}
+      >
+        <Icon name="circle-close" size="12" color="#555" />
+      </div>
+    )
+  }
+
+  const clearaVal = (event: Event) => {
+    if (disabled || readOnly) {
+      return
+    }
+    setValue('')
+    onClear && onClear(event)
+  }
+
+  const renderRightLabel = () => {
+    if (actionText) {
+      return (
+        <div className={searchbarBem('action-text')} onClick={search}>
+          {actionText}
+        </div>
+      )
+    }
+    return null
+  }
+
+  const search = () => {
+    onSearch && onSearch(value as string)
+  }
+  const renderLabel = () => {
+    if (label) {
+      return <div className={searchbarBem('label')}>{label}</div>
+    }
+    return null
+  }
+  return (
+    <div
+      className={`${searchbarBem()} ${
+        disabled ? searchbarBem('disabled') : ''
+      }  ${className || ''}`}
+      style={{ ...props.style, background: props.background }}
+    >
+      {renderLeftoutIcon()}
+      {renderLabel()}
+      <div className={`${searchbarBem('content')}`}>
+        {renderLeftinIcon()}
+        {renderField()}
+        {renderRightinIcon()}
+        {clearable && value && handleClear()}
+      </div>
+      {renderRightoutIcon()}
+      {renderRightLabel()}
+    </div>
+  )
+}
+
+SearchBar.defaultProps = defaultProps
+SearchBar.displayName = 'NutSearchBar'

src/styles/variables.scss

@@ -576,6 +576,20 @@ $row-content-height: 50px !default;
 $row-content-line-height: 40px !default;
 $col-default-margin-bottom: 15px !default;
 
+
+// searchbar
+$searchbar-background: $white !default;
+$searchbar-right-out-color: $black !default;
+$searchbar-padding: 9px 16px !default;
+$searchbar-width: 100% !default;
+$searchbar-action-text-color: #323233 !default;
+$searchbar-input-background: #f7f7f7 !default;
+$searchbar-input-padding: 0 28px !default;
+$searchbar-input-height: 32px !default;
+$searchbar-input-width: 100% !default;
+$searchbar-input-border-radius: 16px !default;
+$searchbar-input-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04) !default;
+
 // progress
 $progress-border-radius: 12px !default;
 $progress-text-padding: 0 5px !default;
@@ -599,3 +613,4 @@ $countup-lr-margin: 1px !default;
 $countup-bgcolor: #031f63 !default;
 $countup-color: #ffffff !default;
 $countup-width: 24px !default;
+