@dvrd/dvr-controls 1.1.18 → 1.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.1.18",
+  "version": "1.1.20",
   "description": "Custom web controls",
   "main": "index.ts",
   "files": [
@@ -25,7 +25,7 @@
     ]
   },
   "dependencies": {
-    "@dvrd/idate": "^1.8.8",
+    "@dvrd/idate": "*",
     "@fortawesome/fontawesome-svg-core": "*",
     "@fortawesome/free-brands-svg-icons": "*",
     "@fortawesome/free-regular-svg-icons": "*",

package/src/js/date/dvrdDatePicker.tsx

@@ -18,10 +18,10 @@ import React, {
 import {ChangeFunction, DatePickerTimeMode, ErrorType} from '../util/interfaces';
 import AwesomeIcon from '../icon/awesomeIcon';
 import WithBackground from '../popup/withBackground';
-import DvrdButton from "../button/dvrdButton";
-import {generateComponentId} from "../util/componentUtil";
+import DvrdButton from '../button/dvrdButton';
+import {generateComponentId} from '../util/componentUtil';
 import IDate from '@dvrd/idate';
-import {pad} from "../util/controlUtil";
+import {pad} from '../util/controlUtil';
 import {Swiper, SwiperClass, SwiperSlide} from 'swiper/react';
 import {FreeMode, Mousewheel} from 'swiper/modules';
 import 'swiper/css';
@@ -102,7 +102,7 @@ function DvrdDatePicker(props: Props, ref: ForwardedRef<DVRDDatePickerRef>) {
                        placeholder={placeholder} className='native-date-field' id={`${id}-native`}/>
                 <AwesomeIcon name='calendar-alt' className='calendar-icon' htmlFor={`${id}-native`}/>
             </div>
-        )
+        );
     }
 
     useImperativeHandle(ref, () => ({onOpen: onClickContainer, onClose: onClosePicker}));
@@ -125,7 +125,7 @@ function DvrdDatePicker(props: Props, ref: ForwardedRef<DVRDDatePickerRef>) {
                             open={timePickerOpen} timeMode={timeMode} closeOnChange={closeOnChange}/>}
             {!pickersOnly && <label className='error-label'>{error}</label>}
         </div>
