feat(SearchInputBar): Add new component. (#210)

* 编写选项卡组件 * 类型名称请调整，添加组件文档在网站上展示 * #162修复报错 * fix:#162修复报错 * SpeedDial 悬浮标记 * 优化类型 * feat(ActionSheet): Add new component. * fix: ActionSheet 实例优化，组件优化 * feat(SearchInputBar): Add new component.
uiwjs · Sep 8, 2021 · 6d2f960 · 6d2f960
1 parent 251f51e
commit 6d2f960
Show file tree

Hide file tree

Showing 9 changed files with 446 additions and 0 deletions.
diff --git a/example/examples/src/routes.tsx b/example/examples/src/routes.tsx
@@ -411,4 +411,12 @@ export const stackPageData: Routes[] = [
       description: '该组件提供了一种动作面板, 底部缓缓出现',
     },
   },
+  {
+    name: 'SearchInputBar',
+    component: require('./routes/SearchInputBar').default,
+    params: {
+      title: 'SearchInputBar 搜索栏',
+      description: '可用于用户输入搜索信息',
+    },
+  },
 ];
diff --git a/example/examples/src/routes/SearchInputBar/index.tsx b/example/examples/src/routes/SearchInputBar/index.tsx
@@ -0,0 +1,83 @@
+import React, { Component } from 'react';
+import { StyleSheet, View, } 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;
+
+export interface IndexProps extends ComProps { }
+export interface IndexState {
+  value?: string;
+  value2?: string;
+}
+
+
+export default class Index extends Component<IndexProps, IndexState> {
+  static state: IndexState;
+  constructor(props: IndexProps) {
+    super(props);
+    this.state = {
+      value: '',
+      value2: ''
+    };
+  }
+  onChangeText = (val: string, key: 'value' | 'value2') => {
+    this.setState({ [key]: val })
+  }
+  onClear = (key: 'value' | 'value2') => {
+    this.setState({ [key]: '' })
+  }
+  render() {
+    const { route } = this.props;
+    const description = route.params.description;
+    const title = route.params.title;
+    return (
+      <Container>
+        <Layout>
+          <Header title={title} description={description} />
+          <Body>
+            <View style={styles.divider} />
+            <SearchInputBar
+              onChangeText={(val) => this.onChangeText(val, 'value')}
+              onClear={()=>this.onClear('value')}
+              value={this.state.value}
+              button={{
+                onPress() {
+                  Toast.info('你点击了搜索', 2, 'info')
+                }
+              }}
+            />
+            <View style={{ height: 100 }} />
+            <SearchInputBar
+              onChangeText={(val)=>this.onChangeText(val,'value2')}
+              onClear={()=>this.onClear('value2')}
+              value={this.state.value2}
+              placeholder="请输入搜索关键字"
+              actionName=" 搜一下"
+              showActionButton
+              buttonWidth={120}
+              button={{
+                onPress() {
+                  Toast.info('你点击了搜一下', 2, 'info')
+                }
+              }}
+            />
+          </Body>
+          <Footer />
+        </Layout>
+      </Container>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#fff',
+    paddingLeft: 20,
+    paddingRight: 20,
+  },
+  divider: {
+    marginVertical: 10,
+  },
+});
diff --git a/packages/core/src/SearchInputBar/README.md b/packages/core/src/SearchInputBar/README.md
@@ -0,0 +1,76 @@
+SearchInputBar 动作面板
+---
+
+可用于用户输入搜索信息
+
+## 基础示例
+
+```jsx
+import { Fragment, useState } from 'react';
+import { SearchInputBar } from '@uiw/react-native';
+function Demo() {
+  const [value, setValue] = useState('')
+  return (
+    <Fragment>
+      <SearchInputBar
+        onChangeText={setValue}
+        onClear={()=>setValue('')}
+        value={value}
+        button={{
+          onPress() {
+            // 点击搜索按钮触法
+          }
+        }}
+      />
+    </Fragment>
+  );
+}
+```
+
+## 一直显示右侧按钮 && 自定义placeholder
+
+```jsx
+import { Fragment, useState } from 'react';
+import { SearchInputBar } from '@uiw/react-native';
+function Demo() {
+  const [value, setValue] = useState('')
+  return (
+    <Fragment>
+      <SearchInputBar
+        onChangeText={setValue}
+        onClear={()=>setValue('')}
+        value={value}
+        placeholder="请输入搜索关键字"
+        actionName="搜一下"
+        showActionButton
+        button={{
+          onPress() {
+            // 点击搜索按钮触法
+          }
+        }}
+      />
+    </Fragment>
+  );
+}
+```
+
+
+## Props
+
+```ts
+import { TextInputProps } from 'react-native';
+import { ButtonProps } from '@uiw/react-native'
+
+export interface SearchInputBarProps extends TextInputProps {
+  /** 点击清除按钮时触发事件 */
+  onClear?: Function,
+  /** 右侧按钮 */
+  button?: ButtonProps
+  /** 右侧按钮文案 */
+  actionName?: string,
+  /** 右侧按钮宽度默认70 */
+  buttonWidth?: number,
+  /** 是否一直显示右侧按钮 */
+  showActionButton?: boolean
+}
+```
diff --git a/packages/core/src/SearchInputBar/RightButton.tsx b/packages/core/src/SearchInputBar/RightButton.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { View, StyleSheet,  } from 'react-native';
+import Button,{ ButtonProps } from '../Button';
+
+export interface RightButtonProps extends ButtonProps {
+  // 是否显示
+  isShow?: boolean,
+  // 右侧按钮文案
+  actionName?: string,
+  /** 宽度 */
+  width: number
+}
+
+interface RightButtonState {
+
+}
+
+export default class RightButton extends React.PureComponent<RightButtonProps, RightButtonState> {
+
+  constructor(props: RightButtonProps) {
+    super(props)
+    this.state = {
+    }
+  }
+
+  render() {
+    const { isShow=false, actionName='搜索',width, ...other } = this.props
+    return (
+      <View style={[styles.rightStyle,{width: width-10, opacity: Number(isShow)}]}>
+        <Button type="primary" {...other} style={{flex: 1,paddingHorizontal: 10,}}>{actionName}</Button>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  rightStyle: {
+    marginLeft: 10,
+    height: 40,
+  },
+});