diff --git a/package.json b/package.json
index 91e05ce..000150e 100644
--- 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": "git@github.com:observation/react-native-components.git",
"author": "Observation.org",
diff --git a/src/components/InputField.tsx b/src/components/InputField.tsx
index 550dc9f..e6a03ad 100644
--- 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,6 +37,9 @@ 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 (
{label && (
@@ -34,7 +47,7 @@ const InputField = ({ containerStyle, inputProps, inputStyle, label, rightIcon,
{label}
)}
-
+
setIsFocused(true)}
onBlur={() => setIsFocused(false)}
underlineColorAndroid="transparent"
- placeholderTextColor={theme.color.placeholder}
+ placeholderTextColor={placeholderTextColor}
/>
{rightIcon && {rightIcon}}
diff --git a/src/components/__tests__/InputField.test.tsx b/src/components/__tests__/InputField.test.tsx
index d7ce233..82ef2fe 100644
--- 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()
+
+ // THEN
+ expect(toJSON()).toMatchSnapshot()
+ })
+
test('With an error message', async () => {
// GIVEN
const { toJSON } = render()
diff --git a/src/components/__tests__/__snapshots__/InputField.test.tsx.snap b/src/components/__tests__/__snapshots__/InputField.test.tsx.snap
index 13e6ecf..2689c3d 100644
--- 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`] = `
+
+
+
+ The label
+
+
+
+
+
+
+`;
+
exports[`InputField Rendering Normal 1`] = `