From 7369e0012ef4c8f2286add17dfc851a360c9801d Mon Sep 17 00:00:00 2001 From: DominMFD Date: Sun, 8 Sep 2024 10:28:40 -0300 Subject: [PATCH] fix: rerender fix --- .../components/DateSelected/index.js | 8 +- .../components/MonthSelector/index.js | 11 +-- .../components/YearSelector/index.js | 12 +-- .../components/DateSelectorComposer/index.js | 74 ++++++++++--------- 4 files changed, 52 insertions(+), 53 deletions(-) diff --git a/src/components/Calendar/components/DateSelectorComposer/components/DateSelected/index.js b/src/components/Calendar/components/DateSelectorComposer/components/DateSelected/index.js index 2e29e5dc..b6e7c46c 100644 --- a/src/components/Calendar/components/DateSelectorComposer/components/DateSelected/index.js +++ b/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; + }, + }, ); diff --git a/src/components/Calendar/components/DateSelectorComposer/components/MonthSelector/index.js b/src/components/Calendar/components/DateSelectorComposer/components/MonthSelector/index.js index 7cdd74e2..0aa69dc5 100644 --- a/src/components/Calendar/components/DateSelectorComposer/components/MonthSelector/index.js +++ b/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); } diff --git a/src/components/Calendar/components/DateSelectorComposer/components/YearSelector/index.js b/src/components/Calendar/components/DateSelectorComposer/components/YearSelector/index.js index ceb948c0..ec9a4859 100644 --- a/src/components/Calendar/components/DateSelectorComposer/components/YearSelector/index.js +++ b/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); } diff --git a/src/components/Calendar/components/DateSelectorComposer/index.js b/src/components/Calendar/components/DateSelectorComposer/index.js index 55f13bb8..60f07724 100644 --- a/src/components/Calendar/components/DateSelectorComposer/index.js +++ b/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); }, },