Issue 27 - Componente de Calendário

src/components/Button/index.scss

@@ -1,36 +1,36 @@
-@use '~styles/colors.scss' as colors;
-
-.button {
-  font-family: 'Noto Sans', sans-serif;
-  color: rgb(255, 255, 255);
-  font-size: 1.6rem;
-  font-weight: 500;
-
-  padding: 1.6rem;
-  border: unset;
-
-  background-color: colors.$primary200;
-  border-radius: 1.4rem;
-
-  transition: 0.3s ease-in-out;
-
-  cursor: pointer;
-  appearance: none;
-
-  &--block {
-    width: 100%;
-
-    display: block;
-  }
-
-  &:hover:not(:disabled) {
-    background: colors.$primary600;
-    transform: scale(1.02);
-  }
-
-  &:disabled {
-    background: colors.$gray600;
-
-    cursor: not-allowed;
-  }
-}
+@use '~styles/colors.scss' as colors;
+
+.button {
+  font-family: 'Noto Sans', sans-serif;
+  color: colors.$secondary100;
+  font-size: 1.6rem;
+  font-weight: 500;
+
+  padding: 1.6rem;
+  border: unset;
+
+  background-color: colors.$primary200;
+  border-radius: 1.4rem;
+
+  transition: 0.3s ease-in-out;
+
+  cursor: pointer;
+  appearance: none;
+
+  &--block {
+    width: 100%;
+
+    display: block;
+  }
+
+  &:hover:not(:disabled) {
+    background: colors.$primary600;
+    transform: scale(1.02);
+  }
+
+  &:disabled {
+    background: colors.$gray600;
+
+    cursor: not-allowed;
+  }
+}

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

@@ -0,0 +1,31 @@
+import { Component } from 'pet-dex-utilities';
+import './index.scss';
+
+const events = ['item:click'];
+
+const html = `
+  <span class="date-selected" data-select="date-selected"></span>
+`;
+
+export default function DateSelected(date) {
+  Component.call(this, { html, events });
+
+  this.$dateSelected = this.selected.get('date-selected');
+  this.setDate(date);
+
+  this.emitClickevent = () => {
+    this.emit('item:click');
+  };
+
+  this.$dateSelected.addEventListener('click', this.emitClickevent);
+}
+
+DateSelected.prototype = Object.assign(
+  DateSelected.prototype,
+  Component.prototype,
+  {
+    setDate(date) {
+      this.$dateSelected.innerText = date;
+    },
+  },
+);

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

@@ -0,0 +1,16 @@
+@use '~styles/base.scss';
+@use '~styles/colors.scss' as colors;
+@use '~styles/fonts.scss' as fonts;
+@use '~styles/breakpoints.scss' as breakpoints;
+
+.date-selected {
+  font-family: fonts.$primaryFont;
+  color: colors.$gray800;
+  font-size: fonts.$lg;
+  font-weight: fonts.$regular;
+
+  &:hover {
+    color: colors.$primary200;
+    font-weight: fonts.$semiBold;
+  }
+}

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

@@ -0,0 +1,143 @@
+import { Component } from 'pet-dex-utilities';
+import { makeSwipable } from '~src/utils/swiper';
+import SelectorItem from '../SelectorItem';
+import { MONTHS } from '../../../../utils/months';
+import './index.scss';
+
+const events = ['month:change', 'selector:click'];
+
+const html = `
+ <div class="month-selector" data-select="month-selector">
+    <div>
+      <div data-select="month-list">
+        <ul data-select="list-content">
+        </ul>
+      </div>
+    </div>
+  </div>
+`;
+
+export default function MonthSelector(dateArray) {
+  Component.call(this, { html, events });
+
+  this.dateArray = dateArray;
+  this.$monthSelector = this.selected.get('month-selector');
+  this.$dateList = this.selected.get('month-list');
+  this.$listContent = this.selected.get('list-content');
+
+  this.itemCount = this.dateArray.length;
+  this.columnWidth = 150;
+  this.activeColumnWidth = 176;
+  this.nodePadding = 6;
+  this.scrollLeft = this.$monthSelector.scrollLeft;
+
+  const swiper = makeSwipable(this.$monthSelector);
+
+  const handleItemClick = (index) => {
+    const itemScroll =
+      index * this.columnWidth -
+      (this.viewportWidth / 2 - this.columnWidth / 2);
+    this.$monthSelector.scrollLeft = itemScroll;
+  };
+
+  const emitMonthChangeEvent = (month) => {
+    const newMonth = MONTHS.indexOf(month);
+    this.emit('month:change', newMonth);
+  };
+
+  setTimeout(() => {
+    this.viewportWidth = this.$monthSelector.offsetWidth;
+
+    const renderWindow = () => {
+      this.totalContentWidth =
+        (this.itemCount - 1) * this.columnWidth + this.activeColumnWidth;
+
+      this.startNode =
+        Math.floor(this.scrollLeft / this.columnWidth) - this.nodePadding;
+      this.startNode = Math.max(0, this.startNode);
+
+      this.visibleNodesCount =
+        Math.ceil(this.viewportWidth / this.columnWidth) + 2 * this.nodePadding;
+      this.visibleNodesCount = Math.min(
+        this.itemCount - this.startNode,
+        this.visibleNodesCount,
+      );
+
+      this.offsetX = this.startNode * this.columnWidth;
+
+      this.$dateList.style.width = `${this.totalContentWidth}px`;
+      this.$listContent.style.transform = `translateX(${this.offsetX}px)`;
+
+      this.$listContent.innerHTML = '';
+      this.visibleChildren = new Array(this.visibleNodesCount)
+        .fill(null)
+        .map(
+          (_, index) =>
+            new SelectorItem(this.dateArray[index + this.startNode]),
+        );
+
+      this.visibleChildren.forEach((selectorItem, index) => {
+        selectorItem.mount(this.$listContent);
+        selectorItem.listen('item:click', () =>
+          handleItemClick(index + this.startNode),
+        );
+        selectorItem.listen('item:change', (item) =>
+          emitMonthChangeEvent(item),
+        );
+
+        if (index === 7) {
+          selectorItem.active();
+        }
+      });
+    };
+
+    this.$monthSelector.addEventListener('scroll', (e) => {
+      if (this.animationFrame) {
+        cancelAnimationFrame(this.animationFrame);
+      }
+      this.animationFrame = requestAnimationFrame(() => {
+        this.scrollLeft = e.target.scrollLeft;
+        renderWindow();
+
+        const activeItem = this.$dateList.querySelector(
+          'selector-item--active',
+        );
+        if (activeItem) {
+          activeItem.scrollIntoView({
+            inline: 'center',
+            behavior: 'smooth',
+          });
+        }
+      });
+    });
+
+    swiper.left(() => {
+      this.scrollLeft = Math.max(this.scrollLeft - this.columnWidth, 0);
+      this.$monthSelector.scrollLeft = this.scrollLeft;
+      renderWindow();
+    });
+
+    swiper.right(() => {
+      this.scrollLeft = Math.min(
+        this.scrollLeft + this.columnWidth,
+        this.totalContentWidth - this.viewportWidth,
+      );
+      this.$monthSelector.scrollLeft = this.scrollLeft;
+      renderWindow();
+    });
+
+    const scrollToMiddle = () => {
+      this.scrollLeft = this.totalContentWidth / 2 - this.viewportWidth / 2;
+      this.$monthSelector.scrollLeft = this.scrollLeft;
+    };
+
+    renderWindow();
+    scrollToMiddle();
+  }, 0);
+}
+
+MonthSelector.prototype = Object.assign(
+  MonthSelector.prototype,
+  Component.prototype,
+  {},
+);

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

