Merge pull request #678 from shoutem/release/4.8.0

Release/4.8.0 - master

LICENSE

@@ -27,4 +27,4 @@ DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
-SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

README.md

@@ -70,7 +70,6 @@ To see other components, just import them from `@shoutem/ui` and render them.
 
 You can also use standard React Native components in your layouts anywhere you want, but they will not inherit either the theme or the parent styles, so you will need to style them manually.
 
-
 ### Restaurants app
 
 Clone the [Shoutem UI](https://github.com/shoutem/ui) repository:
@@ -107,7 +106,7 @@ It consists of three libraries:
 
 - [@shoutem/ui](https://github.com/shoutem/ui): beautiful and customizable UI components
 - [@shoutem/theme](https://github.com/shoutem/theme): “CSS-way” of styling entire app
-- [@shoutem/animation](https://github.com/shoutem/animation): declarative way of applying ready-made  animations
+- [@shoutem/animation](https://github.com/shoutem/animation): declarative way of applying ready-made animations
 
 ## License
 

components/ActionSheet/ActionSheet.js

@@ -1,8 +1,8 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
+import { Animated, Dimensions, TouchableOpacity } from 'react-native';
 import autoBindReact from 'auto-bind/react';
-import { Animated, TouchableOpacity, Dimensions } from 'react-native';
 import _ from 'lodash';
+import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
 import { IPHONE_X_HOME_INDICATOR_PADDING } from '../../const';
 import { Device } from '../../helpers';
@@ -84,11 +84,11 @@ class ActionSheet extends PureComponent {
     Animated.parallel([
       Animated.spring(yPos, {
         toValue,
-        useNativeDriver: true
+        useNativeDriver: true,
       }),
       Animated.timing(opacity, {
         toValue,
-        useNativeDriver: false
+        useNativeDriver: false,
       }),
     ]).start();
   }
@@ -101,13 +101,13 @@ class ActionSheet extends PureComponent {
     Animated.parallel([
       Animated.spring(yPos, {
         toValue,
-        useNativeDriver: true
+        useNativeDriver: true,
       }),
       Animated.timing(opacity, {
         toValue,
         delay: 100,
         duration: 150,
-        useNativeDriver: false
+        useNativeDriver: false,
       }),
     ]).start(this.hideComponent);
   }

components/DateTimePicker.js

@@ -1,9 +1,9 @@
 import React, { PureComponent } from 'react';
+import { Platform } from 'react-native';
+import Modal from 'react-native-modal';
 import RNCDateTimePicker from '@react-native-community/datetimepicker';
 import autoBindReact from 'auto-bind/react';
 import PropTypes from 'prop-types';
-import { Platform } from 'react-native';
-import Modal from 'react-native-modal';
 import { connectStyle } from '@shoutem/theme';
 import { Button } from './Button';
 import { Icon } from './Icon';

components/DropDownMenu/DropDownMenu.js

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

components/DropDownMenu/DropDownModal.js

@@ -1,9 +1,9 @@
 import React, { PureComponent } from 'react';
+import { Dimensions, Modal } from 'react-native';
 import autoBindReact from 'auto-bind/react';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
-import { Modal, Dimensions } from 'react-native';
-import { connectStyle, changeColorAlpha } from '@shoutem/theme';
+import { changeColorAlpha, connectStyle } from '@shoutem/theme';
 import { Button } from '../Button';
 import { Icon } from '../Icon';
 import { LinearGradient } from '../LinearGradient';

components/EmptyListImage.js

@@ -7,11 +7,6 @@ import { Text, Title, View } from '@shoutem/ui';
 import EmptyList from '../assets/images/emptyList.svg';
 
 class EmptyListImage extends PureComponent {
-  static defaultProps = {
-    title: "It's empty in here",
-    message: "We couldn't find anything to show...",
-  };
-
   constructor(props) {
     super(props);
 
@@ -66,6 +61,15 @@ EmptyListImage.propTypes = {
   titleStyle: PropTypes.object,
 };
 
+EmptyListImage.defaultProps = {
+  image: undefined,
+  imageStyle: undefined,
+  message: "We couldn't find anything to show...",
+  messageStyle: undefined,
+  title: "It's empty in here",
+  titleStyle: undefined,
+};
+
 const StyledView = connectStyle('shoutem.ui.EmptyListImage')(EmptyListImage);
 
 export { StyledView as EmptyListImage };

components/FormGroup.js

@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react';
 import { connectAnimation } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
-
 import { View } from './View';
 
 class FormGroup extends PureComponent {

components/GridRow.js

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

components/HorizontalPager/HorizontalPager.js

@@ -1,8 +1,8 @@
 import React, { PureComponent } from 'react';
+import { InteractionManager, LayoutAnimation, ScrollView } from 'react-native';
 import autoBindReact from 'auto-bind/react';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
-import { InteractionManager, LayoutAnimation, ScrollView } from 'react-native';
 import { connectStyle } from '@shoutem/theme';
 import { View } from '../View';
 import { Page } from './Page';
@@ -118,7 +118,7 @@ class HorizontalPager extends PureComponent {
     const { selectedIndex } = this.state;
     const { onIndexSelected } = this.props;
 
-    const contentOffset = event.nativeEvent.contentOffset;
+    const { contentOffset } = event.nativeEvent;
     const newSelectedIndex = this.calculateIndex(contentOffset);
 
     if (selectedIndex === newSelectedIndex) {

components/Icon/services/icons.js

@@ -60,8 +60,6 @@ export function registerIcons(config) {
   } else {
     addNewIcon(config);
   }
-
-  return;
 }
 
 registerIcons(defaultConfig);

components/Icon/services/index.js

@@ -1 +1 @@
-export { registerIcons, getIcon } from './icons';
+export { getIcon, registerIcons } from './icons';

components/Image.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
+import { Image as RNImage, Platform } from 'react-native';
 import autoBindReact from 'auto-bind/react';
 import _ from 'lodash';
-import { Image as RNImage, Platform } from 'react-native';
 import { connectAnimation } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
 

components/ImageBackground.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
+import { ImageBackground as RNImageBackground, Platform } from 'react-native';
 import autoBindReact from 'auto-bind/react';
 import _ from 'lodash';
-import { ImageBackground as RNImageBackground, Platform } from 'react-native';
 import { connectAnimation } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
 

components/ImageGallery/ImageGallery.android.js

@@ -5,6 +5,7 @@ import { ImageGalleryBase } from './ImageGalleryBase';
 
 class ImageGallery extends ImageGalleryBase {
   static IMAGE_PREVIEW_MODE = ImageGalleryBase.IMAGE_PREVIEW_MODE;
+
   static IMAGE_GALLERY_MODE = ImageGalleryBase.IMAGE_GALLERY_MODE;
 
   renderImage(imageProps, imageData, imageIndex) {

components/ImageGallery/ImageGallery.ios.js

@@ -1,12 +1,13 @@
 import React from 'react';
-import autoBindReact from 'auto-bind/react';
 import { InteractionManager } from 'react-native';
 import TransformableImage from 'react-native-transformable-image';
+import autoBindReact from 'auto-bind/react';
 import { connectStyle } from '@shoutem/theme';
 import { ImageGalleryBase } from './ImageGalleryBase';
 
 class ImageGallery extends ImageGalleryBase {
   static IMAGE_PREVIEW_MODE = ImageGalleryBase.IMAGE_PREVIEW_MODE;
+
   static IMAGE_GALLERY_MODE = ImageGalleryBase.IMAGE_GALLERY_MODE;
 
   constructor(props) {

components/ImageGalleryOverlay.js

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

components/ImagePreview.js

@@ -1,8 +1,8 @@
 import React, { PureComponent } from 'react';
+import { Image, Modal, TouchableOpacity, View } from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
 import autoBindReact from 'auto-bind/react';
 import PropTypes from 'prop-types';
-import { View, Modal, Image, TouchableOpacity } from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialIcons';
 import { makeZoomable } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
 

components/InlineDropDownMenu/InlineDropDownMenu.js

@@ -1,13 +1,13 @@
 import React, { PureComponent } from 'react';
+import { Animated, FlatList } from 'react-native';
 import autoBindReact from 'auto-bind/react';
-import { FlatList, Animated } from 'react-native';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
+import { Icon } from '../Icon';
+import { Caption, Text } from '../Text';
 import { TouchableOpacity } from '../TouchableOpacity';
 import { View } from '../View';
-import { Caption, Text } from '../Text';
-import { Icon } from '../Icon';
 import { InlineDropDownMenuItem } from './InlineDropDownMenuItem';
 
 const AnimatedIcon = Animated.createAnimatedComponent(Icon);
@@ -43,16 +43,13 @@ class InlineDropDownMenu extends PureComponent {
 
     const toValue = collapsed ? 0 : 1;
 
-    this.setState(
-      { collapsed: !collapsed },
-      () => Animated.timing(
-        this.dropDownIconValue,
-        {
-          toValue,
-          useNativeDriver: true,
-          duration: 300,
-        }
-      ).start());
+    this.setState({ collapsed: !collapsed }, () =>
+      Animated.timing(this.dropDownIconValue, {
+        toValue,
+        useNativeDriver: true,
+        duration: 300,
+      }).start(),
+    );
   }
 
   handleOptionPress(option) {
@@ -78,21 +75,19 @@ class InlineDropDownMenu extends PureComponent {
         selectedDescriptor={selectedDescriptor}
         onItemPressed={this.handleOptionPress}
       />
-    )
+    );
   }
 
   render() {
-    const {
-      style,
-      heading,
-      selectedOption,
-      options,
-    } = this.props;
+    const { style, heading, selectedOption, options } = this.props;
     const { collapsed } = this.state;
 
     return (
       <View>
-        <TouchableOpacity style={style.container} onPress={this.handleToggleMenuPress}>
+        <TouchableOpacity
+          style={style.container}
+          onPress={this.handleToggleMenuPress}
+        >
           <Caption styleName="muted md-gutter-bottom">{heading}</Caption>
           <View styleName="space-between horizontal v-center">
             <Text>{selectedOption?.title}</Text>
@@ -101,12 +96,14 @@ class InlineDropDownMenu extends PureComponent {
               styleName="md-gutter-left"
               style={{
                 ...style.icon,
-                transform: [{
-                  rotate: this.dropDownIconValue.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: ['0deg', '180deg']
-                  })
-                }]
+                transform: [
+                  {
+                    rotate: this.dropDownIconValue.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: ['0deg', '180deg'],
+                    }),
+                  },
+                ],
               }}
             />
           </View>

components/InlineDropDownMenu/InlineDropDownMenuItem.js

@@ -1,11 +1,11 @@
 import React, { PureComponent } from 'react';
-import autoBindReact from 'auto-bind/react';
 import { Animated, Dimensions } from 'react-native';
+import autoBindReact from 'auto-bind/react';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
-import { TouchableOpacity } from '../TouchableOpacity';
 import { Text } from '../Text';
+import { TouchableOpacity } from '../TouchableOpacity';
 
 const window = Dimensions.get('window');
 const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);
@@ -30,14 +30,11 @@ class InlineDropDownMenuItem extends PureComponent {
   componentDidMount() {
     const { index } = this.props;
 
-    Animated.timing(
-      this.animatedValue,
-      {
-        toValue: 1,
-        useNativeDriver: true,
-        duration: 300 + index * 15,
-      }
-    ).start();
+    Animated.timing(this.animatedValue, {
+      toValue: 1,
+      useNativeDriver: true,
+      duration: 300 + index * 15,
+    }).start();
   }
 
   handlePress() {
@@ -51,7 +48,9 @@ class InlineDropDownMenuItem extends PureComponent {
   render() {
     const { isSelected, selectedDescriptor, item, style } = this.props;
 
-    const resolvedText = isSelected ? `${item.title} (${selectedDescriptor})` : item.title;
+    const resolvedText = isSelected
+      ? `${item.title} (${selectedDescriptor})`
+      : item.title;
     const textStyle = isSelected ? 'muted' : '';
 
     return (
@@ -64,10 +63,10 @@ class InlineDropDownMenuItem extends PureComponent {
                 translateX: this.animatedValue.interpolate({
                   inputRange: [0, 1],
                   outputRange: [window.width, 0],
-                })
-              }
+                }),
+              },
             ],
-          }
+          },
         ]}
         disabled={isSelected}
         onPress={this.handlePress}