fix:Update SearchBar & SearchInputBar

Author: ChenlingasMx

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

@@ -3,20 +3,26 @@ import {SafeAreaView} from 'react-native';
 import {SearchBar} from '@uiw/react-native';
 import {ComProps} from '../../routes';
 import Layout from '../../Layout';
+interface Columns {
+  label: string;
+  value: number | string;
+}
+
 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 description = route.params.description;
   const title = route.params.title;
 
-  const [data, setData] = useState(datas);
+  const [data, setData] = useState<Columns[]>([]);
   return (
     <SafeAreaView style={{flex: 1}}>
       <Header title={title} description={description} />

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

@@ -1,15 +1,16 @@
 import React, {Component} from 'react';
-import {StyleSheet, View, TextInput} from 'react-native';
+import {StyleSheet, View, Text} from 'react-native';
 import Layout, {Container} from '../../Layout';
 import {SearchInputBar, Toast} from '@uiw/react-native';
 import {ComProps} from '../../routes';
 
-const {Header, Body, Card, Footer} = Layout;
+const {Header, Body, Footer} = Layout;
 
 export interface IndexProps extends ComProps {}
 export interface IndexState {
   value?: string;
   value2?: string;
+  loading?: boolean;
 }
 
 export default class Index extends Component<IndexProps, IndexState> {
@@ -20,6 +21,7 @@ export default class Index extends Component<IndexProps, IndexState> {
     this.state = {
       value: '',
       value2: '',
+      loading: false,
     };
   }
   onChangeText = (val: string, key: 'value' | 'value2') => {
@@ -42,30 +44,41 @@ export default class Index extends Component<IndexProps, IndexState> {
               ref={this.ref}
               onChangeText={val => this.onChangeText(val, 'value')}
               onClear={() => this.onClear('value')}
-              placeholder="请输入搜索关键字"
+              placeholder="请输入搜索关键字..."
+              actionName="搜一下"
               value={this.state.value}
-              button={{
-                type: 'success',
+              touchProps={{
                 onPress: () => {
                   console.log('object', this.ref);
-                  Toast.info('你点击了搜索', 2, 'info');
+                  this.setState({loading: true}, () => {
+                    setTimeout(() => {
+                      this.setState({loading: false});
+                    }, 3000);
+                  });
                 },
               }}
+              loading={this.state.loading}
             />
             <View style={{height: 100}} />
             <SearchInputBar
               onChangeText={val => this.onChangeText(val, 'value2')}
               onClear={() => this.onClear('value2')}
               value={this.state.value2}
               placeholder="请输入搜索关键字"
-              actionName=" 搜一下"
+              searchRender={
+                <View style={styles.search}>
+                  <Text>搜索</Text>
+                </View>
+              }
               showActionButton
-              buttonWidth={120}
-              button={{
+              touchProps={{
                 onPress() {
                   Toast.info('你点击了搜一下', 2, 'info');
                 },
               }}
+              containerStyle={{
+                marginHorizontal: 10,
+              }}
             />
           </Body>
           <Footer />
@@ -84,4 +97,9 @@ const styles = StyleSheet.create({
   divider: {
     marginVertical: 10,
   },
+  search: {
+    justifyContent: 'center',
+    borderWidth: 0,
+    paddingRight: 10,
+  },
 });

packages/core/src/SearchBar/index.tsx

@@ -1,15 +1,15 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, memo, useCallback } from 'react';
 import {
   View,
   Text,
-  TextInput,
   SafeAreaView,
   StyleSheet,
   TouchableWithoutFeedback,
   ActivityIndicator,
   Pressable,
 } from 'react-native';
 import MaskLayer from '../MaskLayer';
+import SearchInputBar from '../SearchInputBar';
 import List from '../List';
 import { down } from './svg';
 import Icon from '../Icon';
@@ -19,6 +19,7 @@ interface SearchBarProps {
   options?: Array<OptionsState>;
   onChange?: (value: string | null) => void;
   onFocus?: (e: any | string) => void;
+  onBlur?: (e: any | string) => void;
   labelInValue?: Boolean;
   disabled?: Boolean;
   value?: String;
@@ -34,24 +35,24 @@ interface OptionsState {
 }
 
 // 搜索组件
-export default function SearchBar({
+function SearchBar({
   onChangeText,
   options = [],
   onChange,
   labelInValue,
   disabled,
   value,
   onFocus,
+  onBlur,
   loading,
   placeholder,
   extra,
   showClear = true,
 }: SearchBarProps) {
-  const onHandleChangeText = (val: string) => {
-    onChangeText && onChangeText(val);
-  };
   const [curValue, setCurValue] = useState<any>(value);
   const [visible, setVisivble] = useState(false);
+  const textValue = labelInValue ? curValue && curValue.label : curValue;
+
   useEffect(() => {
     setCurValue(value);
   }, [value]);
@@ -60,13 +61,19 @@ export default function SearchBar({
     visible && onFocus;
   }, [visible]);
 
+  // 搜索
+  const onHandleChangeText = (val: string) => {
+    onChangeText && onChangeText(val);
+  };
+
+  // 点击打开遮罩层
   const showSearchBar = () => {
     if (disabled) {
       return;
     }
     setVisivble(true);
   };
-  const textValue = labelInValue ? curValue && curValue.label : curValue;
+
   return !visible ? (
     <Pressable onPress={showSearchBar}>
       <View style={[styles.content]}>
@@ -91,30 +98,27 @@ export default function SearchBar({
   ) : (
     <MaskLayer visible={visible}>
       <SafeAreaView style={styles.container}>
-        <View style={styles.inputBox}>
-          <View style={styles.leftBox}>
-            <View style={styles.icon}>
-              <Icon name="search" color="#ccc" size={20} />
-            </View>
-            <TextInput
-              placeholderTextColor="#000"
-              onFocus={onFocus && onFocus}
-              style={styles.input}
-              placeholder="输入搜索..."
-              onChangeText={onHandleChangeText}
-            />
-          </View>
-
-          <TouchableWithoutFeedback
-            onPress={() => {
-              setVisivble(false);
-            }}
-          >
-            <View style={styles.cancel}>
-              <Text>取消</Text>
-            </View>
-          </TouchableWithoutFeedback>
-        </View>
+        <SearchInputBar
+          loading={loading}
+          containerStyle={{ backgroundColor: '#fff', marginHorizontal: 10 }}
+          autoFocus
+          showActionButton
+          placeholder="输入搜索..."
+          onChangeText={onHandleChangeText}
+          onFocus={onFocus && onFocus}
+          onBlur={onBlur && onBlur}
+          searchRender={
+            <TouchableWithoutFeedback
+              onPress={() => {
+                setVisivble(false);
+              }}
+            >
+              <View style={styles.cancel}>
+                <Text>取消</Text>
+              </View>
+            </TouchableWithoutFeedback>
+          }
+        />
         {loading ? (
           <ActivityIndicator color="#0A0258" size="large" style={styles.loading} />
         ) : (
@@ -144,6 +148,8 @@ export default function SearchBar({
   );
 }
 
+export default memo(SearchBar);
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -153,39 +159,14 @@ const styles = StyleSheet.create({
     fontSize: 16,
     color: 'black',
   },
-  inputBox: {
-    paddingLeft: 10,
-    paddingRight: 10,
-    marginTop: 5,
-    flexDirection: 'row',
-    alignItems: 'center',
-    height: 40,
-  },
-  leftBox: {
-    flex: 1,
-    flexDirection: 'row',
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    paddingTop: 8,
-    paddingBottom: 8,
-  },
   icon: {
     backgroundColor: '#fff',
     paddingLeft: 10,
     justifyContent: 'center',
   },
-  input: {
-    backgroundColor: '#fff',
-    fontSize: 16,
-    flex: 1,
-    paddingLeft: 10,
-    color: '#7C7D7E',
-    paddingBottom: 0,
-    paddingTop: 0,
-  },
   cancel: {
     color: '#7C7D7E',
-    paddingLeft: 10,
+    paddingRight: 10,
     justifyContent: 'center',
   },
   list: {

packages/core/src/SearchInputBar/README.md

@@ -27,7 +27,7 @@ function Demo() {
 }
 ```
 
-## 一直显示右侧按钮 && 自定义placeholder
+## 一直显示右侧按钮 && 自定义placeholder && 自定右侧搜索内容
 
 ```jsx
 import { Fragment, useState } from 'react';
@@ -41,6 +41,7 @@ function Demo() {
         onClear={()=>setValue('')}
         value={value}
         placeholder="请输入搜索关键字"
+        searchRender={<View style={styles.search}><Text>搜索</Text></View>}
         actionName="搜一下"
         showActionButton
         button={{
@@ -115,7 +116,7 @@ function Demo() {
 ```
 
 ## Props
-
+**注意: 组件继承了```TextInput```属性**
 ```ts
 import { TextInputProps,StyleProp,ViewStyle } from 'react-native';
 import { ButtonProps,IconsProps } from '@uiw/react-native'
@@ -129,13 +130,19 @@ export interface SearchInputBarProps extends TextInputProps {
   actionName?: string;
   /** 是否一直显示右侧按钮 null = 永不显示 */
   showActionButton?: boolean | null;
-  /** 搜索图标 */
+  /** 搜索图标Icon参数 参考Icon组件 */
   searchIcon?: IconsProps;
   /** 点击搜索图标时触发事件 */
   onSearch?: Function;
-  /** 清除图标 */
+  /** 清除图标Icon参数 参考Icon组件 */
   closeIcon?: IconsProps;
   /** 点击清除图标时触发事件 */
   onClear?: Function;
+  /** 自定义搜索 */
+  searchRender?: JSX.Element;
+  /** 输入框TextInput样式 */ 
+  inputStyle?: TextStyle
+  /** loading加载 */
+  loading?: any
 }
 ```