Skip to content

Commit f9df8ff

Browse files
irisSongxiaoyatong
irisSong
and
xiaoyatong
authored
fix(searchbar): 多端适配 (#2657)
* fix(searchbar): harmony 适配 * fix: 添加注释 * fix: review问题修改 * fix: icon 适配 * fix: update icons-react-taro version * chore: update pnpm-lock.yaml --------- Co-authored-by: xiaoyatong <[email protected]>
1 parent d92c50a commit f9df8ff

File tree

7 files changed

+82
-56
lines changed

7 files changed

+82
-56
lines changed

‎src/config.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -632,7 +632,7 @@
632632
"author": "dsj"
633633
},
634634
{
635-
"version": "2.0.0",
635+
"version": "3.0.0",
636636
"name": "SearchBar",
637637
"type": "component",
638638
"cName": "搜索栏",

‎src/packages/searchbar/demo.taro.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Taro from '@tarojs/taro'
33
import { ScrollView, View } from '@tarojs/components'
44
import { useTranslate } from '@/sites/assets/locale/taro'
55
import Header from '@/sites/components/header'
6+
import { harmony } from '@/utils/platform-taro'
67

78
import Demo1 from './demos/taro/demo1'
89
import Demo2 from './demos/taro/demo2'
@@ -66,8 +67,13 @@ const SearchBarDemo = () => {
6667
<Demo4 />
6768
<View className="h2">{translated.title5}</View>
6869
<Demo5 />
69-
<View className="h2">{translated.title7}</View>
70-
<Demo6 />
70+
{/* 组件引入Popover组件，待Popover组件适配harmony后验证 */}
71+
{!harmony() && (
72+
<>
73+
<View className="h2">{translated.title7}</View>
74+
<Demo6 />
75+
</>
76+
)}
7177
<View className="h2">{translated.title6}</View>
7278
<Demo7 />
7379
</ScrollView>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const Demo6 = () => {
3030
}}
3131
>
3232
更多
33-
<ArrowDown size={12} style={{ marginLeft: '5px' }} />
33+
<ArrowDown size={16} />
3434
</View>
3535
</Popover>
3636
}

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useState } from 'react'
22
import { View } from '@tarojs/components'
33
import { SearchBar } from '@nutui/nutui-react-taro'
4+
import pxTransform from '@/utils/px-transform'
45

