(fix):SearchBar Add Delete Function

Author: ChenlingasMx

example/examples/src/routes/SearchBar/index.tsx

@@ -1,26 +1,39 @@
-import React, {useState} from 'react';
-import {SafeAreaView} from 'react-native';
-import {SearchBar} from '@uiw/react-native';
-import {ComProps} from '../../routes';
+import React, { useState } from 'react';
+import { SafeAreaView } from 'react-native';
+import { SearchBar } from '@uiw/react-native';
+import { ComProps } from '../../routes';
 import Layout from '../../Layout';
-
+const datas = [
+  { label: '上海', value: 1 },
+  { label: '南京', value: 2 },
+  { label: '天津', value: 3 },
+  { label: '杭州', value: 4 },
+  { label: '北京', value: 5 },
+]
 const SearchBarDemo = (props: ComProps) => {
-  const {Header} = Layout;
-  const {route} = props;
+  const { Header } = Layout;
+  const { route } = props;
   const description = route.params.description;
   const title = route.params.title;
 
-  const [data, setData] = useState([
-    {label: '上海', value: 1},
-    {label: '南京', value: 2},
-  ]);
+  const [data, setData] = useState(datas);
   return (
-    <SafeAreaView style={{flex: 1}}>
+    <SafeAreaView style={{ flex: 1 }}>
       <Header title={title} description={description} />
       <SearchBar
+        onFocus={() => setData(datas)}
+        onChangeText={(text) => {
+          let search
+          if(text){
+            search = data.filter(item => item.label === text)
+          }else {
+            search = datas
+          }
+          setData(search)
+        }}
         labelInValue
         options={data}
-        onChange={(val: string) => console.log('val', val)}
+        onChange={(val) => console.log('val', val)}
       />
     </SafeAreaView>
   );

packages/core/src/SearchBar/README.md

@@ -23,14 +23,34 @@ function Demo() {
 
 ### props
 
-| 参数                 | 说明         | 类型    | 默认值  |
-| -------------------- | ------------ | ------- | ------- |
-| `labelInValue`           |是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 string 变为 { key: string, label: ReactNode } 的格式       | Boolean | `false` |
-| `options`            | 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能  | { label, value }[] | [] |
-| `onChange`           | 时间变化     | void    | -       |
-| `onFocus` | 获得焦点时回调   | void    | () => { }       |
-| `onChangeText` | 搜索框文字变化   | void    | -       |
-| `disabled` | 是否禁用   | boolean    | false       |
-| `placeholder` | 	搜索框默认文本   | string    | `输入搜索...`       |
-| `loading` | 加载中状态   | boolean    | false      |
-| `extra` | 图标   | dom    | extra : <Icon xml={down} size={18} /> |
+```ts
+interface OptionsState {
+  label: string;
+  value: string | number;
+}
+
+interface SearchBarProps {
+  /** 搜索框文字变化 */
+  onChangeText?: (value: string) => void;
+  /** 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能 */
+  options?: Array<OptionsState>;
+  /** 事件变化回调 */
+  onChange?: (value: string | null) => void;
+  /** 获得焦点时回调 */
+  onFocus?: (e: any | string) => void;
+  /** 是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 string 变为 { key: string, label: ReactNode } 的格式   */
+  labelInValue?: Boolean;
+  /** 是否禁用 */
+  disabled?: Boolean;
+  /** 值 */
+  value?: String;
+  /** 加载中状态 */
+  loading?: Boolean;
+  /** 搜索框默认文本 */
+  placeholder?: String;
+  /** 图标 */
+  extra?: JSX.Element;
+  /** 是否展示清楚图标 */
+  showClear?: boolean;
+}
+```

packages/core/src/SearchBar/index.tsx

@@ -17,14 +17,15 @@ import Icon from '../Icon';
 interface SearchBarProps {
   onChangeText?: (value: string) => void;
   options?: Array<OptionsState>;
-  onChange?: (value: string) => void;
+  onChange?: (value: string | null) => void;
   onFocus?: (e: any | string) => void;
   labelInValue?: Boolean;
   disabled?: Boolean;
   value?: String;
   loading?: Boolean;
   placeholder?: String;
   extra?: JSX.Element;
+  showClear?: boolean;
 }
 
 interface OptionsState {
@@ -44,6 +45,7 @@ export default function SearchBar({
   loading,
   placeholder,
   extra,
+  showClear = true
 }: SearchBarProps) {
   const onHandleChangeText = (val: string) => {
     onChangeText && onChangeText(val);
@@ -69,7 +71,18 @@ export default function SearchBar({
     <Pressable onPress={showSearchBar}>
       <View style={[styles.content]}>
         <Text style={styles.contentTitle}>{textValue ? textValue : placeholder}</Text>
-        {React.isValidElement(extra) ? extra : <Icon xml={down} size={18} />}
+        {React.isValidElement(extra) ? (
+          extra
+        ) :
+          curValue && showClear ?
+            <Pressable onPress={() => {
+              onChange && onChange(null)
+              setCurValue(null)
+            }} style={{ paddingRight: 3 }}>
+              <Icon name="circle-close-o" size={18} color="#ccc" />
+            </Pressable> :
+            <Icon xml={down} size={18} color="#A19EA0" />
+        }
       </View>
     </Pressable>
   ) : (
@@ -110,9 +123,9 @@ export default function SearchBar({
                   const selectValue:
                     | any
                     | {
-                        key: string;
-                        label: string;
-                      } = labelInValue ? { key: itm.value, label: itm.label } : itm.value;
+                      key: string;
+                      label: string;
+                    } = labelInValue ? { key: itm.value, label: itm.label } : itm.value;
                   onChange && onChange(selectValue);
                   setCurValue(selectValue);
                   setVisivble(false);