Rita
parent
d9bd7e68fa
commit
4c4b594b3c
@ -0,0 +1,191 @@ |
||||
import map from 'lodash/map' |
||||
|
||||
import { T9n } from 'features/T9n' |
||||
import { Icon } from 'features/Icon' |
||||
import { OutsideClick } from 'features/OutsideClick' |
||||
import { BodyBackdrop } from 'features/PageLayout' |
||||
import { useHeaderFiltersStore } from 'features/HeaderFilters' |
||||
|
||||
import { Fragment } from 'react' |
||||
import { useDateFilter } from '../DateFilter/hooks' |
||||
import { DatePicker } from '../DatePicker' |
||||
import { Tabs } from '../../store/config' |
||||
|
||||
import { |
||||
TabsList, |
||||
Tab, |
||||
TabTitle, |
||||
MonthsMode, |
||||
YearWrapper, |
||||
ArrowButton, |
||||
Arrow, |
||||
MonthModeYear, |
||||
MonthModeWrapper, |
||||
Months, |
||||
Month, |
||||
MonthName, |
||||
FacrWrapper, |
||||
DateWrapper, |
||||
MonthArrow, |
||||
WeekDaysWrapper, |
||||
FacrMonthWrapper, |
||||
WeekDay, |
||||
WeekName, |
||||
WeekNumber, |
||||
FacrDateButton, |
||||
FacrWeek, |
||||
} from '../DateFilter/styled' |
||||
|
||||
export const FacrDateFilter = () => { |
||||
const { |
||||
close, |
||||
date, |
||||
isMonthMode, |
||||
isOpen, |
||||
months, |
||||
onDateChange, |
||||
onNextClick, |
||||
onNextYearClick, |
||||
onPreviousClick, |
||||
onPrevYearClick, |
||||
onWeekDayClick, |
||||
openDatePicker, |
||||
selectedDate, |
||||
selectedMode, |
||||
selectedMonthModeDate, |
||||
setSelectedMode, |
||||
setSelectedMonthModeDate, |
||||
week, |
||||
} = useDateFilter() |
||||
|
||||
const { |
||||
resetFilters, |
||||
} = useHeaderFiltersStore() |
||||
|
||||
return ( |
||||
<FacrWrapper isMonthMode={isMonthMode}> |
||||
<DateWrapper isMonthMode={isMonthMode}> |
||||
<TabsList> |
||||
<Tab |
||||
aria-pressed={selectedMode === Tabs.MONTH} |
||||
onClick={() => setSelectedMode(Tabs.MONTH)} |
||||
> |
||||
<TabTitle> |
||||
<T9n t='month_title' /> |
||||
</TabTitle> |
||||
</Tab> |
||||
<Tab |
||||
aria-pressed={selectedMode === Tabs.WEEK} |
||||
onClick={() => setSelectedMode(Tabs.WEEK)} |
||||
> |
||||
<TabTitle> |
||||
<T9n t='week_title' /> |
||||
</TabTitle> |
||||
</Tab> |
||||
</TabsList> |
||||
{isMonthMode |
||||
? ( |
||||
<YearWrapper> |
||||
<MonthArrow |
||||
aria-label='Previous year' |
||||
onClick={onPrevYearClick} |
||||
> |
||||
<Arrow direction='left' /> |
||||
</MonthArrow> |
||||
<MonthModeYear> |
||||
{selectedMonthModeDate.getFullYear()} |
||||
</MonthModeYear> |
||||
<MonthArrow |
||||
aria-label='Next year' |
||||
onClick={onNextYearClick} |
||||
> |
||||
<Arrow direction='right' /> |
||||
</MonthArrow> |
||||
</YearWrapper> |
||||
) |
||||
: ( |
||||
<FacrMonthWrapper> |
||||
<MonthModeYear onClick={openDatePicker}> |
||||
{date.month} {' '} {date.year} |
||||
</MonthModeYear> |
||||
<FacrDateButton isActive={isOpen} onClick={openDatePicker}> |
||||
<Icon refIcon='Calendar' color='#fff' /> |
||||
</FacrDateButton> |
||||
</FacrMonthWrapper> |
||||
)} |
||||
</DateWrapper> |
||||
|
||||
{isMonthMode |
||||
? ( |
||||
<MonthsMode> |
||||
<MonthModeWrapper isMonthMode={isMonthMode}> |
||||
<Months> |
||||
{ |
||||
map(months, (day) => ( |
||||
<Month |
||||
key={day.name} |
||||
selected={day.date.getMonth() === selectedMonthModeDate.getMonth()} |
||||
onClick={() => setSelectedMonthModeDate(day.date)} |
||||
> |
||||
<MonthName>{day.name}</MonthName> |
||||
</Month> |
||||
)) |
||||
} |
||||
</Months> |
||||
</MonthModeWrapper> |
||||
</MonthsMode> |
||||
) |
||||
: ( |
||||
<WeekDaysWrapper> |
||||
<ArrowButton |
||||
aria-label='Previous week' |
||||
onClick={onPreviousClick} |
||||
> |
||||
<Arrow direction='left' /> |
||||
</ArrowButton> |
||||
<FacrWeek> |
||||
{ |
||||
map(week, (day) => ( |
||||
<WeekDay |
||||
key={day.name} |
||||
selected={day.date.getDate() === selectedDate.getDate()} |
||||
onClick={() => { |
||||
if (day.date.getDate() !== selectedDate.getDate()) { |
||||
onWeekDayClick(day.date) |
||||
} else { |
||||
resetFilters() |
||||
} |
||||
}} |
||||
> |
||||
<WeekName>{day.name.slice(0, 3)}</WeekName> |
||||
<WeekNumber>{day.date.getDate()}</WeekNumber> |
||||
</WeekDay> |
||||
)) |
||||
} |
||||
</FacrWeek> |
||||
<ArrowButton |
||||
aria-label='Next week' |
||||
onClick={onNextClick} |
||||
> |
||||
<Arrow direction='right' /> |
||||
</ArrowButton> |
||||
</WeekDaysWrapper> |
||||
|
||||
)} |
||||
{ |
||||
isOpen && ( |
||||
<Fragment> |
||||
<OutsideClick onClick={close}> |
||||
<DatePicker |
||||
open |
||||
selected={selectedDate} |
||||
onChange={onDateChange} |
||||
/> |
||||
</OutsideClick> |
||||
<BodyBackdrop /> |
||||
</Fragment> |
||||
) |
||||
} |
||||
</FacrWrapper> |
||||
) |
||||
} |
||||
@ -1,2 +1,3 @@ |
||||
export * from './components/DateFilter' |
||||
export * from './components/FacrDateFilter' |
||||
export * from './store' |
||||
|
||||
Loading…
Reference in new issue