56
const Demo7 = () => {
67
const [value, setValue] = useState('')
@@ -9,10 +10,10 @@ const Demo7 = () => {
910
<SearchBar onChange={(val: string) => setValue(val)} maxLength={10} />
1011
<View
1112
style={{
12-
height: '40px',
13-
lineHeight: '40px',
13+
height: pxTransform(40),
14+
lineHeight: pxTransform(40),
1415
color: '#666',
15-
fontSize: '14px',
16+
fontSize: pxTransform(14),
1617
}}
1718
>
1819
{value}

‎src/packages/searchbar/searchbar.harmony.css‎

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
align-items: center;
44
width: 100%;
55
padding: 6px 16px;
6-
background: #F7F8FC;
7-
color: #1A1A1A;
6+
background: #f5f6fa;
7+
color: #1a1a1a;
88
font-size: 14px;
99
box-sizing: border-box;
1010
justify-content: center;
@@ -27,15 +27,16 @@
2727
.nut-searchbar-clear {
2828
width: 16px;
2929
height: 16px;
30-
color: undefined;
30+
color: rgba(0, 0, 0, 0.2);
3131
}
3232
.nut-searchbar-rightin {
3333
width: 16px;
3434
height: 16px;
35-
color: undefined;
35+
color: rgba(0, 0, 0, 0.2);
3636
}
3737
.nut-searchbar-left, .nut-searchbar-right {
38-
display: flex;
38+
display: inline-flex;
39+
align-items: center;
3940
}
4041
.nut-searchbar-left.nut-icon, .nut-searchbar-right.nut-icon {
4142
width: 20px;
@@ -50,10 +51,17 @@
5051
.nut-searchbar-left > span {
5152
margin-right: 16px;
5253
}
54+
.nut-searchbar-left > i {
55+
margin-right: 16px;
56+
}
5357
.nut-searchbar-left > svg {
5458
margin-right: 16px;
5559
}
56-
.nut-searchbar-left > div:last-child, .nut-searchbar-left > span:last-child, .nut-searchbar-left > svg:last-child {
60+
.nut-searchbar-left .nut-icon {
61+
margin-right: 16px;
62+
}
63+
.nut-searchbar-left > div:last-child, .nut-searchbar-left > span:last-child, .nut-searchbar-left > i:last-child, .nut-searchbar-left > svg:last-child,
64+
.nut-searchbar-left .nut-icon:last-child {
5765
margin-right: 0;
5866
}
5967
.nut-searchbar-right {
@@ -65,10 +73,17 @@
6573
.nut-searchbar-right > span {
6674
margin-left: 16px;
6775
}
76+
.nut-searchbar-right > i {
77+
margin-left: 16px;
78+
}
6879
.nut-searchbar-right > svg {
6980
margin-left: 16px;
7081
}
71-
.nut-searchbar-right > div:first-child, .nut-searchbar-right > span:first-child, .nut-searchbar-right > svg:first-child {
82+
.nut-searchbar-right .nut-icon {
83+
margin-left: 16px;
84+
}
85+
.nut-searchbar-right > div:first-child, .nut-searchbar-right > span:first-child, .nut-searchbar-right > i:first-child, .nut-searchbar-right > svg:first-child,
86+
.nut-searchbar-right .nut-icon:first-child {
7287
margin-left: 0;
7388
}
7489
.nut-searchbar-left > text {
@@ -89,7 +104,7 @@
89104
.nut-searchbar-right > text:first-child, .nut-searchbar-right > view:first-child {
90105
margin-left: 0;
91106
}
92-
.nut-searchbar-input-box {
107+
.nut-searchbar-input-box, .nut-searchbar-input {
93108
display: flex;
94109
align-items: center;
95110
flex: 1;
@@ -99,12 +114,10 @@
99114
outline: 0;
100115
box-sizing: border-box;
101116
width: 100%;
102-
height: 32px;
103-
line-height: 32px;
104117
padding: 0 4px;
105118
font-size: 14px;
106-
color: #1A1A1A;
107-
caret-color: #1A1A1A;
119+
color: #1a1a1a;
120+
caret-color: #1a1a1a;
108121
background: transparent;
109122
text-align: left;
110123
}

‎src/packages/searchbar/searchbar.scss‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@
3535

3636
&-left,
3737
&-right {
38-
display: flex;
38+
display: inline-flex;
39+
align-items: center;
3940

4041
&.nut-icon {
4142
width: 20px;
@@ -48,7 +49,9 @@
4849

4950
& > div,
5051
& > span,
51-
& > svg {
52+
& > i,
53+
& > svg,
54+
.nut-icon {
5255
margin-right: $searchbar-gap;
5356

5457
&:last-child {
@@ -59,10 +62,11 @@
5962

6063
&-right {
6164
margin-left: $searchbar-gap;
62-
6365
& > div,
6466
& > span,
65-
& > svg {
67+
& > i,
68+
& > svg,
69+
.nut-icon {
6670
margin-left: $searchbar-gap;
6771

6872
&:first-child {
@@ -89,7 +93,8 @@
8993
}
9094
}
9195

92-
&-input-box {
96+
&-input-box,
97+
&-input {
9398
display: flex;
9499
align-items: center;
95100
flex: 1;
@@ -100,8 +105,6 @@
100105
outline: 0;
101106
box-sizing: border-box;
102107
width: 100%;
103-
height: $searchbar-input-height;
104-
line-height: $searchbar-input-height;
105108
padding: $searchbar-input-padding;
106109
font-size: $searchbar-font-size;
107110
color: $searchbar-input-text-color;

‎src/packages/searchbar/searchbar.taro.tsx‎

Lines changed: 33 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React, { FunctionComponent, useEffect, useRef, useState } from 'react'
22
import type { ChangeEvent, FocusEvent, MouseEvent } from 'react'
3-
import { View, ITouchEvent } from '@tarojs/components'
3+
import { View, ITouchEvent, Input as TaroInput } from '@tarojs/components'
44
import { MaskClose, Search, ArrowLeft } from '@nutui/icons-react-taro'
55
import { useConfig } from '@/packages/configprovider/configprovider.taro'
66
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
77

88
export interface SearchBarProps extends BasicComponent {
9-
value?: number | string
9+
value?: string
1010
placeholder?: string
1111
shape?: 'square' | 'round'
1212
disabled?: boolean
@@ -87,21 +87,20 @@ export const SearchBar: FunctionComponent<
8787
const searchSelf: HTMLInputElement | null = searchRef.current
8888
searchSelf && searchSelf.focus()
8989
}
90-
const change = (event: ChangeEvent<HTMLInputElement>) => {
91-
if (value === event.target.value) return
92-
onChange && onChange?.(event.target.value, event)
93-
setValue(event.target.value)
94-
event.target.value === '' && forceFocus()
90+
const onInput = (event: any) => {
91+
const eventValue = event?.detail?.value
92+
if (value === eventValue) return
93+
onChange && onChange?.(eventValue, event)
94+
setValue(eventValue)
95+
eventValue === '' && forceFocus()
9596
}
96-
const focus = (event: FocusEvent<HTMLInputElement>) => {
97-
const { value } = event.target
98-
onFocus && onFocus?.(value, event)
97+
const focus = (event: any) => {
98+
onFocus && onFocus(event?.detail?.value, event)
9999
}
100-
const blur = (event: FocusEvent<HTMLInputElement>) => {
100+
const blur = (event: any) => {
101101
const searchSelf: HTMLInputElement | null = searchRef.current
102102
searchSelf && searchSelf.blur()
103-
const { value } = event.target
104-
onBlur && onBlur?.(value, event)
103+
onBlur && onBlur(event?.detail?.value, event)
105104
}
106105
useEffect(() => {
107106
setValue(outerValue || '')
@@ -111,26 +110,27 @@ export const SearchBar: FunctionComponent<
111110
}, [autoFocus])
112111
const renderField = () => {
113112
return (
114-
<input
113+
<TaroInput
115114
className={`${classPrefix}-input ${
116115
clearable ? `${classPrefix}-input-clear` : ''
117116
}`}
118117
ref={searchRef}
119118
style={style}
120119
value={value || ''}
121120
placeholder={placeholder || locale.placeholder}
122-
disabled={disabled}
123-
readOnly={readOnly}
124-
maxLength={maxLength}
125-
onKeyPress={onKeypress}
126-
onChange={(e) => change(e)}
127-
onFocus={(e) => focus(e)}
128-
onBlur={(e) => blur(e)}
129-
onClick={(e) => clickInput(e)}
121+
disabled={disabled || readOnly}
122+
maxlength={maxLength}
123+
// @ts-ignore
124+
// onKeyDown={onKeypress}
125+
onInput={onInput}
126+
onFocus={focus}
127+
onBlur={blur}
128+
onClick={clickInput}
129+
onConfirm={onConfirm}
130130
/>
131131
)
132132
}
133-
const clickInput = (e: MouseEvent<HTMLInputElement>) => {
133+
const clickInput = (e: any) => {
134134
onInputClick && onInputClick(e)
135135
}
136136
const renderLeftIn = () => {
@@ -182,13 +182,16 @@ export const SearchBar: FunctionComponent<
182182
onChange && onChange?.('')
183183
onClear && onClear(event)
184184
}
185-
const onKeypress = (e: any) => {
186-
if (e.key === 'Enter' || e.keyCode === 13) {
187-
if (typeof e.cancelable !== 'boolean' || e.cancelable) {
188-
e.preventDefault()
189-
}
190-
onSearch && onSearch(value as string)
191-
}
185+
// const onKeypress = (event: any) => {
186+
// if (event?.detail?.keyCode === 13) {
187+
// if (typeof event.cancelable !== 'boolean' || event.cancelable) {
188+
// event.preventDefault()
189+
// }
190+
// onSearch && onSearch(value as string)
191+
// }
192+
// }
193+
const onConfirm = () => {
194+
onSearch && onSearch(value as string)
192195
}
193196
return (
194197
<View

0 commit comments

Comments
 (0)