From af2498190740826bef1a3fc5ec6dc9d715a66e23 Mon Sep 17 00:00:00 2001 From: Definitely Not Vlad <vlad@definitely-not-vlad.com> Date: Thu, 12 Nov 2020 11:17:18 +0100 Subject: [PATCH 1/5] Use spread operator for leftover props and style --- components/TextInput.js | 41 ++++++++++++++++++++++++----------------- theme.js | 13 +++---------- 2 files changed, 27 insertions(+), 27 deletions(-) diff --git a/components/TextInput.js b/components/TextInput.js index 7ae6ff78..52cbf564 100644 --- a/components/TextInput.js +++ b/components/TextInput.js @@ -10,16 +10,6 @@ import { connectStyle } from '@shoutem/theme'; import { Caption } from './Text'; import { View } from './View'; -// Style properties defined in theme which would case a warning if passed to a components style prop -const omittedStyleProperties = [ - 'errorBorder', - 'placeholderTextColor', - 'selectionColor', - 'underlineColorAndroid', - 'withBorder', - 'withoutBorder', -]; - class TextInput extends PureComponent { constructor(props) { super(props); @@ -40,23 +30,40 @@ class TextInput extends PureComponent { } render() { - const { errorMessage, highlightOnFocus, style } = this.props; + const { + errorMessage, + highlightOnFocus, + style, + ...otherProps + } = this.props; const { isFocused } = this.state; + const { + errorBorder, + placeholderTextColor, + selectionColor, + underlineColorAndroid, + withBorder, + withoutBorder, + ...otherStyle + } = style; + + const hasBorder = (isFocused && highlightOnFocus) || !!errorMessage; + return ( <View> <RNTextInput - {..._.omit(this.props, 'style')} + {...otherProps} onBlur={this.handleBlur} onFocus={this.handleFocus} placeholderTextColor={style.placeholderTextColor} selectionColor={style.selectionColor} underlineColorAndroid={style.underlineColorAndroid} - style={[ - _.omit(style, omittedStyleProperties), - (isFocused && highlightOnFocus) ? style.withBorder : style.withoutBorder, - !!errorMessage && style.errorBorder, - ]} + style={{ + ...otherStyle, + borderWidth: hasBorder ? style.withBorder : style.withoutBorder, + borderColor: !!errorMessage && style.errorBorderColor, + }} /> {!!errorMessage && <Caption styleName="form-error sm-gutter-top"> diff --git a/theme.js b/theme.js index 5d4e86d8..9cc42fe6 100644 --- a/theme.js +++ b/theme.js @@ -1967,16 +1967,9 @@ export default (variables = defaultThemeVariables) => ({ fontWeight: resolveFontWeight(variables.text.fontWeight), fontStyle: resolveFontStyle(variables.text.fontStyle), - errorBorder: { - borderWidth: 1, - borderColor: variables.errorText.color, - }, - withBorder: { - borderWidth: 1, - }, - withoutBorder: { - borderWidth: 0, - }, + errorBorderColor: variables.errorText.color, + withBorder: 1, + withoutBorder: 0, }, 'shoutem.ui.NumberInput': { From d20c491927de049c55eb9cead5a49075a7cf59df Mon Sep 17 00:00:00 2001 From: Definitely Not Vlad <vlad@definitely-not-vlad.com> Date: Thu, 12 Nov 2020 11:19:23 +0100 Subject: [PATCH 2/5] Remove lodash import --- components/TextInput.js | 1 - 1 file changed, 1 deletion(-) diff --git a/components/TextInput.js b/components/TextInput.js index 52cbf564..51d3dc70 100644 --- a/components/TextInput.js +++ b/components/TextInput.js @@ -1,6 +1,5 @@ import React, { PureComponent } from 'react'; import autoBindReact from 'auto-bind/react'; -import _ from 'lodash'; import PropTypes from 'prop-types'; import { TextInput as RNTextInput } from 'react-native'; From d97b67a6b0a24b2f45a9ec7aafa099e7dca4bc1a Mon Sep 17 00:00:00 2001 From: Definitely Not Vlad <vlad@definitely-not-vlad.com> Date: Thu, 12 Nov 2020 11:44:11 +0100 Subject: [PATCH 3/5] Fix variable name --- components/TextInput.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/TextInput.js b/components/TextInput.js index 51d3dc70..f2e1fc18 100644 --- a/components/TextInput.js +++ b/components/TextInput.js @@ -38,7 +38,7 @@ class TextInput extends PureComponent { const { isFocused } = this.state; const { - errorBorder, + errorBorderColor, placeholderTextColor, selectionColor, underlineColorAndroid, From a84bed64350a2e6d11c2064489ad2c4ba8c6a1b7 Mon Sep 17 00:00:00 2001 From: Definitely Not Vlad <vlad@definitely-not-vlad.com> Date: Mon, 23 Nov 2020 11:40:22 +0100 Subject: [PATCH 4/5] CRs --- components/TextInput.js | 4 ++-- theme.js | 12 +++++++++--- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/components/TextInput.js b/components/TextInput.js index f2e1fc18..a14bd8aa 100644 --- a/components/TextInput.js +++ b/components/TextInput.js @@ -60,8 +60,8 @@ class TextInput extends PureComponent { underlineColorAndroid={style.underlineColorAndroid} style={{ ...otherStyle, - borderWidth: hasBorder ? style.withBorder : style.withoutBorder, - borderColor: !!errorMessage && style.errorBorderColor, + ...(hasBorder ? style.withBorder : style.withoutBorder), + ...(!!errorMessage ? style.errorBorderColor : {}), }} /> {!!errorMessage && diff --git a/theme.js b/theme.js index 9cc42fe6..f9d05cd7 100644 --- a/theme.js +++ b/theme.js @@ -1967,9 +1967,15 @@ export default (variables = defaultThemeVariables) => ({ fontWeight: resolveFontWeight(variables.text.fontWeight), fontStyle: resolveFontStyle(variables.text.fontStyle), - errorBorderColor: variables.errorText.color, - withBorder: 1, - withoutBorder: 0, + errorBorderColor: { + borderColor: variables.errorText.color, + }, + withBorder: { + borderWidth: 1, + }, + withoutBorder: { + borderWidth: 0, + }, }, 'shoutem.ui.NumberInput': { From b4bc6971da024c3f694ce0034de93eba5b99748c Mon Sep 17 00:00:00 2001 From: Definitely Not Vlad <vlad@definitely-not-vlad.com> Date: Mon, 23 Nov 2020 12:11:54 +0100 Subject: [PATCH 5/5] Bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8248db87..ecc3c67b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@shoutem/ui", - "version": "4.0.12", + "version": "4.0.13", "description": "Styleable set of components for React Native applications", "dependencies": { "@shoutem/animation": "~0.12.4",