@@ -0,0 +1,31 @@
+@use '~styles/base.scss';
+@use '~styles/colors.scss' as colors;
+@use '~styles/fonts.scss' as fonts;
+@use '~styles/breakpoints.scss' as breakpoints;
+
+.month-selector {
+  overflow: auto;
+
+  display: flex;
+  flex-direction: row;
+
+  margin-bottom: 2.4rem;
+
+  padding-bottom: 2.4rem;
+
+  border-bottom: 0.1rem solid colors.$gray150;
+
+  box-sizing: border-box;
+
+  scroll-snap-type: x proximity;
+
+  scrollbar-width: none;
+
+  [data-select='list-content'] {
+    width: fit-content;
+
+    display: flex;
+
+    align-items: center;
+  }
+}

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

@@ -0,0 +1,36 @@
+import { Component } from 'pet-dex-utilities';
+import './index.scss';
+
+const events = ['item:change', 'item:click'];
+
+const html = `
+	<li class="selector-item" data-select="selector-item"></li>
+`;
+
+export default function SelectorItem(item) {
+  Component.call(this, { html, events });
+  this.item = item;
+  this.$selectorItem = this.selected.get('selector-item');
+  this.$selectorItem.innerText = this.item;
+
+  if (typeof this.item === 'string') this.$selectorItem.style.width = '150px';
+
+  if (typeof this.item === 'number') this.$selectorItem.style.width = '70px';
+
+  this.emitClickEvent = () => {
+    this.emit('item:click');
+  };
+
+  this.$selectorItem.addEventListener('click', this.emitClickEvent);
+}
+
+SelectorItem.prototype = Object.assign(
+  SelectorItem.prototype,
+  Component.prototype,
+  {
+    active() {
+      this.$selectorItem.classList.add('selector-item--active');
+      this.emit('item:change', this.item);
+    },
+  },
+);

src/components/Calendar/components/DateSelectorComposer/components/SelectorItem/index.scss

@@ -0,0 +1,27 @@
+@use '~styles/base.scss';
+@use '~styles/colors.scss' as colors;
+@use '~styles/fonts.scss' as fonts;
+@use '~styles/breakpoints.scss' as breakpoints;
+
+.selector-item {
+  font-family: fonts.$primaryFont;
+  color: colors.$gray700;
+
+  text-align: center;
+  font-size: fonts.$xs;
+  font-weight: fonts.$medium;
+
+  scroll-snap-align: center;
+
+  &--active {
+    color: colors.$primary200;
+    font-size: fonts.$lg;
+    font-weight: fonts.$semiBold;
+
+    padding: 0.6rem 1.2rem;
+    border: 1px solid colors.$blue100;
+
+    background-color: rgba(209, 230, 255, 0.5);
+    border-radius: 1.4rem;
+  }
+}

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

@@ -0,0 +1,29 @@
+import { Component } from 'pet-dex-utilities';
+import './index.scss';
+
+const events = ['item:change', 'item:click'];
+
+const html = `
+    <li class="selector-modal__item" data-select="modal-item"></li>
+`;
+
+export default function ModalItem(item) {
+  Component.call(this, { html, events });
+
+  this.item = item;
+  this.$modalItem = this.selected.get('modal-item');
+  this.$modalItem.innerText = this.item;
+
+  const emitEventClick = () => {
+    this.emit('item:click', this.item);
+  };
+
+  this.$modalItem.addEventListener('click', () => emitEventClick());
+}
+
+ModalItem.prototype = Object.assign(ModalItem.prototype, Component.prototype, {
+  active() {
+    this.$modalItem.classList.add('selector-modal__item--active');
+    this.emit('item:change', this.item);
+  },
+});