@shoutem/ui 4.7.0 → 4.9.1

package/components/ScrollView/ScrollDriverProvider.js

@@ -1,4 +1,4 @@
-import { PureComponent, Children } from 'react';
+import { Children, PureComponent } from 'react';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import { DriverShape, ScrollDriver } from '@shoutem/animation';

package/components/ScrollView/ScrollView.js

@@ -1,12 +1,12 @@
 import React, { PureComponent } from 'react';
+import { Animated } from 'react-native';
 import autoBindReact from 'auto-bind/react';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
-import { Animated } from 'react-native';
-import { ScrollDriver, DriverShape } from '@shoutem/animation';
+import { DriverShape, ScrollDriver } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
-import { ScrollDriverProvider } from './ScrollDriverProvider.js';
 import { Device } from '../../helpers';
+import { ScrollDriverProvider } from './ScrollDriverProvider.js';
 
 const isTabBarOnScreen = true;
 const IPHONE_X_HOME_INDICATOR_PADDING = isTabBarOnScreen ? 0 : 34;

package/components/ShareButton.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
+import { Platform, Share } from 'react-native';
 import autoBindReact from 'auto-bind/react';
 import PropTypes from 'prop-types';
-import { Share, Platform } from 'react-native';
 import { connectStyle } from '@shoutem/theme';
 import { Button } from './Button';
 import { Icon } from './Icon';

