fix: prop lang should be reactive (#391)

__test__/locale.test.js

@@ -30,7 +30,14 @@ describe('Locale', () => {
       },
     });
     expect(wrapper.find('.mx-table-date th').text()).toBe('Su');
-    expect(wrapper.find('.mx-table-date td').element.title).toBe('Sep 29, 2019');
+    expect(wrapper.find('.mx-table-month td').text()).toBe('Jan');
+    expect(wrapper.find('.mx-btn-current-month').text()).toBe('Oct');
+    expect(wrapper.find('.mx-table-date .active').element.title).toBe('Oct 10, 2019');
+    wrapper.setProps({ lang: 'zh-cn' });
+    expect(wrapper.find('.mx-table-date th').text()).toBe('一');
+    expect(wrapper.find('.mx-table-month td').text()).toBe('1月');
+    expect(wrapper.find('.mx-btn-current-month').text()).toBe('10月');
+    expect(wrapper.find('.mx-table-date .active').element.title).toBe('10月 10, 2019');
   });
 
   it('prop: lang - object', () => {

src/calendar/calendar-panel.vue

@@ -106,12 +106,12 @@ import {
   startOfMonth,
   startOfDay,
 } from 'date-fns';
-import localeMixin from '../mixin/locale';
-import formatMixin from '../mixin/format';
+import { format } from 'date-format-parse';
 import { getValidDate, isValidDate, createDate } from '../util/date';
 import TableDate from './table-date';
 import TableMonth from './table-month';
 import TableYear from './table-year';
+import { getLocaleFieldValue } from '../locale';
 
 export default {
   name: 'CalendarPanel',
@@ -120,7 +120,11 @@ export default {
     TableMonth,
     TableYear,
   },
-  mixins: [localeMixin, formatMixin],
+  inject: {
+    t: {
+      default: () => getLocaleFieldValue,
+    },
+  },
   props: {
     value: {},
     defaultValue: {
@@ -222,6 +226,9 @@ export default {
     },
   },
   methods: {
+    formatDate(date, fmt) {
+      return format(date, fmt, { locale: this.t('formatLocale') });
+    },
     initCalendar() {
       let calendarDate = this.calendar;
       if (!isValidDate(calendarDate)) {

src/calendar/table-date.vue

@@ -27,18 +27,19 @@
 </template>
 
 <script>
-import { getWeek } from 'date-format-parse';
-import localeMixin from '../mixin/locale';
-import formatMixin from '../mixin/format';
+import { getWeek, format } from 'date-format-parse';
 import { chunk } from '../util/base';
 import { createDate } from '../util/date';
+import { getLocaleFieldValue } from '../locale';
 
 export default {
   name: 'TableDate',
-  mixins: [localeMixin, formatMixin],
   inject: {
+    t: {
+      default: () => getLocaleFieldValue,
+    },
     getWeek: {
-      default: getWeek,
+      default: () => getWeek,
     },
   },
   props: {
@@ -116,6 +117,9 @@ export default {
     },
   },
   methods: {
+    formatDate(date, fmt) {
+      return format(date, fmt, { locale: this.t('formatLocale') });
+    },
     handleCellClick(evt) {
       let { target } = evt;
       if (target.tagName === 'DIV') {
@@ -129,9 +133,9 @@ export default {
     getCellTitle(day) {
       const year = this.calendarYear;
       const month = this.calendarMonth;
-      const format = this.titleFormat;
+      const fmt = this.titleFormat;
       const date = createDate(year, month, day);
-      return this.formatDate(date, format);
+      return this.formatDate(date, fmt);
     },
     getWeekNumber(day) {
       const year = this.calendarYear;

src/calendar/table-month.vue

@@ -15,12 +15,16 @@
 </template>
 
 <script>
-import localeMixin from '../mixin/locale';
 import { chunk } from '../util/base';
+import { getLocaleFieldValue } from '../locale';
 
 export default {
   name: 'TableMonth',
-  mixins: [localeMixin],
+  inject: {
+    t: {
+      default: () => getLocaleFieldValue,
+    },
+  },
   props: {
     getCellClasses: {
       type: Function,

src/date-picker.vue

@@ -89,7 +89,7 @@
 import { parse, format, getWeek } from 'date-format-parse';
 import { isValidDate, isValidRangeDate, getValidDate } from './util/date';
 import { pick, isObject, mergeDeep } from './util/base';
-import { getLocale } from './locale';
+import { getLocale, getLocaleFieldValue } from './locale';
 import Popup from './popup';
 import IconCalendar from './icon/icon-calendar';
 import IconClose from './icon/icon-close';
@@ -120,7 +120,7 @@ export default {
   },
   provide() {
     return {
-      locale: this.locale,
+      t: this.getLocaleFieldValue,
       getWeek: this.getWeek,
     };
   },
@@ -441,6 +441,9 @@ export default {
     hasSlot(name) {
       return !!(this.$slots[name] || this.$scopedSlots[name]);
     },
+    getLocaleFieldValue(path) {
+      return getLocaleFieldValue(path, this.locale);
+    },
   },
 };
 </script>

src/locale.js

@@ -20,6 +20,33 @@ export function locale(name, object, isLocal) {
   return locales[name] || locales[defaultLocale];
 }
 
+/**
+ * get locale object
+ * @param {string} name lang
+ */
 export function getLocale(name) {
   return locale(name, null, true);
 }
+
+/**
+ * get locale field value
+ * @param {string} field field eg: 'formatLocale.shortMonth'
+ * @param {object} lang locale object
+ */
+export function getLocaleFieldValue(field, lang) {
+  const arr = (field || '').split('.');
+  let current = lang || getLocale();
+  let value;
+  for (let i = 0, len = arr.length; i < len; i++) {
+    const prop = arr[i];
+    value = current[prop];
+    if (i === len - 1) {
+      return value;
+    }
+    if (!value) {
+      return null;
+    }
+    current = value;
+  }
+  return null;
+}

src/mixin/format.js

@@ -1,11 +0,0 @@
-import { format } from 'date-format-parse';
-import LocaleMixin from './locale';
-
-export default {
-  mixins: [LocaleMixin],
-  methods: {
-    formatDate(date, fmt) {
-      return format(date, fmt, { locale: this.t('formatLocale') });
-    },
-  },
-};

src/mixin/locale.js

@@ -1,28 +0,0 @@
-import { getLocale } from '../locale';
-
-export default {
-  inject: {
-    locale: {
-      default: getLocale(),
-    },
-  },
-  methods: {
-    t(path) {
-      const arr = path.split('.');
-      let current = this.locale || getLocale();
-      let value;
-      for (let i = 0, len = arr.length; i < len; i++) {
-        const prop = arr[i];
-        value = current[prop];
-        if (i === len - 1) {
-          return value;
-        }
-        if (!value) {
-          return null;
-        }
-        current = value;
-      }
-      return null;
-    },
-  },
-};

src/time/list-options.vue

@@ -13,10 +13,10 @@
 </template>
 
 <script>
-import localeMixin from '../mixin/locale';
-import formatMixin from '../mixin/format';
+import { format } from 'date-format-parse';
 import ScrollbarVertical from '../scrollbar/scrollbar-vertical';
 import { getScrollParent } from '../util/dom';
+import { getLocaleFieldValue } from '../locale';
 
 function parseOption(time = '') {
   const values = time.split(':');
@@ -40,7 +40,11 @@ const scrollTo = (element, to) => {
 export default {
   name: 'ListOptions',
   components: { ScrollbarVertical },
-  mixins: [localeMixin, formatMixin],
+  inject: {
+    t: {
+      default: () => getLocaleFieldValue,
+    },
+  },
   props: {
     date: Date,
     options: {
@@ -68,7 +72,7 @@ export default {
       const start = parseOption(options.start);
       const end = parseOption(options.end);
       const step = parseOption(options.step);
-      const format = options.format || this.format;
+      const fmt = options.format || this.format;
       if (start && end && step) {
         const startMinutes = start.minutes + start.hours * 60;
         const endMinutes = end.minutes + end.hours * 60;
@@ -81,7 +85,7 @@ export default {
           const value = new Date(this.date).setHours(hours, minutes, 0);
           result.push({
             value,
-            text: this.formatDate(value, format),
+            text: this.formatDate(value, fmt),
           });
         }
       }
@@ -92,6 +96,9 @@ export default {
     this.scrollToSelected();
   },
   methods: {
+    formatDate(date, fmt) {
+      return format(date, fmt, { locale: this.t('formatLocale') });
+    },
     scrollToSelected() {
       const element = this.$el.querySelector('.active');
       if (!element) return;

src/time/time-panel.vue

@@ -36,16 +36,20 @@
 </template>
 
 <script>
+import { format } from 'date-format-parse';
 import { getValidDate } from '../util/date';
-import localeMixin from '../mixin/locale';
-import formatMixin from '../mixin/format';
 import ListColumns from './list-columns';
 import ListOptions from './list-options';
+import { getLocaleFieldValue } from '../locale';
 
 export default {
   name: 'TimePanel',
   components: { ListColumns, ListOptions },
-  mixins: [localeMixin, formatMixin],
+  inject: {
+    t: {
+      default: () => getLocaleFieldValue,
+    },
+  },
   props: {
     value: {},
     defaultValue: {
@@ -124,12 +128,12 @@ export default {
       return typeof this.format === 'string' ? this.format : 'HH:mm:ss';
     },
     ShowHourMinuteSecondAMPM() {
-      const format = this.innerForamt;
+      const fmt = this.innerForamt;
       const defaultProps = {
-        showHour: /[HhKk]/.test(format),
-        showMinute: /m/.test(format),
-        showSecond: /s/.test(format),
-        use12h: /a/i.test(format),
+        showHour: /[HhKk]/.test(fmt),
+        showMinute: /m/.test(fmt),
+        showSecond: /s/.test(fmt),
+        use12h: /a/i.test(fmt),
       };
       const obj = {};
       Object.keys(defaultProps).forEach(key => {
@@ -139,6 +143,9 @@ export default {
     },
   },
   methods: {
+    formatDate(date, fmt) {
+      return format(date, fmt, { locale: this.t('formatLocale') });
+    },
     isDisabled(date) {
       return this.disabledTime(new Date(date));
     },