fix(searchbar): 多端适配

package.json

@@ -104,7 +104,7 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@nutui/icons-react": "^1.0.5",
-    "@nutui/icons-react-taro": "2.0.0-beta.0",
+    "@nutui/icons-react-taro": "^2.0.0-beta.0",
     "@nutui/jdesign-icons-react-taro": "1.0.6-beta.2",
     "@nutui/touch-emulator": "^1.0.0",
     "@react-spring/web": "~9.6.1",

src/config.json

@@ -632,7 +632,7 @@
           "author": "dsj"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "SearchBar",
           "type": "component",
           "cName": "搜索栏",

src/packages/searchbar/demo.taro.tsx

@@ -3,6 +3,7 @@ import Taro from '@tarojs/taro'
 import { ScrollView, View } from '@tarojs/components'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
+import { harmony } from '@/utils/platform-taro'
 
 import Demo1 from './demos/taro/demo1'
 import Demo2 from './demos/taro/demo2'
@@ -66,8 +67,13 @@ const SearchBarDemo = () => {
         <Demo4 />
         <View className="h2">{translated.title5}</View>
         <Demo5 />
-        <View className="h2">{translated.title7}</View>
-        <Demo6 />
+        {/* 组件引入Popover组件，待Popover组件适配harmony后验证 */}
+        {!harmony() && (
+          <>
+            <View className="h2">{translated.title7}</View>
+            <Demo6 />
+          </>
+        )}
         <View className="h2">{translated.title6}</View>
         <Demo7 />
       </ScrollView>

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

@@ -30,7 +30,7 @@ const Demo6 = () => {
               }}
             >
               更多
