Merge pull request #872 from esteemapp/feature/dateTimeComponent

Feature/date time component

package.json

@@ -37,7 +37,7 @@
     "jsc-android": "^236355.1.1",
     "lodash": "^4.17.11",
     "moment": "^2.22.2",
-    "react": "^16.7.0",
+    "react": "^16.8.6",
     "react-intl": "^2.7.2",
     "react-native": "esteemapp/react-native",
     "react-native-actionsheet": "^2.4.2",

src/components/basicHeader/view/basicHeaderView.js

@@ -1,20 +1,17 @@
 import React, { Component, Fragment } from 'react';
 import { View, Text, ActivityIndicator, SafeAreaView } from 'react-native';
 import { injectIntl } from 'react-intl';
-import DatePicker from 'react-native-datepicker';
-import moment from 'moment';
 
 // Components
 import { TextButton } from '../..';
 import { IconButton } from '../../iconButton';
 import { DropdownButton } from '../../dropdownButton';
 import { TextInput } from '../../textInput';
-import { Icon } from '../../icon';
+import { DateTimePicker } from '../../dateTimePicker';
 
 // Constants
 // Styles
 import styles from './basicHeaderStyles';
-import datePickerStyles from './datePickerStyles';
 
 class BasicHeaderView extends Component {
   /* Props
@@ -27,7 +24,6 @@ class BasicHeaderView extends Component {
     super(props);
     this.state = {
       isInputVisible: false,
-      datePickerValue: '',
     };
   }
 
@@ -62,8 +58,6 @@ class BasicHeaderView extends Component {
   _handleDatePickerChange = datePickerValue => {
     const { handleDatePickerChange } = this.props;
 
-    this.setState({ datePickerValue });
-
     if (handleDatePickerChange) {
       handleDatePickerChange(datePickerValue);
     }
@@ -94,7 +88,7 @@ class BasicHeaderView extends Component {
       rightIconName,
       title,
     } = this.props;
-    const { isInputVisible, datePickerValue } = this.state;
+    const { isInputVisible } = this.state;
 
     return (
       <SafeAreaView style={styles.safeArea}>
@@ -188,32 +182,10 @@ class BasicHeaderView extends Component {
           {isHasIcons && (
             <Fragment>
               {!isReply && (
-                <DatePicker
-                  style={{ width: 50 }}
-                  date={datePickerValue}
-                  mode="date"
-                  format="YYYY-MM-DD"
-                  minDate={moment()}
-                  maxDate="3000-06-01"
-                  confirmBtnText="Confirm"
-                  cancelBtnText="Cancel"
-                  onDateChange={_datePickerValue => {
-                    this._handleDatePickerChange(_datePickerValue);
-                  }}
-                  hideText
+                <DateTimePicker
+                  type="date-time"
+                  onSubmit={this._handleDatePickerChange}
                   disabled={!isFormValid}
-                  onPressDate
-                  customStyles={{
-                    ...datePickerStyles,
-                  }}
-                  iconComponent={
-                    <Icon
-  style={{ ...styles.iconButton, ...styles.scheduleIcon }}
-  size={20}
-  iconType="MaterialIcons"
-  name="timer"
-/>
-                  }
                 />
               )}
               <IconButton

src/components/dateTimePicker/index.js

@@ -0,0 +1,4 @@
+import DateTimePicker from './view/dateTimePickerView';
+
+export { DateTimePicker };
+export default DateTimePicker;

src/components/dateTimePicker/view/dateTimePickerStyles.js

@@ -28,4 +28,15 @@ export default EStyleSheet.create({
   datePickerCon: {
     backgroundColor: '$primaryBackgroundColor',
   },
+  scheduleIcon: {
+    color: '$iconColor',
+  },
+  iconButton: {
+    marginRight: 24,
+    justifyContent: 'center',
+    alignSelf: 'center',
+  },
+  picker: {
+    width: 50,
+  },
 });

src/components/dateTimePicker/view/dateTimePickerView.js

@@ -0,0 +1,110 @@
+import React, { PureComponent } from 'react';
+import DatePicker from 'react-native-datepicker';
+import moment from 'moment';
+import { injectIntl } from 'react-intl';
+
+// Component
+import { Icon } from '../../icon';
+
+// Styles
+import styles from './dateTimePickerStyles';
+
+class DateTimePickerView extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      date: '',
+      time: '',
+    };
+  }
+
+  _initState = () => {
+    this.setState({
+      date: '',
+      time: '',
+    });
+  }
+
+  _setValue = (stateName, value) => {
+    const { onSubmit } = this.props;
+    const { date, time } = this.state;
+    this.setState({ [stateName]: value });
+
+    if (!time && !date) {
+      this.timePickerTimeout = setTimeout(() => {
+        this.datePicker.onPressDate();
+      }, 500);
+    } else {
+      clearTimeout(this.timePickerTimeout);
+    }
+
+    if (date && value) {
+      const formatedDateTime = new Date(`${date} ${value}`).toISOString();
+      onSubmit(formatedDateTime);
+      this._initState();
+    }
+  }
+
+
+  render() {
+    const {
+      type,
+      iconName,
+      disabled,
+      intl,
+    } = this.props;
+    const { date } = this.state;
+    let _type;
+    let _format;
+    let _minDate;
+
+    if (type === 'date-time') {
+      _type = date ? 'time' : 'date';
+      _format = date ? 'HH:MM' : 'YYYY-MM-DD';
+      _minDate = date ? null : moment();
+    } else {
+      _type = type;
+      _format = type === 'date' ? 'YYYY-MM-DD' : 'HH:MM';
+      _minDate = type === 'date' ? moment() : null;
+    }
+
+    return (
+      <DatePicker
+        style={styles.picker}
+        date={date}
+        mode={_type}
+        format={_format}
+        minDate={_minDate}
+        confirmBtnText={intl.formatMessage({
+          id: 'alert.confirm',
+        })}
+        cancelBtnText={intl.formatMessage({
+          id: 'alert.cancel',
+        })}
+        onDateChange={_datePickerValue => this._setValue(!date ? 'date' : 'time', _datePickerValue)}
+        hideText
+        is24Hour
+        ref={(picker) => { this.datePicker = picker; }}
+        disabled={disabled}
+        customStyles={{
+          ...styles,
+        }}
+        iconComponent={(
+          <Icon
+            style={{ ...styles.iconButton, ...styles.scheduleIcon }}
+            size={20}
+            iconType="MaterialIcons"
+            name={iconName}
+          />
+        )}
+      />
+    );
+  }
+}
+
+DateTimePickerView.defaultProps = {
+  iconName: 'timer',
+  type: 'date',
+};
+
+export default injectIntl(DateTimePickerView);

src/providers/esteem/esteem.js

@@ -2,6 +2,7 @@ import api from '../../config/api';
 import searchApi from '../../config/search';
 import imageApi from '../../config/imageApi';
 import serverList from '../../config/serverListApi';
+import { jsonStringify } from '../../utils/jsonUtils';
 
 export const getCurrencyRate = currency =>
   api.get(`/currencyRate/${currency.toUpperCase()}/steem`).then(resp => resp.data);

src/screens/editor/container/editorContainer.js

@@ -126,13 +126,15 @@ class EditorContainer extends Component {
       }
     } else {
       await getDraftPost(username).then(result => {
-        this.setState({
-          draftPost: {
-            body: result.body,
-            title: result.title,
-            tags: result.tags.split(','),
-          },
-        });
+        if (result) {
+          this.setState({
+            draftPost: {
+              body: result.body,
+              title: result.title,
+              tags: result.tags.split(','),
+            },
+          });
+        }
       });
     }
   };

yarn.lock

@@ -7546,7 +7546,7 @@ react-transform-hmr@^1.0.4:
     global "^4.3.0"
     react-proxy "^1.1.7"
 
-react@^16.7.0:
+react@^16.8.6:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
   integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==