From dafa729c5e3bcd3b9c5f6315bbedcc85e7e44606 Mon Sep 17 00:00:00 2001
From: WX <42308734@qq.com>
Date: Fri, 15 Oct 2021 18:16:58 +0800
Subject: [PATCH] fix:Update SearchBar & SearchInputBar

---
 .../examples/src/routes/SearchBar/index.tsx   |   8 +-
 .../src/routes/SearchInputBar/index.tsx       |  36 +++--
 packages/core/src/SearchBar/index.tsx         |  95 ++++++--------
 packages/core/src/SearchInputBar/README.md    |  15 ++-
 packages/core/src/SearchInputBar/index.tsx    | 124 +++++++++++-------
 5 files changed, 159 insertions(+), 119 deletions(-)

diff --git a/example/examples/src/routes/SearchBar/index.tsx b/example/examples/src/routes/SearchBar/index.tsx
index 8d9334ac0..990da85d4 100644
--- a/example/examples/src/routes/SearchBar/index.tsx
+++ b/example/examples/src/routes/SearchBar/index.tsx
@@ -3,6 +3,11 @@ 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},
@@ -10,13 +15,14 @@ const datas = [
   {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} />
diff --git a/example/examples/src/routes/SearchInputBar/index.tsx b/example/examples/src/routes/SearchInputBar/index.tsx
index bada02b4f..87f0b82b1 100644
--- a/example/examples/src/routes/SearchInputBar/index.tsx
+++ b/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,15 +44,20 @@ 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
@@ -58,14 +65,20 @@ export default class Index extends Component<IndexProps, IndexState> {
               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,
+  },
 });
