Add support for rendering a disabled state of the input field

observation · Aug 14, 2024 · cca046f · cca046f
1 parent 565fee1
commit cca046f
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@observation.org/react-native-components",
-  "version": "1.44.0",
+  "version": "1.45.0",
   "main": "src/index.ts",
   "repository": "[email protected]:observation/react-native-components.git",
   "author": "Observation.org",

diff --git a/src/components/InputField.tsx b/src/components/InputField.tsx
@@ -15,9 +15,19 @@ type Props = {
   rightIcon?: JSX.Element
   description?: string
   errorMessage?: string
+  disabled?: boolean
 }
 
-const InputField = ({ containerStyle, inputProps, inputStyle, label, rightIcon, description, errorMessage }: Props) => {
+const InputField = ({
+  containerStyle,
+  inputProps,
+  inputStyle,
+  label,
+  rightIcon,
+  description,
+  errorMessage,
+  disabled = false,
+}: Props) => {
   const [isFocused, setIsFocused] = useState(false)
 
   // Set lineHeight to 0 to fix vertical alignment of the input text on iOS
@@ -27,22 +37,25 @@ const InputField = ({ containerStyle, inputProps, inputStyle, label, rightIcon,
   const hasErrors = !!errorMessage
   const borderColor = theme.getBorderColor({ isFocused, hasErrors })
 
+  const inputContainerStyle = disabled ? { backgroundColor: theme.color.greyLight } : {}
+  const placeholderTextColor = disabled ? theme.color.greySemi : theme.color.placeholder
+
   return (
     <View style={[styles.containerStyle, containerStyle]}>
       {label && (
         <View>
           <Text style={styles.labelStyle}>{label}</Text>
         </View>
       )}
-      <View style={{ flexDirection: 'row' }}>
+      <View style={{ flexDirection: 'row', ...inputContainerStyle }}>
         <TextInput
           style={[{ borderColor }, styles.inputStyle, inputStyle, fixInputStyle]}
           {...inputProps}
           autoCapitalize="none"
           onFocus={() => setIsFocused(true)}
           onBlur={() => setIsFocused(false)}
           underlineColorAndroid="transparent"
-          placeholderTextColor={theme.color.placeholder}
+          placeholderTextColor={placeholderTextColor}
         />
         {rightIcon && <View style={styles.rightIcon}>{rightIcon}</View>}
       </View>

diff --git a/src/components/__tests__/InputField.test.tsx b/src/components/__tests__/InputField.test.tsx
@@ -53,6 +53,14 @@ describe('InputField', () => {
       expect(toJSON()).toMatchSnapshot()
     })
 
+    test('Disabled', async () => {
+      // GIVEN
+      const { toJSON } = render(<InputField label="The label" disabled />)
+
+      // THEN
+      expect(toJSON()).toMatchSnapshot()
+    })
+
     test('With an error message', async () => {
       // GIVEN
       const { toJSON } = render(<InputField errorMessage={'The error message'} />)

diff --git a/src/components/__tests__/__snapshots__/InputField.test.tsx.snap b/src/components/__tests__/__snapshots__/InputField.test.tsx.snap
@@ -1,5 +1,78 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`InputField Rendering Disabled 1`] = `
+<View
+  style={
+    [
+      {
+        "flexDirection": "column",
+      },
+      undefined,
+    ]
+  }
+>
+  <View>
+    <Text
+      style={
+        {
+          "color": "#666666",
+          "fontFamily": "Ubuntu",
+          "fontSize": 12,
+          "fontStyle": "normal",
+          "fontWeight": "bold",
+          "lineHeight": 16,
+          "marginBottom": 8,
+        }
+      }
+    >
+      The label
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "backgroundColor": "#F8F9FA",
+        "flexDirection": "row",
+      }
+    }
+  >
+    <TextInput
+      autoCapitalize="none"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      placeholderTextColor="#E6E6E6"
+      style={
+        [
+          {
+            "borderColor": "#E6E6E6",
+          },
+          {
+            "borderRadius": 4,
+            "borderWidth": 2,
+            "color": "#212121",
+            "flex": 1,
+            "fontFamily": "Ubuntu",
+            "fontSize": 16,
+            "fontStyle": "normal",
+            "fontWeight": "normal",
+            "lineHeight": 26,
+            "minHeight": 40,
+            "overflow": "hidden",
+            "paddingLeft": 8,
+            "paddingRight": 32,
+          },
+          undefined,
+          {
+            "lineHeight": 0,
+          },
+        ]
+      }
+      underlineColorAndroid="transparent"
+    />
+  </View>
+</View>
+`;
+
 exports[`InputField Rendering Normal 1`] = `
 <View
   style={