chore(Input): 重构Inupt 组件 更新 Drawe 文档

Author: cuilanxin

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

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {StyleSheet} from 'react-native';
-import {Input} from '@uiw/react-native';
+import {Input, Toast} from '@uiw/react-native';
 import Layout, {Container} from '../../Layout';
 import {ComProps} from '../../routes';
 
@@ -11,6 +11,7 @@ export interface InputProps extends ComProps {}
 export default class InputView extends Component<InputProps> {
   state = {
     value: '',
+    value2: '',
   };
   render() {
     const {route} = this.props;
@@ -24,20 +25,36 @@ export default class InputView extends Component<InputProps> {
             <Card title="基础实例" style={styles.card}>
               <Input
                 style={styles.input}
-                onChange={(value: string) => {
+                placeholder="请输入"
+                disabled={true}
+                onChangeText={(value: string) => {
                   this.setState({value});
                 }}
                 value={this.state.value}
               />
             </Card>
+            <Card title="默认聚焦" style={styles.card}>
+              <Input style={styles.input} autoFocus />
+            </Card>
             <Card title="额外的内容" style={styles.card}>
-              <Input style={styles.input} extra="小数" />
+              <Input
+                style={styles.input}
+                extraStart="https://"
+                extraEnd=".com"
+              />
             </Card>
             <Card title="报错" style={styles.card}>
               <Input style={styles.input} error />
             </Card>
-            <Card title="手机号" style={styles.card}>
-              <Input style={styles.input} type="phone" />
+            <Card title="数字键盘" style={styles.card}>
+              <Input style={styles.input} keyboardType="numeric" />
+            </Card>
+            <Card title="校验" style={styles.card}>
+              <Input
+                style={styles.input}
+                rule={/\d/}
+                wrongfulHandle={() => Toast.info('内容不合法', 2, 'info')}
+              />
             </Card>
           </Body>
           <Footer />

packages/core/src/Drawer/README.md

@@ -6,7 +6,7 @@ Drawer 抽屉
 ## 基础示例
 
 ```jsx
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { View, Text } from 'react-native';
 import { Drawer, Button } from '@uiw/react-native';
 
@@ -31,7 +31,7 @@ function Demo() {
 ## 右边展示
 
 ```jsx
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { View, Text } from 'react-native';
 import { Drawer, Button } from '@uiw/react-native';
 

packages/core/src/Input/PropsType.tsx

@@ -9,14 +9,14 @@ Input 文本输入
 
 import React from 'react';
 import { View, Input } from '@uiw/react-native';
+import {View} from 'react-native';
 
 export default class BasicInputExample extends React.Component {
   render() {
     return <View>
       <Input onChange={(value) => {this.setState({value})}} value={this.state.value} />
       <Input extra="小数" />
       <Input error />
-      <Input type="phone" />
     </View>
   }
 }
@@ -26,13 +26,65 @@ export default class BasicInputExample extends React.Component {
 
 ## Props
 
-| 参数 | 说明 | 类型 | 默认值 |
-|------|------|-----|------|
-| `clear` | 是否显示清除按钮 | boolean | false |
-| `extra` | 额外的文字 | ReactNode \| string | - |
-| `error` | 是否显示错误 | boolean | false |
-| `onExtraClick` | `extra` 点击事件触发的回调函数	 | (e: Object): void | - |
-| `onErrorClick` | 点击报错 `icon` 触发的回调函数	 | (e: Object): void | - |
+```tsx
+import { StyleProp,TextStyle,TextInputProps, NativeSyntheticEvent, TextInputFocusEventData, TextInputChangeEventData, KeyboardTypeOptions,ViewStyle } from 'react-native'
+
+export interface InputProps extends TextInputProps {
+  /** 输入框默认值 */
+  value?: string;
+  /** 限制输入条件 */
+  rule?: RegExp | (value: string)=>boolean;
+  /** 输入不合法时触发方法 */
+  wrongfulHandle?: Function;
+  /** 限制文本框中最多的字符数。使用这个属性而不用 JS 逻辑去实现，可以避免闪烁的现象。 */
+  maxLength?: number;
+  /** 如果没有任何文字输入，会显示此字符串。 */
+  placeholder: string;
+  /** 输入框样式 */
+  style?: StyleProp<TextStyle>;
+  /** 容器样式 */
+  containerStyle?: StyleProp<ViewStyle>;
+  /** 显示错误 */
+  error?: boolean;
+  /** 自定义错误提示 */
+  renderError?: React.ReactNode;
+  /** 边框 */
+  border?: 'bottom'|'top'|'left'|'right'|null|'always';
+  /** 边框颜色 */
+  borderColor?: string;
+  /** 唤起键盘类型 详情 https://lefkowitz.me/visual-guide-to-react-native-textinput-keyboardtype-options/ */
+  keyboardType?: KeyboardTypeOptions;
+  /** 如果为 true，文本框是不可编辑的。默认值为 false */
+  disabled?: boolean;
+  /** 如果为 true，在componentDidMount后会获得焦点。默认值为 false。 */
+  autoFocus?: boolean;
+  /** 设置输入框高亮时的颜色（还包括光标）。 */
+  selectionColor?: string;
+  /** 如果为 true，则隐藏光标。默认值为 false。 */
+  caretHidden?: boolean;
+  /** 是否显示清除按钮 */
+  clear?: boolean;
+  /** 清除按钮样式 */
+  clearStyle?: StyleProp<TextStyle>;
+  /** 自定义清除元素 */
+  renderClear?: React.ReactNode;
+  /** 如果为 true，每次开始输入的时候都会清除文本框的内容。 */
+  clearText?: boolean;
+  /** 输入框前缀的额外的信息 */
+  extraStart?: string|React.ReactNode
+  /** 输入框末尾额外的信息 */
+  extraEnd?: string|React.ReactNode
+  /** 当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递 */
+  onChangeText?: ((text: string) => void);
+  /** 当文本框失去焦点的时候调用此回调函数。 */
+  onBlur?: ((e: NativeSyntheticEvent<TextInputFocusEventData>) => void);
+  /** 当文本框内容变化时调用此回调函数。回调参数为{ nativeEvent: { eventCount, target, text} }。 */
+  onChange?: ((e: NativeSyntheticEvent<TextInputChangeEventData>) => void);
+  /** 输入框 ref */
+  inputRef?: React.RefObject<TextInput>
+}
+
+```
 
 
-> 更多 react-native InputItem 属性请参考 react-native TextInput (http://facebook.github.io/react-native/docs/textinput.html)
+> 更多 react-native Input 属性请参考 react-native TextInput (https://www.react-native.cn/docs/textinput)