chore(SearchInputBar): Fix 失焦触发事件问题 Updater README

cuilanxin · cuilanxin · commit 06d8d1fe3f2a · 2021-10-14T15:02:31.000+08:00
diff --git a/example/examples/src/routes/SearchInputBar/index.tsx b/example/examples/src/routes/SearchInputBar/index.tsx
@@ -33,10 +33,10 @@ export default class Index extends Component<IndexProps, IndexState> {
     const description = route.params.description;
     const title = route.params.title;
     return (
-      <Container>
+      <Container keyboardShouldPersistTaps="always">
         <Layout>
           <Header title={title} description={description} />
-          <Body>
+          <Body keyboardShouldPersistTaps="always">
             <View style={styles.divider} />
             <SearchInputBar
               ref={this.ref}
diff --git a/packages/core/src/SearchInputBar/README.md b/packages/core/src/SearchInputBar/README.md
@@ -54,6 +54,33 @@ function Demo() {
 }
 ```
 
+## 键盘不收起来
+
+**注意: 每层```ScrollView```都要写```keyboardShouldPersistTaps="always"```**
+
+```jsx
+import { Fragment, useState } from 'react';
+import { SearchInputBar } from '@uiw/react-native';
+function Demo() {
+  const [value, setValue] = useState('')
+  return (
+    <ScrollView keyboardShouldPersistTaps="always" >
+      <SearchInputBar
+        onChangeText={setValue}
+        onClear={()=>setValue('')}
+        value={value}
+        showActionButton
+        button={{
+          onPress() {
+            // 点击搜索按钮触法
+          }
+        }}
+      />
+    </ScrollView>
+  );
+}
+```
+
 ## 获取输入框 Ref
 
 ```jsx
@@ -90,19 +117,25 @@ function Demo() {
 ## Props
 
 ```ts
-import { TextInputProps } from 'react-native';
-import { ButtonProps } from '@uiw/react-native'
+import { TextInputProps,StyleProp,ViewStyle } from 'react-native';
+import { ButtonProps,IconsProps } from '@uiw/react-native'
 
 export interface SearchInputBarProps extends TextInputProps {
-  /** 点击清除按钮时触发事件 */
-  onClear?: Function,
+  /** 容器样式 */
+  containerStyle?: StyleProp<ViewStyle>;
   /** 右侧按钮 */
-  button?: ButtonProps
+  button?: ButtonProps;
   /** 右侧按钮文案 */
-  actionName?: string,
-  /** 右侧按钮宽度默认70 */
-  buttonWidth?: number,
-  /** 是否一直显示右侧按钮 */
-  showActionButton?: boolean
+  actionName?: string;
+  /** 是否一直显示右侧按钮 null = 永不显示 */
+  showActionButton?: boolean | null;
+  /** 搜索图标 */
+  searchIcon?: IconsProps;
+  /** 点击搜索图标时触发事件 */
+  onSearch?: Function;
+  /** 清除图标 */
+  closeIcon?: IconsProps;
+  /** 点击清除图标时触发事件 */
+  onClear?: Function;
 }
 ```
diff --git a/packages/core/src/SearchInputBar/RightButton.tsx b/packages/core/src/SearchInputBar/RightButton.tsx
diff --git a/packages/core/src/SearchInputBar/index.tsx b/packages/core/src/SearchInputBar/index.tsx
@@ -4,17 +4,14 @@ import {
   StyleSheet,
   StyleProp,
   ViewStyle,
-  Text,
   TouchableOpacity,
-  Animated,
   NativeSyntheticEvent,
   TextInput,
   TextInputFocusEventData,
   TextInputProps,
 } from 'react-native';
 import Icon, { IconsProps } from '../Icon';
 import Button, { ButtonProps } from '../Button';
-import RightButton from './RightButton';
 
 export interface SearchInputBarProps extends TextInputProps {
   /** 容器样式 */
@@ -38,8 +35,6 @@ export interface SearchInputBarProps extends TextInputProps {
 interface SearchInputBarState {
   // isShow close icon
   showIcon: boolean;
-  // close style
-  showIconLeft: number;
 }
 
 export default class SearchInputBar extends React.Component<SearchInputBarProps, SearchInputBarState> {
@@ -48,20 +43,19 @@ export default class SearchInputBar extends React.Component<SearchInputBarProps,
     super(props);
     this.state = {
       showIcon: false,
-      showIconLeft: 0,
     };
   }
 
   needFocus = (type: 'search' | 'close' | 'actived') => {
     if (type === 'close') {
       this.props.onClear?.();
-    } else if (type === 'search') {
+    } else if (type === 'search' && this.props.value) {
       this.props.onSearch?.();
+      return;
     }
     if (type === 'actived') {
       this.setState({ showIcon: true });
     }
-    console.log('object', type);
     this.inputRef.current && this.inputRef.current.focus();
   };
   render() {
@@ -80,11 +74,9 @@ export default class SearchInputBar extends React.Component<SearchInputBarProps,
     return (
       <View style={[styles.centerFlex]}>
         <View style={StyleSheet.flatten([styles.searchContainer, styles.centerFlex, containerStyle])}>
-          <View>
-            <TouchableOpacity style={{}} onPress={() => this.needFocus('search')}>
-              <Icon name="search" size={18} color="#999" height={'100%'} {...searchIcon} />
-            </TouchableOpacity>
-          </View>
+          <TouchableOpacity style={{}} onPress={() => this.needFocus('search')}>
+            <Icon name="search" size={18} color="#999" height={'100%'} {...searchIcon} />
+          </TouchableOpacity>
           <TextInput
             {...other}
             value={value}
@@ -98,7 +90,9 @@ export default class SearchInputBar extends React.Component<SearchInputBarProps,
               other?.onFocus?.(e);
             }}
             onBlur={(e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-              this.setState({ showIcon: false });
+              if (showActionButton !== null && !value) {
+                this.setState({ showIcon: false });
+              }
               other?.onBlur?.(e);
             }}
           />
@@ -134,7 +128,7 @@ const styles = StyleSheet.create({
     marginRight: 10,
   },
   textInput: {
-    height: 40,
+    height: '100%',
     flex: 1,
     fontSize: 18,
     paddingHorizontal: 8,