package/components/Spinner.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { ActivityIndicator } from 'react-native';
+import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
 
 class Spinner extends PureComponent {

package/components/Switch.js

@@ -1,7 +1,7 @@
-import PropTypes from 'prop-types';
-import autoBindReact from 'auto-bind/react';
 import React, { PureComponent } from 'react';
 import { TouchableWithoutFeedback } from 'react-native';
+import autoBindReact from 'auto-bind/react';
+import PropTypes from 'prop-types';
 import { connectAnimation, TimingDriver } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
 import { View } from './View';

package/components/TabMenu/TabMenu.js

@@ -1,8 +1,8 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
+import { LayoutAnimation, ScrollView } from 'react-native';
 import autoBindReact from 'auto-bind/react';
 import _ from 'lodash';
-import { ScrollView, LayoutAnimation } from 'react-native';
+import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
 import { optionShape } from './const';
 import { TabMenuItem } from './TabMenuItem';

package/components/TabMenu/TabMenuItem.js

@@ -1,12 +1,12 @@
 import React, { PureComponent } from 'react';
 import { LayoutAnimation } from 'react-native';
-import PropTypes from 'prop-types';
 import autoBindReact from 'auto-bind/react';
 import _ from 'lodash';
+import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
 import { Text } from '../Text';
-import { View } from '../View';
 import { TouchableOpacity } from '../TouchableOpacity';
+import { View } from '../View';
 import { optionShape } from './const';
 
 class TabMenuItem extends PureComponent {
@@ -33,8 +33,11 @@ class TabMenuItem extends PureComponent {
     onItemPressed(item);
   }
 
-  handleLayout({ nativeEvent: { layout: { width } } }) {
-
+  handleLayout({
+    nativeEvent: {
+      layout: { width },
+    },
+  }) {
     LayoutAnimation.easeInEaseOut();
     this.setState({ baseWidth: width });
   }

package/components/Text.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { Text as RNText } from 'react-native';
-import { connectStyle } from '@shoutem/theme';
 import { connectAnimation } from '@shoutem/animation';
+import { connectStyle } from '@shoutem/theme';
 
 class Text extends PureComponent {
   render() {
@@ -20,4 +20,4 @@ const Title = connectStyle('shoutem.ui.Title')(AnimatedText);
 const Subtitle = connectStyle('shoutem.ui.Subtitle')(AnimatedText);
 const Caption = connectStyle('shoutem.ui.Caption')(AnimatedText);
 
-export { StyledText as Text, Heading, Title, Subtitle, Caption };
+export { Caption, Heading, Subtitle, StyledText as Text, Title };

package/components/TextInput.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
+import { TextInput as RNTextInput } from 'react-native';
 import autoBindReact from 'auto-bind/react';
 import PropTypes from 'prop-types';
-import { TextInput as RNTextInput } from 'react-native';
 import { connectAnimation, Wiggle } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
 import { Caption } from './Text';
@@ -19,10 +19,22 @@ class TextInput extends PureComponent {
   }
 
   handleBlur() {
+    const { onBlur } = this.props;
+
+    if (onBlur) {
+      onBlur();
+    }
+
     this.setState({ isFocused: false });
   }
 
   handleFocus() {
+    const { onFocus } = this.props;
+
+    if (onFocus) {
+      onFocus();
+    }
+
     this.setState({ isFocused: true });
   }
 
@@ -44,6 +56,7 @@ class TextInput extends PureComponent {
       withBorder,
       withoutBorder,
       wiggleAnimation,
+      errorText,
       ...otherStyle
     } = style;
 
@@ -61,14 +74,14 @@ class TextInput extends PureComponent {
             selectionColor={selectionColor}
             underlineColorAndroid={underlineColorAndroid}
             style={{
-              ...otherStyle,
               ...(hasBorder ? withBorder : withoutBorder),
-              ...(!!errorMessage ? errorBorderColor : {}),
+              ...(errorMessage ? errorBorderColor : {}),
+              ...otherStyle,
             }}
           />
         </Wiggle>
         {!!errorMessage && (
-          <Caption styleName="form-error sm-gutter-top">{errorMessage}</Caption>
+          <Caption styleName="form-error sm-gutter-top" style={errorText}>{errorMessage}</Caption>
         )}
       </View>
     );

package/components/Tile.js

@@ -1,6 +1,6 @@
 import { View } from 'react-native';
-import { connectStyle } from '@shoutem/theme';
 import { connectAnimation } from '@shoutem/animation';
+import { connectStyle } from '@shoutem/theme';
 
 const AnimatedTile = connectAnimation(View);
 const Tile = connectStyle('shoutem.ui.Tile')(AnimatedTile);

package/components/Touchable.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { Platform } from 'react-native';
+import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
 import { TouchableNativeFeedback } from './TouchableNativeFeedback';
 import { TouchableOpacity } from './TouchableOpacity';
@@ -21,7 +21,7 @@ class Touchable extends PureComponent {
   };
 
   render() {
-    const props = this.props;
+    const { props } = this;
     const style = { ...props.style };
     delete style.touchableOpacity;
     delete style.touchableNativeFeedback;

package/components/TouchableNativeFeedback.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { TouchableNativeFeedback as RNTouchableNativeFeedback } from 'react-native';
+import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
 
 class TouchableNativeFeedback extends PureComponent {
@@ -13,7 +13,7 @@ class TouchableNativeFeedback extends PureComponent {
   };
 
   render() {
-    const props = this.props;
+    const { props } = this;
     // Remove the props that are not valid
     // style keys.
     const style = {

package/components/TouchableOpacity.js

@@ -4,7 +4,7 @@ import { connectStyle } from '@shoutem/theme';
 
 class TouchableOpacity extends PureComponent {
   render() {
-    const props = this.props;
+    const { props } = this;
 
     // The activeOpacity is not a valid RN style
     // property, so we have to unset it here.

package/components/Video/Video.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { View } from 'react-native';
 import { WebView } from 'react-native-webview';
+import PropTypes from 'prop-types';
 import { connectAnimation } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
 import VideoSourceReader from './VideoSourceReader';

package/components/Video/VideoSourceReader.js

@@ -58,7 +58,8 @@ export default class VideoSourceReader {
         getYouTubeVideoId(this.source),
         this.playerParams,
       );
-    } else if (this.isVimeo) {
+    }
+    if (this.isVimeo) {
       return getVimeoEmbedUrl(getVimeoVideoId(this.source));
     }
 

package/components/View.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { View as RNView, ViewPropTypes } from 'react-native';
+import PropTypes from 'prop-types';
 import { connectAnimation } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
 import { LinearGradient } from './LinearGradient';

package/components/YearRangePicker/YearRangePicker.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import _ from 'lodash';
 import autoBindReact from 'auto-bind/react';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
 import { View } from '../View';
 import YearPickerButton from './YearRangePickerButton';

package/components/YearRangePicker/YearRangePickerButton.js

@@ -1,11 +1,11 @@
 import React, { PureComponent } from 'react';
 import { Animated } from 'react-native';
-import PropTypes from 'prop-types';
 import autoBindReact from 'auto-bind/react';
+import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
-import { TouchableOpacity } from '../TouchableOpacity';
 import { Icon } from '../Icon';
 import { Text } from '../Text';
+import { TouchableOpacity } from '../TouchableOpacity';
 
 const AnimatedIcon = Animated.createAnimatedComponent(Icon);
 

package/components/YearRangePicker/YearRangePickerModal.js

@@ -1,15 +1,15 @@
 import React, { PureComponent } from 'react';
 import { LayoutAnimation, Platform } from 'react-native';
-import PropTypes from 'prop-types';
-import _ from 'lodash';
 import Modal from 'react-native-modal';
 import autoBindReact from 'auto-bind/react';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
-import { View } from '../View';
-import { Text } from '../Text';
-import { Icon } from '../Icon';
 import { Button } from '../Button';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
 import { TouchableOpacity } from '../TouchableOpacity';
+import { View } from '../View';
 
 const NUMBER_OF_ROWS = 4;
 const YEARS_IN_ROW = 5;
@@ -160,13 +160,13 @@ class YearRangePickerModal extends PureComponent {
 
       const newYears = addToEnd
         ? [
-          ...selectedYears,
-          ..._.times(yearsToAdd, index => _.last(selectedYears) + index + 1),
-        ]
+            ...selectedYears,
+            ..._.times(yearsToAdd, index => _.last(selectedYears) + index + 1),
+          ]
         : [
-          ...selectedYears,
-          ..._.times(yearsToAdd, index => _.head(selectedYears) - index + -1),
-        ];
+            ...selectedYears,
+            ..._.times(yearsToAdd, index => _.head(selectedYears) - index + -1),
+          ];
       const sortedYears = _.sortBy(newYears, item => item);
 
       this.setState({ selectedYears: sortedYears });

package/examples/components/Cards.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Card } from '../../components/Card';
 import { Button } from '../../components/Button';
+import { Card } from '../../components/Card';
 import { Icon } from '../../components/Icon';
 import { Image } from '../../components/Image';
 import { Caption, Subtitle } from '../../components/Text';

package/examples/components/DropDownMenus.js

@@ -44,8 +44,8 @@ export class DropDownMenus extends PureComponent {
             onOptionSelected={option =>
               this.setState({ selectedOption: option })
             }
-            titleProperty={'name'}
-            valueProperty={'id'}
+            titleProperty="name"
+            valueProperty="id"
           />
         </Stage>
         <Stage title="Dropdown (horizontal)">
@@ -56,8 +56,8 @@ export class DropDownMenus extends PureComponent {
             onOptionSelected={option =>
               this.setState({ selectedOption: option })
             }
-            titleProperty={'name'}
-            valueProperty={'id'}
+            titleProperty="name"
+            valueProperty="id"
           />
         </Stage>
         <Stage title="Dropdown (large)">
@@ -68,8 +68,8 @@ export class DropDownMenus extends PureComponent {
             onOptionSelected={option =>
               this.setState({ selectedOption: option })
             }
-            titleProperty={'name'}
-            valueProperty={'id'}
+            titleProperty="name"
+            valueProperty="id"
           />
         </Stage>
         <Stage title="Dropdown (inside a form group)">
@@ -82,8 +82,8 @@ export class DropDownMenus extends PureComponent {
               onOptionSelected={option =>
                 this.setState({ selectedOptionForFormGroupDropdown: option })
               }
-              titleProperty={'name'}
-              valueProperty={'id'}
+              titleProperty="name"
+              valueProperty="id"
             />
           </FormGroup>
         </Stage>

package/examples/components/Examples.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
-import { DropDownMenu } from '../../components/DropDownMenu';
 import { Divider } from '../../components/Divider';
+import { DropDownMenu } from '../../components/DropDownMenu';
 import { Screen } from '../../components/Screen';
 import { ScrollView } from '../../components/ScrollView';
 import { Buttons } from './Buttons';

package/examples/components/FormComponents.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
-import { Switch } from '../../components/Switch';
 import { FormGroup } from '../../components/FormGroup';
+import { Switch } from '../../components/Switch';
 import { Caption } from '../../components/Text';
 import { TextInput } from '../../components/TextInput';
 import { View } from '../../components/View';

package/examples/components/Headers.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Text, Caption, Subtitle, Title, Heading } from '../../components/Text';
 import { Button } from '../../components/Button';
 import { Icon } from '../../components/Icon';
 import { Overlay } from '../../components/Overlay';
+import { Caption, Heading, Subtitle, Text, Title } from '../../components/Text';
 import { Tile } from '../../components/Tile';
 import { View } from '../../components/View';
 import { Stage } from './Stage';

package/examples/components/NavigationBars.js

@@ -1,19 +1,19 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { Dimensions } from 'react-native';
-import { Device } from '../../helpers/device-selector';
+import PropTypes from 'prop-types';
 import { Button } from '../../components/Button';
 import { DropDownMenu } from '../../components/DropDownMenu';
 import { Icon } from '../../components/Icon';
 import { ImageBackground } from '../../components/ImageBackground';
 import { NavigationBar } from '../../components/NavigationBar';
-import { Text, Title, Heading } from '../../components/Text';
+import { Heading, Text, Title } from '../../components/Text';
 import { View } from '../../components/View';
 import {
-  NAVIGATION_HEADER_HEIGHT,
   IPHONE_X_NOTCH_PADDING,
   IPHONE_XR_NOTCH_PADDING,
+  NAVIGATION_HEADER_HEIGHT,
 } from '../../const';
+import { Device } from '../../helpers/device-selector';
 import { Stage } from './Stage';
 
 const window = Dimensions.get('window');

package/examples/components/Rows.js

@@ -3,7 +3,7 @@ import { Button } from '../../components/Button';
 import { Icon } from '../../components/Icon';
 import { Image } from '../../components/Image';
 import { Row } from '../../components/Row';
-import { Text, Caption, Subtitle } from '../../components/Text';
+import { Caption, Subtitle, Text } from '../../components/Text';
 import { View } from '../../components/View';
 import { Stage } from './Stage';
 

package/examples/components/Stage.js

@@ -1,6 +1,6 @@
 import React from 'react';
+import { Text, View } from 'react-native';
 import PropTypes from 'prop-types';
-import { View, Text } from 'react-native';
 
 function Stage({ title, children }) {
   // eslint-disable-next-line no-use-before-define

package/examples/components/Tiles.js

@@ -4,7 +4,7 @@ import { Icon } from '../../components/Icon';
 import { Image } from '../../components/Image';
 import { ImageBackground } from '../../components/ImageBackground';
 import { Overlay } from '../../components/Overlay';
-import { Text, Caption, Subtitle, Title, Heading } from '../../components/Text';
+import { Caption, Heading, Subtitle, Text, Title } from '../../components/Text';
 import { Tile } from '../../components/Tile';
 import { View } from '../../components/View';
 import { Stage } from './Stage';

package/examples/components/Typography.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, Caption, Subtitle, Title, Heading } from '../../components/Text';
+import { Caption, Heading, Subtitle, Text, Title } from '../../components/Text';
 import { View } from '../../components/View';
 import { Stage } from './Stage';
 

package/examples/components/Videos.js

@@ -6,21 +6,21 @@ import { Stage } from './Stage';
 export function Videos() {
   return (
     <View styleName="vertical collapsed">
-      <Stage title={'YouTube video'}>
+      <Stage title="YouTube video">
         <Video
           source={{ uri: 'https://www.youtube.com/embed/2zuisMXzyaI' }}
           width={320}
           height={180}
         />
       </Stage>
-      <Stage title={'Vimeo video'}>
+      <Stage title="Vimeo video">
         <Video
           source={{ uri: 'https://vimeo.com/182267614' }}
           width={320}
           height={180}
         />
       </Stage>
-      <Stage title={'Stream video'}>
+      <Stage title="Stream video">
         <Video
           source={{
             uri:

package/helpers/device-selector.js

@@ -1,11 +1,11 @@
-import { Platform, Dimensions } from 'react-native';
+import { Dimensions, Platform } from 'react-native';
 import { hasNotch } from 'react-native-device-info';
 import _ from 'lodash';
 import {
-  IPHONE_X_LONG_SIDE,
-  IPHONE_XR_LONG_SIDE,
   IPHONE_12_LONG_SIDE,
   IPHONE_12_MAX_LONG_SIDE,
+  IPHONE_X_LONG_SIDE,
+  IPHONE_XR_LONG_SIDE,
 } from '../const';
 
 const { OS, isPad, isTVOS } = Platform;

package/html/Html.js

@@ -5,14 +5,14 @@ import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
 import { Spinner } from '../components/Spinner';
 import { View } from '../components/View';
-import { parseHtml } from './services/HtmlParser';
 import {
-  registerElement,
+  Display,
   getElement,
   getElementDisplay,
   getElementProperty,
-  Display,
+  registerElement,
 } from './services/ElementRegistry';
+import { parseHtml } from './services/HtmlParser';
 
 const defaultElementSettings = {
   display: Display.BLOCK,

package/html/components/Image.js

@@ -1,8 +1,8 @@
 import React, { PureComponent } from 'react';
+import { Image as RNImage } from 'react-native';
 import autoBindReact from 'auto-bind/react';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
-import { Image as RNImage } from 'react-native';
 import { Image } from '../../components/Image';
 import { ImageBackground } from '../../components/ImageBackground';
 import { Lightbox } from '../../components/Lightbox';

package/html/components/SimpleHtml.js

@@ -1,26 +1,26 @@
-import { Dimensions, Linking } from 'react-native';
-import autoBindReact from 'auto-bind/react';
-import _ from 'lodash';
-import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
+import { Dimensions, Linking } from 'react-native';
 import Html from 'react-native-render-html';
+import { iframe } from 'react-native-render-html/src/HTMLRenderers';
 import {
-  cssStringToObject,
   cssObjectToString,
+  cssStringToObject,
 } from 'react-native-render-html/src/HTMLStyles';
-import WebView from 'react-native-webview';
 import {
-  makeTableRenderer,
   alterNode as tableAlterNode,
   cssRulesFromSpecs,
   defaultTableStylesSpecs,
   IGNORED_TAGS,
+  makeTableRenderer,
 } from 'react-native-render-html-table-bridge';
-import { iframe } from 'react-native-render-html/src/HTMLRenderers';
+import WebView from 'react-native-webview';
 import YoutubePlayer from 'react-native-youtube-iframe';
+import autoBindReact from 'auto-bind/react';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
-import { View } from '../../components/View';
 import { Text } from '../../components/Text';
+import { View } from '../../components/View';
 import getEmptyObjectKeys from '../services/getEmptyObjectKeys';
 import isValidVideoFormat from '../services/isValidVideoFormat';
 import Image from './Image';

package/html/elements/A.js

@@ -1,11 +1,11 @@
 import React, { PureComponent } from 'react';
+import { Linking } from 'react-native';
 import autoBindReact from 'auto-bind/react';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
-import { Linking } from 'react-native';
 import { connectStyle } from '@shoutem/theme';
-import { isImg } from '../elements/Img';
-import { ElementPropTypes, combineMappers, mapElementProps } from '../Html';
+import { combineMappers, ElementPropTypes, mapElementProps } from '../Html';
+import { isImg } from './Img';
 import { Inline } from './Inline';
 
 class A extends PureComponent {

package/html/elements/Block.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import _ from 'lodash';
 import {
-  ElementPropTypes,
   combineMappers,
-  mapElementProps,
+  ElementPropTypes,
   isBlockElement,
+  mapElementProps,
 } from '../Html';
 import { Inline } from './Inline';
 

package/html/elements/Img.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
 import Image from '../components/Image';
-import { ElementPropTypes, combineMappers, mapElementProps } from '../Html';
+import { combineMappers, ElementPropTypes, mapElementProps } from '../Html';
 
 export function isImg(element) {
   return _.get(element, 'tag') === 'img';

package/html/elements/Inline.js

@@ -4,17 +4,17 @@ import PropTypes from 'prop-types';
 import { Text } from '../../components/Text';
 import { TouchableOpacity } from '../../components/TouchableOpacity';
 import { View } from '../../components/View';
-import { Display } from '../services/ElementRegistry';
 import {
-  isBlockElement,
-  hasBlockElement,
-  ElementPropTypes,
   combineMappers,
+  ElementPropTypes,
+  hasBlockElement,
+  isBlockElement,
   mapElementProps,
   renderChildElements,
 } from '../Html';
+import { Display } from '../services/ElementRegistry';
 import { isImg } from './Img';
-import { removeWhiteSpace, isText } from './Text';
+import { isText, removeWhiteSpace } from './Text';
 
 export const blockDisplayIfAnyChildIsBlock = function(element) {
   return hasBlockElement(element.childElements)