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`] = `