Merge pull request #540 from shoutem/release/4.0.12

Release/4.0.12
shoutem · Nov 10, 2020 · 81b09cd · 81b09cd
2 parents d8819bd + cfa306e
commit 81b09cd
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 17 deletions.
diff --git a/components/TextInput.js b/components/TextInput.js
@@ -1,28 +1,69 @@
-import PropTypes from 'prop-types';
 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';
 
-import { connectStyle } from '@shoutem/theme';
 import { connectAnimation } from '@shoutem/animation';
+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 {
-  render() {
-    const { props } = this;
-    const style = {
-      ...props.style,
+  constructor(props) {
+    super(props);
+
+    autoBindReact(this);
+
+    this.state = {
+      isFocused: props.highlightOnFocus && props.autoFocus,
     };
-    delete style.placeholderTextColor;
-    delete style.selectionColor;
-    delete style.underlineColorAndroid;
+  }
+
+  handleBlur() {
+    this.setState({ isFocused: false });
+  }
+
+  handleFocus() {
+    this.setState({ isFocused: true });
+  }
+
+  render() {
+    const { errorMessage, highlightOnFocus, style } = this.props;
+    const { isFocused } = this.state;
 
     return (
-      <RNTextInput
-        {...props}
-        style={style}
-        placeholderTextColor={props.style.placeholderTextColor}
-        selectionColor={props.style.selectionColor}
-        underlineColorAndroid={props.style.underlineColorAndroid}
-      />
+      <View>
+        <RNTextInput
+          {..._.omit(this.props, 'style')}
+          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,
+          ]}
+        />
+        {!!errorMessage &&
+          <Caption styleName="form-error sm-gutter-top">
+            {errorMessage}
+          </Caption>
+        }
+      </View>
     );
   }
 }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "4.0.11",
+  "version": "4.0.12",
   "description": "Styleable set of components for React Native applications",
   "dependencies": {
     "@shoutem/animation": "~0.12.4",

diff --git a/theme.js b/theme.js
@@ -167,6 +167,13 @@ export const defaultThemeVariables = {
     fontSize: 15,
     color: '#666666',
   },
+  errorText: {
+    fontFamily: 'Rubik-Regular',
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    fontSize: 12,
+    color: '#FF0000',
+  },
 
   imageOverlayColor: 'rgba(0, 0, 0, 0.2)',
   imageOverlayTextColor: '#FFFFFF',
@@ -478,6 +485,19 @@ export default (variables = defaultThemeVariables) => ({
     ),
     fontWeight: resolveFontWeight(variables.caption.fontWeight),
     fontStyle: resolveFontStyle(variables.caption.fontStyle),
+
+    '.form-error': {
+      color: variables.errorText.color,
+      fontFamily: resolveFontFamily(
+        variables.errorText.fontFamily,
+        variables.errorText.fontWeight,
+        variables.errorText.fontStyle,
+      ),
+      fontSize: variables.errorText.fontSize,
+      fontStyle: resolveFontStyle(variables.errorText.fontStyle),
+      fontWeight: resolveFontWeight(variables.errorText.fontWeight),
+      lineHeight: calculateLineHeight(variables.errorText.fontSize),
+    }
   },
 
   'shoutem.ui.Text': {
@@ -1933,6 +1953,7 @@ export default (variables = defaultThemeVariables) => ({
     selectionColor: variables.text.color,
     placeholderTextColor: changeColorAlpha(variables.text.color, 0.5),
     backgroundColor: variables.paperColor,
+    borderColor: variables.text.color,
     height: 55,
     paddingHorizontal: variables.mediumGutter,
     paddingVertical: 18,
@@ -1945,6 +1966,17 @@ 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,
+    },
   },
 
   'shoutem.ui.NumberInput': {