feat: 给 searchbar 暴露 input 更多属性 (#3416)

Author: xiaoyatong

src/packages/searchbar/demo.taro.tsx

@@ -12,6 +12,7 @@ import Demo4 from './demos/taro/demo4'
 import Demo5 from './demos/taro/demo5'
 import Demo6 from './demos/taro/demo6'
 import Demo7 from './demos/taro/demo7'
+import Demo8 from './demos/taro/demo8'
 import Demo10 from './demos/taro/demo10'
 
 const SearchBarDemo = () => {
@@ -25,6 +26,7 @@ const SearchBarDemo = () => {
       title5: '自定义图标设置',
       title6: '数据改变监听',
       title7: '自定义设置',
+      title8: 'InputProps扩展属性',
     },
     'zh-TW': {
       title1: '基礎用法',
@@ -35,6 +37,7 @@ const SearchBarDemo = () => {
       title5: '自定義圖標設定',
       title6: '數據改變監聽',
       title7: '自定義設定',
+      title8: 'InputProps擴展屬性',
     },
     'en-US': {
       title1: 'Basic Usage',
@@ -45,6 +48,7 @@ const SearchBarDemo = () => {
       title5: 'Custom Icon Settings',
       title6: 'Data Change Monitoring',
       title7: 'Custom Settings',
+      title8: 'InputProps Extension Attributes',
     },
   })
 
@@ -71,6 +75,8 @@ const SearchBarDemo = () => {
             <Demo6 />
           </>
         )}
+        <View className="h2">{translated.title8}</View>
+        <Demo8 />
         <View className="h2">{translated.title6}</View>
         <Demo7 />
       </ScrollView>

src/packages/searchbar/demo.tsx

@@ -8,6 +8,7 @@ import Demo4 from './demos/h5/demo4'
 import Demo5 from './demos/h5/demo5'
 import Demo6 from './demos/h5/demo6'
 import Demo7 from './demos/h5/demo7'
+import Demo8 from './demos/h5/demo8'
 import Demo10 from './demos/h5/demo10'
 
 const SearchBarDemo = () => {
@@ -21,6 +22,7 @@ const SearchBarDemo = () => {
       title5: '自定义图标设置',
       title6: '数据改变监听',
       title7: '自定义设置',
+      title8: 'InputProps扩展属性',
     },
     'zh-TW': {
       title1: '基礎用法',
@@ -31,6 +33,7 @@ const SearchBarDemo = () => {
       title5: '自定義圖標設定',
       title6: '數據改變監聽',
       title7: '自定義設定',
+      title8: 'InputProps擴展屬性',
     },
     'en-US': {
       title1: 'Basic Usage',
@@ -41,6 +44,7 @@ const SearchBarDemo = () => {
       title5: 'Custom Icon Settings',
       title6: 'Data Change Monitoring',
       title7: 'Custom Settings',
+      title8: 'InputProps Extension Attributes',
     },
   })
 
@@ -61,6 +65,8 @@ const SearchBarDemo = () => {
         <Demo5 />
         <h2>{translated.title7}</h2>
         <Demo6 />
+        <h2>{translated.title8}</h2>
+        <Demo8 />
         <h2>{translated.title6}</h2>
         <Demo7 />
       </div>

src/packages/searchbar/demos/h5/demo8.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Scan } from '@nutui/icons-react'
+import { SearchBar } from '@nutui/nutui-react'
+
+const Demo = () => {
+  return (
+    <>
+      <SearchBar
+        placeholder="使用inputProps扩展属性"
+        inputProps={{
+          autoComplete: 'off',
+          autoCapitalize: 'none',
+          spellCheck: false,
+        }}
+      />
+      <SearchBar
+        leftIn={<Scan />}
+        placeholder="自定义input类型和属性"
+        inputProps={{
+          type: 'search',
+          autoComplete: 'on',
+        }}
+      />
+      <SearchBar
+        placeholder="设置自定义属性"
+        inputProps={{
+          'aria-label': '搜索输入框',
+        }}
+      />
+    </>
+  )
+}
+export default Demo

src/packages/searchbar/demos/taro/demo8.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Scan } from '@nutui/icons-react-taro'
+import { SearchBar } from '@nutui/nutui-react-taro'
+
+const Demo = () => {
+  return (
+    <>
+      <SearchBar
+        placeholder="使用inputProps扩展属性"
+        inputProps={{
+          confirmType: 'search',
+          password: false,
+          maxlength: 20,
+        }}
+      />
+      <SearchBar
+        leftIn={<Scan />}
+        placeholder="自定义confirmType为search"
+        inputProps={{
+          confirmType: 'search',
+          type: 'text',
+        }}
+      />
+      <SearchBar
+        placeholder="设置maxlength为10"
+        inputProps={{
+          maxlength: 10,
+        }}
+      />
+    </>
+  )
+}
+export default Demo

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

@@ -78,6 +78,17 @@ import { SearchBar } from '@nutui/nutui-react'
 
 :::
 
+
+### InputProps Extension Attributes
+
+`SearchBar`'s `inputProps` property can extend the attributes of the underlying input element, supporting all attributes of the native input element.
+
+:::demo
+
+<CodeBlock src='h5/demo8.tsx'></CodeBlock>
+
+:::
+
 ### Data change monitoring
 
 `SearchBar`'s `onChange` You can get the input content.
@@ -88,6 +99,7 @@ import { SearchBar } from '@nutui/nutui-react'
 
 :::
 
+
 ## SearchBar
 
 ### Props
@@ -113,6 +125,7 @@ import { SearchBar } from '@nutui/nutui-react'
 | onClear | triggered when clicking clear | `(event: MouseEvent<HTMLDivElement>) => void` | `-` |
 | onSearch | trigger when confirming search | `(val: string) => void` | `-` |
 | onInputClick | triggered when clicking the input area | `(event: MouseEvent<HTMLInputElement>) => void` | `-` |
+| inputProps | Extend the underlying input element attributes, supporting all attributes of the native input element | `Partial<InputHTMLAttributes<HTMLInputElement>>` | `-` |
 
 ## Theming
 

src/packages/searchbar/doc.md

@@ -76,6 +76,16 @@ import { SearchBar } from '@nutui/nutui-react'
 
 :::
 
+### InputProps扩展属性
+
+`SearchBar` 的 `inputProps` 属性可以扩展底层输入框的属性，支持传入原生input元素的所有属性。
+
+:::demo
+
+<CodeBlock src='h5/demo8.tsx'></CodeBlock>
+
+:::
+
 ### 数据改变监听
 
 `SearchBar` 的 `onChange` 可获取输入的内容。
@@ -86,6 +96,8 @@ import { SearchBar } from '@nutui/nutui-react'
 
 :::
 
+
+
 ## SearchBar
 
 ### Props
@@ -106,6 +118,7 @@ import { SearchBar } from '@nutui/nutui-react'
 | right | 搜搜框右侧区域 | `ReactNode` | `-` |
 | leftIn | 输入框内左侧区域 | `ReactNode` | `<Search />` |
 | rightIn | 输入框内右侧区域 | `ReactNode` | `-` |
+| inputProps | 扩展底层输入框属性，支持传入原生input元素的所有属性 | `Partial<InputHTMLAttributes<HTMLInputElement>>` | `-` |
 | onChange | 输入内容时触发 | `(value: string, event: ChangeEvent<HTMLInputElement>) => void` | `-` |
 | onFocus | 聚焦时触发 | `(value: string, event: FocusEvent<HTMLInputElement>) => void` | `-` |
 | onBlur | 失焦时触发 | `(value: string, event: FocusEvent<HTMLInputElement>) => void` | `-` |

src/packages/searchbar/doc.taro.md

@@ -78,6 +78,16 @@ import { SearchBar } from '@nutui/nutui-react-taro'
 
 :::
 
+### InputProps扩展属性
+
+`SearchBar` 的 `inputProps` 属性可以扩展底层TaroInput组件的属性，支持传入TaroInput组件的所有属性。
+
+:::demo
+
+<CodeBlock src='taro/demo8.tsx'></CodeBlock>
+
+:::
+
 ### 数据改变监听
 
 `SearchBar` 的 `onChange` 可获取输入的内容。
@@ -108,6 +118,7 @@ import { SearchBar } from '@nutui/nutui-react-taro'
 | right | 搜搜框右侧区域 | `ReactNode` | `-` |
 | leftIn | 输入框内左侧区域 | `ReactNode` | `<Search />` |
 | rightIn | 输入框内右侧区域 | `ReactNode` | `-` |
+| inputProps | 扩展底层TaroInput组件属性，支持传入TaroInput组件的所有属性 | `Partial<InputProps>` | `-` |
 | onChange | 输入内容时触发 | `(value: string, event: ChangeEvent<HTMLInputElement>) => void` | `-` |
 | onFocus | 聚焦时触发 | `(value: string, event: FocusEvent<HTMLInputElement>) => void` | `-` |
 | onBlur | 失焦时触发 | `(value: string, event: FocusEvent<HTMLInputElement>) => void` | `-` |

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

@@ -78,6 +78,16 @@ import { SearchBar } from '@nutui/nutui-react'
 
 :::
 
+### InputProps擴展屬性
+
+`SearchBar` 的 `inputProps` 屬性可以擴展底層輸入框的屬性，支持傳入原生input元素的所有屬性。
+
+:::demo
+
+<CodeBlock src='h5/demo8.tsx'></CodeBlock>
+
+:::
+
 ### 數據改變監聽
 
 `SearchBar` 的 `onChange` 可獲取輸入的內容。
@@ -108,6 +118,7 @@ import { SearchBar } from '@nutui/nutui-react'
 | right | 搜搜框右側區域 | `ReactNode` | `-` |
 | leftIn | 輸入框內左側區域 | `ReactNode` | `<Search />` |
 | rightIn | 輸入框內右側區域 | `ReactNode` | `-` |
+| inputProps | 擴展底層輸入框屬性，支持傳入原生input元素的所有屬性 | `Partial<InputHTMLAttributes<HTMLInputElement>>` | `-` |
 | onChange | 輸入內容時觸發 | `(value: string, event: ChangeEvent<HTMLInputElement>) => void` | `-` |
 | onFocus | 聚焦時觸發 | `(value: string, event: FocusEvent<HTMLInputElement>) => void` | `-` |
 | onBlur | 失焦時觸發 | `(value: string, event: FocusEvent<HTMLInputElement>) => void` | `-` |

src/packages/searchbar/searchbar.taro.tsx

@@ -65,6 +65,7 @@ export const SearchBar: FunctionComponent<
     leftIn,
     rightIn,
     tag,
+    inputProps,
     onChange,
     onFocus,
     onBlur,
@@ -189,6 +190,7 @@ export const SearchBar: FunctionComponent<
             onBlur={handleBlur}
             onClick={onInputClick}
             onConfirm={onConfirm}
+            {...inputProps}
           />
         ) : (
           <TaroInput
@@ -208,6 +210,7 @@ export const SearchBar: FunctionComponent<
             onBlur={handleBlur}
             onClick={onInputClick}
             onConfirm={onConfirm}
+            {...inputProps}
           />
         )}
       </>

src/packages/searchbar/searchbar.tsx

@@ -58,6 +58,7 @@ export const SearchBar: FunctionComponent<
     leftIn,
     rightIn,
     tag,
+    inputProps,
     onChange,
     onFocus,
     onBlur,
@@ -186,6 +187,7 @@ export const SearchBar: FunctionComponent<
         onFocus={handleFocus}
         onBlur={handleBlur}
         onClick={handleInputClick}
+        {...inputProps}
       />
     )
   }