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/DateFilter' |
||||||
|
export * from './components/FacrDateFilter' |
||||||
export * from './store' |
export * from './store' |
||||||
|
|||||||
Loading…
Reference in new issue