@startlibs/form 1.0.11 → 1.1.0

package/src/DatePicker.jsx

@@ -0,0 +1,733 @@
+import React, {forwardRef, useContext, useEffect, useRef, useState} from 'react'
+import styled, {css} from 'styled-components'
+import _ from 'lodash/fp'
+import {StartlibsContext, useEnsureRef, usePopupToggle, usePrevious} from '@startlibs/core'
+import {formatDate, formatDateToPattern, getColor, getNumberInputType, ifProp, media, parseDate} from '@startlibs/utils'
+import {Icon} from '@startlibs/components'
+import {Field} from './Field'
+import {TextInput} from './TextInput'
+import {enhanceInput, useInput} from './enhanceInput'
+import {darken} from 'polished'
+import {callIfFunction} from '@startlibs/utils'
+
+export const CALENDAR_LEVEL_DAY = 'day'
+export const CALENDAR_LEVEL_MONTH = 'month'
+export const CALENDAR_LEVEL_YEAR = 'year'
+
+const LEVELS = [CALENDAR_LEVEL_DAY, CALENDAR_LEVEL_MONTH, CALENDAR_LEVEL_YEAR]
+
+const DatePickerContainer = styled.div`
+  width: 20rem;
+  position: absolute;
+  z-index: 100;
+  background-color: white;
+  border-radius: 5px;
+  border: 1px solid ${getColor('gray210')};
+  user-select: none;
+  box-shadow: 0 0 4px 0 rgba(0,0,0,0.2);
+  font-size: 13px;
+  text-align: center;
+  animation: 0.2s datePickerFadeInDown ease-out;
+  display: none;
+  @supports (flex-wrap: wrap) {
+    display: block;
+  }
+  input {
+    padding-right: 2.25rem;
+    ${media.mobile`
+      width: 2.5rem;
+    `}
+  }
+  @keyframes datePickerFadeInDown {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+      pointer-events: none;
+    }
+    to {
+      opacity: 1;
+      transform: none;
+      pointer-events: none;
+    }
+  }
+`
+
+const CalendarHeader = styled.div`
+  display: flex;
+  padding: 0.5rem;
+  align-items: center;
+`
+
+const CalendarContentContainer = styled.div`
+  padding: 0 0.5rem 0.5rem 0.5rem;
+  display: flex;  
+  flex-wrap: wrap;
+  justify-content: space-around;
+`
+
+const WeekHeader = styled(CalendarContentContainer)`
+  font-size: 12px;
+  font-weight: 600;
+  cursor: default;
+  span {
+    width: 2.5rem;
+  }
+`
+
+const CalendarClickable = styled.a`
+  :hover, :focus {
+    background-color: rgba(0,0,0,0.1);
+    cursor: pointer;
+  }
+`
+
+const TitleButton = styled(CalendarClickable)`
+  font-size: 16px;
+  font-weight: 600;
+  flex-grow: 1;
+  border-radius: 4px;
+  line-height: 3rem;
+`
+
+const NavigationButton = styled(CalendarClickable)`
+  font-size: 21px;
+  width: 3rem;
+  text-align: center;
+  border-radius: 4px;
+  height: 3rem;
+  ${Icon} {
+    line-height: 3rem;
+  }
+`
+
+const CalendarContent = styled(CalendarClickable)`
+  line-height: 2.25rem;
+  flex-grow: 1;
+  display: inline-block;
+  border-radius: 5px;
+  margin-top: 0.25rem;
+  margin-left: 0.25rem;
+  ${ifProp('isEdge', css`color: rgba(0,0,0,0.4);`)}
+  ${ifProp('isSelected', css`box-shadow: inset 0 0 0 1px ${getColor('gray210')};`)}
+  ${ifProp('isDisabled', 
+  `pointer-events: none;
+   opacity: 0.5;`
+  )}  
+  ${ifProp('isCurrent', css`
+    background: ${getColor('main')};
+    color: #FFF;  
+    :hover {
+      background-color: ${props => darken(0.075, getColor('main')(props))};
+    }
+    ${ifProp('isSelected', 'box-shadow: none;')}
+  `)}  
+`
+
+const DayItem = styled(CalendarContent)`
+  ${props => props.index % 7 === 0 && 'margin-left:0;'}
+  flex-basis: 12%;
+`
+const MonthItem = styled(CalendarContent)`
+  ${props => props.index % 3 === 0 && 'margin-left:0;'}
+  flex-basis: 30%;
+`
+const YearItem = styled(CalendarContent)`
+  ${props => props.index % 3 === 0 && 'margin-left:0;'}
+  flex-basis: 30%;
+`
+
+const DatePickerInputIcon = styled(Icon)`
+  position: absolute;
+  outline: none;
+  bottom: 0;
+  font-size: 21px;
+  line-height: 3rem;
+  right: 0;
+  width: 2rem;
+  cursor: pointer;
+  color: ${getColor('gray150')};
+  :hover {
+    color: ${getColor('main')};
+  }
+  display: none;
+  @supports (flex-wrap: wrap) {
+    display: block;
+  }
+  ${props => props.disabled && 'pointer-events: none;'}
+  ${media.mobile`
+    line-height: 42px;
+    width: 2.25rem;
+  `}
+`
+
+const ClearButton = styled(Icon)`
+  color: ${getColor('gray90')};
+  font-size: 12px;
+  position: absolute;
+  right: 40px;
+  bottom: 0;
+  transform: translateY(-50%);
+  cursor: pointer;
+  width: 1.5rem;
+  line-height: 1.5rem;
+  text-align: center;
+  border-radius: 50%;
+  background: rgba(0,0,0,0.1);
+  :hover {
+    background: #f7d3d4;
+    color: ${getColor('alert')};
+  }
+`
+
+const InputAndIconWrapper = styled.div`
+  position: relative;
+`
+
+const ShortcutsWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 0.5rem 0.25rem 0;
+  color: ${getColor('gray150')};
+  
+  .link {
+    cursor: pointer;
+    font-weight: 600;
+    text-decoration: underline;
+
+    ${media.mobile`
+      font-size: 13px;  
+    `}
+
+    :hover {
+      color: ${getColor('main')};
+    }
+      
+    ${ifProp('disabled', css`
+      pointer-events: none;
+      opacity: 0.5;
+    `)}
+  }
+`
+
+
+const KeyMapper = (level) => {
+  const upDownSpacing = level === CALENDAR_LEVEL_DAY ? 7 : 3
+  return {
+    'ArrowLeft': -1,
+    'ArrowRight': 1,
+    'ArrowUp': -upDownSpacing,
+    'ArrowDown': upDownSpacing
+  }
+}
+
+const getUTCDate = (year,month = 0,date = 1,hour = 0,min =0 ,sec =0 ,ms = 0) => new Date(Date.UTC(year,month,date,hour,min,sec,ms))
+const getUTCDateBefore = (year,month = 0,date = 1,hour = 0,min =0 ,sec =0 ,ms = -1) => new Date(Date.UTC(year,month,date,hour,min,sec,ms))
+
+export const DatePicker = forwardRef((
+  {
+    format = 'dd/MM/yyyy',
+    min = new Date(now().setUTCFullYear(now().getUTCFullYear() - 100)),
+    max = new Date(now().setUTCFullYear(now().getUTCFullYear() + 100)),
+    weekStartsMonday = false,
+    label, mandatory, tabIndex, helpText,
+    path,
+    timezoneOffset = 0,
+    placeholder,
+    onBlur,
+    raw,
+    disabled,
+    level,
+    daysFromNowShortcuts, // Uma array de números representando atalhos de dias a partir de agora, e.g. [0, 1, 3]
+    monthsFromNowShortcuts, // Uma array de números representando atalhos de meses a partir de agora, e.g. [0, 1, 3]
+    ...rest
+  },
+  maybeInputRef
+) => {
+
+  const inputRef = useEnsureRef(maybeInputRef)
+
+  const [formValue, setUnoffsetedFormValue, {hasErrors}] = useInput({path,...rest},raw)
+  const setFormValue = (newV) => setUnoffsetedFormValue(_.isFinite(newV) && newV !== -1 ? newV - (timezoneOffset * 36e5) : newV)
+
+  const popup = usePopupToggle()
+  const calendarElement = useRef()
+
+  const messages = useContext(StartlibsContext).dateMessages
+
+  const time = Number(formValue)
+  const offsetedTime = time + (timezoneOffset * 36e5)
+  const [textValue, setRawTextValue] = useState(!isNaN(time) ? formatDate(new Date(offsetedTime), format, messages) : '')
+  const prevValue = usePrevious(textValue)
+  const [hasFormatErrors, setHasFormatErrors] = useState(false)
+
+  useEffect(() => {
+    if (textValue && prevValue && textValue.length > prevValue.length+1) {
+      setTimeout(()=>inputRef.current.setSelectionRange(inputRef.current.value.length+1,inputRef.current.value.length+1),1);
+    }
+  },[textValue])
+
+  const isShortcutsEnabled = !!daysFromNowShortcuts && daysFromNowShortcuts.length > 0 || !!monthsFromNowShortcuts && monthsFromNowShortcuts.length > 0;
+  
+  const setDateToNDaysFromNow = (daysFromNow) => {
+    const date = new Date(now())
+    date.setUTCDate(date.getUTCDate() + daysFromNow)
+    setFormValue(date.getTime())
+    updateText(date)
+  }
+
+  const setDateToNMonthsFromNow = (monthsFromNow) => {
+    const date = new Date(now())
+    date.setUTCMonth(date.getUTCMonth() + monthsFromNow)
+    setFormValue(date.getTime())
+    updateText(date)
+  }
+
+  const setTextValue = (textValue) => {
+    const value = formValue === -1 || isNaN(formValue) ? now() : new Date(Number(formValue))
+    const date = parseDate(textValue, value, format, messages)
+    if (isNaN(date.getTime())) {
+      const nextMonth = new Date(value)
+      const closestLeapYear = new Date(value)
+      nextMonth.setUTCMonth(value.getUTCMonth() + 1)
+      closestLeapYear.setUTCFullYear(getClosestNextLeapYear(value.getUTCFullYear()))
+      const nextMonthDate = parseDate(textValue, nextMonth, format, messages)
+      const closestLeapYearDate = parseDate(textValue, closestLeapYear, format, messages)
+      setRawTextValue(textValue)
+      setHasFormatErrors(isNaN(nextMonthDate.getTime()) && isNaN(closestLeapYearDate))
+    } else if (!inRange({min,max},date)) {
+      setRawTextValue(textValue)
+      setHasFormatErrors(true)
+      setFormValue(-1)
+    } else {
+      setRawTextValue(textValue)
+      setHasFormatErrors(false)
+      setFormValue(date.getTime())
+    }
+  }
+
+  const updateText = (date) => {
+    setTextValue(formatDate(date, format, messages))
+    setHasFormatErrors(false)
+  }
+
+  const setValue = (value) => {
+    setFormValue(value)
+    updateText(new Date(value))
+  }
+
+  const confirmValue = () => {
+    popup.close()
+    if (!textValue) {
+      setFormValue(undefined)
+      setHasFormatErrors(false)
+    } else {
+      const date = parseDate(textValue, new Date(formValue), format, messages, true)
+      if (isNaN(date.getTime())) {
+        setHasFormatErrors(true)
+        setFormValue(-1)
+      } else {
+        updateText(date)
+      }
+    }
+  }
+
+  const _onBlur = (e) => {
+    const currentTarget = e.currentTarget
+    setTimeout(() => {
+      if (!currentTarget.contains(document.activeElement)) {
+        confirmValue()
+      }
+      callIfFunction(onBlur)
+    }, 1)
+  }
+
+  const onKeyDown = (e) => {
+    const isConfirm = e.key === 'Enter'
+    if (Object.keys(KeyMapper()).indexOf(e.key) >= 0 || isConfirm) {
+      if (popup.isOpen) {
+        e.preventDefault()
+        calendarElement.current.keyDown(e)
+      }
+    }
+    if (e.key === 'Escape') {
+      e.stopPropagation()
+      popup.close()
+      const date = new Date(formValue)
+      if (!isNaN(date.getTime()))
+        updateText(date)
+    }
+  }
+
+  const refocus = (e) => inputRef.current.focus()
+
+  const onClick = e => {
+    if (disabled) return;
+    e.stopPropagation()
+    refocus()
+  }
+
+  const iconClick = e => {
+    e.stopPropagation()
+    if (popup.isOpen) {
+      refocus()
+      popup.close()
+    } else {
+      refocus()
+    }
+  }
+
+  const stopFocusPropagation = (e) => e.stopPropagation()
+
+  // const calendarValue = new Date(!isNaN(time) && formValue !== -1 ? offsetedTime : now())
+  const calendarValue = new Date(!isNaN(time) && formValue !== -1 ? offsetedTime : nowTimeZoneAdjusted(timezoneOffset))
+  calendarValue.setUTCHours(0, 0, 0)
+  return <Field helpText={helpText} label={label} mandatory={mandatory} onClick={onClick} onFocus={popup.open} onBlur={_onBlur}>
+    <InputAndIconWrapper>
+      <TextInput
+        raw
+        disabled={disabled}
+        type={getNumberInputType()}
+        tabIndex={tabIndex}
+        ref={inputRef}
+        constraint={formatDateToPattern(format)}
+        value={textValue}
+        setValue={setTextValue}
+        placeholder={placeholder}
+        hasErrors={hasErrors || hasFormatErrors}
+        onKeyDown={onKeyDown}
+      />
+      <DatePickerInputIcon tabIndex={-1} onFocus={stopFocusPropagation} disabled={disabled} onClick={iconClick} icon="calendar" className={isShortcutsEnabled ? "hasShortcuts" : ""} />
+    </InputAndIconWrapper>
+
+    {(daysFromNowShortcuts?.length > 0 || monthsFromNowShortcuts?.length > 0) ? 
+      <ShortcutsWrapper>
+        <span>Em:</span>
+        {daysFromNowShortcuts?.map((daysFromNow) => (
+          <span class="link"
+            key={`days-from-now-${daysFromNow}`}
+            onClick={() => setDateToNDaysFromNow(daysFromNow)}
+            disabled={disabled}
+          >
+            {daysFromNow} dia{daysFromNow > 1 ? 's' : ''}
+          </span>
+        ))}
+        
+        {monthsFromNowShortcuts?.map((monthsFromNow) => (
+          <span class="link"
+            key={`months-from-now${monthsFromNow}`}
+            onClick={() => setDateToNMonthsFromNow(monthsFromNow)}
+            disabled={disabled}
+          >
+            {monthsFromNow} {monthsFromNow > 1 ? 'meses' : 'mês'}
+          </span>
+        ))}
+      </ShortcutsWrapper>
+    : null}
+  
+    {
+      popup.isOpen &&
+      <DatePickerCalendar
+        raw
+        min={min}
+        max={max}
+        level={level}
+        weekStartsMonday={weekStartsMonday}
+        messages={messages}
+        ref={calendarElement}
+        updateTransientValue={updateText}
+        refocus={refocus}
+        onSelectDay={popup.toggle}
+        setValue={setValue}
+        value={calendarValue.getTime()}
+      />
+    }
+  </Field>
+})
+
+
+const defaultProps = {
+  format: 'dd/MM/yyyy',
+  min: new Date(now().setUTCFullYear(now().getUTCFullYear() - 100)),
+  max: new Date(now().setUTCFullYear(now().getUTCFullYear() + 100)),
+  weekStartsMonday: false
+}
+
+
+
+class RawDatePickerCalendar extends React.Component {
+
+  static defaultProps = defaultProps
+
+  constructor(props) {
+    super(props)
+    this.state = {level: this.props.level || CALENDAR_LEVEL_DAY, currentDate: new Date(props.value || now())}
+  }
+
+  element
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.value !== this.props.value) {
+      this.setState({
+        currentDate: new Date(this.props.value)
+      })
+    }
+  }
+
+  setCurrentDatePlus = (n, type) => () => {
+    const date = new Date(this.state.currentDate.getTime())
+    switch (type) {
+      case CALENDAR_LEVEL_DAY:
+        date.setUTCDate(date.getUTCDate() + n)
+        break
+      case CALENDAR_LEVEL_MONTH:
+        date.setUTCMonth(date.getUTCMonth() + n)
+        break
+      case CALENDAR_LEVEL_YEAR:
+        date.setUTCFullYear(date.getUTCFullYear() + n)
+        break
+      default:
+        break
+    }
+    this.props.updateTransientValue && this.props.updateTransientValue(date)
+    this.setState({currentDate: date})
+  }
+
+  up = () => {
+    this.setState({level: LEVELS[LEVELS.indexOf(this.state.level) + 1]})
+  }
+
+
+  keyDown = (e) => {
+    const {level, currentDate} = this.state
+    const keyMapper = KeyMapper(level)
+    if (keyMapper[e.key]) {
+      e.preventDefault()
+      this.setCurrentDatePlus(keyMapper[e.key], level)()
+    }
+    if (e.key === 'Enter') {
+      e.stopPropagation()
+      e.preventDefault()
+      this.handleChange(currentDate)
+    }
+  }
+
+  handleChange = (date) => {
+    this.props.setValue(date.getTime())
+    if (this.state.level === CALENDAR_LEVEL_DAY && this.props.onSelectDay) {
+      this.props.onSelectDay()
+    }
+    this.setState({level: LEVELS[Math.max(LEVELS.indexOf(this.state.level) - 1, 0)]})
+  }
+
+  getView = () => {
+    switch (this.state.level) {
+      case CALENDAR_LEVEL_DAY:
+        return <Calendar {...this.props} {...this.state} handleChange={this.handleChange}
+                         changeCurrentDate={this.setCurrentDatePlus} up={this.up}/>
+      case CALENDAR_LEVEL_MONTH:
+        return <Months {...this.props} {...this.state} handleChange={this.handleChange}
+                       changeCurrentDate={this.setCurrentDatePlus} up={this.up}/>
+      case CALENDAR_LEVEL_YEAR:
+        return <Years {...this.props} {...this.state} handleChange={this.handleChange}
+                      changeCurrentDate={this.setCurrentDatePlus}/>
+      default:
+        return null
+    }
+  }
+
+  setRef = (e) => {
+    this.element = e
+  }
+
+  render() {
+    return (
+      <div ref={this.setRef} tabIndex={-1} onFocus={this.props.refocus} onKeyDown={this.keyDown}>
+        {this.getView()}
+      </div>
+    )
+
+  }
+}
+const DatePickerCalendar = enhanceInput(RawDatePickerCalendar)
+
+function now() {
+  const dt = new Date()
+  dt.setUTCHours(0, 0, 0, 0)
+  return dt
+}
+
+function nowTimeZoneAdjusted(timezoneOffset){
+  const timezoneOffsetMilliseconds = timezoneOffset * 3600000; // 3600000 milliseconds in an hour
+  const dt = new Date()
+  dt.setTime(dt.getTime() + timezoneOffsetMilliseconds);
+  dt.setUTCHours(0, 0, 0, 0)
+  return dt;
+};
+
+function inRange(context, date) {
+  return context.min <= date && context.max >= date
+}
+
+const mapDays = (currentDate, dayOffset, fn) => {
+  const month = []
+  const iter = new Date(currentDate)
+  iter.setUTCDate(1)
+  let startDay = dayOffset + iter.getUTCDate() - iter.getUTCDay()
+  if (startDay > 1 && startDay < 10) {
+    startDay = startDay - 7
+  }
+  iter.setUTCDate(startDay)
+  for (let week = 0; week < 6; week++) {
+    for (let day = week * 7; day < (week * 7) + 7; day++) {
+      month.push(fn(iter, startDay + day, day))
+      iter.setUTCDate(iter.getUTCDate() + 1)
+    }
+  }
+  return month
+}
+const Calendar = ({messages, max, min, value, currentDate, weekStartsMonday, changeCurrentDate, handleChange, up}) => {
+  const currentMonth = currentDate.getUTCMonth()
+  const dayOffset = weekStartsMonday ? 1 : 0
+  const today = now().getTime()
+  const handleDateChange = (e) => {
+    const date = new Date(currentDate)
+    handleChange(new Date(date.setUTCDate(e.currentTarget.getAttribute('data-day'))))
+  }
+  const previousMonth = getUTCDateBefore(currentDate.getUTCFullYear(),currentDate.getUTCMonth())
+  const nextMonth = getUTCDate(currentDate.getUTCFullYear(),currentDate.getUTCMonth()+1)
+  return (
+    <DatePickerContainer>
+      <CalendarHeader>
+        <NavigationButton disabled={!inRange({min,max},previousMonth)} onClick={changeCurrentDate(-1, CALENDAR_LEVEL_MONTH)}>
+          <Icon icon="arrow-left-line"/>
+        </NavigationButton>
+        <TitleButton onClick={up}>{messages('month', currentMonth)} {currentDate.getUTCFullYear()}</TitleButton>
+        <NavigationButton disabled={!inRange({min,max},nextMonth)} onClick={changeCurrentDate(1, CALENDAR_LEVEL_MONTH)}>
+          <Icon icon="arrow-right-line"/>
+        </NavigationButton>
+      </CalendarHeader>
+      <WeekHeader>
+        {[0, 1, 2, 3, 4, 5, 6].map((day) =>
+          <span key={day}>{messages('day', (day + dayOffset) % 7).slice(0, 3)}</span>
+        )}
+      </WeekHeader>
+      <CalendarContentContainer>
+
+        {mapDays(currentDate, dayOffset, (date, day, index) =>
+          <DayItem
+            index={index}
+            key={date.getTime()}
+            onClick={handleDateChange}
+            data-day={day}
+            isEdge={date.getUTCMonth() !== currentMonth}
+            isCurrent={date.getTime() === currentDate.getTime()}
+            isSelected={date.getTime() === value}
+            isDisabled={!inRange({max, min}, date)}
+            isToday={date.getTime() === today}
+          >
+            {date.getUTCDate()}
+          </DayItem>
+        )}
+      </CalendarContentContainer>
+    </DatePickerContainer>
+  )
+}
+
+const getBeginDate = (year,month) => new Date(year,month,1,0,0,0,0)
+
+const Months = ({currentDate, messages, value, changeCurrentDate, handleChange, up, min, max}) => {
+  const currentMonth = currentDate.getUTCMonth()
+  const sameYear = currentDate.getUTCFullYear() === new Date(value).getUTCFullYear()
+  const selectedMonth = sameYear ? currentDate.getUTCMonth() : undefined
+  const handleMonthChange = (e) => {
+    const date = new Date(currentDate)
+    handleChange(new Date(date.setUTCMonth(e.currentTarget.getAttribute('data-month'))))
+  }
+  return (
+    <DatePickerContainer>
+      <CalendarHeader>
+        <NavigationButton disabled={!inRange({min,max},getUTCDateBefore(currentDate.getUTCFullYear()))} onClick={changeCurrentDate(-1, CALENDAR_LEVEL_YEAR)}>
+          <Icon icon="arrow-left-line"/>
+        </NavigationButton>
+        <TitleButton onClick={up}>{currentDate.getUTCFullYear()}</TitleButton>
+        <NavigationButton disabled={!inRange({min,max},getUTCDate(currentDate.getUTCFullYear()+1))} onClick={changeCurrentDate(1, CALENDAR_LEVEL_YEAR)}>
+          <Icon icon="arrow-right-line"/>
+        </NavigationButton>
+      </CalendarHeader>
+      <CalendarContentContainer>
+        {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((month) =>
+          <MonthItem
+            disabled={!inRange({min,max},getUTCDate(currentDate.getUTCFullYear(),month)) && !inRange({min,max},getUTCDateBefore(currentDate.getUTCFullYear(),month+1))}
+            onClick={handleMonthChange}
+            key={month}
+            data-month={month}
+            index={month}
+            isCurrent={currentMonth === month}
+            isSelected={selectedMonth === month}
+          >
+            {messages('month', month).slice(0, 3)}
+          </MonthItem>
+        )}
+      </CalendarContentContainer>
+    </DatePickerContainer>
+  )
+}
+
+// Given the specified context, produces an HTML string
+// representing months of the year.
+
+function mapYears(currentDate, fn) {
+  const result = []
+  const year = currentDate.getUTCFullYear()
+  for (let i = 0; i < (4 * 3); i++) {
+    result.push(fn(year - (year % 10) - 1 + i, i < 1 || i > 10, i))
+  }
+  return result
+}
+
+const Years = ({value, currentDate, changeCurrentDate, handleChange, min, max}) => {
+  const currentYear = currentDate.getUTCFullYear()
+  const selectedYear = new Date(value).getUTCFullYear()
+  const handleYearChange = (e) => {
+    const date = new Date(currentDate)
+    handleChange(new Date(date.setUTCFullYear(e.currentTarget.getAttribute('data-year'))))
+  }
+  return (
+    <DatePickerContainer>
+      <CalendarHeader>
+        <NavigationButton disabled={!inRange({min,max},getUTCDateBefore(currentDate.getUTCFullYear()))} onClick={changeCurrentDate(-10, CALENDAR_LEVEL_YEAR)}>
+          <Icon icon="arrow-left-line"/>
+        </NavigationButton>
+        <TitleButton>{currentYear - (currentYear % 10)}-{currentYear - (currentYear % 10) + 9}</TitleButton>
+        <NavigationButton disabled={!inRange({min,max},getUTCDate(currentDate.getUTCFullYear()+10))} onClick={changeCurrentDate(10, CALENDAR_LEVEL_YEAR)}>
+          <Icon icon="arrow-right-line"/>
+        </NavigationButton>
+      </CalendarHeader>
+      <CalendarContentContainer>
+        {mapYears(currentDate, (year, outside, i) =>
+          <YearItem
+            key={year}
+            onClick={handleYearChange}
+            disabled={!inRange({min,max},getUTCDate(year)) && !inRange({min,max},getUTCDateBefore(year+1))}
+            data-year={year}
+            index={i}
+            isCurrent={year === currentYear}
+            isSelected={year === selectedYear}
+            isEdge={outside}
+          >
+            {year}
+          </YearItem>
+        )}
+      </CalendarContentContainer>
+    </DatePickerContainer>
+  )
+}
+
+function getClosestNextLeapYear(year) {
+  let y = isNaN(year) ? now().getUTCFullYear() : year
+  while (!((y % 100 === 0) ? (y % 400 === 0) : (y % 4 === 0))) {
+    y++
+  }
+  return y
+}