-
Notifications
You must be signed in to change notification settings - Fork 45
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
calendar component #202
calendar component #202
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import { Component } from 'pet-dex-utilities'; | ||
import './index.scss'; | ||
|
||
const html = ` | ||
<li data-select="date" class="date"><button></button></li> | ||
`; | ||
|
||
export default function DateButton(date) { | ||
Component.call(this, { html }); | ||
|
||
const $button = this.selected.get('date').children[0]; | ||
gustavogularte marked this conversation as resolved.
Show resolved
Hide resolved
|
||
$button.innerText = date; | ||
gustavogularte marked this conversation as resolved.
Show resolved
Hide resolved
|
||
} | ||
|
||
DateButton.prototype = Object.assign( | ||
DateButton.prototype, | ||
Component.prototype, | ||
{ | ||
active() { | ||
this.selected.get('date').classList.add('active'); | ||
gustavogularte marked this conversation as resolved.
Show resolved
Hide resolved
|
||
}, | ||
}, | ||
); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
@use '~styles/base.scss'; | ||
gustavogularte marked this conversation as resolved.
Show resolved
Hide resolved
|
||
@use '~styles/colors.scss' as colors; | ||
@use '~styles/fonts.scss' as fonts; | ||
@use '~styles/breakpoints.scss' as breakpoints; | ||
|
||
.date { | ||
button { | ||
gustavogularte marked this conversation as resolved.
Show resolved
Hide resolved
gustavogularte marked this conversation as resolved.
Show resolved
Hide resolved
|
||
font-family: fonts.$primaryFont; | ||
color: colors.$gray500; | ||
font-size: 1.4rem; | ||
font-weight: fonts.$medium; | ||
line-height: 2rem; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. line height não pode ser "rem" ela tem que ser apenas o número pois ai ela fica relativa a font-size você precisa fazer um calculo para isso, falar com o @Alecell |
||
|
||
border: 0; | ||
|
||
background-color: transparent; | ||
|
||
cursor: pointer; | ||
} | ||
} | ||
|
||
.date.active { | ||
gustavogularte marked this conversation as resolved.
Show resolved
Hide resolved
|
||
button { | ||
gustavogularte marked this conversation as resolved.
Show resolved
Hide resolved
|
||
color: colors.$primary200; | ||
font-size: 2.6rem; | ||
font-weight: fonts.$bold; | ||
line-height: 3.4rem; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. não usar rem no line-height |
||
|
||
padding: 0.6rem 1.2rem; | ||
border: 0.1rem solid rgb(209, 230, 255); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. usar palleta de cores, se a sua cor não existir na palleta você precisa extrair ela do figma e adiciona-la |
||
|
||
background-color: rgba(209, 230, 255, 0.502); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. esse alpha de 0.502 significa oque? evite números magicos usar palleta de cores, se a sua cor não existir na palleta você precisa extrair ela do figma e adiciona-la |
||
border-radius: 1.4rem; | ||
} | ||
} | ||
|
||
@include breakpoints.from667 { | ||
.date { | ||
display: none; | ||
|
||
button { | ||
gustavogularte marked this conversation as resolved.
Show resolved
Hide resolved
|
||
width: 100%; | ||
|
||
font-size: fonts.$md; | ||
line-height: 34px; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. não usar PX nem REM no line-height |
||
} | ||
} | ||
|
||
.date.active { | ||
display: flex; | ||
|
||
button { | ||
gustavogularte marked this conversation as resolved.
Show resolved
Hide resolved
|
||
color: colors.$gray800; | ||
font-size: 2.6rem; | ||
font-weight: fonts.$regular; | ||
|
||
padding: 0.6rem; | ||
border: 0; | ||
|
||
background-color: transparent; | ||
} | ||
} | ||
} |
gustavogularte marked this conversation as resolved.
Show resolved
Hide resolved
gustavogularte marked this conversation as resolved.
Show resolved
Hide resolved
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,219 @@ | ||
import { Component } from 'pet-dex-utilities'; | ||
import './index.scss'; | ||
import { listenBreakpoint } from '../../../../utils/breakpoints/breakpoints'; | ||
import DateButton from '../DateButton'; | ||
|
||
const events = ['changeMonth', 'changeYear']; | ||
gustavogularte marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
const html = ` | ||
<ul data-select="date-selector" class="date-selector"></ul> | ||
`; | ||
|
||
const monthsBR = [ | ||
'Janeiro', | ||
'Fevereiro', | ||
'Março', | ||
'Abril', | ||
'Maio', | ||
'Junho', | ||
'Julho', | ||
'Agosto', | ||
'Setembro', | ||
'Outubro', | ||
'Novembro', | ||
'Dezembro', | ||
]; | ||
|
||
let handleTouchStart; | ||
let handleTouchMove; | ||
Comment on lines
+27
to
+28
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Isso aqui é problemático |
||
function addTouchEvents(selector) { | ||
let startTouch; | ||
|
||
handleTouchStart = (event) => { | ||
startTouch = selector.isDesktop | ||
? event.touches[0].clientY | ||
: event.touches[0].clientX; | ||
}; | ||
|
||
handleTouchMove = (event) => { | ||
event.preventDefault(); | ||
const currentTouch = selector.isDesktop | ||
? event.touches[0].clientY | ||
: event.touches[0].clientX; | ||
let move = 0; | ||
const moveRange = 20; | ||
move = currentTouch - startTouch; | ||
|
||
if (Math.abs(move) > moveRange) { | ||
const isSlideNext = move < 0; | ||
const nextYear = +selector.dates[3].children[0].innerText; | ||
const prevYear = +selector.dates[1].children[0].innerText; | ||
gustavogularte marked this conversation as resolved.
Show resolved
Hide resolved
|
||
const nextMonth = monthsBR.indexOf( | ||
selector.dates[3].children[0].innerText, | ||
); | ||
const prevMonth = monthsBR.indexOf( | ||
selector.dates[1].children[0].innerText, | ||
); | ||
if (isSlideNext && selector.isYear) selector.setYear(nextYear); | ||
if (!isSlideNext && selector.isYear) selector.setYear(prevYear); | ||
if (isSlideNext && !selector.isYear) selector.setMonth(nextMonth); | ||
if (!isSlideNext && !selector.isYear) selector.setMonth(prevMonth); | ||
startTouch = currentTouch; | ||
} | ||
}; | ||
selector.dateSelector.addEventListener('touchstart', handleTouchStart); | ||
selector.dateSelector.addEventListener('touchmove', handleTouchMove); | ||
} | ||
|
||
let handleScroll; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Isso aqui é problemático |
||
function scrollModal(selector) { | ||
const $dateSelector = selector.dateSelector; | ||
|
||
handleScroll = (event) => { | ||
event.preventDefault(); | ||
const isScrollNext = event.deltaY > 0; | ||
|
||
if (selector.isYear) { | ||
const nextYear = +selector.dates[3].children[0].innerText; | ||
const prevYear = +selector.dates[1].children[0].innerText; | ||
const newYear = isScrollNext ? nextYear : prevYear; | ||
selector.setYear(newYear); | ||
} else { | ||
const nextMonth = monthsBR.indexOf( | ||
selector.dates[3].children[0].innerText, | ||
); | ||
const prevMonth = monthsBR.indexOf( | ||
selector.dates[1].children[0].innerText, | ||
); | ||
const newMonth = isScrollNext ? nextMonth : prevMonth; | ||
selector.setMonth(newMonth); | ||
} | ||
}; | ||
|
||
$dateSelector.addEventListener('wheel', handleScroll); | ||
addTouchEvents(selector); | ||
} | ||
|
||
function openModal(selector) { | ||
const $dateSelector = selector.dateSelector; | ||
$dateSelector.classList.add('active'); | ||
gustavogularte marked this conversation as resolved.
Show resolved
Hide resolved
|
||
const $activeDate = selector.date; | ||
$activeDate.scrollIntoView({ | ||
behavior: 'instant', | ||
block: 'center', | ||
inline: 'center', | ||
}); | ||
} | ||
|
||
function closeModal(selector, event) { | ||
const $dateSelector = selector.dateSelector; | ||
if ( | ||
$dateSelector.classList.contains('active') && | ||
!$dateSelector.contains(event.target) | ||
) { | ||
$dateSelector.classList.remove('active'); | ||
gustavogularte marked this conversation as resolved.
Show resolved
Hide resolved
|
||
} | ||
} | ||
|
||
export default function DateSelector(dateArray) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Não está recebendo as props da forma estabelecida |
||
Component.call(this, { html, events }); | ||
|
||
this.dateSelector = this.selected.get('date-selector'); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. por que dessa necessidade de criar um alias? |
||
this.dateArray = dateArray; | ||
|
||
this.dateArray.forEach((item, index) => { | ||
const dateButton = new DateButton(item); | ||
dateButton.mount(this.dateSelector); | ||
if (index === 2) { | ||
dateButton.active(); | ||
} | ||
}); | ||
|
||
this.dates = this.dateSelector.querySelectorAll('li'); | ||
this.date = this.dateSelector.querySelector('li.active'); | ||
this.isYear = !Number.isNaN(+this.date.innerText); | ||
listenBreakpoint('from667', (matches) => { | ||
this.isDesktop = matches; | ||
}); | ||
|
||
this.dateClickHandle = (index) => () => { | ||
if (this.isYear) { | ||
this.setYear(this.dateArray[index]); | ||
} else { | ||
this.setMonth(monthsBR.indexOf(this.dateArray[index])); | ||
} | ||
}; | ||
Comment on lines
+139
to
+145
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Pra que você está armazenando um construtor? |
||
|
||
this.dates.forEach(($date, index) => { | ||
$date.addEventListener('click', this.dateClickHandle(index)); | ||
}); | ||
this.openModalHandle = () => openModal(this); | ||
gustavogularte marked this conversation as resolved.
Show resolved
Hide resolved
|
||
this.dateSelector.addEventListener('click', this.openModalHandle); | ||
|
||
this.closeModalHandle = (event) => closeModal(this, event); | ||
gustavogularte marked this conversation as resolved.
Show resolved
Hide resolved
|
||
window.addEventListener('click', this.closeModalHandle); | ||
|
||
scrollModal(this); | ||
|
||
setTimeout(() => { | ||
this.date.scrollIntoView({ | ||
behavior: 'instant', | ||
block: 'center', | ||
inline: 'center', | ||
}); | ||
}); | ||
gustavogularte marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
this.unmount(() => { | ||
this.dateSelector.removeEventListener('click', this.openModalHandle); | ||
window.removeEventListener('click', this.closeModalHandle); | ||
this.dates.forEach(($date, index) => { | ||
$date.removeEventListener('click', this.dateClickHandle(index)); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. isso não funcionar... a referencia não é a mesma |
||
}); | ||
this.dateSelector.removeEventListener('wheel', handleScroll); | ||
this.dateSelector.removeEventListener('touchstart', handleTouchStart); | ||
this.dateSelector.removeEventListener('touchmove', handleTouchMove); | ||
Comment on lines
+172
to
+174
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Isso não funciona, a referencia pode não ser a mesma |
||
}); | ||
} | ||
|
||
DateSelector.prototype = Object.assign( | ||
DateSelector.prototype, | ||
Component.prototype, | ||
{ | ||
setMonth(newMonth) { | ||
for (let i = 0; i < this.dateArray.length; i += 1) { | ||
const index = (newMonth - (2 - i) + 12) % 12; | ||
this.dateArray[i] = monthsBR[index]; | ||
} | ||
|
||
this.dateArray.forEach((item, index) => { | ||
this.dates[index].children[0].innerText = item; | ||
}); | ||
|
||
this.date.scrollIntoView({ | ||
behavior: 'instant', | ||
block: 'center', | ||
inline: 'center', | ||
}); | ||
|
||
this.emit('changeMonth', newMonth); | ||
gustavogularte marked this conversation as resolved.
Show resolved
Hide resolved
|
||
}, | ||
|
||
setYear(newYear) { | ||
for (let i = 0; i < this.dateArray.length; i += 1) { | ||
this.dateArray[i] = newYear - (2 - i); | ||
} | ||
|
||
this.dateArray.forEach((item, index) => { | ||
this.dates[index].children[0].innerText = item; | ||
}); | ||
|
||
this.date.scrollIntoView({ | ||
behavior: 'instant', | ||
block: 'center', | ||
inline: 'center', | ||
}); | ||
|
||
this.emit('changeYear', newYear); | ||
gustavogularte marked this conversation as resolved.
Show resolved
Hide resolved
|
||
}, | ||
Comment on lines
+182
to
+217
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Isso não está correto, está misturando as interface |
||
}, | ||
); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
parâmetros não está no formato padrão