@dvrd/dvr-controls 1.1.33 → 1.1.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.1.33",
+  "version": "1.1.34",
   "description": "Custom web controls",
   "main": "index.ts",
   "files": [

package/src/js/date/dvrdDatePicker.tsx

@@ -5,15 +5,7 @@ import './style/dvrdDatePicker.scss';
 
 import classNames from 'classnames';
 import React, {
-    ForwardedRef,
-    forwardRef,
-    Fragment,
-    MouseEventHandler,
-    useEffect,
-    useImperativeHandle,
-    useMemo,
-    useRef,
-    useState
+    ForwardedRef, forwardRef, Fragment, MouseEventHandler, useEffect, useImperativeHandle, useMemo, useRef, useState
 } from 'react';
 import {ChangeFunction, DatePickerTimeMode, ErrorType} from '../util/interfaces';
 import AwesomeIcon from '../icon/awesomeIcon';
@@ -21,7 +13,7 @@ import WithBackground from '../popup/withBackground';
 import DvrdButton from '../button/dvrdButton';
 import {generateComponentId} from '../util/componentUtil';
 import IDate from '@dvrd/idate';
-import {pad} from '../util/controlUtil';
+import {pad, padNum} from '../util/controlUtil';
 import {Swiper, SwiperClass, SwiperSlide} from 'swiper/react';
 import {FreeMode, Mousewheel} from 'swiper/modules';
 import 'swiper/css';
@@ -45,7 +37,7 @@ interface Props {
     pickersOnly?: boolean;
 }
 
-export type DVRDDatePickerRef = { onOpen: VoidFunction; onClose: VoidFunction; }
+export type DVRDDatePickerRef = {onOpen: VoidFunction; onClose: VoidFunction;}
 
 function DvrdDatePicker(props: Props, ref: ForwardedRef<DVRDDatePickerRef>) {
     const {
@@ -138,38 +130,72 @@ interface DatePickerProps {
     min?: IDate | string;
 }
 
+type Day = {
+    number: number;
+    value: IDate;
+    currentMonth: boolean;
+}
+
+const beforePadDays = [6, 0, 1, 2, 3, 4, 5];
+
+function buildFirstDaysRow(firstDay: IDate): [Array<Day> | null, IDate] {
+    const padBeforeDays = beforePadDays[firstDay.weekday()];
+    if (!padBeforeDays) return [null, firstDay];
+    const firstRow: Array<Day> = [];
+    for (let offset = padBeforeDays; offset >= 1; offset -= 1) {
+        const dayValue = firstDay.subtract(offset, 'days');
+        firstRow.push({
+            number: dayValue.day(),
+            value: dayValue,
+            currentMonth: false
+        });
+    }
+    let secondRowFirstDay = firstDay.clone();
+    while (firstRow.length < 7) {
+        firstRow.push({
+            number: secondRowFirstDay.day(),
+            value: secondRowFirstDay,
+            currentMonth: true
+        });
+        secondRowFirstDay = secondRowFirstDay.add(1, 'day');
+    }
+    return [firstRow, secondRowFirstDay];
+}
+
+function buildDay(value: IDate, year: number, month: number): Day {
+    return {
+        number: value.day(),
+        value,
+        currentMonth: value.year() === year && value.month() === month
+    };
+}
+
+const daysToRender = 42; // Always render 6 rows of days
+
 function DatePicker(props: DatePickerProps) {
     const {min, max, alwaysShowArrows, open, onClose, value, onChange} = props;
     const divRef = useRef<HTMLDivElement>(null);
     const pickerValue = useMemo(() => value?.clone() ?? IDate.now(), [value]);
-    const [padBeforeDays, days, padAfterDays] = useMemo(() => {
-        const daysInMonth = pickerValue.daysInMonth();
-        const days: number[] = [];
-        const padBeforeDays: number[] = [];
-        const padAfterDays: number[] = [];
-        for (let i = 1; i <= daysInMonth; i++) days.push(i);
-        let firstMonthDay = pickerValue.day(1).weekday();
-        if (!firstMonthDay) firstMonthDay = 7;
-        const padDaysBefore = firstMonthDay - 1;
-        let dayBefore = pickerValue.add(-1, 'month').daysInMonth();
-        for (let i = 0; i < padDaysBefore; i++)
-            padBeforeDays.splice(0, 0, dayBefore--);
-
-        const lastWeekDay = pickerValue.day(daysInMonth).weekday();
-        const padDaysAfter = 7 - lastWeekDay;
-        for (let i = 0; i < padDaysAfter; i++)
-            padAfterDays.push(i + 1);
-
-        if (Math.ceil(padAfterDays.concat(days).concat(padBeforeDays).length / 7) < 6) {
-            let dayAfter = padAfterDays[padAfterDays.length - 1] + 1;
-            for (let i = 0; i < 7; i++)
-                padAfterDays.push(dayAfter++);
+    const days: Array<Day> = useMemo(() => {
+        const month = pickerValue.month();
+        const year = pickerValue.year();
+        const days: Array<Day> = [];
+        let firstDay = new IDate(`${year}-${padNum(month)}-01`);
+        const [firstRow, nextFirstDay] = buildFirstDaysRow(firstDay);
+        if (firstRow) days.push(...firstRow);
+        firstDay = nextFirstDay;
+        while (days.length < daysToRender) {
+            for (let ix = 0; ix < 7; ix++) {
+                days.push(buildDay(firstDay, year, month));
+                firstDay = firstDay.add(1, 'day');
+            }
         }
-        return [padBeforeDays, days, padAfterDays];
+
+        return days;
     }, [pickerValue]);
 
     function onReduce(key: 'year' | 'month') {
-        return function () {
+        return function() {
             let value = pickerValue.clone();
             value = value.add(-1, key);
             value = value.day(Math.min(value.daysInMonth(), value.day()));
@@ -178,7 +204,7 @@ function DatePicker(props: DatePickerProps) {
     }
 
     function onAdd(key: 'year' | 'month') {
-        return function () {
+        return function() {
             let value = pickerValue.clone();
             value = value.add(1, key);
             value = value.day(Math.min(value.daysInMonth(), value.day()));
@@ -187,7 +213,7 @@ function DatePicker(props: DatePickerProps) {
     }
 
     function onResetSwitcher(key: 'year' | 'month') {
-        return function () {
+        return function() {
             let value = pickerValue.clone();
             if (key === 'year') value = value.year(IDate.now().year());
             else value = value.month(IDate.now().month());
@@ -200,25 +226,9 @@ function DatePicker(props: DatePickerProps) {
         onChange(true)(IDate.now());
     }
 
-    function onSelectDay(day: number, month?: number, year?: number) {
-        return function () {
-            let pickValue = pickerValue.clone();
-            if (day || value === null) {
-                pickValue = pickValue.day(day);
-                if (month !== undefined) pickValue = pickValue.month(month);
-                if (year !== undefined) pickValue = pickValue.year(year);
-                onChange(true)(pickValue);
-            }
-        };
-    }
-
-    function onSelectPadDay(day: number, kind: 'prev' | 'next') {
-        return function () {
-            let value = pickerValue.clone();
-            if (kind === 'prev') value = value.add(-1, 'month');
-            else value = value.add(1, 'month');
-            value = value.day(day);
-            onChange(true)(value);
+    function onSelectDay(day: Day) {
+        return function() {
+            onChange(true)(day.value);
         };
     }
 
@@ -267,14 +277,10 @@ function DatePicker(props: DatePickerProps) {
             divRef.current?.classList.remove('switch-mount');
     }
 
-    function dateIsDisabled(day: number, month?: number, year?: number) {
+    function dateIsDisabled(day: Day) {
         if (!min && !max) return false;
-        let pickValue = pickerValue.clone();
-        pickValue = pickValue.day(day);
-        if (month !== undefined) pickValue = pickValue.month(month);
-        if (year !== undefined) pickValue = pickValue.year(year);
-        if (min && new IDate(min).isAfter(pickValue, 'day')) return true;
-        else if (max && new IDate(max).isBefore(pickValue, 'day')) return true;
+        if (min && new IDate(min).isAfter(day.value, 'day')) return true;
+        else if (max && new IDate(max).isBefore(day.value, 'day')) return true;
         return false;
     }
 
@@ -356,25 +362,17 @@ function DatePicker(props: DatePickerProps) {
         } else {
             document.removeEventListener('keydown', keyListener);
         }
-        return function () {
+        return function() {
             document.removeEventListener('keydown', keyListener);
         };
     }, [open]);
 
-    function renderDay(day: number, index: number, onClick: MouseEventHandler, className?: string,
-                       type?: 'prev' | 'next') {
-        let pickValue = pickerValue.clone();
-        if (type === 'prev')
-            pickValue = pickValue.subtract(1, 'month');
-        else if (type === 'next')
-            pickValue = pickValue.add(1, 'month');
-        const month = pickValue.month();
-        const year = pickValue.year();
-        const disabled = dateIsDisabled(day, month, year);
+    function renderDay(day: Day, index: number, onClick: MouseEventHandler, className?: string) {
+        const disabled = dateIsDisabled(day);
         return (
             <div className={classNames('day', disabled && 'disabled', className)}
                  onClick={disabled ? undefined : onClick} key={index}>
-                <span className='day-label'>{day}</span>
+                <span className='day-label'>{day.number}</span>
             </div>
         );
     }
@@ -420,16 +418,11 @@ function DatePicker(props: DatePickerProps) {
                     <div className='day no-select'>
                         <span className='day-label'>Zo</span>
                     </div>
-                    {padBeforeDays.map((day: number, index: number) => {
-                        return renderDay(day, index, onSelectPadDay(day, 'prev'), 'pad', 'prev');
-                    })}
-                    {days.map((day: number, index: number) => {
-                        const isSelected = day === pickerValue.day();
+                    {days.map((day: Day, index: number) => {
+                        const isSelected = day.value.isAt(pickerValue, 'day');
                         return renderDay(day, index, onSelectDay(day),
-                            classNames(isSelected && 'selected', day === 0 && 'hide'));
-                    })}
-                    {padAfterDays.map((day: number, index: number) => {
-                        return renderDay(day, index, onSelectPadDay(day, 'next'), 'pad', 'next');
+                            classNames(isSelected && 'selected', day.number === 0 && 'hide',
+                                !day.currentMonth && 'pad'));
                     })}
                 </div>
                 <div className='actions-container'>
@@ -461,7 +454,7 @@ function TimePicker(props: TimePickerProps) {
     }
 
     function onSlideChange(key: 'hour' | 'minute' | 'second') {
-        return function (swiper: SwiperClass) {
+        return function(swiper: SwiperClass) {
             if (key === 'hour') internalValue.current = internalValue.current.hours(swiper.realIndex);
             if (key === 'minute') internalValue.current = internalValue.current.minutes(swiper.realIndex);
             if (key === 'second') internalValue.current = internalValue.current.seconds(swiper.realIndex);