fix:SearchBar组件

Author: ChenlingasMx

.eslintrc.js

@@ -1,4 +1,7 @@
 module.exports = {
   root: true,
   extends: '@react-native-community',
+  rulers: {
+    'eslintreact-hooks/exhaustive-deps': 0
+  }
 };

components/SearchBar/index.md

@@ -0,0 +1,26 @@
+### 模糊搜素组件
+
+```
+        <SearchBar 
+          labelInValue 
+          options={[
+            {label:'上海',value:1},
+            {label:'南京',value:2}
+          ]} 
+          onFocu={()=>{}}  
+          onChange={val=>console.log('val',val)} 
+        />
+```
+### 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} /> |

components/SearchBar/index.tsx

@@ -0,0 +1,201 @@
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  SafeAreaView,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  ActivityIndicator,
+  Pressable,
+} from 'react-native';
+import MaskLayer from '../MaskLayer';
+import List from '../List'
+import { down } from './svg';
+import Icon from '../Icon';
+
+interface SearchBarProps {
+  onChangeText?: (value: string) => void;
+  options?: Array<OptionsState>;
+  onChange?: (value: string) => void;
+  onFocus?: (e: any | string) => void;
+  labelInValue?: Boolean;
+  disabled?: Boolean;
+  value?: String;
+  loading?: Boolean;
+  placeholder?: String;
+  extra?: JSX.Element;
+}
+
+interface OptionsState {
+  label: string;
+  value: string | number;
+}
+
+// 搜索组件
+export default function SearchBar({
+  onChangeText,
+  options = [],
+  onChange,
+  labelInValue,
+  disabled,
+  value,
+  onFocus,
+  loading,
+  placeholder,
+  extra,
+}: SearchBarProps) {
+  const onHandleChangeText = (val: string) => {
+    onChangeText && onChangeText(val);
+  }
+  const [curValue, setCurValue] = useState<any>(value);
+  const [visible, setVisivble] = useState(false);
+  useEffect(() => {
+    setCurValue(value);
+  }, [value]);
+
+  useEffect(() => {
+    visible && onFocus;
+  }, [visible]);
+
+  const showSearchBar = () => {
+    if (disabled) {
+      return;
+    }
+    setVisivble(true);
+  };
+  const textValue = labelInValue ? curValue && curValue.label : curValue;
+  return !visible ? (
+    <Pressable onPress={showSearchBar}>
+      <View style={[styles.content]}>
+        <Text style={styles.contentTitle}>
+          {textValue ? textValue : placeholder}
+        </Text>
+        {React.isValidElement(extra) ? extra : <Icon xml={down} size={18} />}
+      </View>
+    </Pressable>
+  ) : (
+    <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>
+        {loading ? (
+          <ActivityIndicator
+            color="#0A0258"
+            size="large"
+            style={styles.loading}
+          />
+        ) : (
+          <List style={styles.list}>
+            {options.map(itm => (
+              <List.Item
+                key={itm.value}
+                onPress={() => {
+                  const selectValue: any | {
+                    key: string;
+                    label: string;
+                  } = labelInValue
+                      ? { key: itm.value, label: itm.label }
+                      : itm.value;
+                  onChange && onChange(selectValue);
+                  setCurValue(selectValue);
+                  setVisivble(false);
+                }}>
+                <Text style={{ fontSize: 16 }}>{itm.label}</Text>
+              </List.Item>
+            ))}
+          </List>
+        )}
+      </SafeAreaView>
+    </MaskLayer>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F5F5F5',
+  },
+  contentTitle: {
+    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,
+    justifyContent: 'center',
+  },
+  list: {
+    marginLeft: 10,
+    marginTop: 10,
+    marginRight: 10,
+  },
+  loading: {
+    position: 'absolute',
+    top: '20%',
+    left: '45%',
+  },
+  content: {
+    flexDirection: 'row',
+    height: 35,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingRight: 5,
+    backgroundColor:"#fff",
+    paddingHorizontal:16
+  },
+  disabled: {
+    backgroundColor: '#f5f5f5',
+  },
+});

components/SearchBar/svg.js

@@ -0,0 +1,3 @@
+export const down = `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="8" viewBox="0 0 13 8">
+<polyline fill="none" stroke="#C7C7CC" stroke-width="2" points="365 203 370.45 208.45 365 213.9" transform="rotate(90 289.725 -74.55)"/>
+</svg>`;

src/routes.tsx

@@ -241,4 +241,12 @@ export const stackPageData: Routes[] = [
       description: '布局控件。',
     },
   },
+  {
+    name: 'SearchBar',
+    component: require('./routes/SearchBar').default,
+    params: {
+      title: 'SearchBar 模糊搜索select',
+      description: '模糊搜索select。',
+    },
+  },
 ];

src/routes/SearchBar/index.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import { SafeAreaView } from 'react-native';
+import SearchBar from '../../../components/SearchBar'
+import Layout from '../../Layout';
+const SearchBarDemo = (props:any) => {
+
+  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 }
+  ])
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+       <Header title={title} description={description} />
+      <SearchBar
+        labelInValue
+        options={data}
+        onChange={val => console.log('val', val)}
+      />
+    </SafeAreaView>
+  );
+};
+export default SearchBarDemo;