@shoutem/ui 4.6.5 → 4.6.7

package/components/DateTimePicker.js

@@ -13,26 +13,42 @@ import { View } from './View';
 
 const isIos = Platform.OS === 'ios';
 
+export const DATEPICKER_MODES = {
+  DATE: 'date',
+  DATETIME: 'datetime',
+  TIME: 'time',
+};
+
+const DISPLAY_MODES = {
+  [DATEPICKER_MODES.DATE]: 'inline',
+  [DATEPICKER_MODES.DATETIME]: 'inline',
+  [DATEPICKER_MODES.TIME]: 'spinner',
+};
+
+function getDisplayMode(mode) {
+  if (!isIos || !Object.keys(DISPLAY_MODES).includes(mode)) {
+    return 'default';
+  }
+
+  return DISPLAY_MODES[mode];
+}
+
 class DateTimePicker extends PureComponent {
   constructor(props) {
     super(props);
 
     autoBindReact(this);
 
+    const { mode, value } = props;
+
     this.state = {
+      display: getDisplayMode(mode),
       showPicker: false,
-      value: props.value,
+      showTimePicker: false,
+      value,
     };
   }
 
-  componentDidUpdate() {
-    if (!isIos) {
-      const { value } = this.props;
-
-      this.setState({ value });
-    }
-  }
-
   handleValueChanged(event, value) {
     if (isIos) {
       return this.setState({ value });
@@ -42,10 +58,33 @@ class DateTimePicker extends PureComponent {
       return this.handleHidePicker();
     }
 
+    const { mode, onValueChanged } = this.props;
+
+    const showTimePicker = mode === DATEPICKER_MODES.DATETIME;
+
+    this.setState({ value, showPicker: false, showTimePicker });
+    return !showTimePicker && onValueChanged(value);
+  }
+
+  handleTimeValueChanged(event, selectedValue) {
+    if (event.type === 'dismissed') {
+      return this.handleHidePicker();
+    }
+
     const { onValueChanged } = this.props;
+    const { value } = this.state;
 
-    this.setState({ showPicker: false });
-    return onValueChanged(value);
+    // Time picker value will override preselected date
+    // Use current date from state and only set hours & minutes
+    const currentDate = new Date(value);
+    const selectedDate = new Date(selectedValue);
+    const hour = selectedDate.getHours();
+    const minutes = selectedDate.getMinutes();
+
+    currentDate.setHours(hour, minutes, 0);
+
+    this.setState({ value: currentDate, showTimePicker: false });
+    return onValueChanged(currentDate);
   }
 
   handleShowPicker() {
@@ -66,6 +105,7 @@ class DateTimePicker extends PureComponent {
 
   render() {
     const {
+      cancelButtonText,
       confirmButtonText,
       is24Hour,
       mode,
@@ -73,7 +113,7 @@ class DateTimePicker extends PureComponent {
       style,
       ...otherProps
     } = this.props;
-    const { showPicker, value } = this.state;
+    const { display, showPicker, showTimePicker, value } = this.state;
 
     return (
       <View styleName="horizontal">
@@ -82,7 +122,7 @@ class DateTimePicker extends PureComponent {
           style={style.textContainer}
           onPress={this.handleShowPicker}
         >
-          <Text> {textValue}</Text>
+          <Text>{textValue}</Text>
         </TouchableOpacity>
         <TouchableOpacity
           onPress={this.handleShowPicker}
@@ -91,7 +131,7 @@ class DateTimePicker extends PureComponent {
         >
           <Icon name="drop-down" style={style.icon} />
         </TouchableOpacity>
-        {isIos && (
+        {isIos && showPicker && (
           <Modal
             backdropOpacity={0.5}
             isVisible={showPicker}
@@ -103,7 +143,7 @@ class DateTimePicker extends PureComponent {
           >
             <View styleName="md-gutter" style={style.modalContainer}>
               <RNCDateTimePicker
-                display="spinner"
+                display={display}
                 is24Hour={is24Hour}
                 mode={mode}
                 onChange={this.handleValueChanged}
@@ -114,8 +154,14 @@ class DateTimePicker extends PureComponent {
               />
               <View
                 style={style.modalButtonContainer}
-                styleName="md-gutter-top"
+                styleName="horizontal md-gutter-top"
               >
+                <Button
+                  style={style.modalButton}
+                  onPress={this.handleHidePicker}
+                >
+                  <Text>{cancelButtonText}</Text>
+                </Button>
                 <Button
                   style={style.modalButton}
                   onPress={this.handleConfirmPress}
@@ -128,7 +174,7 @@ class DateTimePicker extends PureComponent {
         )}
         {!isIos && showPicker && (
           <RNCDateTimePicker
-            display="default"
+            display={display}
             is24Hour={is24Hour}
             mode={mode}
             onChange={this.handleValueChanged}
@@ -136,21 +182,33 @@ class DateTimePicker extends PureComponent {
             {...otherProps}
           />
         )}
+        {!isIos && !showPicker && showTimePicker && (
+          <RNCDateTimePicker
+            display={display}
+            is24Hour={is24Hour}
+            mode="time"
+            onChange={this.handleTimeValueChanged}
+            value={value}
+            {...otherProps}
+          />
+        )}
       </View>
     );
   }
 }
 
 DateTimePicker.propTypes = {
+  cancelButtonText: PropTypes.string,
   confirmButtonText: PropTypes.string,
   is24Hour: PropTypes.bool,
-  mode: PropTypes.string,
+  mode: PropTypes.oneOf(Object.values(DATEPICKER_MODES)),
   onValueChanged: PropTypes.func,
   textValue: PropTypes.string,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
 };
 
 DateTimePicker.defaultProps = {
+  cancelButtonText: 'Cancel',
   confirmButtonText: 'Confirm',
   is24Hour: false,
   mode: 'datetime',

package/components/YearRangePicker/YearRangePicker.js

@@ -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,7 +1,6 @@
 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 { connectStyle } from '@shoutem/theme';
 import { TouchableOpacity } from '../TouchableOpacity';
@@ -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

@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "4.6.5",
+  "version": "4.6.7",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",

package/theme.js

@@ -900,6 +900,8 @@ export default (variables = defaultThemeVariables) => ({
   },
 
   'shoutem.ui.Screen': {
+    [INCLUDE]: ['commonVariants', 'guttersPadding'],
+
     '.full-screen': {
       marginTop: -(NAVIGATION_BAR_HEIGHT + StyleSheet.hairlineWidth),
     },