@dvrd/dvr-controls 1.0.44 → 1.0.46

package/src/js/date/dvrdDatePicker.tsx

@@ -5,7 +5,7 @@ import './style/dvrdDatePicker.scss';
 
 import classNames from 'classnames';
 import {Moment} from 'moment';
-import React, {PureComponent, useMemo, useState} from 'react';
+import React, {MouseEventHandler, useEffect, useMemo, useRef, useState} from 'react';
 import {ChangeFunction, ErrorType} from '../util/interfaces';
 import AwesomeIcon from '../icon/awesomeIcon';
 import {toMoment} from '../util/momentUtil';
@@ -26,12 +26,14 @@ interface Props {
     alwaysShowArrows?: boolean;
     useMobileNative?: boolean;
     id?: string;
+    max?: Moment | string;
+    min?: Moment | string;
 }
 
 export default function DvrdDatePicker(props: Props) {
     const {
         onChange, className, closeOnChange, error, label, value, placeholder, disabled, alwaysShowArrows,
-        useMobileNative
+        useMobileNative, max, min
     } = props;
     const [pickerOpen, setPickerOpen] = useState(false);
     const dateFormat = useMemo(() => {
@@ -80,7 +82,7 @@ export default function DvrdDatePicker(props: Props) {
                 <AwesomeIcon name='calendar-alt' className='calendar-icon'/>
             </div>
             <Picker onClose={onClosePicker} onChange={onChangePicker} open={pickerOpen} value={value}
-                    alwaysShowArrows={alwaysShowArrows}/>
+                    alwaysShowArrows={alwaysShowArrows} max={max} min={min}/>
             <label className='error-label'>{error}</label>
         </div>
     )
@@ -92,121 +94,162 @@ interface PickerProps {
     value: Moment | null;
     open: boolean;
     alwaysShowArrows?: boolean;
+    max?: Moment | string;
+    min?: Moment | string;
 }
 
-class Picker extends PureComponent<PickerProps> {
-    private ref: HTMLDivElement | null = null;
+function Picker(props: PickerProps) {
+    const {min, max, alwaysShowArrows, open, onClose, value, onChange} = props;
+    const divRef = useRef<HTMLDivElement>(null);
+    const pickerValue = useMemo(() => toMoment(value), [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.clone().date(1).day();
+        if (!firstMonthDay) firstMonthDay = 7;
+        const padDaysBefore = firstMonthDay - 1;
+        let dayBefore = pickerValue.clone().add(-1, 'month').daysInMonth()
+        for (let i = 0; i < padDaysBefore; i++)
+            padBeforeDays.splice(0, 0, dayBefore--);
 
-    getPickerValue = (): Moment => toMoment(this.props.value);
+        const lastWeekDay = pickerValue.clone().date(daysInMonth).day();
+        const padDaysAfter = 7 - lastWeekDay;
+        for (let i = 0; i < padDaysAfter; i++)
+            padAfterDays.push(i + 1);
 
-    onReduce = (key: 'year' | 'month') => () => {
-        const {onChange} = this.props, pickerValue = this.getPickerValue();
-        pickerValue.add(-1, key);
-        pickerValue.date(Math.min(pickerValue.daysInMonth(), pickerValue.date()))
-        onChange(false)(pickerValue);
-    };
+        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++);
+        }
+        return [padBeforeDays, days, padAfterDays];
+    }, [pickerValue]);
+
+    function onReduce(key: 'year' | 'month') {
+        return function () {
+            const value = pickerValue.clone();
+            value.add(-1, key);
+            value.date(Math.min(value.daysInMonth(), value.date()))
+            onChange(false)(value);
+        }
+    }
 
-    onAdd = (key: 'year' | 'month') => () => {
-        const {onChange} = this.props, pickerValue = this.getPickerValue();
-        pickerValue.add(1, key);
-        pickerValue.date(Math.min(pickerValue.daysInMonth(), pickerValue.date()))
-        onChange(false)(pickerValue);
-    };
+    function onAdd(key: 'year' | 'month') {
+        return function () {
+            const value = pickerValue.clone();
+            value.add(1, key);
+            value.date(Math.min(value.daysInMonth(), value.date()))
+            onChange(false)(value);
+        }
+    }
 
-    onResetSwitcher = (key: 'year' | 'month') => () => {
-        const {onChange} = this.props, pickerValue = this.getPickerValue();
-        if (key === 'year') pickerValue.year(toMoment().year());
-        else pickerValue.month(toMoment().month());
-        pickerValue.date(Math.min(pickerValue.daysInMonth(), pickerValue.date()))
-        onChange(false)(pickerValue);
+    function onResetSwitcher(key: 'year' | 'month') {
+        return function () {
+            const value = pickerValue.clone();
+            if (key === 'year') value.year(toMoment().year());
+            else value.month(toMoment().month());
+            value.date(Math.min(value.daysInMonth(), value.date()))
+            onChange(false)(value);
+        }
     }
 
-    onClickToday = () => {
-        const {onChange} = this.props;
+    function onClickToday() {
         onChange(true)(toMoment());
-    };
+    }
 
-    onSelectDay = (day: number, month?: number, year?: number) => () => {
-        const {onChange, value} = this.props, pickerValue = this.getPickerValue();
-        if (day || value === null) {
-            pickerValue.date(day);
-            if (month !== undefined) pickerValue.month(month);
-            if (year !== undefined) pickerValue.year(year);
-            onChange(true)(pickerValue);
+    function onSelectDay(day: number, month?: number, year?: number) {
+        return function () {
+            const pickValue = pickerValue.clone();
+            if (day || value === null) {
+                pickValue.date(day);
+                if (month !== undefined) pickValue.month(month);
+                if (year !== undefined) pickValue.year(year);
+                onChange(true)(pickValue);
+            }
         }
     }
 
-    onSelectPadDay = (day: number, kind: 'prev' | 'next') => () => {
-        const {onChange} = this.props, pickerValue = this.getPickerValue();
-        const value = pickerValue.clone();
-        if (kind === 'prev') value.add(-1, 'month');
-        else value.add(1, 'month');
-        value.date(day);
-        onChange(true)(value);
-    };
+    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.date(day);
+            onChange(true)(value);
+        }
+    }
 
-    keyListener = (evt: KeyboardEvent) => {
-        const {key, shiftKey, ctrlKey} = evt, {onClose} = this.props;
+    function keyListener(evt: KeyboardEvent) {
+        const {key, shiftKey, ctrlKey} = evt;
         if (['ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown', 'Enter'].includes(key)) {
             evt.preventDefault();
         }
-        if (key === 'ArrowLeft') {
-            this.onLeftKey(shiftKey, ctrlKey);
-        } else if (key === 'ArrowRight') {
-            this.onRightKey(shiftKey, ctrlKey);
-        } else if (key === 'ArrowUp') {
-            this.onUpKey();
-        } else if (key === 'ArrowDown') {
-            this.onDownKey();
-        } else if (key === 'Enter') {
-            onClose();
-        }
-    };
+        if (key === 'ArrowLeft') onLeftKey(shiftKey, ctrlKey);
+        else if (key === 'ArrowRight') onRightKey(shiftKey, ctrlKey);
+        else if (key === 'ArrowUp') onUpKey();
+        else if (key === 'ArrowDown') onDownKey();
+        else if (key === 'Enter') onClose();
+    }
 
-    onLeftKey = (shiftKey: boolean, ctrlKey: boolean) => {
-        const {onChange} = this.props, pickerValue = this.getPickerValue()
+    function onLeftKey(shiftKey: boolean, ctrlKey: boolean) {
+        const value = pickerValue.clone();
         if (shiftKey) {
-            if (ctrlKey) this.onReduce('year')();
-            else this.onReduce('month')();
-        } else onChange(false)(pickerValue.add(-1, 'd'));
+            if (ctrlKey) onReduce('year')();
+            else onReduce('month')();
+        } else onChange(false)(value.add(-1, 'days'));
     }
 
-    onRightKey = (shiftKey: boolean, ctrlKey: boolean) => {
-        const {onChange} = this.props, pickerValue = this.getPickerValue();
+    function onRightKey(shiftKey: boolean, ctrlKey: boolean) {
+        const value = pickerValue.clone();
         if (shiftKey) {
-            if (ctrlKey) this.onAdd('year')();
-            else this.onAdd('month')();
-        } else onChange(false)(pickerValue.add(1, 'd'));
+            if (ctrlKey) onAdd('year')();
+            else onAdd('month')();
+        } else onChange(false)(value.add(1, 'days'));
     }
 
-    onUpKey = () => {
-        const {onChange} = this.props, pickerValue = this.getPickerValue();
-        onChange(false)(pickerValue.add(-7, 'd'));
+    function onUpKey() {
+        const value = pickerValue.clone();
+        onChange(false)(value.add(-7, 'days'));
     }
 
-    onDownKey = () => {
-        const {onChange} = this.props, pickerValue = this.getPickerValue();
-        onChange(false)(pickerValue.add(7, 'd'));
+    function onDownKey() {
+        const value = pickerValue.clone();
+        onChange(false)(value.add(7, 'days'));
     }
 
-    addMountClass = () => {
-        if (!this.ref?.classList.contains('switch-mount'))
-            this.ref?.classList.add('switch-mount');
-    };
+    function addMountClass() {
+        const div = divRef.current;
+        if (div?.classList.contains('switch-mount'))
+            div.classList.add('switch-mount');
+    }
 
-    removeMountClass = () => {
-        if (!this.props.alwaysShowArrows)
-            this.ref?.classList.remove('switch-mount');
-    };
+    function removeMountClass() {
+        if (!alwaysShowArrows)
+            divRef.current?.classList.remove('switch-mount');
+    }
+
+    function dateIsDisabled(day: number, month?: number, year?: number) {
+        if (!min && !max) return false;
+        const pickValue = pickerValue.clone();
+        pickValue.date(day);
+        if (month !== undefined) pickValue.month(month);
+        if (year !== undefined) pickValue.year(year);
+        if (min && toMoment(min).isAfter(pickValue, 'date')) return true;
+        else if (max && toMoment(max).isBefore(pickValue, 'date')) return true;
+        return false;
+    }
 
-    renderSwitcher = (key: 'year' | 'month', kind: 'add' | 'reduce') => {
-        const icon = kind === 'add' ? 'chevron-right' : 'chevron-left',
-            title = kind === 'add' ? 'Volgende' : 'Vorige',
-            onClick = kind === 'add' ? this.onAdd(key) : this.onReduce(key);
+    function renderSwitcher(key: 'year' | 'month', kind: 'add' | 'reduce') {
+        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}/>
     }
 
-    renderTooltipContainer = () => {
+    function renderTooltipContainer() {
         return (
             <div className='tooltip-container'>
                 <AwesomeIcon name='question-circle' className='tooltip-icon' prefix='far'/>
@@ -269,113 +312,94 @@ class Picker extends PureComponent<PickerProps> {
         )
     }
 
-    componentDidUpdate = (prevProps: PickerProps) => {
-        const {open} = this.props, prevOpen = prevProps.open;
-        if (open && !prevOpen) {
-            document.addEventListener('keydown', this.keyListener);
-            this.addMountClass();
-            window.setTimeout(this.removeMountClass, 1000);
-        } else if (!open && prevOpen) document.removeEventListener('keydown', this.keyListener);
-    };
-
-    componentWillUnmount = () => {
-        document.removeEventListener('keydown', this.keyListener);
-    };
-
-    render = () => {
-        const {open, onClose} = this.props, pickerValue = this.getPickerValue(),
-            daysInMonth = pickerValue.daysInMonth(), days: number[] = [], padBeforeDays: number[] = [],
-            padAfterDays: number[] = [];
-        for (let i = 1; i <= daysInMonth; i++) days.push(i);
-        let firstMonthDay = pickerValue.clone().date(1).day();
-        if (!firstMonthDay) firstMonthDay = 7;
-        const padDaysBefore = firstMonthDay - 1;
-        let dayBefore = pickerValue.clone().add(-1, 'month').daysInMonth()
-        for (let i = 0; i < padDaysBefore; i++)
-            padBeforeDays.splice(0, 0, dayBefore--);
-
-        const lastWeekDay = pickerValue.clone().date(daysInMonth).day();
-        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++);
+    useEffect(() => {
+        if (open) {
+            document.addEventListener('keydown', keyListener);
+            addMountClass();
+            window.setTimeout(removeMountClass, 1000);
+        } else {
+            document.removeEventListener('keydown', keyListener);
         }
-
+        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);
         return (
-            <WithBackground active={open} onClose={onClose}>
-                <div className='picker' ref={(ref: HTMLDivElement) => {
-                    this.ref = ref
-                }}>
-                    <div className='switcher year'>
-                        {this.renderSwitcher('year', 'reduce')}
-                        <label className='switcher-label'
-                               onClick={this.onResetSwitcher('year')}>{pickerValue.year()}</label>
-                        {this.renderSwitcher('year', 'add')}
+            <div className={classNames('day', disabled && 'disabled', className)}
+                 onClick={disabled ? undefined : onClick} key={index}>
+                <span className='day-label'>{day}</span>
+            </div>
+        )
+    }
+
+    return (
+        <WithBackground active={open} onClose={onClose}>
+            <div className='picker' ref={divRef}>
+                <div className='switcher year'>
+                    {renderSwitcher('year', 'reduce')}
+                    <label className='switcher-label'
+                           onClick={onResetSwitcher('year')}>{pickerValue.year()}</label>
+                    {renderSwitcher('year', 'add')}
+                </div>
+                <div className='switcher month'>
+                    {renderSwitcher('month', 'reduce')}
+                    <label className='switcher-label' onClick={onResetSwitcher('month')}>{pickerValue.format(
+                        'MMMM')}</label>
+                    {renderSwitcher('month', 'add')}
+                </div>
+                <div className='current-date-container'>
+                    <label className='current-date-label'>{pickerValue.format('dddd D MMMM YYYY')}</label>
+                    {renderTooltipContainer()}
+                </div>
+                <div className='days-container'>
+                    <div className='day no-select'>
+                        <span className='day-label'>Ma</span>
                     </div>
-                    <div className='switcher month'>
-                        {this.renderSwitcher('month', 'reduce')}
-                        <label className='switcher-label' onClick={this.onResetSwitcher('month')}>{pickerValue.format(
-                            'MMMM')}</label>
-                        {this.renderSwitcher('month', 'add')}
+                    <div className='day no-select'>
+                        <span className='day-label'>Di</span>
                     </div>
-                    <div className='current-date-container'>
-                        <label className='current-date-label'>{pickerValue.format('dddd D MMMM YYYY')}</label>
-                        {this.renderTooltipContainer()}
+                    <div className='day no-select'>
+                        <span className='day-label'>Wo</span>
                     </div>
-                    <div className='days-container'>
-                        <div className='day no-select'>
-                            <span className='day-label'>Ma</span>
-                        </div>
-                        <div className='day no-select'>
-                            <span className='day-label'>Di</span>
-                        </div>
-                        <div className='day no-select'>
-                            <span className='day-label'>Wo</span>
-                        </div>
-                        <div className='day no-select'>
-                            <span className='day-label'>Do</span>
-                        </div>
-                        <div className='day no-select'>
-                            <span className='day-label'>Vr</span>
-                        </div>
-                        <div className='day no-select'>
-                            <span className='day-label'>Za</span>
-                        </div>
-                        <div className='day no-select'>
-                            <span className='day-label'>Zo</span>
-                        </div>
-                        {padBeforeDays.map((day: number, index: number) => (
-                            <div className={classNames('day', 'pad')} onClick={this.onSelectPadDay(day, 'prev')}
-                                 key={index}>
-                                <span className='day-label'>{day}</span>
-                            </div>
-                        ))}
-                        {days.map((day: number, index: number) => {
-                            const isSelected = day === pickerValue.date();
-                            return (
-                                <div className={classNames('day', isSelected && 'selected', day === 0 && 'hide')}
-                                     key={index} onClick={this.onSelectDay(day)}>
-                                    <span className='day-label'>{day}</span>
-                                </div>
-                            )
-                        })}
-                        {padAfterDays.map((day: number, index: number) => (
-                            <div className={classNames('day', 'pad')} onClick={this.onSelectPadDay(day, 'next')}
-                                 key={index}>
-                                <span className='day-label'>{day}</span>
-                            </div>
-                        ))}
+                    <div className='day no-select'>
+                        <span className='day-label'>Do</span>
+                    </div>
+                    <div className='day no-select'>
+                        <span className='day-label'>Vr</span>
+                    </div>
+                    <div className='day no-select'>
+                        <span className='day-label'>Za</span>
                     </div>
-                    <div className='actions-container'>
-                        <DvrdButton onClick={this.onClickToday} label='Vandaag' className='action'/>
-                        <DvrdButton onClick={onClose} label='Sluiten' secondary className='action'/>
+                    <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.date();
+                        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');
+                    })}
                 </div>
-            </WithBackground>
-        )
-    }
+                <div className='actions-container'>
+                    <DvrdButton onClick={onClickToday} label='Vandaag' className='action'/>
+                    <DvrdButton onClick={onClose} label='Sluiten' secondary className='action'/>
+                </div>
+            </div>
+        </WithBackground>
+    )
 }

package/src/js/date/style/dvrdDatePicker.scss

@@ -254,6 +254,12 @@
         &:hover {
           background-color: rgba($color-blue-1, .2);
         }
+
+        &.disabled {
+          color: $color-gray-4;
+          background-color: unset;
+          cursor: default;
+        }
       }
 
       .extra-row {