Merge pull request #620 from shoutem/release/4.5.0

Release/4.5.0

components/DateTimePicker.js

@@ -0,0 +1,164 @@
+import React, { PureComponent } from 'react';
+import RNCDateTimePicker from '@react-native-community/datetimepicker';
+import autoBindReact from 'auto-bind/react';
+import PropTypes from 'prop-types';
+import { Platform } from 'react-native';
+import Modal from 'react-native-modal';
+import { connectStyle } from '@shoutem/theme';
+import { Button } from './Button';
+import { Icon } from './Icon';
+import { Text } from './Text';
+import { TouchableOpacity } from './TouchableOpacity';
+import { View } from './View';
+
+const isIos = Platform.OS === 'ios';
+
+class DateTimePicker extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    autoBindReact(this);
+
+    this.state = {
+      showPicker: false,
+      value: props.value,
+    };
+  }
+
+  componentDidUpdate() {
+    if (!isIos) {
+      const { value } = this.props;
+
+      this.setState({ value });
+    }
+  }
+
+  handleValueChanged(event, value) {
+    if (isIos) {
+      return this.setState({ value });
+    }
+
+    if (event.type === 'dismissed') {
+      return this.handleHidePicker();
+    }
+
+    const { onValueChanged } = this.props;
+
+    this.setState({ showPicker: false });
+    return onValueChanged(value);
+  }
+
+  handleShowPicker() {
+    this.setState({ showPicker: true });
+  }
+
+  handleHidePicker() {
+    this.setState({ showPicker: false });
+  }
+
+  handleConfirmPress() {
+    const { onValueChanged } = this.props;
+    const { value } = this.state;
+
+    onValueChanged(value);
+    this.handleHidePicker();
+  }
+
+  render() {
+    const {
+      confirmButtonText,
+      is24Hour,
+      mode,
+      textValue,
+      style,
+      ...otherProps
+    } = this.props;
+    const { showPicker, value } = this.state;
+
+    return (
+      <View styleName="horizontal">
+        <TouchableOpacity
+          styleName="flexible md-gutter"
+          style={style.textContainer}
+          onPress={this.handleShowPicker}
+        >
+          <Text> {textValue}</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          onPress={this.handleShowPicker}
+          styleName="h-center v-center"
+          style={style.buttonContainer}
+        >
+          <Icon name="drop-down" style={style.icon} />
+        </TouchableOpacity>
+        {isIos && (
+          <Modal
+            backdropOpacity={0.5}
+            isVisible={showPicker}
+            hasBackdrop
+            onBackdropPress={this.handleHidePicker}
+            swipeDirection={['left', 'right']}
+            swipeThreshold={20}
+            onSwipeComplete={this.handleHidePicker}
+          >
+            <View styleName="md-gutter" style={style.modalContainer}>
+              <RNCDateTimePicker
+                display="spinner"
+                is24Hour={is24Hour}
+                mode={mode}
+                onChange={this.handleValueChanged}
+                textColor="light"
+                themeVariant="light"
+                value={value}
+                {...otherProps}
+              />
+              <View
+                style={style.modalButtonContainer}
+                styleName="md-gutter-top"
+              >
+                <Button
+                  style={style.modalButton}
+                  onPress={this.handleConfirmPress}
+                >
+                  <Text>{confirmButtonText}</Text>
+                </Button>
+              </View>
+            </View>
+          </Modal>
+        )}
+        {!isIos && showPicker && (
+          <RNCDateTimePicker
+            display="default"
+            is24Hour={is24Hour}
+            mode={mode}
+            onChange={this.handleValueChanged}
+            value={value}
+            {...otherProps}
+          />
+        )}
+      </View>
+    );
+  }
+}
+
+DateTimePicker.propTypes = {
+  confirmButtonText: PropTypes.string,
+  is24Hour: PropTypes.bool,
+  mode: PropTypes.string,
+  onValueChanged: PropTypes.func,
+  textValue: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
+};
+
+DateTimePicker.defaultProps = {
+  confirmButtonText: 'Confirm',
+  is24Hour: false,
+  mode: 'datetime',
+  value: new Date(),
+};
+
+const StyledDateTimePicker = connectStyle('shoutem.ui.DateTimePicker')(
+  DateTimePicker,
+);
+
+export { StyledDateTimePicker as DateTimePicker };

index.js

@@ -79,6 +79,7 @@ export { NumberInput } from './components/NumberInput';
 export { SearchField } from './components/SearchField';
 export { TabMenu } from './components/TabMenu';
 export { YearRangePicker } from './components/YearRangePicker';
+export { DateTimePicker } from './components/DateTimePicker';
 
 export { Examples } from './examples/components';
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "4.4.8",
+  "version": "4.5.0",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",
@@ -9,6 +9,7 @@
     "test": "mocha '_tests_/*.js' --require react-native-mock-render/mock --require @babel/register"
   },
   "dependencies": {
+    "@react-native-community/datetimepicker": "^3.5.2",
     "@shoutem/animation": "~0.14.0",
     "@shoutem/eslint-config-react": "^1.0.1",
     "@shoutem/theme": "~0.12.0",
@@ -63,6 +64,7 @@
     "react-native-mock-render": "0.1.9"
   },
   "nativeDependencies": [
+    "@react-native-community/datetimepicker",
     "react-native-linear-gradient",
     "react-native-photo-view",
     "react-native-svg",
@@ -110,6 +112,10 @@
     {
       "email": "[email protected]",
       "name": "zrumenjak"
+    },
+    {
+      "email": "[email protected]",
+      "name": "tomislav-arambasic"
     }
   ],
   "eslintConfig": {

theme.js

@@ -1178,7 +1178,12 @@ export default (variables = defaultThemeVariables) => ({
   // Buttons
   //
   'shoutem.ui.TouchableOpacity': {
-    [INCLUDE]: ['commonVariants'],
+    [INCLUDE]: [
+      'commonVariants',
+      'guttersPadding',
+      'horizontalFlexAlignment',
+      'verticalFlexAlignment',
+    ],
 
     activeOpacity: 0.8,
   },
@@ -3055,4 +3060,20 @@ export default (variables = defaultThemeVariables) => ({
       opacity: 0.3,
     },
   },
+
+  'shoutem.ui.DateTimePicker': {
+    buttonContainer: {
+      width: 50,
+      height: 50,
+      backgroundColor: '#222222',
+    },
+    icon: { color: '#FFFFFF', height: 30, width: 30 },
+    modalButton: { width: 100, margin: 'auto' },
+    modalButtonContainer: { height: 80 },
+    modalContainer: { backgroundColor: '#FFFFFF' },
+    textContainer: {
+      borderColor: '#C2C2C2',
+      borderWidth: 1,
+    },
+  },
 });