fix: rerender fix

Author: DominMFD

src/components/Calendar/components/DateSelectorComposer/components/DateSelected/index.js

@@ -11,7 +11,7 @@ export default function DateSelected(date) {
   Component.call(this, { html, events });
 
   this.$dateSelected = this.selected.get('date-selected');
-  this.$dateSelected.innerText = date;
+  this.setDate(date);
 
   this.emitClickevent = () => {
     this.emit('item:click');
@@ -23,5 +23,9 @@ export default function DateSelected(date) {
 DateSelected.prototype = Object.assign(
   DateSelected.prototype,
   Component.prototype,
-  {},
+  {
+    setDate(date) {
+      this.$dateSelected.innerText = date;
+    },
+  },
 );

src/components/Calendar/components/DateSelectorComposer/components/MonthSelector/index.js

@@ -1,7 +1,6 @@
 import { Component } from 'pet-dex-utilities';
 import { makeSwipable } from '../../../../../../utils/swiper';
 import SelectorItem from '../SelectorItem';
-import { listenBreakpoint } from '../../../../../../utils/breakpoints/breakpoints';
 import { MONTHS } from '../../../../utils/months';
 import './index.scss';
 
@@ -28,7 +27,7 @@ export default function MonthSelector(dateArray) {
 
   this.itemCount = this.dateArray.length;
   this.columnWidth = 150;
-  this.nodePadding = 5;
+  this.nodePadding = 6;
   this.scrollLeft = this.$monthSelector.scrollLeft;
 
   const swiper = makeSwipable(this.$monthSelector);
@@ -49,7 +48,7 @@ export default function MonthSelector(dateArray) {
     this.viewportWidth = this.$monthSelector.offsetWidth;
 
     const renderWindow = () => {
-      this.totalContentWidth = this.itemCount * this.columnWidth;
+      this.totalContentWidth = (this.itemCount - 1) * this.columnWidth + 176;
 
       this.startNode =
         Math.floor(this.scrollLeft / this.columnWidth) - this.nodePadding;
@@ -84,7 +83,7 @@ export default function MonthSelector(dateArray) {
           emitMonthChangeEvent(item),
         );
 
-        if (index === 6) {
+        if (index === 7) {
           selectorItem.active();
         }
       });
@@ -132,10 +131,6 @@ export default function MonthSelector(dateArray) {
 
     renderWindow();
     scrollToMiddle();
-
-    listenBreakpoint('from667', (matches) => {
-      if (matches) scrollToMiddle();
-    });
   }, 0);
 }
 

src/components/Calendar/components/DateSelectorComposer/components/YearSelector/index.js

@@ -1,7 +1,6 @@
 import { Component } from 'pet-dex-utilities';
 import { makeSwipable } from '../../../../../../utils/swiper';
 import SelectorItem from '../SelectorItem';
-import { listenBreakpoint } from '../../../../../../utils/breakpoints/breakpoints';
 import './index.scss';
 
 const events = ['selector:click', 'year:change'];
@@ -26,7 +25,7 @@ export default function YearSelector(dateArray) {
   this.$listContent = this.selected.get('list-content');
 
   this.itemCount = this.dateArray.length;
-  this.columnWidth = 75;
+  this.columnWidth = 70;
   this.nodePadding = 5;
   this.scrollLeft = this.$dateSelector.scrollLeft;
 
@@ -47,7 +46,7 @@ export default function YearSelector(dateArray) {
     this.viewportWidth = this.$dateSelector.offsetWidth;
 
     const renderWindow = () => {
-      this.totalContentWidth = this.itemCount * this.columnWidth;
+      this.totalContentWidth = (this.itemCount - 1) * this.columnWidth + 96;
 
       this.startNode =
         Math.floor(this.scrollLeft / this.columnWidth) - this.nodePadding;
@@ -122,17 +121,12 @@ export default function YearSelector(dateArray) {
     });
 
     const scrollToMiddle = () => {
-      this.scrollLeft =
-        this.totalContentWidth / 2 - this.viewportWidth / 2 + 12;
+      this.scrollLeft = this.totalContentWidth / 2 - this.viewportWidth / 2;
       this.$dateSelector.scrollLeft = this.scrollLeft;
     };
 
     renderWindow();
     scrollToMiddle();
-
-    listenBreakpoint('from667', (matches) => {
-      if (matches) scrollToMiddle();
-    });
   }, 0);
 }
 

src/components/Calendar/components/DateSelectorComposer/index.js

@@ -31,53 +31,57 @@ export default function DateSelectorComposer(month, year) {
   this.$yearSelector = this.selected.get('year-selector');
   this.modalControl = new ModalController(this);
 
-  this.mountSelectors = () => {
-    if (this.yearSelector) this.yearSelector.unmount();
-    if (this.yearSelected) this.yearSelected.unmount();
+  const mountMobileSelectors = () => {
     if (this.monthSelector) this.monthSelector.unmount();
-    if (this.monthSelected) this.monthSelected.unmount();
+    if (this.yearSelector) this.yearSelector.unmount();
 
-    this.yearArray = yearArrayGenerator(this.year);
     this.monthArray = monthArrayGenerator(this.month);
+    this.yearArray = yearArrayGenerator(this.year);
 
-    this.yearSelector = new YearSelector(this.yearArray, 75);
-    this.yearSelector.listen('year:change', (newYear) =>
-      this.emit('year:change', newYear),
+    this.monthSelector = new MonthSelector(this.monthArray);
+    this.monthSelector.mount(this.$monthSelector);
+    this.monthSelector.listen('month:change', (newMonth) =>
+      this.setMonth(newMonth),
     );
 
-    this.yearSelected = new DateSelected(this.year);
-    this.yearSelected.listen('item:click', () =>
-      this.modalControl.Open(this.yearArray),
-    );
+    this.yearSelector = new YearSelector(this.yearArray);
+    this.yearSelector.mount(this.$yearSelector);
+    this.yearSelector.listen('year:change', (newYear) => this.setYear(newYear));
+  };
 
-    this.monthSelector = new MonthSelector(this.monthArray, 120);
-    this.monthSelector.listen('month:change', (newMonth) =>
-      this.emit('month:change', newMonth),
-    );
+  const mountDesktopSelectors = () => {
+    if (this.monthSelected) this.monthSelected.unmount();
+    if (this.yearSelected) this.yearSelected.unmount();
+
+    this.monthArray = monthArrayGenerator(this.month);
+    this.yearArray = yearArrayGenerator(this.year);
 
     this.monthSelected = new DateSelected(MONTHS[this.month]);
+    this.monthSelected.mount(this.$monthSelector);
     this.monthSelected.listen('item:click', () =>
       this.modalControl.Open(this.monthArray),
     );
 
-    listenBreakpoint('from667', (matches) => {
-      if (matches) {
-        this.monthSelector.unmount();
-        this.yearSelector.unmount();
-
-        this.monthSelected.mount(this.$monthSelector);
-        this.yearSelected.mount(this.$yearSelector);
-      } else {
-        this.yearSelected.unmount();
-        this.monthSelected.unmount();
-
-        this.yearSelector.mount(this.$yearSelector);
-        this.monthSelector.mount(this.$monthSelector);
-      }
-    });
+    this.yearSelected = new DateSelected(this.year);
+    this.yearSelected.mount(this.$yearSelector);
+    this.yearSelected.listen('item:click', () =>
+      this.modalControl.Open(this.yearArray),
+    );
   };
 
-  this.mountSelectors();
+  listenBreakpoint('from667', (matches) => {
+    if (matches) {
+      if (this.monthSelector) this.monthSelector.unmount();
+      if (this.yearSelector) this.yearSelector.unmount();
+
+      mountDesktopSelectors();
+    } else {
+      if (this.monthSelected) this.monthSelected.unmount();
+      if (this.yearSelected) this.yearSelected.unmount();
+
+      mountMobileSelectors();
+    }
+  });
 
   window.addEventListener('click', (event) =>
     this.modalControl.CloseOnClickOutside(event),
@@ -89,14 +93,16 @@ DateSelectorComposer.prototype = Object.assign(
   Component.prototype,
   {
     setMonth(month) {
+      if (this.monthSelected) this.monthSelected.setDate(MONTHS[month]);
+
       this.month = month;
-      this.mountSelectors();
       this.emit('month:change', month);
     },
 
     setYear(year) {
+      if (this.yearSelected) this.yearSelected.setDate(year);
+
       this.year = year;
-      this.mountSelectors();
       this.emit('year:change', year);
     },
   },