Merge pull request #539 from shoutem/release/4.0.11

Release/4.0.11

components/EmptyListImage.js

@@ -0,0 +1,61 @@
+import PropTypes from 'prop-types';
+import React, { PureComponent } from 'react';
+import autoBindReact from 'auto-bind/react';
+import _ from 'lodash';
+import { connectStyle } from '@shoutem/theme';
+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);
+
+    autoBindReact(this);
+  }
+
+  resolveImage() {
+    const { image } = this.props;
+
+    if (image && !_.isFunction(image)) {
+      console.warn(`Image must be an SVG file imported as a React component.`);
+    } else if (image && _.isFunction(image)) {
+      return image;
+    }
+
+    return EmptyList;
+  }
+
+  render() {
+    const { message, title, imageStyle, titleStyle, messageStyle, style } = this.props
+    const EmptyStateImage = this.resolveImage();
+
+    return (
+      <View styleName="vertical h-center ">
+        <EmptyStateImage style={[style.image, imageStyle]} />
+        <Title styleName="title" style={[style.title, titleStyle]}>{title}</Title>
+        <Text styleName="description" style={[style.message, messageStyle]}>{message}</Text>
+      </View >
+    );
+  }
+}
+
+EmptyListImage.propTypes = {
+  ...EmptyListImage.propTypes,
+  image: PropTypes.func,
+  imageStyle: PropTypes.object,
+  message: PropTypes.string,
+  messageStyle: PropTypes.object,
+  title: PropTypes.string,
+  titleStyle: PropTypes.object,
+};
+
+const StyledView = connectStyle('shoutem.ui.EmptyListImage')(EmptyListImage);
+
+export {
+  StyledView as EmptyListImage,
+};

components/ListView.js

@@ -15,6 +15,7 @@ import { connectStyle } from '@shoutem/theme';
 import { Caption } from './Text';
 import { Divider } from './Divider';
 import { Spinner } from './Spinner';
+import { EmptyListImage } from './EmptyListImage';
 
 const Status = {
   LOADING: 'loading',
@@ -37,6 +38,7 @@ class ListView extends PureComponent {
   static propTypes = {
     autoHideHeader: PropTypes.bool,
     style: PropTypes.object,
+    contentContainerStyle: PropTypes.object,
     data: PropTypes.array,
     loading: PropTypes.bool,
     onLoadMore: PropTypes.func,
@@ -122,6 +124,8 @@ class ListView extends PureComponent {
       onRefresh,
       onLoadMoreThreshold,
       keyExtractor,
+      contentContainerStyle,
+      ListEmptyComponent,
     } = this.props;
     const { refreshing } = this.state;
     const mappedProps = {
@@ -134,7 +138,7 @@ class ListView extends PureComponent {
 
     // style
     mappedProps.style = style.list;
-    mappedProps.contentContainerStyle = style.listContent;
+    mappedProps.contentContainerStyle = { ...contentContainerStyle, ...style.listContent };
 
     if ((Platform.OS === 'ios') && (parseInt(Platform.Version, 10) === 13)) {
       mappedProps.scrollIndicatorInsets = { right: 1 };
@@ -177,6 +181,11 @@ class ListView extends PureComponent {
     // is data refreshing
     mappedProps.refreshing = refreshing === Status.REFRESHING;
 
+    // if list is empty, show empty placeholder
+    if (!ListEmptyComponent) {
+      mappedProps.ListEmptyComponent = EmptyListImage;
+    }
+
     // refresh control
     mappedProps.refreshControl = onRefresh && this.renderRefreshControl();
 

index.js

@@ -79,6 +79,7 @@ export { Tile } from './components/Tile';
 export { Lightbox } from './components/Lightbox';
 
 export { EmptyStateView } from './components/EmptyStateView';
+export { EmptyListImage } from './components/EmptyListImage';
 export { NumberInput } from './components/NumberInput';
 export { SearchField } from './components/SearchField';
 

theme.js

@@ -1544,6 +1544,22 @@ export default (variables = defaultThemeVariables) => ({
       };
     },
   },
+  'shoutem.ui.EmptyListImage': {
+    image: {
+      resizeMode: 'contain',
+      marginTop: 45,
+      marginBottom: 30,
+    },
+    title: {
+      maxWidth: 250,
+      marginBottom: 20,
+      textAlign: 'center',
+    },
+    message: {
+      textAlign: 'center',
+      maxWidth: 250,
+    },
+  },
   'shoutem.ui.NavigationBar': {
     [INCLUDE]: ['navigationBar'],
     '.clear': {