@shoutem/ui 5.1.0 → 5.2.0

package/components/Video/Video.js

@@ -36,24 +36,6 @@ function getSource(sourceReader, poster) {
  * @returns {*}
  */
 class Video extends PureComponent {
-  static propTypes = {
-    width: PropTypes.number,
-    height: PropTypes.number,
-    // `playerParams` currently only works for Youtube
-    playerParams: PropTypes.object,
-    source: PropTypes.shape({
-      uri: PropTypes.string,
-    }),
-    style: PropTypes.object,
-    poster: PropTypes.string,
-  };
-
-  static defaultProps = {
-    playerParams: {
-      showinfo: 0,
-    },
-  };
-
   constructor(props) {
     super(props);
 
@@ -64,16 +46,10 @@ class Video extends PureComponent {
   render() {
     const { width, height, style, poster } = this.props;
 
-    // https://github.com/vimeo/player.js/issues/514
-    // Vimeo player crashes the app, if played in full screen portrait mode and if user
-    // tries to navigate back using Android hardware back button. Disableing full screen
-    // option for Vimeo until their player is fixed.
-    const isYoutubeVideo = this.sourceReader.isYouTube;
-
     return (
       <View style={style.container}>
         <WebView
-          allowsFullscreenVideo={isYoutubeVideo}
+          allowsFullscreenVideo
           mediaPlaybackRequiresUserAction={false}
           style={{ width, height }}
           source={getSource(this.sourceReader, poster)}
@@ -85,6 +61,26 @@ class Video extends PureComponent {
   }
 }
 
+Video.propTypes = {
+  style: PropTypes.object.isRequired,
+  height: PropTypes.number,
+  // `playerParams` currently only works for Youtube
+  playerParams: PropTypes.object,
+  poster: PropTypes.string,
+  source: PropTypes.shape({
+    uri: PropTypes.string,
+  }),
+  width: PropTypes.number,
+};
+
+Video.defaultProps = {
+  width: undefined,
+  height: undefined,
+  playerParams: { showinfo: 0 },
+  source: undefined,
+  poster: undefined,
+};
+
 const AnimatedVideo = connectAnimation(Video);
 const StyledVideo = connectStyle('shoutem.ui.Video')(AnimatedVideo);
 

package/components/View.js

@@ -7,25 +7,23 @@ import { LinearGradient } from './LinearGradient';
 
 class View extends PureComponent {
   render() {
-    const style = { ...this.props.style };
-    let gradient = null;
+    const { children, style, ...otherProps } = this.props;
+    const { backgroundGradient, ...viewStyle } = style;
 
-    if (style.backgroundGradient) {
+    let gradient = null;
+    if (backgroundGradient) {
       gradient = (
         <LinearGradient
           styleName="fill-parent"
           style={style.backgroundGradient}
         />
       );
-
-      // This is not a valid RN View style
-      delete style.backgroundGradient;
     }
 
     return (
-      <RNView {...this.props} style={style}>
+      <RNView {...otherProps} style={viewStyle}>
         {gradient}
-        {this.props.children}
+        {children}
       </RNView>
     );
   }
@@ -33,7 +31,7 @@ class View extends PureComponent {
 
 View.propTypes = {
   ...ViewPropTypes,
-  style: PropTypes.object,
+  style: PropTypes.object.isRequired,
 };
 
 const AnimatedView = connectAnimation(View);

package/components/YearRangePicker/YearRangePicker.js

@@ -25,22 +25,6 @@ function formatButtonTooltip(props) {
 }
 
 class YearRangePicker extends PureComponent {
-  static propTypes = {
-    onRangeConfirmed: PropTypes.func,
-    onReset: PropTypes.func,
-    resetButtonTitle: PropTypes.string,
-    confirmButtonTitle: PropTypes.string,
-    selectedYears: PropTypes.arrayOf(PropTypes.number),
-    rangeStart: PropTypes.number,
-    rangeEnd: PropTypes.number,
-    buttonPlaceholder: PropTypes.string,
-  };
-
-  static defaultProps = {
-    selectedYears: [],
-    buttonPlaceholder: 'Year',
-  };
-
   constructor(props) {
     super(props);
 
@@ -48,7 +32,6 @@ class YearRangePicker extends PureComponent {
 
     this.state = {
       collapsed: false,
-      selectedYears: props.selectedYears,
       buttonTooltip: formatButtonTooltip(props),
     };
   }
@@ -108,4 +91,26 @@ class YearRangePicker extends PureComponent {
   }
 }
 
+YearRangePicker.propTypes = {
+  // Disabling as this prop is used in the formatButtonTooltip function.
+  // eslint-disable-next-line react/no-unused-prop-types
+  buttonPlaceholder: PropTypes.string,
+  confirmButtonTitle: PropTypes.string,
+  rangeEnd: PropTypes.number,
+  rangeStart: PropTypes.number,
+  resetButtonTitle: PropTypes.string,
+  selectedYears: PropTypes.arrayOf(PropTypes.number),
+  onRangeConfirmed: PropTypes.func,
+};
+
+YearRangePicker.defaultProps = {
+  buttonPlaceholder: 'Year',
+  confirmButtonTitle: undefined,
+  rangeEnd: undefined,
+  rangeStart: undefined,
+  resetButtonTitle: undefined,
+  selectedYears: [],
+  onRangeConfirmed: undefined,
+};
+
 export default connectStyle('shoutem.ui.YearRangePicker')(YearRangePicker);

package/components/YearRangePicker/YearRangePickerButton.js

@@ -10,13 +10,6 @@ import { TouchableOpacity } from '../TouchableOpacity';
 const AnimatedIcon = Animated.createAnimatedComponent(Icon);
 
 class YearRangePickerButton extends PureComponent {
-  static propTypes = {
-    onPress: PropTypes.func,
-    tooltip: PropTypes.string,
-    collapsed: PropTypes.bool,
-    style: PropTypes.any,
-  };
-
   constructor(props) {
     super(props);
 
@@ -65,6 +58,19 @@ class YearRangePickerButton extends PureComponent {
   }
 }
 
+YearRangePickerButton.propTypes = {
+  style: PropTypes.object.isRequired,
+  collapsed: PropTypes.bool,
+  tooltip: PropTypes.string,
+  onPress: PropTypes.func,
+};
+
+YearRangePickerButton.defaultProps = {
+  collapsed: undefined,
+  tooltip: undefined,
+  onPress: undefined,
+};
+
 export default connectStyle('shoutem.ui.YearRangePickerButton')(
   YearRangePickerButton,
 );

package/components/YearRangePicker/YearRangePickerModal.js

@@ -42,22 +42,6 @@ function resolveRangeTooltip(visibleYears) {
 }
 
 class YearRangePickerModal extends PureComponent {
-  static propTypes = {
-    onRangeConfirmed: PropTypes.func,
-    onDismiss: PropTypes.func,
-    resetButtonTitle: PropTypes.string,
-    confirmButtonTitle: PropTypes.string,
-    selectedYears: PropTypes.arrayOf(PropTypes.number),
-    rangeStart: PropTypes.number,
-    rangeEnd: PropTypes.number,
-    visible: PropTypes.bool,
-    style: PropTypes.any,
-  };
-
-  static defaultProps = {
-    selectedYears: [],
-  };
-
   constructor(props) {
     super(props);
 
@@ -283,6 +267,29 @@ class YearRangePickerModal extends PureComponent {
   }
 }
 
+YearRangePickerModal.propTypes = {
+  style: PropTypes.object.isRequired,
+  confirmButtonTitle: PropTypes.string,
+  rangeEnd: PropTypes.number,
+  rangeStart: PropTypes.number,
+  resetButtonTitle: PropTypes.string,
+  selectedYears: PropTypes.arrayOf(PropTypes.number),
+  visible: PropTypes.bool,
+  onDismiss: PropTypes.func,
+  onRangeConfirmed: PropTypes.func,
+};
+
+YearRangePickerModal.defaultProps = {
+  confirmButtonTitle: undefined,
+  rangeEnd: undefined,
+  rangeStart: undefined,
+  resetButtonTitle: undefined,
+  selectedYears: [],
+  visible: false,
+  onDismiss: undefined,
+  onRangeConfirmed: undefined,
+};
+
 export default connectStyle('shoutem.ui.YearRangePickerModal')(
   YearRangePickerModal,
 );

package/examples/components/NavigationBars.js

@@ -39,6 +39,10 @@ NavBarStageContainer.propTypes = {
   style: PropTypes.object,
 };
 
+NavBarStageContainer.defaultProps = {
+  style: {},
+};
+
 export class NavigationBars extends PureComponent {
   render() {
     const navBarDropDownOptions = [

package/examples/components/Stage.js

@@ -15,8 +15,13 @@ function Stage({ title, children }) {
 }
 
 Stage.propTypes = {
-  title: PropTypes.string,
   children: PropTypes.node,
+  title: PropTypes.string,
+};
+
+Stage.defaultProps = {
+  children: undefined,
+  title: undefined,
 };
 
 const styles = {

package/html/Html.js

@@ -19,12 +19,6 @@ const defaultElementSettings = {
 };
 
 class Html extends PureComponent {
-  static propTypes = {
-    body: PropTypes.string.isRequired,
-    renderElement: PropTypes.func,
-    style: PropTypes.object,
-  };
-
   /**
    * Create Element class for given element tag and add it to the ElementClassMap.
    * Use the settings to additionally describe a Element class.
@@ -88,11 +82,13 @@ class Html extends PureComponent {
    * @returns {Component} The element rendered as a React Native component
    */
   renderElement(element) {
+    const { renderElement } = this.props;
+
     const elementStyle = this.getElementStyle(element);
     let renderedElement;
 
-    if (this.props.renderElement) {
-      renderedElement = this.props.renderElement(
+    if (renderElement) {
+      renderedElement = renderElement(
         element,
         elementStyle,
         this.renderElement,
@@ -151,6 +147,16 @@ class Html extends PureComponent {
   }
 }
 
+Html.propTypes = {
+  body: PropTypes.string.isRequired,
+  style: PropTypes.object.isRequired,
+  renderElement: PropTypes.func,
+};
+
+Html.defaultProps = {
+  renderElement: undefined,
+};
+
 export const ElementPropTypes = {
   childElements: PropTypes.array,
   renderElement: PropTypes.func,

package/html/components/Gallery.js

@@ -8,11 +8,6 @@ import { InlineGallery } from '../../components/InlineGallery';
  * Style interface correspond to InlineGallery from @shoutem/ui.
  */
 export default class Gallery extends PureComponent {
-  static propTypes = {
-    ...InlineGallery.propTypes,
-    handlePhotoPress: PropTypes.func,
-  };
-
   constructor(props) {
     super(props);
 
@@ -53,3 +48,12 @@ export default class Gallery extends PureComponent {
     );
   }
 }
+
+Gallery.propTypes = {
+  ...InlineGallery.propTypes,
+  handlePhotoPress: PropTypes.func,
+};
+
+Gallery.defaultProps = {
+  handlePhotoPress: undefined,
+};

package/html/components/Image.js

@@ -14,17 +14,6 @@ import { Lightbox } from '../../components/Lightbox';
  * this component will determine the Image dimensions before rendering an image.
  */
 export default class HtmlImage extends PureComponent {
-  static propTypes = {
-    ...RNImage.propTypes,
-    lightbox: PropTypes.bool,
-    allowUpscale: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    lightbox: true,
-    allowUpscale: false,
-  };
-
   constructor(props) {
     super(props);
 
@@ -46,13 +35,13 @@ export default class HtmlImage extends PureComponent {
     this.setState({ width, height });
   }
 
+  // TODO - handle properly
   imageSizeLoadFailed() {
-    // TODO - handle properly
+    const {
+      source: { uri },
+    } = this.props;
     // eslint-disable-next-line no-console
-    console.warn(
-      'Could not load image size for image: ',
-      this.props.source.uri,
-    );
+    console.warn('Could not load image size for image: ', uri);
   }
 
   render() {
@@ -108,3 +97,14 @@ export default class HtmlImage extends PureComponent {
     );
   }
 }
+
+HtmlImage.propTypes = {
+  ...RNImage.propTypes,
+  allowUpscale: PropTypes.bool,
+  lightbox: PropTypes.bool,
+};
+
+HtmlImage.defaultProps = {
+  allowUpscale: false,
+  lightbox: true,
+};

package/html/components/SimpleHtml.js

@@ -54,16 +54,6 @@ function resolveDimensions(objectToResize, style) {
 }
 
 class SimpleHtml extends PureComponent {
-  static propTypes = {
-    body: PropTypes.string,
-    attachments: PropTypes.array,
-    style: PropTypes.object,
-    customTagStyles: PropTypes.object,
-    customHandleLinkPress: PropTypes.func,
-    unsupportedVideoFormatMessage: PropTypes.string,
-    customAlterNode: PropTypes.func,
-  };
-
   constructor(props) {
     super(props);
 
@@ -309,4 +299,23 @@ class SimpleHtml extends PureComponent {
   }
 }
 
+SimpleHtml.propTypes = {
+  style: PropTypes.object.isRequired,
+  attachments: PropTypes.array,
+  body: PropTypes.string,
+  customAlterNode: PropTypes.func,
+  customHandleLinkPress: PropTypes.func,
+  customTagStyles: PropTypes.object,
+  unsupportedVideoFormatMessage: PropTypes.string,
+};
+
+SimpleHtml.defaultProps = {
+  attachments: undefined,
+  body: undefined,
+  customAlterNode: undefined,
+  customHandleLinkPress: undefined,
+  customTagStyles: undefined,
+  unsupportedVideoFormatMessage: undefined,
+};
+
 export default connectStyle('shoutem.ui.SimpleHtml')(SimpleHtml);

package/html/elements/A.js

@@ -9,12 +9,6 @@ import { isImg } from './Img';
 import { Inline } from './Inline';
 
 class A extends PureComponent {
-  static propTypes = {
-    ...ElementPropTypes,
-    handleLinkPress: PropTypes.func,
-    href: PropTypes.string,
-  };
-
   constructor(props, context) {
     super(props, context);
 
@@ -63,6 +57,17 @@ class A extends PureComponent {
   }
 }
 
+A.propTypes = {
+  ...ElementPropTypes,
+  handleLinkPress: PropTypes.func,
+  href: PropTypes.string,
+};
+
+A.defaultProps = {
+  handleLinkPress: undefined,
+  href: undefined,
+};
+
 function openLinkPress(Component) {
   return function(props) {
     function handleLinkPress(href) {

package/html/elements/Inline.js

@@ -138,20 +138,6 @@ function renderGroupedChildren(groupedChildren, renderElement, style) {
  * @constructor
  */
 export class Inline extends PureComponent {
-  static defaultProps = {
-    style: {},
-  };
-
-  static propTypes = {
-    ...ElementPropTypes,
-    onPress: PropTypes.func,
-    onLineBreak: PropTypes.func,
-  };
-
-  static defaultProps = {
-    onLineBreak: handleLineBreak,
-  };
-
   render() {
     const {
       block,
@@ -207,6 +193,19 @@ export class Inline extends PureComponent {
   }
 }
 
+Inline.propTypes = {
+  ...ElementPropTypes,
+  style: PropTypes.object,
+  onLineBreak: PropTypes.func,
+  onPress: PropTypes.func,
+};
+
+Inline.defaultProps = {
+  style: {},
+  onLineBreak: handleLineBreak,
+  onPress: undefined,
+};
+
 export const InlineSettings = { display: blockDisplayIfAnyChildIsBlock };
 
 export default combineMappers(mapElementProps)(Inline);

package/html/elements/Text.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Text } from 'react-native';
 import { AllHtmlEntities as Entities } from 'html-entities';
 import _ from 'lodash';
+import PropTypes from 'prop-types';
 import { combineMappers, ElementPropTypes, mapElementProps } from '../Html';
 
 const html = new Entities();
@@ -57,6 +58,11 @@ export function TextElement(props) {
 
 TextElement.propTypes = {
   ...ElementPropTypes,
+  style: PropTypes.object,
+};
+
+TextElement.defaultProps = {
+  style: {},
 };
 
 export default combineMappers(mapElementProps)(TextElement);

package/html/elements/Video.js

@@ -22,11 +22,12 @@ function Video({ src, thumbnailUrl, style }) {
 
 Video.propTypes = {
   src: PropTypes.string,
-  thumbnailUrl: PropTypes.string,
   style: PropTypes.object,
+  thumbnailUrl: PropTypes.string,
 };
 
 Video.defaultProps = {
+  src: undefined,
   style: {
     container: {
       alignSelf: 'stretch',
@@ -34,6 +35,7 @@ Video.defaultProps = {
       alignItems: 'center',
     },
   },
+  thumbnailUrl: undefined,
 };
 
 export default combineMappers(mapElementProps)(Video);

package/html/elements/list/Li.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { ElementPropTypes } from '../../Html';
 import { Inline } from '../Inline';
 
@@ -30,7 +29,6 @@ function Li({ element, renderElement, style }) {
 
 Li.propTypes = {
   ...ElementPropTypes,
-  prefix: PropTypes.element,
 };
 
 export default Li;

package/html/elements/list/Ol.js

@@ -28,4 +28,8 @@ Ol.propTypes = {
   style: PropTypes.object,
 };
 
+Ol.defaultProps = {
+  style: {},
+};
+
 export default combineMappers(mapElementProps)(Ol);

package/html/elements/list/Ul.js

@@ -24,4 +24,8 @@ Ul.propTypes = {
   style: PropTypes.object,
 };
 
+Ul.defaultProps = {
+  style: {},
+};
+
 export default combineMappers(mapElementProps)(Ul);

package/html/elements/list/prefix/Bullet.js

@@ -9,3 +9,7 @@ export default function BulletPrefix({ style }) {
 BulletPrefix.propTypes = {
   style: PropTypes.object,
 };
+
+BulletPrefix.defaultProps = {
+  style: undefined,
+};

package/html/elements/list/prefix/Number.js

@@ -10,6 +10,11 @@ export default function NumberPrefix({ element, style }) {
 }
 
 NumberPrefix.propTypes = {
-  style: PropTypes.object,
   element: PropTypes.shape({ ...ElementPropTypes }),
+  style: PropTypes.object,
+};
+
+NumberPrefix.defaultProps = {
+  element: undefined,
+  style: undefined,
 };