@shoutem/ui 4.6.6-rc.1 → 4.8.0

package/components/ScrollView/ScrollView.js

@@ -1,12 +1,12 @@
 import React, { PureComponent } from 'react';
+import { Animated } from 'react-native';
 import autoBindReact from 'auto-bind/react';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
-import { Animated } from 'react-native';
-import { ScrollDriver, DriverShape } from '@shoutem/animation';
+import { DriverShape, ScrollDriver } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
-import { ScrollDriverProvider } from './ScrollDriverProvider.js';
 import { Device } from '../../helpers';
+import { ScrollDriverProvider } from './ScrollDriverProvider.js';
 
 const isTabBarOnScreen = true;
 const IPHONE_X_HOME_INDICATOR_PADDING = isTabBarOnScreen ? 0 : 34;
@@ -14,6 +14,7 @@ const IPHONE_X_HOME_INDICATOR_PADDING = isTabBarOnScreen ? 0 : 34;
 class ScrollView extends PureComponent {
   static propTypes = {
     ...Animated.ScrollView.propTypes,
+    primary: PropTypes.bool,
   };
 
   static contextTypes = {
@@ -33,7 +34,11 @@ class ScrollView extends PureComponent {
     autoBindReact(this);
 
     this.animationDriver =
-      props.driver || new ScrollDriver({ useNativeDriver: true });
+      props.driver ||
+      new ScrollDriver(
+        { useNativeDriver: true, nativeScrollEventThrottle: 20 },
+        props.onScroll,
+      );
   }
 
   getChildContext() {
@@ -53,12 +58,9 @@ class ScrollView extends PureComponent {
 
   componentDidUpdate() {
     const { driver } = this.props;
-    const { animationDriver } = this.context;
 
     if (driver && this.animationDriver !== driver) {
       this.animationDriver = driver;
-    } else if (animationDriver && this.animationDriver !== animationDriver) {
-      this.animationDriver = animationDriver;
     }
   }
 
@@ -92,7 +94,7 @@ class ScrollView extends PureComponent {
         ref={this.setWrappedInstance}
         contentContainerStyle={this.addIphoneXPadding(contentContainerStyle)}
         {...animationDriver.scrollViewProps}
-        {...props}
+        {..._.omit(props, 'onScroll')}
       />
     );
   }

package/components/ShareButton.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
+import { Platform, Share } from 'react-native';
 import autoBindReact from 'auto-bind/react';
 import PropTypes from 'prop-types';
-import { Share, Platform } from 'react-native';
 import { connectStyle } from '@shoutem/theme';
 import { Button } from './Button';
 import { Icon } from './Icon';

package/components/Spinner.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { ActivityIndicator } from 'react-native';
+import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
 
 class Spinner extends PureComponent {

package/components/Switch.js

@@ -1,7 +1,7 @@
-import PropTypes from 'prop-types';
-import autoBindReact from 'auto-bind/react';
 import React, { PureComponent } from 'react';
 import { TouchableWithoutFeedback } from 'react-native';
+import autoBindReact from 'auto-bind/react';
+import PropTypes from 'prop-types';
 import { connectAnimation, TimingDriver } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
 import { View } from './View';

package/components/TabMenu/TabMenu.js

@@ -1,8 +1,8 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
+import { LayoutAnimation, ScrollView } from 'react-native';
 import autoBindReact from 'auto-bind/react';
 import _ from 'lodash';
-import { ScrollView, LayoutAnimation } from 'react-native';
+import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
 import { optionShape } from './const';
 import { TabMenuItem } from './TabMenuItem';

package/components/TabMenu/TabMenuItem.js

@@ -1,12 +1,12 @@
 import React, { PureComponent } from 'react';
 import { LayoutAnimation } from 'react-native';
-import PropTypes from 'prop-types';
 import autoBindReact from 'auto-bind/react';
 import _ from 'lodash';
+import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
 import { Text } from '../Text';
-import { View } from '../View';
 import { TouchableOpacity } from '../TouchableOpacity';
+import { View } from '../View';
 import { optionShape } from './const';
 
 class TabMenuItem extends PureComponent {
@@ -33,8 +33,11 @@ class TabMenuItem extends PureComponent {
     onItemPressed(item);
   }
 
-  handleLayout({ nativeEvent: { layout: { width } } }) {
-
+  handleLayout({
+    nativeEvent: {
+      layout: { width },
+    },
+  }) {
     LayoutAnimation.easeInEaseOut();
     this.setState({ baseWidth: width });
   }

package/components/Text.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { Text as RNText } from 'react-native';
-import { connectStyle } from '@shoutem/theme';
 import { connectAnimation } from '@shoutem/animation';
+import { connectStyle } from '@shoutem/theme';
 
 class Text extends PureComponent {
   render() {
@@ -20,4 +20,4 @@ const Title = connectStyle('shoutem.ui.Title')(AnimatedText);
 const Subtitle = connectStyle('shoutem.ui.Subtitle')(AnimatedText);
 const Caption = connectStyle('shoutem.ui.Caption')(AnimatedText);
 
-export { StyledText as Text, Heading, Title, Subtitle, Caption };
+export { Caption, Heading, Subtitle, StyledText as Text, Title };

package/components/TextInput.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
+import { TextInput as RNTextInput } from 'react-native';
 import autoBindReact from 'auto-bind/react';
 import PropTypes from 'prop-types';
-import { TextInput as RNTextInput } from 'react-native';
 import { connectAnimation, Wiggle } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
 import { Caption } from './Text';
@@ -63,7 +63,7 @@ class TextInput extends PureComponent {
             style={{
               ...otherStyle,
               ...(hasBorder ? withBorder : withoutBorder),
-              ...(!!errorMessage ? errorBorderColor : {}),
+              ...(errorMessage ? errorBorderColor : {}),
             }}
           />
         </Wiggle>

package/components/Tile.js

@@ -1,6 +1,6 @@
 import { View } from 'react-native';
-import { connectStyle } from '@shoutem/theme';
 import { connectAnimation } from '@shoutem/animation';
+import { connectStyle } from '@shoutem/theme';
 
 const AnimatedTile = connectAnimation(View);
 const Tile = connectStyle('shoutem.ui.Tile')(AnimatedTile);

package/components/Touchable.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { Platform } from 'react-native';
+import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
 import { TouchableNativeFeedback } from './TouchableNativeFeedback';
 import { TouchableOpacity } from './TouchableOpacity';
@@ -21,7 +21,7 @@ class Touchable extends PureComponent {
   };
 
   render() {
-    const props = this.props;
+    const { props } = this;
     const style = { ...props.style };
     delete style.touchableOpacity;
     delete style.touchableNativeFeedback;

package/components/TouchableNativeFeedback.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { TouchableNativeFeedback as RNTouchableNativeFeedback } from 'react-native';
+import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
 
 class TouchableNativeFeedback extends PureComponent {
@@ -13,7 +13,7 @@ class TouchableNativeFeedback extends PureComponent {
   };
 
   render() {
-    const props = this.props;
+    const { props } = this;
     // Remove the props that are not valid
     // style keys.
     const style = {

package/components/TouchableOpacity.js

@@ -4,7 +4,7 @@ import { connectStyle } from '@shoutem/theme';
 
 class TouchableOpacity extends PureComponent {
   render() {
-    const props = this.props;
+    const { props } = this;
 
     // The activeOpacity is not a valid RN style
     // property, so we have to unset it here.

package/components/Video/Video.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { View } from 'react-native';
 import { WebView } from 'react-native-webview';
+import PropTypes from 'prop-types';
 import { connectAnimation } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
 import VideoSourceReader from './VideoSourceReader';

package/components/Video/VideoSourceReader.js

@@ -58,7 +58,8 @@ export default class VideoSourceReader {
         getYouTubeVideoId(this.source),
         this.playerParams,
       );
-    } else if (this.isVimeo) {
+    }
+    if (this.isVimeo) {
       return getVimeoEmbedUrl(getVimeoVideoId(this.source));
     }
 

package/components/View.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { View as RNView, ViewPropTypes } from 'react-native';
+import PropTypes from 'prop-types';
 import { connectAnimation } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
 import { LinearGradient } from './LinearGradient';

package/components/YearRangePicker/YearRangePicker.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import _ from 'lodash';
 import autoBindReact from 'auto-bind/react';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
 import { View } from '../View';
 import YearPickerButton from './YearRangePickerButton';
@@ -79,14 +79,20 @@ class YearRangePicker extends PureComponent {
   }
 
   render() {
-    const { rangeEnd, rangeStart, resetButtonTitle, confirmButtonTitle } = this.props;
+    const {
+      rangeEnd,
+      rangeStart,
+      resetButtonTitle,
+      confirmButtonTitle,
+    } = this.props;
     const { buttonTooltip, collapsed } = this.state;
 
     return (
-      <View onLayout={this.handleLayout}>
+      <View>
         <YearPickerButton
           tooltip={buttonTooltip}
           onPress={this.handleButtonPressed}
+          collapsed={collapsed}
         />
         <YearPickerModal
           visible={collapsed}

package/components/YearRangePicker/YearRangePickerButton.js

@@ -1,12 +1,11 @@
 import React, { PureComponent } from 'react';
 import { Animated } from 'react-native';
-import PropTypes from 'prop-types';
-import _ from 'lodash';
 import autoBindReact from 'auto-bind/react';
+import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
-import { TouchableOpacity } from '../TouchableOpacity';
 import { Icon } from '../Icon';
 import { Text } from '../Text';
+import { TouchableOpacity } from '../TouchableOpacity';
 
 const AnimatedIcon = Animated.createAnimatedComponent(Icon);
 
@@ -14,6 +13,7 @@ class YearRangePickerButton extends PureComponent {
   static propTypes = {
     onPress: PropTypes.func,
     tooltip: PropTypes.string,
+    collapsed: PropTypes.bool,
     style: PropTypes.any,
   };
 
@@ -23,55 +23,41 @@ class YearRangePickerButton extends PureComponent {
     autoBindReact(this);
 
     this.dropDownIconValue = new Animated.Value(0);
-
-    this.state = {
-      collapsed: false,
-    };
   }
 
-  handlePress() {
-    const { collapsed } = this.state;
-    const { onPress } = this.props;
-
-    const toValue = collapsed ? 0 : 1;
+  componentDidUpdate(prevProps) {
+    const { collapsed } = this.props;
+    const { collapsed: prevCollapsed } = prevProps;
 
-    this.setState(
-      { collapsed: !collapsed },
-      () => Animated.timing(
-        this.dropDownIconValue,
-        {
-          toValue,
-          useNativeDriver: true,
-          duration: 300,
-        }
-      ).start());
+    if (collapsed !== prevCollapsed) {
+      const toValue = collapsed ? 1 : 0;
 
-    if (onPress) {
-      onPress();
+      Animated.timing(this.dropDownIconValue, {
+        toValue,
+        useNativeDriver: true,
+        duration: 300,
+      }).start();
     }
   }
 
   render() {
-    const { style, tooltip } = this.props;
+    const { style, tooltip, onPress } = this.props;
 
     return (
-      <TouchableOpacity
-        onPress={this.handlePress}
-        style={style.container}
-      >
-        <Text>
-          {tooltip}
-        </Text>
+      <TouchableOpacity onPress={onPress} style={style.container}>
+        <Text>{tooltip}</Text>
         <AnimatedIcon
           name="drop-down"
           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'],
+                }),
+              },
+            ],
           }}
         />
       </TouchableOpacity>
@@ -79,4 +65,6 @@ class YearRangePickerButton extends PureComponent {
   }
 }
 
-export default connectStyle('shoutem.ui.YearRangePickerButton')(YearRangePickerButton);
+export default connectStyle('shoutem.ui.YearRangePickerButton')(
+  YearRangePickerButton,
+);

package/components/YearRangePicker/YearRangePickerModal.js

@@ -1,15 +1,15 @@
 import React, { PureComponent } from 'react';
 import { LayoutAnimation, Platform } from 'react-native';
-import PropTypes from 'prop-types';
-import _ from 'lodash';
 import Modal from 'react-native-modal';
 import autoBindReact from 'auto-bind/react';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
-import { View } from '../View';
-import { Text } from '../Text';
-import { Icon } from '../Icon';
 import { Button } from '../Button';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
 import { TouchableOpacity } from '../TouchableOpacity';
+import { View } from '../View';
 
 const NUMBER_OF_ROWS = 4;
 const YEARS_IN_ROW = 5;
@@ -20,10 +20,7 @@ function resolveVisibleYears(props) {
   const yearsPerPage = NUMBER_OF_ROWS * YEARS_IN_ROW;
 
   if (_.isEmpty(selectedYears)) {
-    const fullRange = _.times(
-      yearsPerPage,
-      index => rangeStart + index,
-    );
+    const fullRange = _.times(yearsPerPage, index => rangeStart + index);
 
     return _.filter(fullRange, year => year <= rangeEnd);
   }
@@ -31,11 +28,8 @@ function resolveVisibleYears(props) {
   const firstSelectedYear = _.head(selectedYears);
   const prevPagesNumber = Math.trunc(firstSelectedYear / yearsPerPage);
 
-  const fullRangeStart = (prevPagesNumber * yearsPerPage) + 1;
-  const fullRange = _.times(
-    yearsPerPage,
-    index => fullRangeStart + index,
-  );
+  const fullRangeStart = prevPagesNumber * yearsPerPage + 1;
+  const fullRange = _.times(yearsPerPage, index => fullRangeStart + index);
 
   return _.filter(fullRange, year => year <= rangeEnd);
 }
@@ -83,7 +77,6 @@ class YearRangePickerModal extends PureComponent {
     const { onRangeConfirmed } = this.props;
 
     if (onRangeConfirmed) {
-      LayoutAnimation.easeInEaseOut();
       onRangeConfirmed(selectedYears);
     }
   }
@@ -91,7 +84,6 @@ class YearRangePickerModal extends PureComponent {
   handleResetPress() {
     const { onRangeConfirmed } = this.props;
 
-    LayoutAnimation.easeInEaseOut();
     this.setState({ selectedYears: [] });
 
     if (onRangeConfirmed) {
@@ -104,9 +96,15 @@ class YearRangePickerModal extends PureComponent {
     const { visibleYears } = this.state;
 
     const nextYearStart = _.last(visibleYears) + 1;
-    const nextYearEnd = Math.min(rangeEnd, nextYearStart + this.YEARS_PER_PAGE - 1);
+    const nextYearEnd = Math.min(
+      rangeEnd,
+      nextYearStart + this.YEARS_PER_PAGE - 1,
+    );
 
-    const nextVisibleYears = _.times(nextYearEnd + 1 - nextYearStart, index => nextYearStart + index);
+    const nextVisibleYears = _.times(
+      nextYearEnd + 1 - nextYearStart,
+      index => nextYearStart + index,
+    );
 
     LayoutAnimation.easeInEaseOut();
     this.setState({ visibleYears: nextVisibleYears });
@@ -118,7 +116,12 @@ class YearRangePickerModal extends PureComponent {
     const prevYearStart = _.head(visibleYears) - this.YEARS_PER_PAGE;
 
     LayoutAnimation.easeInEaseOut();
-    this.setState({ visibleYears: _.times(this.YEARS_PER_PAGE, index => prevYearStart + index) });
+    this.setState({
+      visibleYears: _.times(
+        this.YEARS_PER_PAGE,
+        index => prevYearStart + index,
+      ),
+    });
   }
 
   handleYearPress(year) {
@@ -137,7 +140,9 @@ class YearRangePickerModal extends PureComponent {
         }
 
         const cutFromEnd = size / 2 <= index;
-        const newYears = _.filter(selectedYears, value => cutFromEnd ? value <= year : value >= year);
+        const newYears = _.filter(selectedYears, value =>
+          cutFromEnd ? value <= year : value >= year,
+        );
 
         this.setState({ selectedYears: newYears });
         return;
@@ -149,15 +154,23 @@ class YearRangePickerModal extends PureComponent {
       }
 
       const addToEnd = _.last(selectedYears) < year;
-      const yearsToAdd = addToEnd ? year - _.last(selectedYears) : _.head(selectedYears) - year;
+      const yearsToAdd = addToEnd
+        ? year - _.last(selectedYears)
+        : _.head(selectedYears) - year;
 
       const newYears = addToEnd
-        ? [...selectedYears, ..._.times(yearsToAdd, index => _.last(selectedYears) + index + 1)]
-        : [...selectedYears, ..._.times(yearsToAdd, index => _.head(selectedYears) - index + -1)]
+        ? [
+            ...selectedYears,
+            ..._.times(yearsToAdd, index => _.last(selectedYears) + index + 1),
+          ]
+        : [
+            ...selectedYears,
+            ..._.times(yearsToAdd, index => _.head(selectedYears) - index + -1),
+          ];
       const sortedYears = _.sortBy(newYears, item => item);
 
       this.setState({ selectedYears: sortedYears });
-    }
+    };
   }
 
   renderYear(year) {
@@ -174,12 +187,14 @@ class YearRangePickerModal extends PureComponent {
         style={style.yearContainer}
         key={year.toString()}
       >
-        <View style={[
-          style.year,
-          isSelected && style.yearSelected,
-          isFirst && style.yearFirst,
-          isLast && style.yearLast,
-        ]}>
+        <View
+          style={[
+            style.year,
+            isSelected && style.yearSelected,
+            isFirst && style.yearFirst,
+            isLast && style.yearLast,
+          ]}
+        >
           <Text>{year.toString()}</Text>
         </View>
       </TouchableOpacity>
@@ -191,7 +206,7 @@ class YearRangePickerModal extends PureComponent {
       <View styleName="horizontal flexible" key={index.toString()}>
         {_.map(row, this.renderYear)}
       </View>
-    )
+    );
   }
 
   render() {
@@ -221,6 +236,7 @@ class YearRangePickerModal extends PureComponent {
         onBackdropPress={onDismiss}
         useNativeDriver
         backdropOpacity={Platform.OS === 'ios' ? 0.7 : 0}
+        animationIn="slideInUp"
       >
         <View style={style.container}>
           <View style={style.tooltipContainer}>
@@ -229,7 +245,10 @@ class YearRangePickerModal extends PureComponent {
               onPress={this.handleYearsBackPress}
               disabled={prevDisabled}
             >
-              <Icon name="left-arrow" style={[style.icon, prevDisabled && style.iconDisabled]} />
+              <Icon
+                name="left-arrow"
+                style={[style.icon, prevDisabled && style.iconDisabled]}
+              />
             </Button>
             <Text>{buttonTooltip}</Text>
             <Button
@@ -237,22 +256,33 @@ class YearRangePickerModal extends PureComponent {
               onPress={this.handleYearsForwardPress}
               disabled={nextDisabled}
             >
-              <Icon name="right-arrow" style={[style.icon, nextDisabled && style.iconDisabled]} />
+              <Icon
+                name="right-arrow"
+                style={[style.icon, nextDisabled && style.iconDisabled]}
+              />
             </Button>
           </View>
-          {_.times(NUMBER_OF_ROWS, (row) => this.renderYearRow(data[row], row))}
+          {_.times(NUMBER_OF_ROWS, row => this.renderYearRow(data[row], row))}
           <View style={style.buttonContainer}>
-            <Button styleName="secondary flexible" onPress={this.handleResetPress}>
+            <Button
+              styleName="secondary flexible"
+              onPress={this.handleResetPress}
+            >
               <Text>{resetButtonTitle}</Text>
             </Button>
-            <Button styleName="primary flexible md-gutter-left" onPress={this.handleConfirmPress}>
+            <Button
+              styleName="primary flexible md-gutter-left"
+              onPress={this.handleConfirmPress}
+            >
               <Text>{confirmButtonTitle}</Text>
             </Button>
           </View>
-        </ View>
+        </View>
       </Modal>
     );
   }
 }
 
-export default connectStyle('shoutem.ui.YearRangePickerModal')(YearRangePickerModal);
+export default connectStyle('shoutem.ui.YearRangePickerModal')(
+  YearRangePickerModal,
+);

package/examples/components/Cards.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Card } from '../../components/Card';
 import { Button } from '../../components/Button';
+import { Card } from '../../components/Card';
 import { Icon } from '../../components/Icon';
 import { Image } from '../../components/Image';
 import { Caption, Subtitle } from '../../components/Text';

package/examples/components/DropDownMenus.js

@@ -44,8 +44,8 @@ export class DropDownMenus extends PureComponent {
             onOptionSelected={option =>
               this.setState({ selectedOption: option })
             }
-            titleProperty={'name'}
-            valueProperty={'id'}
+            titleProperty="name"
+            valueProperty="id"
           />
         </Stage>
         <Stage title="Dropdown (horizontal)">
@@ -56,8 +56,8 @@ export class DropDownMenus extends PureComponent {
             onOptionSelected={option =>
               this.setState({ selectedOption: option })
             }
-            titleProperty={'name'}
-            valueProperty={'id'}
+            titleProperty="name"
+            valueProperty="id"
           />
         </Stage>
         <Stage title="Dropdown (large)">
@@ -68,8 +68,8 @@ export class DropDownMenus extends PureComponent {
             onOptionSelected={option =>
               this.setState({ selectedOption: option })
             }
-            titleProperty={'name'}
-            valueProperty={'id'}
+            titleProperty="name"
+            valueProperty="id"
           />
         </Stage>
         <Stage title="Dropdown (inside a form group)">
@@ -82,8 +82,8 @@ export class DropDownMenus extends PureComponent {
               onOptionSelected={option =>
                 this.setState({ selectedOptionForFormGroupDropdown: option })
               }
-              titleProperty={'name'}
-              valueProperty={'id'}
+              titleProperty="name"
+              valueProperty="id"
             />
           </FormGroup>
         </Stage>

package/examples/components/Examples.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
-import { DropDownMenu } from '../../components/DropDownMenu';
 import { Divider } from '../../components/Divider';
+import { DropDownMenu } from '../../components/DropDownMenu';
 import { Screen } from '../../components/Screen';
 import { ScrollView } from '../../components/ScrollView';
 import { Buttons } from './Buttons';