diff --git a/packages/core/src/SearchBar/index.tsx b/packages/core/src/SearchBar/index.tsx
index 17938e958..293ea3706 100644
--- a/packages/core/src/SearchBar/index.tsx
+++ b/packages/core/src/SearchBar/index.tsx
@@ -1,8 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, memo, useCallback } from 'react';
 import {
   View,
   Text,
-  TextInput,
   SafeAreaView,
   StyleSheet,
   TouchableWithoutFeedback,
@@ -10,6 +9,7 @@ import {
   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,7 +35,7 @@ interface OptionsState {
 }
 
 // 搜索组件
-export default function SearchBar({
+function SearchBar({
   onChangeText,
   options = [],
   onChange,
@@ -42,16 +43,16 @@ export default function SearchBar({
   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: {
diff --git a/packages/core/src/SearchInputBar/README.md b/packages/core/src/SearchInputBar/README.md
index e26e61214..429f82e80 100644
--- a/packages/core/src/SearchInputBar/README.md
+++ b/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
 }
 ```
\ No newline at end of file
diff --git a/packages/core/src/SearchInputBar/index.tsx b/packages/core/src/SearchInputBar/index.tsx
index 35ec125ce..66020ba62 100644
--- a/packages/core/src/SearchInputBar/index.tsx
+++ b/packages/core/src/SearchInputBar/index.tsx
@@ -9,27 +9,37 @@ import {
   TextInput,
   TextInputFocusEventData,
   TextInputProps,
+  Text,
+  TextStyle,
+  TouchableWithoutFeedbackProps,
 } from 'react-native';
 import Icon, { IconsProps } from '../Icon';
-import Button, { ButtonProps } from '../Button';
+import Loader from '../Loader';
+import { colors } from '../utils';
 
 export interface SearchInputBarProps extends TextInputProps {
   /** 容器样式 */
   containerStyle?: StyleProp<ViewStyle>;
   /** 右侧按钮 */
-  button?: ButtonProps;
+  touchProps?: TouchableWithoutFeedbackProps;
   /** 右侧按钮文案 */
   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;
 }
 
 interface SearchInputBarState {
@@ -58,56 +68,70 @@ export default class SearchInputBar extends React.Component<SearchInputBarProps,
     }
     this.inputRef.current && this.inputRef.current.focus();
   };
+
+  // 右侧搜索
+  renderSearch = () => {
+    const { showActionButton, searchRender, touchProps, actionName = '搜索', loading } = this.props;
+    const { showIcon } = this.state;
+    if (showActionButton || showIcon) {
+      return searchRender ? (
+        searchRender
+      ) : (
+        <TouchableOpacity {...touchProps} style={[styles.search, { paddingHorizontal: 10 }]}>
+          <Text>{actionName}</Text>
+        </TouchableOpacity>
+      );
+    }
+    return null;
+  };
+
   render() {
     const {
       value,
       onChangeText,
       showActionButton,
-      actionName = '搜索',
-      button,
-      style,
+      inputStyle,
       containerStyle,
       searchIcon,
       closeIcon,
+      loading,
       ...other
     } = this.props;
     return (
-      <View style={[styles.centerFlex]}>
-        <View style={StyleSheet.flatten([styles.searchContainer, styles.centerFlex, containerStyle])}>
-          <TouchableOpacity style={{}} onPress={() => this.needFocus('search')}>
-            <Icon name="search" size={18} color="#999" height={'100%'} {...searchIcon} />
-          </TouchableOpacity>
-          <TextInput
-            {...other}
-            value={value}
-            onChangeText={onChangeText}
-            ref={this.inputRef}
-            style={[styles.textInput, style]}
-            onFocus={(e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-              if (showActionButton !== null) {
-                this.setState({ showIcon: true });
-              }
-              other?.onFocus?.(e);
-            }}
-            onBlur={(e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-              if (showActionButton !== null && !value) {
-                this.setState({ showIcon: false });
-              }
-              other?.onBlur?.(e);
-            }}
-          />
-          {Boolean(value) && (
-            <TouchableOpacity style={{}} onPress={() => this.needFocus('close')}>
-              <Icon name="close" size={18} color="#999" height={'100%'} {...closeIcon} />
+      <Loader loading={loading ? loading : false} rounded={5} maskColor="transparent">
+        <View style={[styles.centerFlex]}>
+          <View style={StyleSheet.flatten([styles.searchContainer, styles.centerFlex, containerStyle])}>
+            <TouchableOpacity style={{}} onPress={() => this.needFocus('search')}>
+              <Icon name="search" size={14} color={colors.colorsPalette.grey40} height={'100%'} {...searchIcon} />
             </TouchableOpacity>
-          )}
+            <TextInput
+              {...other}
+              value={value}
+              onChangeText={onChangeText}
+              ref={this.inputRef}
+              style={[styles.textInput, inputStyle]}
+              onFocus={(e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+                if (showActionButton !== null) {
+                  this.setState({ showIcon: true });
+                }
+                other?.onFocus?.(e);
+              }}
+              onBlur={(e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+                if (showActionButton !== null && !value) {
+                  this.setState({ showIcon: false });
+                }
+                other?.onBlur?.(e);
+              }}
+            />
+            {Boolean(value) && (
+              <TouchableOpacity style={{}} onPress={() => this.needFocus('close')}>
+                <Icon name="close" size={14} color={colors.colorsPalette.grey40} height={'100%'} {...closeIcon} />
+              </TouchableOpacity>
+            )}
+          </View>
+          {this.renderSearch()}
         </View>
-        {(showActionButton || this.state.showIcon) && (
-          <Button type="primary" {...button}>
-            {actionName}
-          </Button>
-        )}
-      </View>
+      </Loader>
     );
   }
 }
@@ -120,18 +144,22 @@ const styles = StyleSheet.create({
   },
   searchContainer: {
     height: 40,
-    borderColor: 'gray',
-    borderWidth: 1,
-    borderRadius: 20,
+    borderRadius: 5,
     flex: 1,
-    paddingHorizontal: 10,
-    marginRight: 10,
+    paddingHorizontal: 15,
+    backgroundColor: colors.colorsPalette.grey70,
   },
   textInput: {
     paddingVertical: 0,
     height: '100%',
     flex: 1,
-    fontSize: 18,
-    paddingHorizontal: 8,
+    fontSize: 14,
+    fontWeight: '400',
+    paddingLeft: 10,
+    color: colors.colorsPalette.grey40,
+  },
+  search: {
+    justifyContent: 'center',
+    borderWidth: 0,
   },
 });