From 5186410670736c69b06ed631dbd745ff01aa307c Mon Sep 17 00:00:00 2001
From: bang <sqibang@gmail.com>
Date: Wed, 12 Dec 2018 12:05:32 +0800
Subject: [PATCH] fix: add disabled property close #149

---
 components/input-item/demo/basic.tsx  | 14 +++++++++
 components/input-item/index.en-US.md  |  1 +
 components/input-item/index.tsx       | 13 +++++---
 components/input-item/index.zh-CN.md  |  1 +
 components/input-item/style/index.tsx | 43 +++++++++++++++------------
 5 files changed, 49 insertions(+), 23 deletions(-)

diff --git a/components/input-item/demo/basic.tsx b/components/input-item/demo/basic.tsx
index 7dabe96e0..4f3c261e1 100644
--- a/components/input-item/demo/basic.tsx
+++ b/components/input-item/demo/basic.tsx
@@ -64,6 +64,20 @@ export default class BasicInputItemExample extends React.Component<any, any> {
           >
             输入框
           </InputItem>
+          <InputItem
+            clear
+            value="disabled"
+            onChange={(value: any) => {
+              this.setState({
+                value,
+              });
+            }}
+            extra={<Text>元</Text>}
+            placeholder="disabled"
+            disabled
+          >
+            输入框
+          </InputItem>
           <InputItem
             clear
             value={this.state.value1}
diff --git a/components/input-item/index.en-US.md b/components/input-item/index.en-US.md
index 87414a1a6..33b5e928a 100644
--- a/components/input-item/index.en-US.md
+++ b/components/input-item/index.en-US.md
@@ -22,6 +22,7 @@ Properties | Description | Type | Default
 | defaultValue | provides an initial value that will change when the user starts typing. | String |  -  |
 | placeholder  | the string that will be rendered before text input has been entered. | String | ''  |
 | editable    | whether is editable        | bool |  true  |
+| disabled    | whether is disabled        | bool |  true  |
 | clear      |  whether to display clear(it takes effect only `editable` is `true` and `disabled` is `false` has been set) | bool | false  |
 | maxLength      |  limits the maximum number of characters that can be entered      | number |    |
 | onChange    | callback that is called when the text input's text changes | (val: string): void |  -  |
diff --git a/components/input-item/index.tsx b/components/input-item/index.tsx
index 20f48fa3f..3d70f01a2 100644
--- a/components/input-item/index.tsx
+++ b/components/input-item/index.tsx
@@ -1,4 +1,3 @@
-
 import React from 'react';
 import { GestureResponderEvent, Platform, StyleSheet, Text, TextInputProperties, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native';
 import { Omit } from 'utility-types';
@@ -22,6 +21,7 @@ export interface InputItemProps
   last?: boolean;
   onExtraClick?: (event: GestureResponderEvent) => void;
   onErrorClick?: (event: GestureResponderEvent) => void;
+  disabled?: boolean;
 }
 
 const noop = () => {};
@@ -122,6 +122,7 @@ export default class InputItem extends React.Component<InputItemProps, any> {
       onExtraClick,
       onErrorClick,
       styles,
+      disabled,
       ...restProps
     } = this.props;
     const { value, defaultValue, style } = restProps;
@@ -181,7 +182,7 @@ export default class InputItem extends React.Component<InputItemProps, any> {
           } else if (type && keyboardTypeArray.indexOf(type) > -1) {
             keyboardType = type;
           }
-
+          const disabledStyle = disabled ? s.inputDisabled : {};
           return (
             <View style={[s.container, containerStyle, style]}>
               {children ? (
@@ -192,13 +193,17 @@ export default class InputItem extends React.Component<InputItemProps, any> {
                 )
               ) : null}
               <Input
-                editable={editable}
+                editable={!disabled && editable}
                 clearButtonMode={clear ? 'while-editing' : 'never'}
                 underlineColorAndroid="transparent"
                 ref={el => (this.inputRef = el)}
                 {...restProps}
                 {...valueProps}
-                style={[s.input, error ? s.inputErrorColor : null]}
+                style={[
+                  s.input,
+                  error ? s.inputErrorColor : null,
+                  disabledStyle,
+                ]}
                 keyboardType={keyboardType}
                 onChange={event => this.onChange(event.nativeEvent.text)}
                 secureTextEntry={type === 'password'}
diff --git a/components/input-item/index.zh-CN.md b/components/input-item/index.zh-CN.md
index 5c4100e2a..4d9c8f5a5 100644
--- a/components/input-item/index.zh-CN.md
+++ b/components/input-item/index.zh-CN.md
@@ -23,6 +23,7 @@ subtitle: 文本输入
 | defaultValue    | 设置初始默认值        | String |  -  |
 | placeholder      | placeholder        | String | ''  |
 | editable    | 是否可编辑        | bool |  true  |
+| disabled    | 是否禁用        | bool |  true  |
 | clear      |  是否带清除功能(仅`editable`为`true`,`disabled`为`false`才生效) | bool | false  |
 | maxLength      |  最大长度      | number |  无  |
 | onChange    | change 事件触发的回调函数 | (val: string): void |  -  |
diff --git a/components/input-item/style/index.tsx b/components/input-item/style/index.tsx
index 7b02a08ea..1b4d052f0 100644
--- a/components/input-item/style/index.tsx
+++ b/components/input-item/style/index.tsx
@@ -1,56 +1,61 @@
 import { StyleSheet, TextStyle, ViewStyle } from 'react-native';
-import variables from '../../style/themes/default';
+import { Theme } from '../../style';
 export interface InputItemStyle {
   container: ViewStyle;
   text: TextStyle;
   input: TextStyle;
+  inputDisabled: TextStyle;
   inputErrorColor: TextStyle;
   clear: ViewStyle;
   extra: TextStyle;
   errorIcon: ViewStyle;
 }
-export default () =>
+export default (theme: Theme) =>
   StyleSheet.create<InputItemStyle>({
     container: {
-      height: variables.list_item_height + variables.border_width_sm,
+      height: theme.list_item_height + theme.border_width_sm,
       borderBottomWidth: StyleSheet.hairlineWidth,
-      borderBottomColor: variables.border_color_base,
-      marginLeft: variables.h_spacing_lg,
-      paddingRight: variables.h_spacing_lg,
+      borderBottomColor: theme.border_color_base,
+      marginLeft: theme.h_spacing_lg,
+      paddingRight: theme.h_spacing_lg,
       marginTop: 0,
       marginBottom: 0,
       flexDirection: 'row',
       alignItems: 'center',
     },
     text: {
-      marginRight: variables.h_spacing_sm,
+      marginRight: theme.h_spacing_sm,
       textAlignVertical: 'center',
-      fontSize: variables.font_size_heading,
-      color: variables.color_text_base,
+      fontSize: theme.font_size_heading,
+      color: theme.color_text_base,
     },
     input: {
       flex: 1,
-      height: variables.list_item_height,
+      height: theme.list_item_height,
       backgroundColor: 'transparent',
-      fontSize: variables.input_font_size,
-      color: variables.color_text_base,
+      fontSize: theme.input_font_size,
+      color: theme.color_text_base,
+    },
+    inputDisabled: {
+      backgroundColor: theme.fill_disabled,
+      color: theme.color_text_disabled,
     },
     inputErrorColor: {
       color: '#f50',
     },
     clear: {
-      backgroundColor: variables.color_icon_base,
+      backgroundColor: theme.color_icon_base,
       borderRadius: 15,
       padding: 2,
     },
     extra: {
-      marginLeft: variables.h_spacing_sm,
-      fontSize: variables.font_size_subhead,
-      color: variables.color_text_caption,
+      marginLeft: theme.h_spacing_sm,
+      fontSize: theme.font_size_subhead,
+      color: theme.color_text_caption,
     },
     errorIcon: {
-      marginLeft: variables.h_spacing_sm,
-      width: variables.icon_size_sm,
-      height: variables.icon_size_sm,
+      marginLeft: theme.h_spacing_sm,
+      width: theme.icon_size_sm,
+      height: theme.icon_size_sm,
     },
   });