-    )
+    );
 }
 
 interface DatePickerProps {
@@ -148,14 +148,14 @@ function DatePicker(props: DatePickerProps) {
         const padBeforeDays: number[] = [];
         const padAfterDays: number[] = [];
         for (let i = 1; i <= daysInMonth; i++) days.push(i);
-        let firstMonthDay = pickerValue.clone().day(1).weekday();
+        let firstMonthDay = pickerValue.day(1).weekday();
         if (!firstMonthDay) firstMonthDay = 7;
         const padDaysBefore = firstMonthDay - 1;
-        let dayBefore = pickerValue.clone().add(-1, 'month').daysInMonth()
+        let dayBefore = pickerValue.add(-1, 'month').daysInMonth();
         for (let i = 0; i < padDaysBefore; i++)
             padBeforeDays.splice(0, 0, dayBefore--);
 
-        const lastWeekDay = pickerValue.clone().day(daysInMonth).weekday();
+        const lastWeekDay = pickerValue.day(daysInMonth).weekday();
         const padDaysAfter = 7 - lastWeekDay;
         for (let i = 0; i < padDaysAfter; i++)
             padAfterDays.push(i + 1);
@@ -170,30 +170,30 @@ function DatePicker(props: DatePickerProps) {
 
     function onReduce(key: 'year' | 'month') {
         return function () {
-            const value = pickerValue.clone();
-            value.add(-1, key);
-            value.day(Math.min(value.daysInMonth(), value.day()))
+            let value = pickerValue.clone();
+            value = value.add(-1, key);
+            value = value.day(Math.min(value.daysInMonth(), value.day()));
             onChange(false)(value);
-        }
+        };
     }
 
     function onAdd(key: 'year' | 'month') {
         return function () {
-            const value = pickerValue.clone();
-            value.add(1, key);
-            value.day(Math.min(value.daysInMonth(), value.day()))
+            let value = pickerValue.clone();
+            value = value.add(1, key);
+            value = value.day(Math.min(value.daysInMonth(), value.day()));
             onChange(false)(value);
-        }
+        };
     }
 
     function onResetSwitcher(key: 'year' | 'month') {
         return function () {
-            const value = pickerValue.clone();
-            if (key === 'year') value.year(IDate.now().year());
-            else value.month(IDate.now().month());
-            value.day(Math.min(value.daysInMonth(), value.day()))
+            let value = pickerValue.clone();
+            if (key === 'year') value = value.year(IDate.now().year());
+            else value = value.month(IDate.now().month());
+            value = value.day(Math.min(value.daysInMonth(), value.day()));
             onChange(false)(value);
-        }
+        };
     }
 
     function onClickToday() {
@@ -202,24 +202,24 @@ function DatePicker(props: DatePickerProps) {
 
     function onSelectDay(day: number, month?: number, year?: number) {
         return function () {
-            const pickValue = pickerValue.clone();
+            let pickValue = pickerValue.clone();
             if (day || value === null) {
-                pickValue.day(day);
-                if (month !== undefined) pickValue.month(month);
-                if (year !== undefined) pickValue.year(year);
+                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 () {
-            const value = pickerValue.clone();
-            if (kind === 'prev') value.add(-1, 'month');
-            else value.add(1, 'month');
-            value.day(day);
+            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 keyListener(evt: KeyboardEvent) {
@@ -235,29 +235,25 @@ function DatePicker(props: DatePickerProps) {
     }
 
     function onLeftKey(shiftKey: boolean, ctrlKey: boolean) {
-        const value = pickerValue.clone();
         if (shiftKey) {
             if (ctrlKey) onReduce('year')();
             else onReduce('month')();
-        } else onChange(false)(value.add(-1, 'days'));
+        } else onChange(false)(pickerValue.add(-1, 'days'));
     }
 
     function onRightKey(shiftKey: boolean, ctrlKey: boolean) {
-        const value = pickerValue.clone();
         if (shiftKey) {
             if (ctrlKey) onAdd('year')();
             else onAdd('month')();
-        } else onChange(false)(value.add(1, 'days'));
+        } else onChange(false)(pickerValue.add(1, 'days'));
     }
 
     function onUpKey() {
-        const value = pickerValue.clone();
-        onChange(false)(value.add(-7, 'days'));
+        onChange(false)(pickerValue.add(-7, 'days'));
     }
 
     function onDownKey() {
-        const value = pickerValue.clone();
-        onChange(false)(value.add(7, 'days'));
+        onChange(false)(pickerValue.add(7, 'days'));
     }
 
     function addMountClass() {
@@ -273,10 +269,10 @@ function DatePicker(props: DatePickerProps) {
 
     function dateIsDisabled(day: number, month?: number, year?: number) {
         if (!min && !max) return false;
-        const pickValue = pickerValue.clone();
-        pickValue.day(day);
-        if (month !== undefined) pickValue.month(month);
-        if (year !== undefined) pickValue.year(year);
+        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;
         return false;
@@ -286,7 +282,7 @@ function DatePicker(props: DatePickerProps) {
         const icon = kind === 'add' ? 'chevron-right' : 'chevron-left';
         const title = kind === 'add' ? 'Volgende' : 'Vorige';
         const onClick = kind === 'add' ? onAdd(key) : onReduce(key);
-        return <AwesomeIcon name={icon} title={title} className={classNames('switcher-icon', kind)} onClick={onClick}/>
+        return <AwesomeIcon name={icon} title={title} className={classNames('switcher-icon', kind)} onClick={onClick}/>;
     }
 
     function renderTooltipContainer() {
@@ -349,7 +345,7 @@ function DatePicker(props: DatePickerProps) {
                     </div>
                 </div>
             </div>
-        )
+        );
     }
 
     useEffect(() => {
@@ -362,7 +358,7 @@ function DatePicker(props: DatePickerProps) {
         }
         return function () {
             document.removeEventListener('keydown', keyListener);
-        }
+        };
     }, [open]);
 
     function renderDay(day: number, index: number, onClick: MouseEventHandler, className?: string,
@@ -380,7 +376,7 @@ function DatePicker(props: DatePickerProps) {
                  onClick={disabled ? undefined : onClick} key={index}>
                 <span className='day-label'>{day}</span>
             </div>
-        )
+        );
     }
 
     return (
@@ -442,7 +438,7 @@ function DatePicker(props: DatePickerProps) {
                 </div>
             </div>
         </WithBackground>
-    )
+    );
 }
 
 interface TimePickerProps {
@@ -456,7 +452,7 @@ interface TimePickerProps {
 
 function TimePicker(props: TimePickerProps) {
     const {onChange, value, open, onClose, timeMode, closeOnChange} = props;
-    const internalValue = useRef<IDate>(value ?? new IDate('00:00:00', 'HH:mm:ss'));
+    const internalValue = useRef<IDate>(value ?? new IDate('00:00:00', {dateFormat: 'HH:mm:ss', generative: true}));
 
     function onClickNow() {
         internalValue.current = IDate.now();
@@ -469,7 +465,7 @@ function TimePicker(props: TimePickerProps) {
             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);
-        }
+        };
     }
 
     function onSubmit() {
@@ -478,8 +474,10 @@ function TimePicker(props: TimePickerProps) {
     }
 
     function renderTimeContainer() {
-        const renderHours = [DatePickerTimeMode.FULL, DatePickerTimeMode.HOURS_MINUTES, DatePickerTimeMode.HOURS_ONLY].includes(timeMode);
-        const renderMinutes = [DatePickerTimeMode.FULL, DatePickerTimeMode.HOURS_MINUTES, DatePickerTimeMode.MINUTES_ONLY].includes(timeMode);
+        const renderHours = [DatePickerTimeMode.FULL, DatePickerTimeMode.HOURS_MINUTES,
+            DatePickerTimeMode.HOURS_ONLY].includes(timeMode);
+        const renderMinutes = [DatePickerTimeMode.FULL, DatePickerTimeMode.HOURS_MINUTES,
+            DatePickerTimeMode.MINUTES_ONLY].includes(timeMode);
         const renderSeconds = [DatePickerTimeMode.FULL, DatePickerTimeMode.SECONDS_ONLY].includes(timeMode);
         const timeControls: Array<React.ReactElement> = [];
         if (renderHours) timeControls.push(renderTimeSwiper('hour'));
@@ -494,15 +492,15 @@ function TimePicker(props: TimePickerProps) {
                             {control}
                             {index < timeControls.length - 1 && <span className='sep'>:</span>}
                         </Fragment>
-                    )
+                    );
                 })}
                 <div className='vizor bottom'/>
             </div>
-        )
+        );
     }
 
     function renderTimeSwiper(key: 'hour' | 'minute' | 'second') {
-        const _value = value ?? new IDate('00:00:00', 'HH:mm:ss');
+        const _value = value ?? new IDate('00:00:00', {dateFormat: 'HH:mm:ss'});
         let timeValue: number, numSlides: number;
         if (key === 'hour') {
             timeValue = _value.hours();
@@ -527,7 +525,7 @@ function TimePicker(props: TimePickerProps) {
             }} loop slideToClickedSlide centeredSlides>
                 {slideValues.map((value: string, index: number) => <SwiperSlide key={index}>{value}</SwiperSlide>)}
             </Swiper>
-        )
+        );
     }
 
     useEffect(() => {

package/src/js/input/date/dateField.tsx

@@ -301,10 +301,10 @@ export default class DateField extends PureComponent<Props, State> {
         const {value, dateType} = this.props;
         if (value.length) {
             if (dateType === DateType.DATE)
-                return new IDate(value, 'DD-MM-YYYY');
+                return new IDate(value, {dateFormat: 'DD-MM-YYYY'});
             if (dateType === DateType.DATETIME)
-                return new IDate(value, 'DD-MM-YYYY HH:mm');
-            return new IDate(value, 'HH:mm');
+                return new IDate(value, {dateFormat: 'DD-MM-YYYY HH:mm'});
+            return new IDate(value, {dateFormat: 'HH:mm'});
         }
         return null;
     };

package/src/js/input/date/dateFieldController.tsx

@@ -152,9 +152,9 @@ export default class DateFieldController<T extends IDateValue> extends PureCompo
         // Only call onChange when the date is validly (only containing numbers)
         if (!/[a-zA-Z]/.test(value)) {
             let momentValue: IDate;
-            if (dateType === DateType.DATE) momentValue = new IDate(value, 'DD-MM-YYYY');
-            else if (dateType === DateType.TIME) momentValue = new IDate(value, 'HH:mm');
-            else momentValue = new IDate(value, 'DD-MM-YYYY HH:mm');
+            if (dateType === DateType.DATE) momentValue = new IDate(value, {dateFormat: 'DD-MM-YYYY'});
+            else if (dateType === DateType.TIME) momentValue = new IDate(value, {dateFormat: 'HH:mm'});
+            else momentValue = new IDate(value, {dateFormat: 'DD-MM-YYYY HH:mm'});
             switch (returnType) {
                 case DateReturnType.STRING:
                     switch (dateType) {

package/src/js/input/date/datePicker/datePicker.tsx

@@ -5,12 +5,12 @@ import './style/datePicker.scss';
 
 import React from 'react';
 import {PureComponent} from 'react';
-import {DateNumParts, PickerKey} from "../dateField";
-import {ControlContext} from "../../../util/controlContext";
-import {colorIsWhite, convertColor, editColor} from "../../../util/colorUtil";
-import {voidFunction} from "../../../util/controlUtil";
-import classNames from "classnames";
-import {DateTimeParts} from "../dateFieldController";
+import {DateNumParts, PickerKey} from '../dateField';
+import {ControlContext} from '../../../util/controlContext';
+import {colorIsWhite, convertColor, editColor} from '../../../util/colorUtil';
+import {voidFunction} from '../../../util/controlUtil';
+import classNames from 'classnames';
+import {DateTimeParts} from '../dateFieldController';
 import AwesomeIcon from '../../../icon/awesomeIcon';
 import IDate, {IDateValue, MutateKey} from '@dvrd/idate';
 
@@ -77,9 +77,11 @@ export default class DatePicker extends PureComponent<Props> {
         IDate.now().month(index).format('MMMM');
 
     getDaysToRender = (): { day: number, isCurrentMonth: boolean }[] => {
-        const daysToRender: { day: number, isCurrentMonth: boolean }[] = [],
-            currentMoment = this.props.getCurrentMoment(), dayPadding = currentMoment.day(1).weekday() - 1,
-            days = currentMoment.daysInMonth(), maxPrevMonth = currentMoment.subtract(1, 'month').daysInMonth();
+        const daysToRender: { day: number, isCurrentMonth: boolean }[] = [];
+        const currentMoment = this.props.getCurrentMoment();
+        const dayPadding = currentMoment.day(1).weekday() - 1;
+        const days = currentMoment.daysInMonth();
+        const maxPrevMonth = currentMoment.subtract(1, 'month').daysInMonth();
 
         // Add days to pad begin weekdays
         for (let i = dayPadding; i > 0; i--)
@@ -121,7 +123,7 @@ export default class DatePicker extends PureComponent<Props> {
                 <AwesomeIcon name='chevron-right' className='dvr-year-toggle' style={{color: contrast}}
                              onClick={onChange(PickerKey.YEAR, 1)}/>
             </div>
-        )
+        );
     };
 
     renderMonthContainer = () => {
@@ -134,7 +136,7 @@ export default class DatePicker extends PureComponent<Props> {
                 <AwesomeIcon name='chevron-right' className='dvr-month-toggle' onClick={onChange(PickerKey.MONTH, 1)}/>
 
             </div>
-        )
+        );
     };
 
     renderDaysContainer = () => {
@@ -150,7 +152,7 @@ export default class DatePicker extends PureComponent<Props> {
                 ))}
                 {daysToRender.map(this.renderDay)}
             </div>
-        )
+        );
     };
 
     renderDay = (dayData: { day: number, isCurrentMonth: boolean }, index: number) => {
@@ -172,7 +174,7 @@ export default class DatePicker extends PureComponent<Props> {
                            {}} onClick={isDisabled ? voidFunction :
                     onChange(PickerKey.DAY, day, false)}>{day}</label>
             </div>
-        )
+        );
     };
 
     render = () => {
@@ -182,6 +184,6 @@ export default class DatePicker extends PureComponent<Props> {
                 {this.renderMonthContainer()}
                 {this.renderDaysContainer()}
             </div>
-        )
+        );
     };
 }

package/src/js/input/date/input/dateInput.tsx

@@ -173,7 +173,7 @@ export default class DateInput extends PureComponent<Props, State> {
                 'DD-MM-YYYY HH:mm' : 'HH:mm';
         if (indexes.length >= format.length) {
             const stringValue = this.getStringValue(format.length);
-            momentValue = new IDate(stringValue, format);
+            momentValue = new IDate(stringValue, {dateFormat: format});
             if (!/[a-zA-Z]/.test(stringValue) && momentValue.isValid()) onChange(momentValue);
         }
     };