@shoutem/ui 4.6.6-rc.1 → 4.8.0

package/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.

package/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
 

package/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);
   }

package/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';

package/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';

package/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';

package/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 };

package/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 {

package/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';

package/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) {

package/components/Icon/services/icons.js

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

package/components/Icon/services/index.js

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

package/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';
 

package/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';
 

package/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) {

package/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) {

package/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';

package/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';
 

package/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>

package/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}

package/components/ListView.js

@@ -1,15 +1,15 @@
 import React, { PureComponent } from 'react';
-import autoBindReact from 'auto-bind/react';
-import _ from 'lodash';
-import PropTypes from 'prop-types';
 import {
-  View,
   FlatList,
-  SectionList,
+  Platform,
   RefreshControl,
+  SectionList,
   StatusBar,
-  Platform,
+  View,
 } from 'react-native';
+import autoBindReact from 'auto-bind/react';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
 import { Divider } from './Divider';
 import { EmptyListImage } from './EmptyListImage';
@@ -34,26 +34,6 @@ function renderDefaultSectionHeader(section) {
 }
 
 class ListView extends PureComponent {
-  static propTypes = {
-    autoHideHeader: PropTypes.bool,
-    style: PropTypes.object,
-    contentContainerStyle: PropTypes.object,
-    data: PropTypes.array,
-    loading: PropTypes.bool,
-    onLoadMore: PropTypes.func,
-    onLoadMoreThreshold: PropTypes.number,
-    onRefresh: PropTypes.func,
-    getSectionId: PropTypes.func,
-    sections: PropTypes.array,
-    renderRow: PropTypes.func,
-    renderHeader: PropTypes.func,
-    renderFooter: PropTypes.func,
-    renderSectionHeader: PropTypes.func,
-    scrollDriver: PropTypes.object,
-    hasFeaturedItem: PropTypes.bool,
-    renderFeaturedItem: PropTypes.func,
-  };
-
   static getDerivedStateFromProps(props, state) {
     const isLoading = props.loading;
 
@@ -131,7 +111,7 @@ class ListView extends PureComponent {
 
     // configuration
     // default load more threshold
-    mappedProps.onEndReachedThreshold = onLoadMoreThreshold || 0.5;
+    mappedProps.onEndReachedThreshold = onLoadMoreThreshold;
 
     // style
     mappedProps.style = style.list;
@@ -313,17 +293,21 @@ class ListView extends PureComponent {
   }
 
   renderListEmptyComponent() {
-    const { ListEmptyComponent, loading } = this.props;
+    const { loading } = this.props;
 
     if (loading) {
       return null;
     }
 
+    const { ListEmptyComponent } = this.props;
+
     if (ListEmptyComponent) {
       return <ListEmptyComponent />;
     }
 
-    return <EmptyListImage />;
+    const { emptyListMessage, emptyListTitle } = this.props;
+
+    return <EmptyListImage message={emptyListMessage} title={emptyListTitle} />;
   }
 
   renderRefreshControl() {
@@ -346,20 +330,27 @@ class ListView extends PureComponent {
 
   render() {
     const {
+      emptyListMessage,
+      emptyListTitle,
       sections,
       hasFeaturedItem,
       ListEmptyComponent,
       loading,
     } = this.props;
 
-    /* ListEmptyComponent in SectionList is handled differently due to the known issue with empty data interpretation.
-    https://github.com/facebook/react-native/issues/14721 */
+    // ListEmptyComponent in SectionList is handled differently due to the known
+    // issue with empty data interpretation.
+    // https://github.com/facebook/react-native/issues/14721
     if (
       sections &&
       _.every(sections, section => _.isEmpty(section.data)) &&
       !loading
     ) {
-      return ListEmptyComponent ? <ListEmptyComponent /> : <EmptyListImage />;
+      return ListEmptyComponent ? (
+        <ListEmptyComponent />
+      ) : (
+        <EmptyListImage message={emptyListMessage} title={emptyListTitle} />
+      );
     }
 
     if (sections || hasFeaturedItem) {
@@ -370,6 +361,54 @@ class ListView extends PureComponent {
   }
 }
 
+ListView.propTypes = {
+  autoHideHeader: PropTypes.bool,
+  contentContainerStyle: PropTypes.object,
+  data: PropTypes.array,
+  emptyListMessage: PropTypes.string,
+  emptyListTitle: PropTypes.string,
+  getSectionId: PropTypes.func,
+  hasFeaturedItem: PropTypes.bool,
+  keyExtractor: PropTypes.func,
+  ListEmptyComponent: PropTypes.node,
+  loading: PropTypes.bool,
+  renderFeaturedItem: PropTypes.func,
+  renderFooter: PropTypes.func,
+  renderHeader: PropTypes.func,
+  renderRow: PropTypes.func,
+  renderSectionHeader: PropTypes.func,
+  scrollDriver: PropTypes.object,
+  sections: PropTypes.array,
+  style: PropTypes.object,
+  onLoadMore: PropTypes.func,
+  onLoadMoreThreshold: PropTypes.number,
+  onRefresh: PropTypes.func,
+};
+
+ListView.defaultProps = {
+  autoHideHeader: false,
+  contentContainerStyle: {},
+  data: undefined,
+  emptyListMessage: undefined,
+  emptyListTitle: undefined,
+  getSectionId: undefined,
+  hasFeaturedItem: false,
+  keyExtractor: undefined,
+  ListEmptyComponent: undefined,
+  loading: false,
+  renderFeaturedItem: undefined,
+  renderFooter: undefined,
+  renderHeader: undefined,
+  renderRow: undefined,
+  renderSectionHeader: undefined,
+  scrollDriver: undefined,
+  sections: undefined,
+  style: {},
+  onLoadMore: undefined,
+  onLoadMoreThreshold: 0.5,
+  onRefresh: undefined,
+};
+
 const StyledListView = connectStyle('shoutem.ui.ListView', {
   listContent: {
     paddingBottom: 5,

package/components/LoadingIndicator.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { connectStyle } from '@shoutem/theme';
-import { View } from './View';
 import { Spinner } from './Spinner';
+import { View } from './View';
 
 /**
  * Renders a loading indicator (spinner) that fits into available space (container)

package/components/NavigationBar/NavigationBar.js

@@ -1,14 +1,10 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import { StatusBar, Animated, Platform, View } from 'react-native';
-
+import { Animated, Platform, StatusBar, View } from 'react-native';
 import _ from 'lodash';
-
+import PropTypes from 'prop-types';
 import color from 'tinycolor2';
-
-import { connectStyle } from '@shoutem/theme';
 import { connectAnimation } from '@shoutem/animation';
-
+import { connectStyle } from '@shoutem/theme';
 import { Device } from '../../helpers';
 import composeChildren from './composeChildren';
 

package/components/NavigationBar/NavigationBarAnimations.js

@@ -21,7 +21,7 @@ class ColorAnimation {
   clearToStandard(atAnimatedValue) {
     const defaultAnimatedValue = atAnimatedValue || 150;
     const standardTextColor = this.textColor || 'rgba(0,0,0,1)';
-    const animatedValue = this.animatedValue;
+    const { animatedValue } = this;
     return {
       color: animatedValue.interpolate({
         inputRange: [0, defaultAnimatedValue],

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';
@@ -22,6 +22,11 @@ export class ScrollDriverProvider extends PureComponent {
   static propTypes = {
     children: PropTypes.node,
     driver: DriverShape,
+    // Used to propagate animation driver changes to components who aren't
+    // children of ScrollDriver, recieves driver as argument.
+    // TODO: Rewrite for new context API.
+    onAnimationDriverChange: PropTypes.func,
+    onScroll: PropTypes.func,
   };
 
   constructor(props, context) {
@@ -42,19 +47,34 @@ export class ScrollDriverProvider extends PureComponent {
   }
 
   setupAnimationDriver(props, context) {
+    const { onAnimationDriverChange } = this.props;
+
     if (props.driver) {
       this.animationDriver = props.driver;
     } else if (context.driverProvider) {
       this.animationDriver = context.animationDriver;
     } else if (!this.animationDriver) {
-      this.animationDriver = new ScrollDriver({ useNativeDriver: true });
+      this.animationDriver = new ScrollDriver(
+        { useNativeDriver: true, nativeScrollEventThrottle: 20 },
+        props.onScroll,
+      );
+    }
+
+    if (onAnimationDriverChange) {
+      onAnimationDriverChange(this.animationDriver);
     }
   }
 
   setAnimationDriver(driver, primaryScrollView) {
     if (driver || !this.animationDriver || primaryScrollView) {
-      _.assign(this.animationDriver, driver);
+      const { onAnimationDriverChange } = this.props;
       const { driverProvider } = this.context;
+
+      _.assign(this.animationDriver, driver);
+      if (onAnimationDriverChange) {
+        onAnimationDriverChange(driver);
+      }
+
       if (driverProvider) {
         driverProvider.setAnimationDriver(driver, primaryScrollView);
       }