Localization support for the calendar (#2182)

app/components/autocomplete/date_suggestion/date_suggestion.js

@@ -4,7 +4,8 @@
 import React, {PureComponent} from 'react';
 import {Dimensions, Platform, StyleSheet} from 'react-native';
 import PropTypes from 'prop-types';
-import {CalendarList} from 'react-native-calendars';
+import {CalendarList, LocaleConfig} from 'react-native-calendars';
+import {intlShape} from 'react-intl';
 
 import {memoizeResult} from 'mattermost-redux/utils/helpers';
 
@@ -15,6 +16,7 @@ export default class DateSuggestion extends PureComponent {
     static propTypes = {
         cursorPosition: PropTypes.number.isRequired,
         listHeight: PropTypes.number,
+        locale: PropTypes.string.isRequired,
         matchTerm: PropTypes.string,
         onChangeText: PropTypes.func.isRequired,
         onResultCountChange: PropTypes.func.isRequired,
@@ -27,6 +29,10 @@ export default class DateSuggestion extends PureComponent {
         value: '',
     };
 
+    static contextTypes = {
+        intl: intlShape.isRequired,
+    };
+
     constructor(props) {
         super(props);
 
@@ -36,6 +42,10 @@ export default class DateSuggestion extends PureComponent {
         };
     }
 
+    componentDidMount() {
+        this.setCalendarLocale();
+    }
+
     componentWillReceiveProps(nextProps) {
         const {matchTerm} = nextProps;
 
@@ -48,6 +58,10 @@ export default class DateSuggestion extends PureComponent {
 
             this.props.onResultCountChange(0);
         }
+
+        if (this.props.locale !== nextProps.locale) {
+            this.setCalendarLocale(nextProps);
+        }
     }
 
     completeMention = (day) => {
@@ -67,6 +81,31 @@ export default class DateSuggestion extends PureComponent {
         this.setState({mentionComplete: true});
     };
 
+    setCalendarLocale = (props = this.props) => {
+        const {formatMessage} = this.context.intl;
+
+        LocaleConfig.locales[props.locale] = {
+            monthNames: formatMessage({
+                id: 'mobile.calendar.monthNames',
+                defaultMessage: 'January,February,March,April,May,June,July,August,September,October,November,December',
+            }).split(','),
+            monthNamesShort: formatMessage({
+                id: 'mobile.calendar.monthNamesShort',
+                defaultMessage: 'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec',
+            }).split(','),
+            dayNames: formatMessage({
+                id: 'mobile.calendar.dayNames',
+                defaultMessage: 'Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday',
+            }).split(','),
+            dayNamesShort: formatMessage({
+                id: 'mobile.calendar.dayNamesShort',
+                defaultMessage: 'Sun,Mon,Tue,Wed,Thu,Fri,Sat',
+            }).split(','),
+        };
+
+        LocaleConfig.defaultLocale = props.locale;
+    };
+
     render() {
         const {mentionComplete} = this.state;
         const {matchTerm, enableDateSuggestion, theme} = this.props;

app/components/autocomplete/date_suggestion/index.js

@@ -3,9 +3,11 @@
 
 import {connect} from 'react-redux';
 
-import {makeGetMatchTermForDateMention} from 'app/selectors/autocomplete';
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 
+import {makeGetMatchTermForDateMention} from 'app/selectors/autocomplete';
+import {getCurrentLocale} from 'app/selectors/i18n';
+
 import DateSuggestion from './date_suggestion';
 
 function makeMapStateToProps() {
@@ -19,6 +21,7 @@ function makeMapStateToProps() {
 
         return {
             matchTerm,
+            locale: getCurrentLocale(state),
             theme: getTheme(state),
         };
     };

assets/base/i18n/en.json

@@ -139,6 +139,10 @@
   "mobile.announcement_banner.title": "Announcement",
   "mobile.authentication_error.message": "Mattermost has encountered an error. Please re-authenticate to start a new session.",
   "mobile.authentication_error.title": "Authentication Error",
+  "mobile.calendar.monthNames": "January,February,March,April,May,June,July,August,September,October,November,December",
+  "mobile.calendar.monthNamesShort": "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec",
+  "mobile.calendar.dayNames": "Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday",
+  "mobile.calendar.dayNamesShort": "Sun,Mon,Tue,Wed,Thu,Fri,Sat",
   "mobile.channel_drawer.search": "Jump to...",
   "mobile.channel_info.alertMessageDeleteChannel": "Are you sure you want to archive the {term} {name}?",
   "mobile.channel_info.alertMessageLeaveChannel": "Are you sure you want to leave the {term} {name}?",