@shoutem/ui 5.0.1-rc.0 → 5.2.0

package/components/Icon/Icon.js

@@ -28,7 +28,7 @@ function Icon({ name, style, ...otherProps }) {
 
 Icon.propTypes = {
   name: PropTypes.string.isRequired,
-  style: PropTypes.any,
+  style: PropTypes.object.isRequired,
 };
 
 export default connectStyle('shoutem.ui.Icon')(Icon);

package/components/Image.js

@@ -18,10 +18,6 @@ const isValidSource = source =>
 let externalPropsTransformer = null;
 
 class Image extends PureComponent {
-  static propTypes = {
-    ...RNImage.propTypes,
-  };
-
   /**
    * Set a shared props transformer. The transformer will
    * be called on each props change, and it should return
@@ -85,6 +81,10 @@ class Image extends PureComponent {
   }
 }
 
+Image.propTypes = {
+  ...RNImage.propTypes,
+};
+
 const AnimatedImage = connectAnimation(Image);
 const StyledImage = connectStyle('shoutem.ui.Image')(AnimatedImage);
 export { StyledImage as Image };

package/components/ImageBackground.js

@@ -18,10 +18,6 @@ const isValidSource = source =>
 let externalPropsTransformer = null;
 
 class ImageBackground extends PureComponent {
-  static propTypes = {
-    ...RNImageBackground.propTypes,
-  };
-
   /**
    * Set a shared props transformer. The transformer will
    * be called on each props change, and it should return
@@ -85,6 +81,10 @@ class ImageBackground extends PureComponent {
   }
 }
 
+ImageBackground.propTypes = {
+  ...RNImageBackground.propTypes,
+};
+
 const AnimatedImage = connectAnimation(ImageBackground);
 const StyledImage = connectStyle('shoutem.ui.ImageBackground')(AnimatedImage);
 export { StyledImage as ImageBackground };

package/components/ImageGallery/ImageGallery.android.js

@@ -27,6 +27,14 @@ class ImageGallery extends ImageGalleryBase {
   }
 }
 
+ImageGallery.propTypes = {
+  ...ImageGalleryBase.propTypes,
+};
+
+ImageGallery.defaultProps = {
+  ...ImageGalleryBase.defaultProps,
+};
+
 const StyledImageGallery = connectStyle('shoutem.ui.ImageGallery')(
   ImageGallery,
 );

package/components/ImageGallery/ImageGallery.ios.js

@@ -105,6 +105,14 @@ class ImageGallery extends ImageGalleryBase {
   }
 }
 
+ImageGallery.propTypes = {
+  ...ImageGalleryBase.propTypes,
+};
+
+ImageGallery.defaultProps = {
+  ...ImageGalleryBase.defaultProps,
+};
+
 const StyledImageGallery = connectStyle('shoutem.ui.ImageGallery')(
   ImageGallery,
 );

package/components/ImageGallery/ImageGalleryBase.js

@@ -24,58 +24,20 @@ export class ImageGalleryBase extends PureComponent {
    */
   static IMAGE_GALLERY_MODE = IMAGE_GALLERY_MODE;
 
-  static propTypes = {
-    // Array containing objects with gallery data (shape defined below)
-    data: PropTypes.arrayOf(
-      PropTypes.shape({
-        source: PropTypes.shape({
-          uri: PropTypes.string,
-        }),
-        description: PropTypes.string,
-        title: PropTypes.string,
-      }),
-    ).isRequired,
-    // Callback function called when user swipes between pages (images)
-    // Index of new (selected) page is passed to this callback
-    onIndexSelected: PropTypes.func,
-    // Initially selected page in gallery
-    selectedIndex: PropTypes.number,
-    // onModeChanged(mode), callback function triggered when user taps on single photo
-    // Or when user transforms (zooms etc.) image
-    // Useful for hiding external controls (i.e. navigation bar)
-    // Mode can be `gallery` or `imagePreview`
-    onModeChanged: PropTypes.func,
-    // Style prop used to override default (theme) styling
-    style: PropTypes.object,
-    // Renders an overlay over all images
-    // For example page indicators using the `PageIndicators` component
-    // renderOverlay(imageData, imageIndex)
-    renderOverlay: PropTypes.func,
-    // Renders an overlay over a single image
-    // For example image gallery overlay using the `ImageGalleryOverlay` component
-    // renderOverlay(imageData, imageIndex)
-    renderImageOverlay: PropTypes.func,
-    // Callback function that can be used to define placeholder
-    // that appears when content is loading
-    renderPlaceholder: PropTypes.func,
-  };
-
-  static defaultProps = {
-    selectedIndex: 0,
-    showNextPage: false,
-    renderPlaceholder: () => <LoadingIndicator />,
-  };
-
   constructor(props) {
     super(props);
 
     autoBindReact(this);
 
+    const { selectedIndex } = props;
+
     this.state = {
-      selectedIndex: this.props.selectedIndex || 0,
+      selectedIndex,
       imageSwitchingEnabled: true,
-      collapsed: true,
       mode: IMAGE_GALLERY_MODE,
+      // Disabling rule as this flag is used via inheritance in other classes.
+      // eslint-disable-next-line react/no-unused-state
+      collapsed: true,
     };
   }
 
@@ -105,9 +67,11 @@ export class ImageGalleryBase extends PureComponent {
     );
   }
 
-  setMode(mode) {
+  setMode(newMode) {
     const { onModeChanged } = this.props;
-    if (this.state.mode === mode) {
+    const { mode } = this.state;
+
+    if (mode === newMode) {
       return;
     }
 
@@ -159,7 +123,13 @@ export class ImageGalleryBase extends PureComponent {
   }
 
   render() {
-    const { data, renderOverlay, renderPlaceholder, style } = this.props;
+    const {
+      data,
+      renderOverlay,
+      renderPlaceholder,
+      showNextPage,
+      style,
+    } = this.props;
     const { selectedIndex, imageSwitchingEnabled } = this.state;
 
     return (
@@ -171,7 +141,7 @@ export class ImageGalleryBase extends PureComponent {
           renderPage={this.renderPage}
           bounces
           pageMargin={style.pageMargin}
-          showNextPage={false}
+          showNextPage={showNextPage}
           renderOverlay={renderOverlay}
           renderPlaceholder={renderPlaceholder}
           scrollEnabled={imageSwitchingEnabled}
@@ -180,3 +150,50 @@ export class ImageGalleryBase extends PureComponent {
     );
   }
 }
+
+ImageGalleryBase.propTypes = {
+  // Array containing objects with gallery data (shape defined below)
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      description: PropTypes.string,
+      source: PropTypes.shape({
+        uri: PropTypes.string,
+      }),
+      title: PropTypes.string,
+    }),
+  ).isRequired,
+  // Style prop used to override default (theme) styling
+  style: PropTypes.object.isRequired,
+  // Renders an overlay over a single image
+  // For example image gallery overlay using the `ImageGalleryOverlay` component
+  // renderOverlay(imageData, imageIndex)
+  renderImageOverlay: PropTypes.func,
+  // Renders an overlay over all images
+  // For example page indicators using the `PageIndicators` component
+  // renderOverlay(imageData, imageIndex)
+  renderOverlay: PropTypes.func,
+  // Callback function that can be used to define placeholder
+  // that appears when content is loading
+  renderPlaceholder: PropTypes.func,
+  // Initially selected page in gallery
+  selectedIndex: PropTypes.number,
+  showNextPage: PropTypes.bool,
+  // Callback function called when user swipes between pages (images)
+  // Index of new (selected) page is passed to this callback
+  onIndexSelected: PropTypes.func,
+  // onModeChanged(mode), callback function triggered when user taps on single photo
+  // Or when user transforms (zooms etc.) image
+  // Useful for hiding external controls (i.e. navigation bar)
+  // Mode can be `gallery` or `imagePreview`
+  onModeChanged: PropTypes.func,
+};
+
+ImageGalleryBase.defaultProps = {
+  selectedIndex: 0,
+  showNextPage: false,
+  renderPlaceholder: () => <LoadingIndicator />,
+  renderImageOverlay: undefined,
+  renderOverlay: undefined,
+  onIndexSelected: undefined,
+  onModeChanged: undefined,
+};

package/components/ImageGalleryOverlay.js

@@ -17,12 +17,6 @@ const DESCRIPTION_LENGTH_TRIM_LIMIT = 90;
  * a description of an image.
  */
 class ImageGalleryOverlay extends PureComponent {
-  static propTypes = {
-    title: PropTypes.string,
-    description: PropTypes.string,
-    style: PropTypes.object,
-  };
-
   constructor(props) {
     super(props);
 
@@ -72,7 +66,7 @@ class ImageGalleryOverlay extends PureComponent {
 
   renderDescription(description) {
     const { style } = this.props;
-    const collapsed = this.state.isDescriptionCollapsed;
+    const { isDescriptionCollapsed: collapsed } = this.state;
 
     if (!description) {
       return null;
@@ -138,6 +132,17 @@ class ImageGalleryOverlay extends PureComponent {
   }
 }
 
+ImageGalleryOverlay.propTypes = {
+  style: PropTypes.object.isRequired,
+  description: PropTypes.string,
+  title: PropTypes.string,
+};
+
+ImageGalleryOverlay.defaultProps = {
+  description: undefined,
+  title: undefined,
+};
+
 const AnimatedOverlay = connectAnimation(ImageGalleryOverlay);
 const StyledOverlay = connectStyle('shoutem.ui.ImageGalleryOverlay', {
   container: {},

package/components/ImagePreview.js

@@ -4,17 +4,10 @@ import autoBindReact from 'auto-bind/react';
 import PropTypes from 'prop-types';
 import { makeZoomable } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
-import { Icon } from './Icon/Icon';
+import Icon from './Icon/Icon';
 
 const ZoomableImage = makeZoomable(Image);
 
-const propTypes = {
-  width: PropTypes.number,
-  height: PropTypes.number,
-  source: Image.propTypes.source,
-  style: PropTypes.object,
-};
-
 const CLOSE_ICON_NAME = 'clear';
 const CLOSE_ICON_SIZE = 25;
 
@@ -27,11 +20,11 @@ class ImagePreview extends PureComponent {
     super(props);
 
     autoBindReact(this);
-  }
 
-  state = {
-    fullScreen: false,
-  };
+    this.state = {
+      fullScreen: false,
+    };
+  }
 
   onPressCloseButton() {
     this.setState({
@@ -47,8 +40,9 @@ class ImagePreview extends PureComponent {
 
   render() {
     const { source, style, width, height } = this.props;
+    const { fullScreen } = this.state;
 
-    if (this.state.fullScreen) {
+    if (fullScreen) {
       const closeButton = (
         <View style={style.header}>
           <TouchableOpacity
@@ -90,7 +84,18 @@ class ImagePreview extends PureComponent {
   }
 }
 
-ImagePreview.propTypes = propTypes;
+ImagePreview.propTypes = {
+  style: PropTypes.object.isRequired,
+  height: PropTypes.number,
+  source: Image.propTypes.source,
+  width: PropTypes.number,
+};
+
+ImagePreview.defaultProps = {
+  height: undefined,
+  source: undefined,
+  width: undefined,
+};
 
 const StyledImagePreview = connectStyle('shoutem.ui.ImagePreview')(
   ImagePreview,

package/components/InlineDropDownMenu/InlineDropDownMenu.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
-import autoBindReact from 'auto-bind/react';
 import { Animated, ScrollView } from 'react-native';
+import autoBindReact from 'auto-bind/react';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
@@ -13,23 +13,11 @@ import { InlineDropDownMenuItem } from './InlineDropDownMenuItem';
 const AnimatedIcon = Animated.createAnimatedComponent(Icon);
 
 const optionShape = PropTypes.shape({
-  title: PropTypes.string.isRequired,
   key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  title: PropTypes.string.isRequired,
 });
 
 class InlineDropDownMenu extends PureComponent {
-  static propTypes = {
-    heading: PropTypes.string,
-    selectedDescriptor: PropTypes.string,
-    options: PropTypes.arrayOf(optionShape).isRequired,
-    onOptionSelected: PropTypes.func,
-    selectedOption: optionShape,
-    headingStyle: PropTypes.object,
-    containerStyle: PropTypes.object,
-    selectedOptionContainerStyle: PropTypes.object,
-    selectedOptionTextStyle: PropTypes.object,
-  };
-
   constructor(props) {
     super(props);
 
@@ -128,10 +116,7 @@ class InlineDropDownMenu extends PureComponent {
           </View>
         </TouchableOpacity>
         {collapsed && (
-          <ScrollView
-            data={options}
-            contentContainerStyle={style.list}
-          >
+          <ScrollView data={options} contentContainerStyle={style.list}>
             {_.map(options, (item, index) =>
               this.renderOption({ item, index }),
             )}
@@ -142,6 +127,30 @@ class InlineDropDownMenu extends PureComponent {
   }
 }
 
+InlineDropDownMenu.propTypes = {
+  options: PropTypes.arrayOf(optionShape).isRequired,
+  style: PropTypes.object.isRequired,
+  containerStyle: PropTypes.object,
+  heading: PropTypes.string,
+  headingStyle: PropTypes.object,
+  selectedDescriptor: PropTypes.string,
+  selectedOption: optionShape,
+  selectedOptionContainerStyle: PropTypes.object,
+  selectedOptionTextStyle: PropTypes.object,
+  onOptionSelected: PropTypes.func,
+};
+
+InlineDropDownMenu.defaultProps = {
+  heading: undefined,
+  headingStyle: undefined,
+  containerStyle: undefined,
+  selectedDescriptor: undefined,
+  selectedOption: undefined,
+  selectedOptionContainerStyle: undefined,
+  selectedOptionTextStyle: undefined,
+  onOptionSelected: undefined,
+};
+
 const StyledComponent = connectStyle('shoutem.ui.InlineDropDownMenu')(
   InlineDropDownMenu,
 );

package/components/InlineDropDownMenu/InlineDropDownMenuItem.js

@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react';
 import { Animated, Dimensions, Pressable } from 'react-native';
 import autoBindReact from 'auto-bind/react';
-import _ from 'lodash';
 import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
 import { Text } from '../Text';
@@ -10,14 +9,6 @@ const window = Dimensions.get('window');
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 
 class InlineDropDownMenuItem extends PureComponent {
-  static propTypes = {
-    item: PropTypes.object,
-    index: PropTypes.number,
-    selectedDescriptor: PropTypes.string,
-    onItemPressed: PropTypes.func,
-    isSelected: PropTypes.bool,
-  };
-
   constructor(props) {
     super(props);
 
@@ -76,6 +67,23 @@ class InlineDropDownMenuItem extends PureComponent {
   }
 }
 
+InlineDropDownMenuItem.propTypes = {
+  style: PropTypes.isRequired,
+  index: PropTypes.number,
+  isSelected: PropTypes.bool,
+  item: PropTypes.object,
+  selectedDescriptor: PropTypes.string,
+  onItemPressed: PropTypes.func,
+};
+
+InlineDropDownMenuItem.defaultProps = {
+  index: undefined,
+  isSelected: false,
+  item: undefined,
+  selectedDescriptor: undefined,
+  onItemPressed: undefined,
+};
+
 const StyledComponent = connectStyle('shoutem.ui.InlineDropDownMenuItem')(
   InlineDropDownMenuItem,
 );

package/components/InlineGallery.js

@@ -10,48 +10,16 @@ import { TouchableOpacity } from './TouchableOpacity';
 import { View } from './View';
 
 class InlineGallery extends PureComponent {
-  static propTypes = {
-    // Array containing objects with image data (shape defined below)
-    data: PropTypes.arrayOf(
-      PropTypes.shape({
-        source: PropTypes.shape({
-          uri: PropTypes.string,
-        }),
-      }),
-    ).isRequired,
-    // Callback function called when user taps on single item (image) in gallery
-    onPress: PropTypes.func,
-    // Callback function called when user swipes between pages (images)
-    // Index of new (selected) page is passed to this callback
-    onIndexSelected: PropTypes.func,
-    // Initially selected page in gallery
-    selectedIndex: PropTypes.number,
-    // Style, applied to Image component
-    style: PropTypes.object,
-    // Prop that reduces page size by pageMargin, allowing 'sneak peak' of next page
-    // Defaults to false
-    showNextPage: PropTypes.bool,
-    // Callback function that can be used to render overlay over pages
-    // For example page indicators using `PageIndicators` component
-    // renderOverlay(imageData, imageIndex)
-    renderOverlay: PropTypes.func,
-    // Callback function that can be used to define placeholder
-    // that appears when content is loading
-    renderPlaceholder: PropTypes.func,
-  };
-
-  static defaultProps = {
-    renderPlaceholder: () => <LoadingIndicator />,
-  };
-
   constructor(props) {
     super(props);
 
     autoBindReact(this);
 
+    const { showNextPage } = props;
+
     this.state = {
       selectedIndex: 0,
-      showNextPage: this.props.showNextPage || false,
+      showNextPage,
     };
   }
 
@@ -125,6 +93,45 @@ class InlineGallery extends PureComponent {
   }
 }
 
+InlineGallery.propTypes = {
+  // Array containing objects with image data (shape defined below)
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      source: PropTypes.shape({
+        uri: PropTypes.string,
+      }),
+    }),
+  ).isRequired,
+  // Style, applied to Image component
+  style: PropTypes.object.isRequired,
+  // Callback function that can be used to render overlay over pages
+  // For example page indicators using `PageIndicators` component
+  // renderOverlay(imageData, imageIndex)
+  renderOverlay: PropTypes.func,
+  // Callback function that can be used to define placeholder
+  // that appears when content is loading
+  renderPlaceholder: PropTypes.func,
+  // Initially selected page in gallery
+  selectedIndex: PropTypes.number,
+  // Prop that reduces page size by pageMargin, allowing 'sneak peak' of next page
+  // Defaults to false
+  showNextPage: PropTypes.bool,
+  // Callback function called when user swipes between pages (images)
+  // Index of new (selected) page is passed to this callback
+  onIndexSelected: PropTypes.func,
+  // Callback function called when user taps on single item (image) in gallery
+  onPress: PropTypes.func,
+};
+
+InlineGallery.defaultProps = {
+  renderPlaceholder: () => <LoadingIndicator />,
+  renderOverlay: undefined,
+  selectedIndex: undefined,
+  showNextPage: false,
+  onIndexSelected: undefined,
+  onPress: undefined,
+};
+
 const StyledInlineGallery = connectStyle('shoutem.ui.InlineGallery')(
   InlineGallery,
 );

package/components/LinearGradient.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import RNLinearGradient from 'react-native-linear-gradient';
 import _ from 'lodash';
+import PropTypes from 'prop-types';
 import { connectAnimation } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
 
@@ -8,22 +9,31 @@ const RNLinearGradientPropsKeys = ['start', 'end', 'colors', 'locations'];
 
 class LinearGradient extends PureComponent {
   render() {
-    const { props } = this;
+    const { children, style } = this.props;
 
-    const styleWithOmissions = _.omit(props.style, RNLinearGradientPropsKeys);
+    const styleWithOmissions = _.omit(style, RNLinearGradientPropsKeys);
     const linearGradientProps = {
-      ...props,
-      ..._.pick(props.style, RNLinearGradientPropsKeys),
+      ...this.props,
+      ..._.pick(style, RNLinearGradientPropsKeys),
     };
 
     return (
       <RNLinearGradient {...linearGradientProps} style={styleWithOmissions}>
-        {props.children}
+        {children}
       </RNLinearGradient>
     );
   }
 }
 
+LinearGradient.propTypes = {
+  style: PropTypes.object.isRequired,
+  children: PropTypes.node,
+};
+
+LinearGradient.defaultProps = {
+  children: undefined,
+};
+
 const AnimatedLinearGradient = connectAnimation(LinearGradient);
 const StyledLinearGradient = connectStyle('shoutem.ui.LinearGradient')(
   AnimatedLinearGradient,

package/components/ListView.js

@@ -152,11 +152,6 @@ class ListView extends PureComponent {
     // data to display
     mappedProps.data = data;
 
-    // key extractor
-    if (!keyExtractor) {
-      mappedProps.keyExtractor = (item, index) => index.toString();
-    }
-
     // sections for SectionList
     if (sections) {
       mappedProps.sections = sections;
@@ -351,6 +346,7 @@ class ListView extends PureComponent {
 }
 
 ListView.propTypes = {
+  style: PropTypes.object.isRequired,
   autoHideHeader: PropTypes.bool,
   contentContainerStyle: PropTypes.object,
   data: PropTypes.array,
@@ -368,7 +364,6 @@ ListView.propTypes = {
   renderSectionHeader: PropTypes.func,
   scrollDriver: PropTypes.object,
   sections: PropTypes.array,
-  style: PropTypes.object,
   onLoadMore: PropTypes.func,
   onLoadMoreThreshold: PropTypes.number,
   onRefresh: PropTypes.func,
@@ -392,7 +387,6 @@ ListView.defaultProps = {
   renderSectionHeader: undefined,
   scrollDriver: undefined,
   sections: undefined,
-  style: {},
   onLoadMore: undefined,
   onLoadMoreThreshold: 0.5,
   onRefresh: undefined,

package/components/LoadingContainer.js

@@ -55,6 +55,7 @@ function LoadingContainer({
 }
 
 LoadingContainer.propTypes = {
+  style: PropTypes.object.isRequired,
   animation: PropTypes.object,
   animationScale: PropTypes.number,
   children: PropTypes.oneOfType([
@@ -63,7 +64,6 @@ LoadingContainer.propTypes = {
     PropTypes.node,
   ]),
   loading: PropTypes.bool,
-  style: PropTypes.object,
 };
 
 LoadingContainer.defaultProps = {
@@ -71,7 +71,6 @@ LoadingContainer.defaultProps = {
   children: undefined,
   animation: animations.loadingDots,
   loading: false,
-  style: {},
 };
 
 const StyledLoadingContainer = connectStyle('shoutem.ui.LoadingContainer')(