feat(Calendar): add Header component

src/calendar/Header.js

@@ -0,0 +1,49 @@
+import { createNamespace } from '../utils';
+import { t, formatMonthTitle } from './utils';
+
+const [createComponent, bem] = createNamespace('calendar-header');
+
+export default createComponent({
+  props: {
+    title: String,
+    currentMonth: Date
+  },
+
+  methods: {
+    genTitle() {
+      if (this.title) {
+        return <div class={bem('title')}>{this.title}</div>;
+      }
+    },
+
+    genMonth() {
+      return (
+        <div class={bem('month')}>
+          {formatMonthTitle(this.currentMonth)}
+        </div>
+      );
+    },
+
+    genWeekDays() {
+      const weekdays = t('weekdays');
+
+      return (
+        <div class={bem('weekdays')}>
+          {weekdays.map(item => (
+            <span class={bem('weekday')}>{item}</span>
+          ))}
+        </div>
+      );
+    }
+  },
+
+  render() {
+    return (
+      <div class={bem()}>
+        {this.genTitle()}
+        {this.genMonth()}
+        {this.genWeekDays()}
+      </div>
+    );
+  }
+});

src/calendar/index.js

@@ -1,12 +1,6 @@
-import { createNamespace } from '../utils';
 import { isDate } from '../utils/validate/date';
-import { compareMonth } from './utils';
+import { createComponent, bem, compareMonth, formatMonthTitle } from './utils';
-
+import Header from './Header';
-const [createComponent, bem, t] = createNamespace('calendar');
-
-function formatMonthTitle(date) {
-  return t('monthTitle', date.getFullYear(), date.getMonth() + 1);
-}
 
 function getDays(date) {
   const days = [];
@@ -49,7 +43,7 @@ export default createComponent({
 
   data() {
     return {
-      currentDate: this.minDate
+      currentMonth: this.minDate
     };
   },
 
@@ -64,7 +58,8 @@ export default createComponent({
       do {
         months.push({
           date: new Date(cursor),
-          days: getDays(cursor)
+          days: getDays(cursor),
+          title: formatMonthTitle(cursor)
         });
 
         cursor.setMonth(cursor.getMonth() + 1);
@@ -75,37 +70,15 @@ export default createComponent({
   },
 
   methods: {
-    genTitle() {
+    genMonth(month, index) {
-      if (this.title) {
+      const showTitle = index !== 0;
-        return <div class={bem('title')}>{this.title}</div>;
-      }
-    },
-
-    genWeekDays() {
-      const weekdays = t('weekdays');
-
-      return (
-        <div class={bem('weekdays')}>
-          {weekdays.map(item => (
-            <span class={bem('weekday')}>{item}</span>
-          ))}
-        </div>
-      );
-    },
-
-    genMonthTitle(date) {
-      return <div class={bem('month-title')}>{formatMonthTitle(date)}</div>;
-    },
-
-    genMonth(monthItem, index) {
-      const Title = index !== 0 ? this.genMonthTitle(monthItem.date) : null;
 
       return (
         <div class={bem('month')}>
-          {Title}
+          {showTitle && <div class={bem('month-title')}>{month.title}</div>}
           <div class={bem('days')}>
-            {monthItem.days.map(dayItem => (
+            {month.days.map(item => (
-              <div class={bem('day')}>{dayItem.day}</div>
+              <div class={bem('day')}>{item.day}</div>
             ))}
           </div>
         </div>
@@ -116,11 +89,7 @@ export default createComponent({
   render() {
     return (
       <div class={bem()}>
-        <div class={bem('header')}>
+        <Header title={this.title} currentMonth={this.currentMonth} />
-          {this.genTitle()}
-          {this.genMonthTitle(this.currentDate)}
-          {this.genWeekDays()}
-        </div>
         <div class={bem('body')}>{this.months.map(this.genMonth)}</div>
       </div>
     );

src/calendar/index.less

@@ -5,12 +5,8 @@
   flex-direction: column;
   height: 80vh;
 
-  &__header {
+  &-header__title,
-    flex-shrink: 0;
+  &-header__month,
-    box-shadow: 0 2px 10px rgba(125, 126, 128, .16);
-  }
-
-  &__title,
   &__month-title {
     height: 44px;
     font-weight: @font-weight-bold;
@@ -18,25 +14,34 @@
     text-align: center;
   }
 
-  &__title {
+  &-header {
-    font-size: @font-size-lg;
+    flex-shrink: 0;
+    box-shadow: 0 2px 10px rgba(125, 126, 128, 0.16);
+
+    &__title {
+      font-size: @font-size-lg;
+    }
+
+    &__month {
+      font-size: @font-size-md;
+    }
+
+    &__weekdays {
+      display: flex;
+    }
+
+    &__weekday {
+      flex: 1;
+      font-size: @font-size-sm;
+      line-height: 30px;
+      text-align: center;
+    }
   }
 
   &__month-title {
     font-size: @font-size-md;
   }
 
-  &__weekdays {
-    display: flex;
-  }
-
-  &__weekday {
-    flex: 1;
-    font-size: @font-size-sm;
-    line-height: 30px;
-    text-align: center;
-  }
-
   &__body {
     flex: 1;
     overflow: auto;

src/calendar/utils.ts

@@ -1,3 +1,13 @@
+import { createNamespace } from '../utils';
+
+const [createComponent, bem, t] = createNamespace('calendar');
+
+export { createComponent, bem, t };
+
+export function formatMonthTitle(date: Date) {
+  return t('monthTitle', date.getFullYear(), date.getMonth() + 1);
+}
+
 export function compareMonth(date1: Date, date2: Date) {
   const year1 = date1.getFullYear();
   const year2 = date2.getFullYear();