@shoutem/ui 5.1.0 → 5.2.0

package/components/NavigationBar/NavigationBar.js

@@ -20,19 +20,6 @@ function getBackgroundColor(style) {
 
 // eslint-disable-next-line react/prefer-stateless-function
 class NavigationBar extends PureComponent {
-  static propTypes = {
-    leftComponent: PropTypes.node,
-    centerComponent: PropTypes.node,
-    rightComponent: PropTypes.node,
-    style: PropTypes.object,
-    id: PropTypes.string,
-    statusBarColor: PropTypes.string,
-  };
-
-  static defaultProps = {
-    id: 'default',
-  };
-
   setStatusBarStyle(backgroundColor) {
     function chooseBarStyle(bgColor) {
       return color(bgColor).isDark() ? 'light-content' : 'default';
@@ -100,6 +87,24 @@ class NavigationBar extends PureComponent {
   }
 }
 
+NavigationBar.propTypes = {
+  style: PropTypes.object.isRequired,
+  centerComponent: PropTypes.node,
+  id: PropTypes.string,
+  leftComponent: PropTypes.node,
+  rightComponent: PropTypes.node,
+  // eslint-disable-next-line react/no-unused-prop-types
+  statusBarColor: PropTypes.string,
+};
+
+NavigationBar.defaultProps = {
+  id: 'default',
+  leftComponent: undefined,
+  centerComponent: undefined,
+  rightComponent: undefined,
+  statusBarColor: undefined,
+};
+
 const AnimatedNavigationBar = connectAnimation(composeChildren(NavigationBar));
 const StyledNavigationBar = connectStyle('shoutem.ui.NavigationBar')(
   AnimatedNavigationBar,

package/components/NumberInput.js

@@ -22,28 +22,6 @@ import { View } from './View';
  * focus and blur events.
  */
 class NumberInput extends PureComponent {
-  static propTypes = {
-    ...TextInput.propTypes,
-    // Maximum allowed value
-    max: PropTypes.number,
-    // Minimum allowed value
-    min: PropTypes.number,
-    // Called when the user changes the value by inputting it directly or with buttons
-    onChange: PropTypes.func.isRequired,
-    // Step used to increase or decrease value with corresponding buttons
-    step: PropTypes.number,
-    // Styles for component parts
-    style: PropTypes.shape({
-      button: PropTypes.object,
-      container: PropTypes.object,
-      icon: PropTypes.object,
-      input: PropTypes.object,
-      inputContainer: PropTypes.object,
-    }),
-    // Value of the input - can be empty
-    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  };
-
   constructor(props) {
     super(props);
 
@@ -57,13 +35,13 @@ class NumberInput extends PureComponent {
   }
 
   decreaseValue() {
-    const { step = 1, value = 0 } = this.props;
+    const { step, value } = this.props;
 
     this.updateValue(value - step);
   }
 
   increaseValue() {
-    const { step = 1, value = 0 } = this.props;
+    const { step, value } = this.props;
 
     this.updateValue(value + step);
   }
@@ -113,6 +91,36 @@ class NumberInput extends PureComponent {
   }
 }
 
+NumberInput.propTypes = {
+  ...TextInput.propTypes,
+  // Styles for component parts
+  style: PropTypes.shape({
+    button: PropTypes.object,
+    container: PropTypes.object,
+    icon: PropTypes.object,
+    input: PropTypes.object,
+    inputContainer: PropTypes.object,
+  }).isRequired,
+  // Called when the user changes the value by inputting it directly or with buttons
+  onChange: PropTypes.func.isRequired,
+  // Maximum allowed value
+  max: PropTypes.number,
+  // Minimum allowed value
+  min: PropTypes.number,
+  // Step used to increase or decrease value with corresponding buttons
+  step: PropTypes.number,
+  // Value of the input - can be empty
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+};
+
+NumberInput.defaultProps = {
+  ...TextInput.defaultProps,
+  max: undefined,
+  min: undefined,
+  step: 1,
+  value: 0,
+};
+
 const AnimatedNumberInput = connectAnimation(NumberInput);
 const StyledNumberInput = connectStyle('shoutem.ui.NumberInput')(
   AnimatedNumberInput,

package/components/PageIndicators.js

@@ -8,23 +8,6 @@ import { View } from './View';
  * Renders Page indicators (dots)
  */
 class PageIndicators extends PureComponent {
-  static propTypes = {
-    // ActiveIndex: number defining which page indicator will be rendered as active (selected)
-    activeIndex: PropTypes.number,
-    // Count: number defining how many page indicators will be rendered
-    count: PropTypes.number,
-    // maxCount defining highest number of page indicators that can be rendered
-    // If `count` is higher than `maxCount`, then `maxCount` number of indicators
-    // will be rendered. Defaults to 10
-    maxCount: PropTypes.number,
-    // Style prop used to override default (theme) styling
-    style: PropTypes.object,
-  };
-
-  static defaultProps = {
-    maxCount: 10,
-  };
-
   constructor(props) {
     super(props);
 
@@ -73,6 +56,25 @@ class PageIndicators extends PureComponent {
   }
 }
 
+PageIndicators.propTypes = {
+  // Style prop used to override default (theme) styling
+  style: PropTypes.object.isRequired,
+  // ActiveIndex: number defining which page indicator will be rendered as active (selected)
+  activeIndex: PropTypes.number,
+  // Count: number defining how many page indicators will be rendered
+  count: PropTypes.number,
+  // maxCount defining highest number of page indicators that can be rendered
+  // If `count` is higher than `maxCount`, then `maxCount` number of indicators
+  // will be rendered. Defaults to 10
+  maxCount: PropTypes.number,
+};
+
+PageIndicators.defaultProps = {
+  activeIndex: undefined,
+  count: undefined,
+  maxCount: 10,
+};
+
 const StyledPageIndicators = connectStyle('shoutem.ui.PageIndicators')(
   PageIndicators,
 );

package/components/ScrollView/ScrollDriverProvider.js

@@ -19,16 +19,6 @@ export class ScrollDriverProvider extends PureComponent {
     animationDriver: DriverShape,
   };
 
-  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) {
     super(props, context);
 
@@ -87,3 +77,23 @@ export class ScrollDriverProvider extends PureComponent {
     return children && Children.only(children);
   }
 }
+
+// We disable this eslint rule because the props are being utilized indirectly
+// through componentDidUpdate's usage of setupAnimationDriver
+/* eslint-disable react/no-unused-prop-types */
+ScrollDriverProvider.propTypes = {
+  children: PropTypes.node,
+  driver: DriverShape,
+  // Used to propagate animation driver changes to components that aren't
+  // children of ScrollDriver, recieves driver as argument.
+  // TODO: Rewrite for new context API.
+  onAnimationDriverChange: PropTypes.func,
+  onScroll: PropTypes.func,
+};
+
+ScrollDriverProvider.defaultProps = {
+  children: undefined,
+  driver: undefined,
+  onAnimationDriverChange: undefined,
+  onScroll: undefined,
+};

package/components/ScrollView/ScrollView.js

@@ -12,11 +12,6 @@ const isTabBarOnScreen = true;
 const IPHONE_X_HOME_INDICATOR_PADDING = isTabBarOnScreen ? 0 : 34;
 
 class ScrollView extends PureComponent {
-  static propTypes = {
-    ...Animated.ScrollView.propTypes,
-    primary: PropTypes.bool,
-  };
-
   static contextTypes = {
     animationDriver: DriverShape,
     driverProvider: PropTypes.object,
@@ -82,24 +77,31 @@ class ScrollView extends PureComponent {
   }
 
   render() {
-    const { props, animationDriver } = this;
-    const { style = {} } = props;
-    const contentContainerStyle = {
-      ...style.contentContainerStyle,
-    };
-    delete style.contentContainerStyle;
+    const { style, ...otherProps } = this.props;
+    const { scrollViewProps } = this.animationDriver;
+    const { contentContainerStyle, ...otherStyle } = style;
 
     return (
       <Animated.ScrollView
         ref={this.setWrappedInstance}
         contentContainerStyle={this.addIphoneXPadding(contentContainerStyle)}
-        {...animationDriver.scrollViewProps}
-        {..._.omit(props, 'onScroll')}
+        {...scrollViewProps}
+        {..._.omit(otherProps, 'onScroll')}
+        style={otherStyle}
       />
     );
   }
 }
 
+ScrollView.propTypes = {
+  ...Animated.ScrollView.propTypes,
+  primary: PropTypes.bool,
+};
+
+ScrollView.defaultProps = {
+  primary: false,
+};
+
 const StyledScrollView = connectStyle('shoutem.ui.ScrollView')(ScrollView);
 
 function getRNScrollViewComponent(context) {

package/components/SearchField.js

@@ -14,8 +14,8 @@ const ClearButton = ({ style, onPress }) => (
 );
 
 ClearButton.propTypes = {
-  style: PropTypes.object,
-  onPress: PropTypes.func,
+  style: PropTypes.object.isRequired,
+  onPress: PropTypes.func.isRequired,
 };
 
 /**
@@ -24,22 +24,6 @@ ClearButton.propTypes = {
  *
  */
 class SearchField extends PureComponent {
-  static propTypes = {
-    // A placeholder for input when no value is entered
-    placeholder: PropTypes.string,
-    // Called with the new value on text change
-    onChangeText: PropTypes.func,
-    // Styles for container and search icon
-    style: PropTypes.shape({
-      clearIcon: PropTypes.object,
-      container: PropTypes.object,
-      input: PropTypes.object,
-      searchIcon: PropTypes.object,
-    }),
-    // Value to render as text in search input
-    value: PropTypes.string,
-  };
-
   render() {
     const {
       onChangeText,
@@ -72,6 +56,28 @@ class SearchField extends PureComponent {
   }
 }
 
+SearchField.propTypes = {
+  // Styles for container and search icon
+  style: PropTypes.shape({
+    clearIcon: PropTypes.object,
+    container: PropTypes.object,
+    input: PropTypes.object,
+    searchIcon: PropTypes.object,
+  }).isRequired,
+  // A placeholder for input when no value is entered
+  placeholder: PropTypes.string,
+  // Value to render as text in search input
+  value: PropTypes.string,
+  // Called with the new value on text change
+  onChangeText: PropTypes.func,
+};
+
+SearchField.defaultProps = {
+  placeholder: undefined,
+  value: undefined,
+  onChangeText: undefined,
+};
+
 const AnimatedSearchField = connectAnimation(SearchField);
 const StyledSearchField = connectStyle('shoutem.ui.SearchField')(
   AnimatedSearchField,

package/components/ShareButton.js

@@ -15,17 +15,6 @@ import { Icon } from './Icon';
  * or animation.
  */
 class ShareButton extends PureComponent {
-  static propTypes = {
-    // Animation name for share icon
-    animationName: PropTypes.string,
-    // Message to share
-    message: PropTypes.string,
-    // Title
-    title: PropTypes.string,
-    // Url to share
-    url: PropTypes.string,
-  };
-
   constructor(props) {
     super(props);
 
@@ -59,6 +48,27 @@ class ShareButton extends PureComponent {
   }
 }
 
+ShareButton.propTypes = {
+  // Animation name for share icon
+  animationName: PropTypes.string,
+  // Additional props for Icon component
+  iconProps: PropTypes.object,
+  // Message to share
+  message: PropTypes.string,
+  // Title
+  title: PropTypes.string,
+  // Url to share
+  url: PropTypes.string,
+};
+
+ShareButton.defaultProps = {
+  animationName: undefined,
+  iconProps: undefined,
+  message: undefined,
+  title: undefined,
+  url: undefined,
+};
+
 const StyledShareButton = connectStyle(
   'shoutem.ui.ShareButton',
   undefined,

package/components/Spinner.js

@@ -20,7 +20,7 @@ class Spinner extends PureComponent {
 }
 
 Spinner.propTypes = {
-  style: PropTypes.object,
+  style: PropTypes.object.isRequired,
 };
 
 const StyledSpinner = connectStyle('shoutem.ui.Spinner', {

package/components/Switch.js

@@ -7,20 +7,6 @@ import { connectStyle } from '@shoutem/theme';
 import { View } from './View';
 
 class Switch extends PureComponent {
-  static propTypes = {
-    // True when switch is on, false otherwise
-    value: PropTypes.bool,
-    // Called when switch is toggled on and off
-    onValueChange: PropTypes.func,
-    // Styles for the container and underlying thumb
-    style: PropTypes.shape({
-      // Container style
-      container: PropTypes.object,
-      // Thumb style
-      thumb: PropTypes.object,
-    }),
-  };
-
   constructor(props) {
     super(props);
 
@@ -76,6 +62,25 @@ class Switch extends PureComponent {
   }
 }
 
+Switch.propTypes = {
+  // Styles for the container and underlying thumb
+  style: PropTypes.shape({
+    // Container style
+    container: PropTypes.object,
+    // Thumb style
+    thumb: PropTypes.object,
+  }).isRequired,
+  // True when switch is on, false otherwise
+  value: PropTypes.bool,
+  // Called when switch is toggled on and off
+  onValueChange: PropTypes.func,
+};
+
+Switch.defaultProps = {
+  value: false,
+  onValueChange: undefined,
+};
+
 const AnimatedSwitch = connectAnimation(Switch);
 const StyledSwitch = connectStyle('shoutem.ui.Switch')(AnimatedSwitch);
 

package/components/TabMenu/TabMenu.js

@@ -8,13 +8,6 @@ import { optionShape } from './const';
 import { TabMenuItem } from './TabMenuItem';
 
 class TabMenu extends PureComponent {
-  static propTypes = {
-    options: PropTypes.arrayOf(optionShape).isRequired,
-    onOptionSelected: PropTypes.func,
-    selectedOption: optionShape,
-    style: PropTypes.object,
-  };
-
   constructor(props) {
     super(props);
 
@@ -59,6 +52,18 @@ class TabMenu extends PureComponent {
   }
 }
 
+TabMenu.propTypes = {
+  options: PropTypes.arrayOf(optionShape).isRequired,
+  style: PropTypes.object.isRequired,
+  selectedOption: optionShape,
+  onOptionSelected: PropTypes.func,
+};
+
+TabMenu.defaultProps = {
+  selectedOption: undefined,
+  onOptionSelected: undefined,
+};
+
 const StyledTabMenu = connectStyle('shoutem.ui.TabMenu')(TabMenu);
 
 export { StyledTabMenu as TabMenu };

package/components/TabMenu/TabMenuItem.js

@@ -10,13 +10,6 @@ import { View } from '../View';
 import { optionShape } from './const';
 
 class TabMenuItem extends PureComponent {
-  static propTypes = {
-    item: optionShape,
-    onItemPressed: PropTypes.any,
-    isSelected: PropTypes.bool,
-    style: PropTypes.object,
-  };
-
   constructor(props) {
     super(props);
 
@@ -63,6 +56,19 @@ class TabMenuItem extends PureComponent {
   }
 }
 
+TabMenuItem.propTypes = {
+  style: PropTypes.object.isRequired,
+  isSelected: PropTypes.bool,
+  item: optionShape,
+  onItemPressed: PropTypes.func,
+};
+
+TabMenuItem.defaultProps = {
+  isSelected: false,
+  item: undefined,
+  onItemPressed: undefined,
+};
+
 const StyledTabMenuItem = connectStyle('shoutem.ui.TabMenuItem')(TabMenuItem);
 
 export { StyledTabMenuItem as TabMenuItem };

package/components/TextInput.js

@@ -90,12 +90,14 @@ class TextInput extends PureComponent {
 
 TextInput.propTypes = {
   ...RNTextInput.propTypes,
+  style: PropTypes.object.isRequired,
   animate: PropTypes.bool,
-  style: PropTypes.object,
+  errorMessage: PropTypes.string,
 };
 
 TextInput.defaultProps = {
   animate: true,
+  errorMessage: undefined,
 };
 
 const AnimatedTextInput = connectAnimation(TextInput);

package/components/Touchable.js

@@ -7,33 +7,23 @@ import { TouchableOpacity } from './TouchableOpacity';
 import { View } from './View';
 
 /**
- * A universal touchable component with a
- * platform specific feedback. This
- * component displays a TouchableOpacity on
- * iOS, and a TouchableNativeFeedback on
- * Android.
+ * A universal touchable component with a platform specific feedback. This
+ * component displays a TouchableOpacity on iOS, and a TouchableNativeFeedback
+ * on Android.
  */
 class Touchable extends PureComponent {
-  static propTypes = {
-    ...TouchableOpacity.propTypes,
-    ...TouchableNativeFeedback.propTypes,
-    style: PropTypes.object,
-  };
-
   render() {
-    const { props } = this;
-    const style = { ...props.style };
-    delete style.touchableOpacity;
-    delete style.touchableNativeFeedback;
+    const { children, style, styleName, ...otherProps } = this.props;
+    const { touchableNativeFeedback, touchableOpacity, ...otherStyle } = style;
 
     if (Platform.OS === 'android') {
       return (
         <TouchableNativeFeedback
-          {...props}
-          style={props.style.touchableNativeFeedback}
+          {...otherProps}
+          style={touchableNativeFeedback}
         >
-          <View virtual style={style} styleName={props.styleName}>
-            {props.children}
+          <View virtual style={otherStyle} styleName={styleName}>
+            {children}
           </View>
         </TouchableNativeFeedback>
       );
@@ -41,18 +31,24 @@ class Touchable extends PureComponent {
 
     return (
       <TouchableOpacity
-        {...props}
+        {...otherProps}
         style={{
-          ...style,
-          ...props.style.touchableOpacity,
+          ...otherStyle,
+          ...touchableOpacity,
         }}
       >
-        {props.children}
+        {children}
       </TouchableOpacity>
     );
   }
 }
 
+Touchable.propTypes = {
+  ...TouchableOpacity.propTypes,
+  ...TouchableNativeFeedback.propTypes,
+  style: PropTypes.object.isRequired,
+};
+
 const StyledTouchable = connectStyle('shoutem.ui.Touchable', {
   touchableNativeFeedback: {},
   touchableOpacity: {},

package/components/TouchableNativeFeedback.js

@@ -4,37 +4,31 @@ import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
 
 class TouchableNativeFeedback extends PureComponent {
-  static propTypes = {
-    ...RNTouchableNativeFeedback.propTypes,
-    style: PropTypes.shape({
-      background: PropTypes.object,
-      useForeground: PropTypes.bool,
-    }),
-  };
-
   render() {
-    const { props } = this;
-    // Remove the props that are not valid
-    // style keys.
-    const style = {
-      ...props.style,
-    };
-    delete style.background;
-    delete style.useForeground;
+    const { children, style, ...otherProps } = this.props;
+    const { background, useForeground, ...otherStyle } = style;
 
     return (
       <RNTouchableNativeFeedback
-        {...props}
-        style={style}
-        background={props.style.background}
-        useForeground={props.style.useForeground}
+        {...otherProps}
+        style={otherStyle}
+        background={background}
+        useForeground={useForeground}
       >
-        {props.children}
+        {children}
       </RNTouchableNativeFeedback>
     );
   }
 }
 
+TouchableNativeFeedback.propTypes = {
+  ...RNTouchableNativeFeedback.propTypes,
+  style: PropTypes.shape({
+    background: PropTypes.object,
+    useForeground: PropTypes.bool,
+  }).isRequired,
+};
+
 const StyledTouchableNativeFeedback = connectStyle(
   'shoutem.ui.TouchableNativeFeedback',
 )(TouchableNativeFeedback);

package/components/TouchableOpacity.js

@@ -4,22 +4,16 @@ import { connectStyle } from '@shoutem/theme';
 
 class TouchableOpacity extends PureComponent {
   render() {
-    const { props } = this;
-
-    // The activeOpacity is not a valid RN style
-    // property, so we have to unset it here.
-    const style = {
-      ...props.style,
-    };
-    delete style.activeOpacity;
+    const { children, style, ...otherProps } = this.props;
+    const { activeOpacity, ...otherStyle } = style;
 
     return (
       <RNTouchableOpacity
-        {...props}
-        style={style}
-        activeOpacity={props.style.activeOpacity}
+        {...otherProps}
+        style={otherStyle}
+        activeOpacity={activeOpacity}
       >
-        {props.children}
+        {children}
       </RNTouchableOpacity>
     );
   }