fix: make InputItem clear icon behave properly in Android.

ant-design · Jan 3, 2019 · ce113ad · ce113ad
1 parent 0430de8
commit ce113ad
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 13 deletions.
diff --git a/components/input-item/demo/basic.tsx b/components/input-item/demo/basic.tsx
@@ -34,6 +34,7 @@ export default class BasicInputItemExample extends React.Component<any, any> {
         automaticallyAdjustContentInsets={false}
         showsHorizontalScrollIndicator={false}
         showsVerticalScrollIndicator={false}
+        keyboardShouldPersistTaps={'handled'}
       >
         <List renderHeader={'基本'}>
           <InputItem

diff --git a/components/input-item/index.tsx b/components/input-item/index.tsx
@@ -1,5 +1,14 @@
 import React from 'react';
-import { GestureResponderEvent, Platform, StyleSheet, Text, TextInputProperties, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native';
+import {
+  GestureResponderEvent,
+  Platform,
+  StyleSheet,
+  Text,
+  TextInputProperties,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
 import { Omit } from 'utility-types';
 import Icon from '../icon';
 import { WithTheme, WithThemeStyles } from '../style';
@@ -24,6 +33,10 @@ export interface InputItemProps
   disabled?: boolean;
 }
 
+interface InputItemState {
+  focus: boolean;
+}
+
 const noop = () => {};
 
 function normalizeValue(value?: string) {
@@ -33,7 +46,10 @@ function normalizeValue(value?: string) {
   return value;
 }
 
-export default class InputItem extends React.Component<InputItemProps, any> {
+export default class InputItem extends React.Component<
+  InputItemProps,
+  InputItemState
+> {
   static defaultProps = {
     type: 'text',
     editable: true,
@@ -51,6 +67,9 @@ export default class InputItem extends React.Component<InputItemProps, any> {
     last: false,
   };
 
+  state: InputItemState = {
+    focus: false,
+  };
   inputRef: Input | null;
 
   onChange = (text: string) => {
@@ -84,15 +103,19 @@ export default class InputItem extends React.Component<InputItemProps, any> {
   };
 
   onInputBlur = () => {
-    if (this.props.onBlur) {
-      this.props.onBlur(this.props.value);
-    }
+    this.setState({ focus: false }, () => {
+      if (this.props.onBlur) {
+        this.props.onBlur(this.props.value);
+      }
+    });
   };
 
   onInputFocus = () => {
-    if (this.props.onFocus) {
-      this.props.onFocus(this.props.value);
-    }
+    this.setState({ focus: true }, () => {
+      if (this.props.onFocus) {
+        this.props.onFocus(this.props.value);
+      }
+    });
   };
 
   onInputClear = () => {
@@ -110,6 +133,7 @@ export default class InputItem extends React.Component<InputItemProps, any> {
   };
 
   render() {
+    const android = Platform.OS === 'android';
     const {
       type,
       editable,
@@ -125,8 +149,8 @@ export default class InputItem extends React.Component<InputItemProps, any> {
       disabled,
       ...restProps
     } = this.props;
+    const { focus } = this.state;
     const { value, defaultValue, style } = restProps;
-
     let valueProps: any;
     if ('value' in this.props) {
       valueProps = {
@@ -203,21 +227,23 @@ export default class InputItem extends React.Component<InputItemProps, any> {
                   s.input,
                   error ? s.inputErrorColor : null,
                   disabledStyle,
+                  // 支持自定义样式
+                  restProps.style || null,
                 ]}
                 keyboardType={keyboardType}
                 onChange={event => this.onChange(event.nativeEvent.text)}
                 secureTextEntry={type === 'password'}
                 onBlur={this.onInputBlur}
                 onFocus={this.onInputFocus}
               />
-              {/* 只在有 value 的 受控模式 下展示 自定义的 安卓 clear 按钮 */}
-              {editable && clear && value && Platform.OS === 'android' ? (
+              {/* 只在有 value 的受控模式下且在编辑状态时展示自定义的安卓 clear 按钮 */}
+              {editable && clear && value && focus && android ? (
                 <TouchableOpacity
                   style={[s.clear]}
                   onPress={this.onInputClear}
                   hitSlop={{ top: 5, left: 5, bottom: 5, right: 5 }}
                 >
-                  <Icon name="close" />
+                  <Icon name="close" color={android ? 'white' : undefined} />
                 </TouchableOpacity>
               ) : null}
               {extra ? (

diff --git a/components/input-item/index.zh-CN.md b/components/input-item/index.zh-CN.md
@@ -24,7 +24,7 @@ subtitle: 文本输入
 | placeholder      | placeholder        | String | ''  |
 | editable    | 是否可编辑        | bool |  true  |
 | disabled    | 是否禁用        | bool |  true  |
-| clear      |  是否带清除功能(仅`editable`为`true`,`disabled`为`false`才生效) | bool | false  |
+| clear      |  是否带清除功能(仅`editable`为`true`,`disabled`为`false`才生效)。在 Android 中, 处于编辑状态(focus)时 icon 才会出现, 且此组件被`ScrollView`包裹时, 设置`ScrollView`的`keyboardShouldPersistTaps`属性为`handled`或`always`时, icon才会正确响应点击事件 | bool | false  |
 | maxLength      |  最大长度      | number |  无  |
 | onChange    | change 事件触发的回调函数 | (val: string): void |  -  |
 | onBlur     | blur 事件触发的回调函数 | (val: string): void |   -  |