From 9ab0cc68e751738061933594467485475b542cec Mon Sep 17 00:00:00 2001
From: Welker-Saibweb <welker@saibweb.com.br>
Date: Fri, 6 Nov 2020 10:31:33 -0300
Subject: [PATCH] feat: prop to change calendar header format

---
 src/components/CalendarContainer.tsx | 13 ++++++++++++-
 stories/Calendar.stories.tsx         |  3 +++
 stories/DatePicker.stories.tsx       |  3 +++
 test/CalendarContainer.test.tsx      | 26 ++++++++++++++++++++++++++
 4 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/src/components/CalendarContainer.tsx b/src/components/CalendarContainer.tsx
index ba02e6a..949ed10 100644
--- a/src/components/CalendarContainer.tsx
+++ b/src/components/CalendarContainer.tsx
@@ -23,6 +23,8 @@ interface CalendarContainerProps {
   onChange?: (date: dayjs.Dayjs) => void;
   /** TodayPanel show or hide */
   showToday?: boolean;
+  /** Change calendar header format to monthName, year */
+  monthNameOnHeader?: boolean;
 }
 
 interface PrivateProps {
@@ -60,13 +62,22 @@ class CalendarContainer extends React.Component<Props, State> {
     super(props);
   }
 
+  private formatHeaderTitle = (current: dayjs.Dayjs) => {    
+    if (this.props.monthNameOnHeader) {
+      return dayjs(current).format('MMM, YYYY');
+    }
+
+    return dayjs(current).format('YYYY.MM');
+  }
+
   public getHeaderTitle = () => {
+
     const { current } = this.props;
     const year = dayjs(current).year();
     return {
       [IDatePicker.ViewMode.YEAR]: `${year - 4} - ${year + 5}`,
       [IDatePicker.ViewMode.MONTH]: `${year}`,
-      [IDatePicker.ViewMode.DAY]: dayjs(current).format('YYYY.MM'),
+      [IDatePicker.ViewMode.DAY]: this.formatHeaderTitle(current),
     }[this.state.viewMode];
   };
 
diff --git a/stories/Calendar.stories.tsx b/stories/Calendar.stories.tsx
index ce23a2b..0745956 100644
--- a/stories/Calendar.stories.tsx
+++ b/stories/Calendar.stories.tsx
@@ -49,6 +49,9 @@ storiesOf('Calendar', module)
     const showMontCnt = number('showMonthCnt', 2);
     return <CalendarSelectedController showMonthCnt={showMontCnt} />;
   })
+  .add('monthNameOnHeader', () => {
+    return <CalendarSelectedController monthNameOnHeader />
+  })
   .add('disableDay', () => {
     const disableDay = (date: dayjs.Dayjs) => {
       return dayjs(date).date() < 7;
diff --git a/stories/DatePicker.stories.tsx b/stories/DatePicker.stories.tsx
index 42f62ad..320ebee 100644
--- a/stories/DatePicker.stories.tsx
+++ b/stories/DatePicker.stories.tsx
@@ -31,6 +31,9 @@ storiesOf('DatePicker', module)
   .add('showMonthCnt', () => {
     return <DatePicker {...defaultProps} showMonthCnt={2} />;
   })
+  .add('monthNameOnHeader', () => {
+    return <DatePicker {...defaultProps} monthNameOnHeader />;
+  })
   .add('onTop', () => {
     return (
       <div style={{ paddingTop: '300px' }}>
diff --git a/test/CalendarContainer.test.tsx b/test/CalendarContainer.test.tsx
index bd33361..971effc 100644
--- a/test/CalendarContainer.test.tsx
+++ b/test/CalendarContainer.test.tsx
@@ -66,6 +66,32 @@ describe('<CalendarContainer/>', () => {
     });
   });
 
+  describe('prop: monthNameOnHeader', () => {
+    let component: ReactWrapper<Props>;
+    let componentNameOnHeader: ReactWrapper<Props>;
+
+    beforeEach(() => {
+      component = mount(
+        <CalendarContainer {...defaultProps} />
+      );
+      componentNameOnHeader = mount(
+        <CalendarContainer {...defaultProps} monthNameOnHeader />
+      );
+    });
+
+    it('should not change format of calendar header', () => {
+      expect(
+        component.find('.calendar__head--title').first().text()
+      ).toEqual('2018.12');
+    });
+
+    it('should change format of calendar header', () => {
+      expect(
+        componentNameOnHeader.find('.calendar__head--title').first().text()
+      ).toEqual('Dec, 2018');
+    });
+  });
+
   describe('handle base test(onPrev, onNext)', () => {
     beforeEach(() => {
       mountComponent = mount(