Merge pull request #582 from shoutem/release/4.4.0

Release/4.4.0
shoutem · Mar 26, 2021 · b8e4545 · b8e4545
2 parents c84f078 + 8ce1ff0
commit b8e4545
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 27 deletions.
diff --git a/components/TextInput.js b/components/TextInput.js
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import autoBindReact from 'auto-bind/react';
 import PropTypes from 'prop-types';
 import { TextInput as RNTextInput } from 'react-native';
-import { connectAnimation } from '@shoutem/animation';
+import { connectAnimation, Wiggle } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
 import { Caption } from './Text';
 import { View } from './View';
@@ -27,7 +27,13 @@ class TextInput extends PureComponent {
   }
 
   render() {
-    const { errorMessage, highlightOnFocus, style, ...otherProps } = this.props;
+    const {
+      animate,
+      errorMessage,
+      highlightOnFocus,
+      style,
+      ...otherProps
+    } = this.props;
     const { isFocused } = this.state;
 
     const {
@@ -37,26 +43,30 @@ class TextInput extends PureComponent {
       underlineColorAndroid,
       withBorder,
       withoutBorder,
+      wiggleAnimation,
       ...otherStyle
     } = style;
 
     const hasBorder = (isFocused && highlightOnFocus) || !!errorMessage;
+    const startErrorAnimation = animate && !!errorMessage;
 
     return (
       <View>
-        <RNTextInput
-          {...otherProps}
-          onBlur={this.handleBlur}
-          onFocus={this.handleFocus}
-          placeholderTextColor={placeholderTextColor}
-          selectionColor={selectionColor}
-          underlineColorAndroid={underlineColorAndroid}
-          style={{
-            ...otherStyle,
-            ...(hasBorder ? withBorder : withoutBorder),
-            ...(!!errorMessage ? errorBorderColor : {}),
-          }}
-        />
+        <Wiggle style={wiggleAnimation} startAnimation={startErrorAnimation}>
+          <RNTextInput
+            {...otherProps}
+            onBlur={this.handleBlur}
+            onFocus={this.handleFocus}
+            placeholderTextColor={placeholderTextColor}
+            selectionColor={selectionColor}
+            underlineColorAndroid={underlineColorAndroid}
+            style={{
+              ...otherStyle,
+              ...(hasBorder ? withBorder : withoutBorder),
+              ...(!!errorMessage ? errorBorderColor : {}),
+            }}
+          />
+        </Wiggle>
         {!!errorMessage && (
           <Caption styleName="form-error sm-gutter-top">{errorMessage}</Caption>
         )}
@@ -67,9 +77,14 @@ class TextInput extends PureComponent {
 
 TextInput.propTypes = {
   ...RNTextInput.propTypes,
+  animate: PropTypes.bool,
   style: PropTypes.object,
 };
 
+TextInput.defaultProps = {
+  animate: true,
+};
+
 const AnimatedTextInput = connectAnimation(TextInput);
 const StyledTextInput = connectStyle('shoutem.ui.TextInput')(AnimatedTextInput);
 

diff --git a/html/components/SimpleHtml.js b/html/components/SimpleHtml.js
@@ -77,7 +77,12 @@ class SimpleHtml extends PureComponent {
     return <Text style={style.prefix}>• </Text>;
   }
 
-  renderOrderedListPrefix(passProps) {
+  renderOrderedListPrefix(
+    htmlAttribs,
+    children,
+    convertedCSSStyles,
+    passProps,
+  ) {
     const { style } = this.props;
 
     return <Text style={style.prefix}>{passProps.index + 1}. </Text>;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",
@@ -9,7 +9,7 @@
     "test": "mocha '_tests_/*.js' --require react-native-mock-render/mock --require @babel/register"
   },
   "dependencies": {
-    "@shoutem/animation": "~0.13.1-rc.0",
+    "@shoutem/animation": "~0.14.0",
     "@shoutem/eslint-config-react": "^1.0.1",
     "@shoutem/theme": "~0.12.0",
     "auto-bind": "^4.0.0",

diff --git a/theme.js b/theme.js
@@ -2044,9 +2044,22 @@ export default (variables = defaultThemeVariables) => ({
     errorBorderColor: {
       borderColor: variables.errorText.color,
     },
+
+    wiggleAnimation: {
+      interpolateConfig: {
+        inputRange: [0, 0.5, 1, 1.5, 2, 2.5, 3],
+        outputRange: [0, -5, 0, 5, 0, -5, 0],
+      },
+      timingConfig: {
+        duration: 400,
+      },
+      paddingHorizontal: 5,
+    },
+
     withBorder: {
       borderWidth: 1,
     },
+
     withoutBorder: {
       borderWidth: 0,
     },
@@ -2674,12 +2687,11 @@ export default (variables = defaultThemeVariables) => ({
     '.full-screen': {
       title: {
         container: {
-          // We want the title background gradient to be	
-          // visible underneath the navigation bar, but the	
-          // title text should be rendered below the	
+          // We want the title background gradient to be
+          // visible underneath the navigation bar, but the
+          // title text should be rendered below the
           // navigation bar.
-          paddingTop:
-            NAVIGATION_BAR_HEIGHT + variables.mediumGutter
+          paddingTop: NAVIGATION_BAR_HEIGHT + variables.mediumGutter,
         },
       },
     },
@@ -2897,7 +2909,7 @@ export default (variables = defaultThemeVariables) => ({
     },
     icon: {
       color: variables.text.color,
-    }
+    },
   },
 
   'shoutem.ui.InlineDropDownMenuItem': {
@@ -2940,7 +2952,7 @@ export default (variables = defaultThemeVariables) => ({
     selectedText: {
       marginBottom: 4,
       opacity: 1,
-    }
+    },
   },
 
   'shoutem.ui.YearRangePickerButton': {
@@ -2958,7 +2970,7 @@ export default (variables = defaultThemeVariables) => ({
     },
     icon: {
       color: variables.text.color,
-    }
+    },
   },
 
   'shoutem.ui.YearRangePickerModal': {
@@ -3027,6 +3039,6 @@ export default (variables = defaultThemeVariables) => ({
     },
     iconDisabled: {
       opacity: 0.3,
-    }
+    },
   },
 });