feat(searchbar): v15 适配,增加了受控和默认值 (#3209)

Author: xiaoyatong

src/packages/configprovider/types.ts

@@ -655,11 +655,12 @@ export type NutCSSVariables =
   | 'nutuiSearchbarBackground'
   | 'nutuiSearchbarColor'
   | 'nutuiSearchbarGap'
+  | 'nutuiSearchbarInnerGap'
   | 'nutuiSearchbarFontSize'
-  | 'nutuiSearchbarContentPadding'
   | 'nutuiSearchbarContentBackground'
   | 'nutuiSearchbarContentBorderRadius'
   | 'nutuiSearchbarContentRoundBorderRadius'
+  | 'nutuiSearchbarIconSize'
   | 'nutuiSearchbarInputHeight'
   | 'nutuiSearchbarInputPadding'
   | 'nutuiSearchbarInputTextColor'

src/packages/searchbar/__tests__/searchbar.spec.tsx

@@ -1,44 +1,89 @@
 import * as React from 'react'
-import { fireEvent, render } from '@testing-library/react'
+import { render, fireEvent, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom'
+import { useState } from 'react'
 import SearchBar from '@/packages/searchbar'
 
-test('basic usage', () => {
-  const { container } = render(<SearchBar placeholder="请输入文字" />)
-  expect(container.querySelector('.nut-searchbar-input')).toHaveAttribute(
-    'placeholder',
-    '请输入文字'
+test('should render with placeholder', () => {
+  const { getByPlaceholderText } = render(
+    <SearchBar placeholder="请输入文字" />
   )
+  expect(getByPlaceholderText('请输入文字')).toBeInTheDocument()
 })
 
 test('should limit maxlength of input value when using maxlength prop', () => {
   const { container } = render(<SearchBar shape="round" maxLength={5} />)
-  expect(container.querySelector('.nut-searchbar-input')).toHaveAttribute(
-    'maxlength',
-    '5'
-  )
-  expect(container.querySelector('.nut-searchbar-content')).toHaveClass(
-    'nut-searchbar-round'
-  )
+  const input = container.querySelector('.nut-searchbar-input')
+  expect(input).toHaveAttribute('maxlength', '5')
+  expect(input?.parentNode).toHaveClass('nut-searchbar-round')
 })
 
-test('Search box text settings', () => {
+test('should display left and right text', () => {
   const { container } = render(<SearchBar left="文本" right="确定" />)
   expect(container.querySelector('.nut-searchbar-left')?.innerHTML).toBe('文本')
   expect(container.querySelector('.nut-searchbar-right')?.innerHTML).toBe(
     '确定'
   )
 })
 
-test('Search clear & change', () => {
-  const change = vi.fn()
-  const { container } = render(
-    <SearchBar value="123" onChange={change} maxLength={10} />
-  )
-  const input = container.querySelector('.nut-searchbar-input')
-  expect(input?.getAttribute('value')).toBe('123')
-  const clear = container.querySelector('.nut-searchbar-clear')
-  fireEvent.click(clear as Element)
-  expect(change).toBeCalledWith('')
-  expect(input?.getAttribute('value')).toBe('')
+test('should render with tags', () => {
+  const { container } = render(<SearchBar tag value="add,add3" />)
+  const dvalues = container.querySelectorAll('.nut-searchbar-value')
+  expect(dvalues.length).toBe(2)
+})
+
+test('should render right-in element', () => {
+  const { container, rerender } = render(<SearchBar rightIn="搜索" />)
+  const rightin = container.querySelectorAll('.nut-searchbar-rightin')
+  expect(rightin.length).toBe(1)
+  rerender(<SearchBar rightIn={<div className="test">搜索</div>} />)
+  const test = container.querySelectorAll('.test')
+  expect(test.length).toBe(1)
+})
+
+test('should handle all events correctly', async () => {
+  const handleChange = vi.fn()
+  const handleFocus = vi.fn()
+  const handleBlur = vi.fn()
+  const handleClick = vi.fn()
+  const handleClear = vi.fn()
+  const Demo = () => {
+    const [value, setValue] = useState('奶茶')
+    const onChange = (newValue: string) => {
+      setValue(newValue) // 更新状态
+      handleChange(newValue) // 调用传入的 onChange 处理函数
+    }
+    return (
+      <SearchBar
+        value={value}
+        autoFocus
+        onChange={onChange}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        onInputClick={handleClick}
+        onClear={handleClear}
+      />
+    )
+  }
+
+  const { container } = render(<Demo />)
+  const inputEl = container.querySelector('.nut-searchbar-input') as Element
+  expect(inputEl).toHaveValue('奶茶')
+  fireEvent.click(inputEl)
+  expect(handleClick).toHaveBeenCalledTimes(1)
+  fireEvent.change(inputEl, { target: { value: '冰激凌' } })
+
+  await waitFor(() => {
+    expect(handleFocus).toHaveBeenCalledTimes(1)
+    expect(handleChange).toHaveBeenCalledTimes(1)
+    expect(inputEl).toHaveValue('冰激凌')
+    fireEvent.blur(inputEl)
+    expect(handleBlur).toHaveBeenCalled()
+  })
+
+  const clear = container.querySelector('.nut-searchbar-clear') as Element
+  fireEvent.click(clear)
+  await waitFor(() => {
+    expect(inputEl).toHaveValue('')
+  })
 })

src/packages/searchbar/demo.taro.tsx

@@ -12,11 +12,13 @@ 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 Demo10 from './demos/taro/demo10'
 
 const SearchBarDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
       title1: '基础用法',
+      title10: '默认值、受控',
       title2: '搜索框形状及最大长度',
       title3: '搜索框内外背景设置',
       title4: '搜索框文本设置',
@@ -26,6 +28,7 @@ const SearchBarDemo = () => {
     },
     'zh-TW': {
       title1: '基礎用法',
+      title10: '默認值、受控',
       title2: '蒐索框形狀及最大長度',
       title3: '蒐索框內外背景設定',
       title4: '蒐索框文字設定',
@@ -35,22 +38,14 @@ const SearchBarDemo = () => {
     },
     'en-US': {
       title1: 'Basic Usage',
+      title10: 'DefaultValue and controlled mode',
       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',
       title7: 'Custom Settings',
     },
-    'id-ID': {
-      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',
-      title7: 'pengaturan suai',
-    },
   })
 
   return (
@@ -59,6 +54,8 @@ const SearchBarDemo = () => {
       <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
         <View className="h2">{translated.title1}</View>
         <Demo1 />
+        <View className="h2">{translated.title10}</View>
+        <Demo10 />
         <View className="h2">{translated.title2}</View>
         <Demo2 />
         <View className="h2">{translated.title3}</View>

src/packages/searchbar/demo.tsx

@@ -8,11 +8,13 @@ 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 Demo10 from './demos/h5/demo10'
 
 const SearchBarDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
       title1: '基础用法',
+      title10: '默认值、受控',
       title2: '搜索框形状及最大长度',
       title3: '搜索框内外背景设置',
       title4: '搜索框文本设置',
@@ -22,6 +24,7 @@ const SearchBarDemo = () => {
     },
     'zh-TW': {
       title1: '基礎用法',
+      title10: '默認值、受控',
       title2: '蒐索框形狀及最大長度',
       title3: '蒐索框內外背景設定',
       title4: '蒐索框文字設定',
@@ -31,29 +34,23 @@ const SearchBarDemo = () => {
     },
     'en-US': {
       title1: 'Basic Usage',
+      title10: 'DefaultValue and controlled mode',
       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',
       title7: 'Custom Settings',
     },
-    'id-ID': {
-      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',
-      title7: 'pengaturan suai',
-    },
   })
 
   return (
     <>
       <div className="demo">
         <h2>{translated.title1}</h2>
         <Demo1 />
+        <h2>{translated.title10}</h2>
+        <Demo10 />
         <h2>{translated.title2}</h2>
         <Demo2 />
         <h2>{translated.title3}</h2>

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

@@ -1,10 +1,22 @@
 import React from 'react'
-import { SearchBar } from '../../searchbar'
+import { Photograph, Scan } from '@nutui/icons-react'
+import { SearchBar, Divider } from '@nutui/nutui-react'
 
 const Demo1 = () => {
   return (
     <>
-      <SearchBar backable placeholder="上京东，购好物" />
+      <SearchBar placeholder="麻辣烫" rightIn="搜索" />
+      <SearchBar
+        leftIn={<Scan />}
+        placeholder="华为Mate 70"
+        rightIn={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <Photograph color="#888B94" onClick={() => console.log('拍照购')} />
+            <Divider direction="vertical" />
+            <span style={{ color: '#ff0f23' }}>搜索</span>
+          </div>
+        }
+      />
     </>
   )
 }

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

@@ -0,0 +1,57 @@
+import React, { useState } from 'react'
+import { SearchBar, Button } from '@nutui/nutui-react'
+import { Photograph, Category } from '@nutui/icons-react'
+
+const Demo = () => {
+  const [value, setValue] = useState('醋溜土豆丝')
+  const [value1, setValue1] = useState('西红柿,铁皮')
+  return (
+    <>
+      <SearchBar
+        backable
+        leftIn={null}
+        value={value1}
+        tag
+        onItemClick={(val: string) => {
+          console.log('click', val)
+          const arr = value1.split(',')
+          const newArr = arr.filter((item: string) => item !== val)
+          const newVal = newArr.length > 1 ? newArr.join(',') : newArr.join('')
+          setValue1(newVal)
+        }}
+        onFocus={(val: string) => {
+          console.log('focus value', val)
+          setValue1(val.split(',').join(''))
+        }}
+        onChange={(val) => {
+          console.log('onChange', val)
+          setValue1(val)
+        }}
+        rightIn={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <Photograph color="#505259" />
+          </div>
+        }
+        right={<Category />}
+      />
+      <SearchBar
+        backable
+        leftIn={null}
+        value={value}
+        onChange={(val) => {
+          setValue(val)
+        }}
+        autoFocus
+        rightIn={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <Photograph color="#505259" style={{ marginRight: '12px' }} />
+            <Button type="primary" size="mini">
+              搜索
+            </Button>
+          </div>
+        }
+      />
+    </>
+  )
+}
+export default Demo

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SearchBar } from '../../searchbar'
+import { SearchBar } from '@nutui/nutui-react'
 
 const Demo2 = () => {
   return (

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

@@ -1,15 +1,13 @@
 import React from 'react'
-import { SearchBar } from '../../searchbar'
-import ConfigProvider from '../../../configprovider'
-import Toast from '../../../toast'
+import { SearchBar, ConfigProvider, Toast } from '@nutui/nutui-react'
 
 const Demo3 = () => {
   return (
     <>
       <ConfigProvider
         theme={{
           nutuiSearchbarBackground: 'var(--nutui-color-primary)',
-          nutuiSearchbarContentBackground: '#eee',
+          nutuiSearchbarContentBackground: '#fff',
           nutuiSearchbarInputTextAlign: 'right',
         }}
       >

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

@@ -1,6 +1,5 @@
 import React from 'react'
-import { SearchBar } from '../../searchbar'
-import Toast from '../../../toast'
+import { SearchBar, Toast } from '@nutui/nutui-react'
 
 const Demo4 = () => {
   return (

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

@@ -1,33 +1,29 @@
 import React from 'react'
 import { ArrowLeft, Photograph, More, Close, Star } from '@nutui/icons-react'
-import { SearchBar } from '../../searchbar'
+import { SearchBar } from '@nutui/nutui-react'
 
 const Demo5 = () => {
   return (
     <>
       <SearchBar
         left={
           <>
-            <ArrowLeft width={20} height={20} />
-            <Close width={20} height={20} />
+            <ArrowLeft />
+            <Close />
           </>
         }
         right={
           <>
             <Star
-              width={20}
-              height={20}
               style={{
                 color: 'var(--nutui-color-primary)',
               }}
             />
-            <More width={20} height={20} />
+            <More />
           </>
         }
         rightIn={
           <Photograph
-            width={16}
-            height={16}
             onClick={() => {
               console.log('Photograph right in')
             }}