Merge pull request #4 from optiosteam/CLIENT-1469-improve-date-range-…

…picker CLIENT-1469 improve date range picker
optiosteam · Feb 6, 2023 · 129906b · 129906b
2 parents b779168 + 234b89a
commit 129906b
Show file tree

Hide file tree

Showing 16 changed files with 158 additions and 19 deletions.
diff --git a/.env b/.env
@@ -0,0 +1 @@
+REACT_APP_TRANSLATIONS_URL=https://client.optios.net/api/translations/export/domain
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/DateTimeRangePicker/DatePicker/DatePicker.scss b/src/DateTimeRangePicker/DatePicker/DatePicker.scss
@@ -1,30 +1,42 @@
 $color-highlight: #428be3;
 $color-background-day: rgba(black, .1);
 $color-other-month: rgba(black, .4);
-$color-disabled: rgba(black, .4);
+$color-disabled: rgba(16, 16, 16, 0.3);
+$color-disabled-background: #e6e6e6;
 
 .date-time-range-picker .date-time-range-picker-dates{
   position: relative;
 
   .date-time-range-picker-header {
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
 
     .date-time-range-picker-header-month {
-      width: 19.3em;
       line-height: 2em;
       margin: .3em 0;
       text-align: center;
-
+      padding: 0 .5em;
       + {
         .date-time-range-picker-header-month {
           margin-left: 1em;
         }
       }
     }
+    .date-time-range-picker-header-month:hover{
+      background-color: $color-highlight;
+      color: white;
+      cursor: pointer;
+    }
+    .date-time-range-picker-header-month.year{
+      background-color: $color-disabled-background;
+      color: $color-disabled;
+      pointer: none;
+    }
 
     .date-time-range-picker-header-prev,
-    .date-time-range-picker-header-next {
+    .date-time-range-picker-header-next,
+    .date-time-range-picker-header-prev-year,
+    .date-time-range-picker-header-next-year{
       position: absolute;
       margin: .3em;
       border-radius: 2em;
@@ -45,6 +57,34 @@ $color-disabled: rgba(black, .4);
     .date-time-range-picker-header-next {
       right: 0;
     }
+    .date-time-range-picker-header-prev-year {
+      left: 45px;
+      font-size: 12px;
+      margin-top: 10px;
+    }
+
+    .date-time-range-picker-header-next-year {
+      right: 45px;
+      font-size: 12px;
+      margin-top: 10px;
+    }
+  }
+
+  .date-time-range-picker-year-mode {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    button.monthButton{
+      background-color: white;
+      flex: 0 0 33.3333%;
+      overflow: hidden;
+    }
+    button.monthButton:hover{
+      cursor: pointer;
+      background-color: $color-disabled-background;
+    }
   }
 
   .date-time-range-picker-months {

diff --git a/src/DateTimeRangePicker/DatePicker/DatePicker.tsx b/src/DateTimeRangePicker/DatePicker/DatePicker.tsx
@@ -1,23 +1,29 @@
-import React from 'react'
+import React, {useState} from 'react'
 import moment, {Moment} from 'moment'
 
 import './DatePicker.scss'
 import IProps from './IProps'
 import Month from './Month/Month'
 import Header from './Header/Header'
+import {TCalendarMode} from './TCalendarMode'
+import {YearView} from './YearView/YearView'
 
 const DatePicker: React.FunctionComponent<IProps> = (
     {
         range = false,
         fromDate,
         untilDate,
+        initialDate,
         months = 1,
         onFromDateChanged,
         onUntilDateChanged
     }
 ) => {
-    const [currentDate, setCurrentDate] = React.useState<Moment>(fromDate ? fromDate.clone() : moment())
-    const [hoverDate, setHoverDate] = React.useState<Moment>()
+    const [calendarMode, setCalendarMode] = useState<TCalendarMode>('normal')
+    const [currentDate, setCurrentDate] = useState<Moment>(fromDate
+        ? fromDate.clone()
+        : initialDate ?  initialDate : moment())
+    const [hoverDate, setHoverDate] = useState<Moment | undefined>(initialDate || undefined)
 
     const monthsArray = []
     for (let monthIndex = 0; monthIndex < months; monthIndex++) {
@@ -31,6 +37,16 @@ const DatePicker: React.FunctionComponent<IProps> = (
                 months={months}
                 onPrevMonth={() => setCurrentDate(currentDate.clone().subtract(1, 'month'))}
                 onNextMonth={() => setCurrentDate(currentDate.clone().add(1, 'month'))}
+                onPrevYear={() => setCurrentDate(currentDate.clone().subtract(1, 'year'))}
+                onNextYear={() => setCurrentDate(currentDate.clone().add(1, 'year'))}
+                calendarMode={calendarMode}
+                setCalendarMode={setCalendarMode}
+        />
+        <YearView
+            isRender={calendarMode === 'year'}
+            setCalendarMode={setCalendarMode}
+            currentDate={currentDate}
+            setCurrentDate={setCurrentDate}
         />
         <div className={'date-time-range-picker-months'}>
             {monthsArray.map(

diff --git a/src/DateTimeRangePicker/DatePicker/Header/Header.tsx b/src/DateTimeRangePicker/DatePicker/Header/Header.tsx
@@ -2,22 +2,38 @@ import React from 'react'
 
 import IProps from './IProps'
 
-const Header: React.FunctionComponent<IProps> = ({date, months, onPrevMonth, onNextMonth}) => {
+const Header: React.FunctionComponent<IProps> = ({
+   date,
+   months,
+   onPrevMonth,
+   onNextMonth,
+   calendarMode,
+   setCalendarMode,
+   onPrevYear,
+   onNextYear
+}) => {
     const monthsArray = []
     for (let monthIndex = 0; monthIndex < months; monthIndex++) {
         monthsArray.push(monthIndex)
     }
 
     return <div className={'date-time-range-picker-header'}>
         <button className={'date-time-range-picker-header-prev'} onClick={onPrevMonth} type={'button'}>&laquo;</button>
+        {calendarMode === 'normal' ? null : <button className={'date-time-range-picker-header-prev-year'}
+                 onClick={onPrevYear} type={'button'}>&#60;</button>}
         {monthsArray.map(
             (monthIndex: number) => {
-                return <div className={'date-time-range-picker-header-month'} key={`monthHeader${monthIndex}`}>
-                    {date.clone().add(monthIndex, 'months').format('MMMM YYYY')}
+                return <div className={`date-time-range-picker-header-month ${calendarMode}`}
+                            key={`monthHeader${monthIndex}`}
+                            onClick={() => setCalendarMode('year')}>
+                    {date.clone().add(monthIndex, 'months').format(calendarMode === 'normal' ? 'MMMM YYYY' : 'YYYY')}
                 </div>
             }
         )}
-
+        { calendarMode === 'normal'
+            ? null
+            : <button className={'date-time-range-picker-header-next-year'} onClick={onNextYear}
+                 type={'button'}>&#62;</button> }
         <button className={'date-time-range-picker-header-next'} onClick={onNextMonth} type={'button'}>&raquo;</button>
     </div>
 }

diff --git a/src/DateTimeRangePicker/DatePicker/Header/IProps.ts b/src/DateTimeRangePicker/DatePicker/Header/IProps.ts
@@ -1,10 +1,15 @@
 import moment from 'moment'
+import {TCalendarMode} from '../TCalendarMode'
 
 interface IProps {
     date: moment.Moment,
     months: number,
     onNextMonth: () => void,
     onPrevMonth: () => void
+    onNextYear: () => void
+    onPrevYear: () => void
+    calendarMode: TCalendarMode
+    setCalendarMode: (mode: TCalendarMode) => void
 }
 
 export default IProps
diff --git a/src/DateTimeRangePicker/DatePicker/Header/__tests__/Header.test.tsx b/src/DateTimeRangePicker/DatePicker/Header/__tests__/Header.test.tsx
@@ -11,6 +11,10 @@ describe('Date/time range picker header', () => {
                     months={1}
                     onPrevMonth={() => { return }}
                     onNextMonth={() => { return }}
+                    onNextYear={() => { return }}
+                    onPrevYear={() => { return }}
+                    calendarMode={'normal'}
+                    setCalendarMode={() => { return }}
             />
         )
 
@@ -26,6 +30,10 @@ describe('Date/time range picker header', () => {
                     months={1}
                     onPrevMonth={onPrevMonthHandler}
                     onNextMonth={onNextMonthHandler}
+                    onNextYear={() => { return }}
+                    onPrevYear={() => { return }}
+                    calendarMode={'normal'}
+                    setCalendarMode={() => { return }}
             />
         )
         component.find('.date-time-range-picker-header-prev').simulate('click')

diff --git a/src/DateTimeRangePicker/DatePicker/Header/__tests__/__snapshots__/Header.test.tsx.snap b/src/DateTimeRangePicker/DatePicker/Header/__tests__/__snapshots__/Header.test.tsx.snap
@@ -12,8 +12,9 @@ exports[`Date/time range picker header should render correctly 1`] = `
     «
   </button>
   <div
-    className="date-time-range-picker-header-month"
+    className="date-time-range-picker-header-month normal"
     key="monthHeader0"
+    onClick={[Function]}
   >
     October 2019
   </div>

diff --git a/src/DateTimeRangePicker/DatePicker/IProps.ts b/src/DateTimeRangePicker/DatePicker/IProps.ts
@@ -1,9 +1,10 @@
-import moment, {Moment} from 'moment'
+import {Moment} from 'moment'
 
 interface IProps {
     range: boolean,
-    fromDate?: moment.Moment,
-    untilDate?: moment.Moment,
+    fromDate?: Moment,
+    untilDate?: Moment,
+    initialDate?: Moment
     months: number,
     onFromDateChanged: (date: Moment | undefined) => void
     onUntilDateChanged: (date: Moment | undefined) => void

diff --git a/src/DateTimeRangePicker/DatePicker/TCalendarMode.ts b/src/DateTimeRangePicker/DatePicker/TCalendarMode.ts
@@ -0,0 +1 @@
+export type TCalendarMode = 'normal' | 'year'
diff --git a/src/DateTimeRangePicker/DatePicker/YearView/IProps.ts b/src/DateTimeRangePicker/DatePicker/YearView/IProps.ts
@@ -0,0 +1,9 @@
+import {TCalendarMode} from '../TCalendarMode'
+import {Moment} from 'moment'
+
+export interface IProps {
+    isRender: boolean
+    currentDate: Moment
+    setCurrentDate: (date: Moment) => void
+    setCalendarMode: (mode: TCalendarMode) => void
+}
diff --git a/src/DateTimeRangePicker/DatePicker/YearView/YearView.tsx b/src/DateTimeRangePicker/DatePicker/YearView/YearView.tsx
@@ -0,0 +1,24 @@
+import React, {FunctionComponent} from 'react'
+import {IProps} from './IProps'
+import moment from 'moment/moment'
+
+export const YearView: FunctionComponent<IProps> = ({isRender, currentDate, setCurrentDate, setCalendarMode}) => {
+    if (!isRender) {
+        return null
+    }
+
+    const setMonth = (monthNumber: number) => {
+        setCalendarMode('normal')
+        setCurrentDate(currentDate.set('month', monthNumber))
+    }
+
+    return (
+        <div className={'date-time-range-picker-year-mode'}>
+            {moment.months().map((month, i) => <button
+                onClick={() => setMonth(i)} className={'monthButton'}>
+                {month}
+            </button>
+            )}
+        </div>
+    )
+}
diff --git a/src/DateTimeRangePicker/DateTimeRangePicker.stories.tsx b/src/DateTimeRangePicker/DateTimeRangePicker.stories.tsx
@@ -1,12 +1,18 @@
 import React from 'react'
 import DateTimeRangePicker from './DateTimeRangePicker'
+import moment from 'moment'
 
 export default {
     title: 'DateTimeRangePicker',
     component: DateTimeRangePicker
 }
+const someDate = moment('2021/06/15')
 
-export const basic = () => <DateTimeRangePicker onChange={(date, date2) => console.log(date, date2)}/>
+export const basic = () => <DateTimeRangePicker
+    calendarLocale={'fr'}
+    initialDate={someDate}
+    onChange={(date, date2) => console.log(date, date2)}
+/>
 export const dateTime = () => <DateTimeRangePicker time onChange={(date, date2) => console.log(date, date2)}/>
 export const range  = () => <DateTimeRangePicker range={true} onChange={(date, date2) => console.log(date, date2)} />
 export const rangeWithMultipleMonths  = () => {

diff --git a/src/DateTimeRangePicker/DateTimeRangePicker.tsx b/src/DateTimeRangePicker/DateTimeRangePicker.tsx
@@ -1,5 +1,8 @@
 import React, {useEffect, useState} from 'react'
 import moment, {Moment} from 'moment'
+import 'moment/locale/nl'
+import 'moment/locale/fr'
+import 'moment/locale/de'
 
 import './DateTimeRangePicker.scss'
 import IProps from './IProps'
@@ -15,8 +18,10 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
         inline = true,
         fromDate,
         untilDate,
+        initialDate,
         months = 1,
-        onChange
+        onChange,
+        calendarLocale = 'en'
     }
 ) => {
     const [currentFromDate, setCurrentFromDate] = useState<Moment | undefined>(fromDate ? fromDate.clone() : undefined)
@@ -28,6 +33,7 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
     (untilDate ? untilDate.clone() : undefined
     )
     const [isMounted, setIsMounted] = useState<boolean>(false)
+    moment.locale(calendarLocale)
 
     useEffect(
         () => {
@@ -63,6 +69,7 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
                 months={months}
                 fromDate={currentFromDate}
                 untilDate={currentUntilDate}
+                initialDate={initialDate}
                 onFromDateChanged={
                     (changedDate: Moment | undefined) => {
                         setCurrentFromDate(changedDate)

diff --git a/src/DateTimeRangePicker/IProps.ts b/src/DateTimeRangePicker/IProps.ts
@@ -1,4 +1,5 @@
 import {Moment} from 'moment'
+import {TCalendarLocaleSupport} from './TCalendarLocaleSupport'
 
 interface IProps {
     date?: boolean,
@@ -7,8 +8,10 @@ interface IProps {
     inline?: boolean,
     fromDate?: Moment,
     untilDate?: Moment,
+    initialDate?: Moment
     months?: number,
     onChange?: (fromDateTime: Moment, untilDateTime?: Moment) => void
+    calendarLocale?: TCalendarLocaleSupport
 }
 
 export default IProps
diff --git a/src/DateTimeRangePicker/TCalendarLocaleSupport.ts b/src/DateTimeRangePicker/TCalendarLocaleSupport.ts
@@ -0,0 +1 @@
+export type TCalendarLocaleSupport = 'nl' | 'en' | 'de' | 'fr'
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		REACT_APP_TRANSLATIONS_URL=https://client.optios.net/api/translations/export/domain
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export type TCalendarLocaleSupport = 'nl' \| 'en' \| 'de' \| 'fr'