@shoutem/ui 4.6.3 → 4.6.6-rc.1

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/ListView.js

@@ -197,9 +197,9 @@ class ListView extends PureComponent {
     // reference
     mappedProps.ref = this.handleListViewRef;
 
-    mappedProps.onMomentumScrollBegin = this.setIsScrolling(true);
-    
-    mappedProps.onMomentumScrollEnd = this.setIsScrolling(false);
+    mappedProps.onMomentumScrollBegin = this.setStartedScrolling;
+
+    mappedProps.onMomentumScrollEnd = this.setEndedScrolling;
 
     return mappedProps;
   }
@@ -221,8 +221,12 @@ class ListView extends PureComponent {
     }
   }
 
-  setIsScrolling(isScrolling) {
-    this.setState({ isScrolling });
+  setStartedScrolling() {
+    this.setState({ isScrolling: true });
+  }
+
+  setEndedScrolling() {
+    this.setState({ isScrolling: true });
   }
 
   autoHideHeader({

package/html/components/SimpleHtml.js

@@ -25,6 +25,34 @@ import getEmptyObjectKeys from '../services/getEmptyObjectKeys';
 import isValidVideoFormat from '../services/isValidVideoFormat';
 import Image from './Image';
 
+function resolveMaxWidth(style) {
+  // parentContainerPadding - padding between screen & SimpleHtml. Parent container
+  // can have it's own padding. If it does, we have to include it in calculation,
+  // otherwise maxWidth will be more than max & images will go over the edge
+  const parentContainerPadding = style.outerPadding || 0;
+  const paddingValue =
+    style.container.paddingLeft ||
+    0 + style.container.paddingRight ||
+    0 + parentContainerPadding;
+
+  return Dimensions.get('window').width - paddingValue;
+}
+
+function resolveDimensions(objectToResize, style) {
+  const { width, height } = objectToResize;
+
+  if (!width || !height) {
+    return { width, height };
+  }
+
+  const maxWidth = resolveMaxWidth(style);
+  const objectToResizeRatio = height / width;
+  const resolvedWidth = width > maxWidth ? maxWidth : width;
+  const resolvedHeight = Math.round(resolvedWidth * objectToResizeRatio);
+
+  return { width: resolvedWidth, height: resolvedHeight };
+}
+
 class SimpleHtml extends PureComponent {
   static propTypes = {
     body: PropTypes.string,
@@ -94,23 +122,15 @@ class SimpleHtml extends PureComponent {
       }
     }
 
-    const nodeWidth = _.get(node, 'attribs.width', false);
+    const nodeWidth = node.attribs?.width;
 
     if (!styleAttrib && !nodeWidth) {
       return false;
     }
 
-    // parentContainerPadding - padding between screen & SimpleHtml. Parent container
-    // can have it's own padding. If it does, we have to include it in calculation,
-    // otherwise maxWidth will be more than max & images will go over the edge
-    const parentContainerPadding = style.outerPadding || 0;
-    const paddingValue =
-      _.get(style, 'container.paddingLeft') * 2 + parentContainerPadding;
-    const maxWidth = Dimensions.get('window').width - paddingValue;
-    const nodeHeight = _.get(node, 'attribus.height');
-    const nodeRatio = nodeWidth / nodeHeight;
-    const resolvedWidth = nodeWidth > maxWidth ? maxWidth : nodeWidth;
-    const resolvedHeight = Math.round(resolvedWidth * nodeRatio);
+    const nodeHeight = node.attribus?.height;
+    const nodeDimensions = { width: nodeWidth, height: nodeHeight };
+    const { width, height } = resolveDimensions(nodeDimensions, style);
 
     const nodeStyle = cssStringToObject(styleAttrib);
     const invalidKeys = getEmptyObjectKeys(nodeStyle);
@@ -118,8 +138,8 @@ class SimpleHtml extends PureComponent {
     if (invalidKeys.length || nodeWidth) {
       const styleFiltered = _.omit(style, invalidKeys);
       node.attribs.style = cssObjectToString(styleFiltered);
-      node.attribs.width = resolvedWidth;
-      node.attribs.height = resolvedHeight;
+      node.attribs.width = width;
+      node.attribs.height = height;
 
       return node;
     }
@@ -175,7 +195,7 @@ class SimpleHtml extends PureComponent {
    * Currently only supports rendering image attachments.
    */
   renderAttachments({ id, type }) {
-    const { attachments } = this.props;
+    const { attachments, style } = this.props;
 
     if (!attachments) {
       return null;
@@ -186,9 +206,11 @@ class SimpleHtml extends PureComponent {
 
       if (image && image.src) {
         const source = { uri: image.src };
-        const style = { height: image.height, alignSelf: 'center' };
+        const imageSize = { width: image.width, height: image.height };
+        const { height, width } = resolveDimensions(imageSize, style);
+        const resolvedStyle = { alignSelf: 'center', height, width };
 
-        return <Image source={source} key={id} style={style} />;
+        return <Image source={source} key={id} style={resolvedStyle} />;
       }
     }
 
@@ -238,13 +260,7 @@ class SimpleHtml extends PureComponent {
   render() {
     const { style, body, customTagStyles, ...otherProps } = this.props;
 
-    // parentContainerPadding - padding between screen & SimpleHtml. Parent container
-    // can have it's own padding. If it does, we have to include it in calculation,
-    // otherwise maxWidth will be more than max & images will go over the edge
-    const parentContainerPadding = style.outerPadding || 0;
-    const paddingValue =
-      _.get(style, 'container.paddingLeft') * 2 + parentContainerPadding;
-    const maxWidth = Dimensions.get('window').width - paddingValue;
+    const maxWidth = resolveMaxWidth(style);
 
     const tagStyles = {
       ...style.tags,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "4.6.3",
+  "version": "4.6.6-rc.1",
   "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),
     },