-              <ArrowDown size={12} style={{ marginLeft: '5px' }} />
+              <ArrowDown size={16} />
             </View>
           </Popover>
         }

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

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { View } from '@tarojs/components'
 import { SearchBar } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo7 = () => {
   const [value, setValue] = useState('')
@@ -9,10 +10,10 @@ const Demo7 = () => {
       <SearchBar onChange={(val: string) => setValue(val)} maxLength={10} />
       <View
         style={{
-          height: '40px',
-          lineHeight: '40px',
+          height: pxTransform(40),
+          lineHeight: pxTransform(40),
           color: '#666',
-          fontSize: '14px',
+          fontSize: pxTransform(14),
         }}
       >
         {value}

src/packages/searchbar/searchbar.harmony.css

@@ -3,8 +3,8 @@
   align-items: center;
   width: 100%;
   padding: 6px 16px;
-  background: #F7F8FC;
-  color: #1A1A1A;
+  background: #f5f6fa;
+  color: #1a1a1a;
   font-size: 14px;
   box-sizing: border-box;
   justify-content: center;
@@ -27,15 +27,16 @@
 .nut-searchbar-clear {
   width: 16px;
   height: 16px;
-  color: undefined;
+  color: rgba(0, 0, 0, 0.2);
 }
 .nut-searchbar-rightin {
   width: 16px;
   height: 16px;
-  color: undefined;
+  color: rgba(0, 0, 0, 0.2);
 }
 .nut-searchbar-left, .nut-searchbar-right {
-  display: flex;
+  display: inline-flex;
+  align-items: center;
 }
 .nut-searchbar-left.nut-icon, .nut-searchbar-right.nut-icon {
   width: 20px;
@@ -50,10 +51,17 @@
 .nut-searchbar-left > span {
   margin-right: 16px;
 }
+.nut-searchbar-left > i {
+  margin-right: 16px;
+}
 .nut-searchbar-left > svg {
   margin-right: 16px;
 }
-.nut-searchbar-left > div:last-child, .nut-searchbar-left > span:last-child, .nut-searchbar-left > svg:last-child {
+.nut-searchbar-left .nut-icon {
+  margin-right: 16px;
+}
+.nut-searchbar-left > div:last-child, .nut-searchbar-left > span:last-child, .nut-searchbar-left > i:last-child, .nut-searchbar-left > svg:last-child,
+.nut-searchbar-left .nut-icon:last-child {
   margin-right: 0;
 }
 .nut-searchbar-right {
@@ -65,10 +73,17 @@
 .nut-searchbar-right > span {
   margin-left: 16px;
 }
+.nut-searchbar-right > i {
+  margin-left: 16px;
+}
 .nut-searchbar-right > svg {
   margin-left: 16px;
 }
-.nut-searchbar-right > div:first-child, .nut-searchbar-right > span:first-child, .nut-searchbar-right > svg:first-child {
+.nut-searchbar-right .nut-icon {
+  margin-left: 16px;
+}
+.nut-searchbar-right > div:first-child, .nut-searchbar-right > span:first-child, .nut-searchbar-right > i:first-child, .nut-searchbar-right > svg:first-child,
+.nut-searchbar-right .nut-icon:first-child {
   margin-left: 0;
 }
 .nut-searchbar-left > text {
@@ -89,7 +104,7 @@
 .nut-searchbar-right > text:first-child, .nut-searchbar-right > view:first-child {
   margin-left: 0;
 }
-.nut-searchbar-input-box {
+.nut-searchbar-input-box, .nut-searchbar-input {
   display: flex;
   align-items: center;
   flex: 1;
@@ -99,12 +114,10 @@
   outline: 0;
   box-sizing: border-box;
   width: 100%;
-  height: 32px;
-  line-height: 32px;
   padding: 0 4px;
   font-size: 14px;
-  color: #1A1A1A;
-  caret-color: #1A1A1A;
+  color: #1a1a1a;
+  caret-color: #1a1a1a;
   background: transparent;
   text-align: left;
 }

src/packages/searchbar/searchbar.scss

@@ -35,7 +35,8 @@
 
   &-left,
   &-right {
-    display: flex;
+    display: inline-flex;
+    align-items: center;
 
     &.nut-icon {
       width: 20px;
@@ -48,7 +49,9 @@
 
     & > div,
     & > span,
-    & > svg {
+    & > i,
+    & > svg,
+    .nut-icon {
       margin-right: $searchbar-gap;
 
       &:last-child {
@@ -59,10 +62,11 @@
 
   &-right {
     margin-left: $searchbar-gap;
-
     & > div,
     & > span,
-    & > svg {
+    & > i,
+    & > svg,
+    .nut-icon {
       margin-left: $searchbar-gap;
 
       &:first-child {
@@ -89,7 +93,8 @@
     }
   }
 
-  &-input-box {
+  &-input-box,
+  &-input {
     display: flex;
     align-items: center;
     flex: 1;
@@ -100,8 +105,6 @@
     outline: 0;
     box-sizing: border-box;
     width: 100%;
-    height: $searchbar-input-height;
-    line-height: $searchbar-input-height;
     padding: $searchbar-input-padding;
     font-size: $searchbar-font-size;
     color: $searchbar-input-text-color;

src/packages/searchbar/searchbar.taro.tsx

@@ -1,12 +1,12 @@
 import React, { FunctionComponent, useEffect, useRef, useState } from 'react'
 import type { ChangeEvent, FocusEvent, MouseEvent } from 'react'
-import { View, ITouchEvent } from '@tarojs/components'
+import { View, ITouchEvent, Input as TaroInput } from '@tarojs/components'
 import { MaskClose, Search, ArrowLeft } from '@nutui/icons-react-taro'
 import { useConfig } from '@/packages/configprovider/configprovider.taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 
 export interface SearchBarProps extends BasicComponent {
-  value?: number | string
+  value?: string
   placeholder?: string
   shape?: 'square' | 'round'
   disabled?: boolean
@@ -87,21 +87,20 @@ export const SearchBar: FunctionComponent<
     const searchSelf: HTMLInputElement | null = searchRef.current
     searchSelf && searchSelf.focus()
   }
-  const change = (event: ChangeEvent<HTMLInputElement>) => {
-    if (value === event.target.value) return
-    onChange && onChange?.(event.target.value, event)
-    setValue(event.target.value)
-    event.target.value === '' && forceFocus()
+  const onInput = (event: any) => {
+    const eventValue = event?.detail?.value
+    if (value === eventValue) return
+    onChange && onChange?.(eventValue, event)
+    setValue(eventValue)
+    eventValue === '' && forceFocus()
   }
-  const focus = (event: FocusEvent<HTMLInputElement>) => {
-    const { value } = event.target
-    onFocus && onFocus?.(value, event)
+  const focus = (event: any) => {
+    onFocus && onFocus(event?.detail?.value, event)
   }
-  const blur = (event: FocusEvent<HTMLInputElement>) => {
+  const blur = (event: any) => {
     const searchSelf: HTMLInputElement | null = searchRef.current
     searchSelf && searchSelf.blur()
-    const { value } = event.target
-    onBlur && onBlur?.(value, event)
+    onBlur && onBlur(event?.detail?.value, event)
   }
   useEffect(() => {
     setValue(outerValue || '')
@@ -111,26 +110,27 @@ export const SearchBar: FunctionComponent<
   }, [autoFocus])
   const renderField = () => {
     return (
-      <input
+      <TaroInput
         className={`${classPrefix}-input ${
           clearable ? `${classPrefix}-input-clear` : ''
         }`}
         ref={searchRef}
         style={style}
         value={value || ''}
         placeholder={placeholder || locale.placeholder}
-        disabled={disabled}
-        readOnly={readOnly}
-        maxLength={maxLength}
-        onKeyPress={onKeypress}
-        onChange={(e) => change(e)}
-        onFocus={(e) => focus(e)}
-        onBlur={(e) => blur(e)}
-        onClick={(e) => clickInput(e)}
+        disabled={disabled || readOnly}
+        maxlength={maxLength}
+        // @ts-ignore
+        // onKeyDown={onKeypress}
+        onInput={onInput}
+        onFocus={focus}
+        onBlur={blur}
+        onClick={clickInput}
+        onConfirm={onConfirm}
       />
     )
   }
-  const clickInput = (e: MouseEvent<HTMLInputElement>) => {
+  const clickInput = (e: any) => {
     onInputClick && onInputClick(e)
   }
   const renderLeftIn = () => {
@@ -182,13 +182,16 @@ export const SearchBar: FunctionComponent<
     onChange && onChange?.('')
     onClear && onClear(event)
   }
-  const onKeypress = (e: any) => {
-    if (e.key === 'Enter' || e.keyCode === 13) {
-      if (typeof e.cancelable !== 'boolean' || e.cancelable) {
-        e.preventDefault()
-      }
-      onSearch && onSearch(value as string)
-    }
+  //   const onKeypress = (event: any) => {
+  //     if (event?.detail?.keyCode === 13) {
+  //       if (typeof event.cancelable !== 'boolean' || event.cancelable) {
+  //         event.preventDefault()
+  //       }
+  //       onSearch && onSearch(value as string)
+  //     }
+  //   }
+  const onConfirm = () => {
+    onSearch && onSearch(value as string)
   }
   return (
     <View