@dvrd/dvr-controls 1.0.14 → 1.0.16

package/src/js/date/dvrdDatePicker.tsx

@@ -0,0 +1,357 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+import './style/dvrdDatePicker.scss';
+
+import classNames from 'classnames';
+import {Moment} from 'moment';
+import React, {PureComponent, useState} from 'react';
+import {ChangeFunction, ErrorType} from '../util/interfaces';
+import AwesomeIcon from '../icon/awesomeIcon';
+import {toMoment} from '../util/momentUtil';
+import WithBackground from '../popup/withBackground';
+import DvrdButton from "../button/dvrdButton";
+
+interface Props {
+    onChange: ChangeFunction<Moment>;
+    closeOnChange?: boolean;
+    value: Moment | null;
+    label: string;
+    error?: ErrorType;
+    className?: string;
+    placeholder?: string;
+    dateFormat?: string;
+    disabled?: boolean;
+    alwaysShowArrows?: boolean;
+}
+
+export default function DvrdDatePicker(props: Props) {
+    const {
+            onChange, className, closeOnChange, error, label, value, dateFormat, placeholder, disabled, alwaysShowArrows
+        } = props,
+        [pickerOpen, setPickerOpen] = useState(false);
+
+    function onClickContainer() {
+        if (!disabled)
+            setPickerOpen(true);
+    }
+
+    const onChangePicker = (daySelected: boolean) => (value: Moment) => {
+        onChange(value);
+        if (closeOnChange && daySelected) onClosePicker();
+    };
+
+    function onClosePicker() {
+        setPickerOpen(false)
+    }
+
+    const format = dateFormat ?? 'YYYY-MM-DD';
+
+    return (
+        <div className={classNames('dvrd-date-picker', className, error && 'error')}>
+            <label className='field-label'>{label}</label>
+            <div className='value-container' onClick={onClickContainer}>
+                <label className={classNames('value', !value && 'placeholder')}>{value?.format(format) ?? placeholder ??
+                ''}</label>
+                <AwesomeIcon name='calendar-alt' className='calendar-icon'/>
+            </div>
+            <Picker onClose={onClosePicker} onChange={onChangePicker} open={pickerOpen} value={value}
+                    alwaysShowArrows={alwaysShowArrows}/>
+            <label className='error-label'>{error}</label>
+        </div>
+    )
+}
+
+interface PickerProps {
+    onChange: (daySelected: boolean) => ChangeFunction<Moment>;
+    onClose: VoidFunction;
+    value: Moment | null;
+    open: boolean;
+    alwaysShowArrows?: boolean;
+}
+
+class Picker extends PureComponent<PickerProps> {
+    private ref: HTMLDivElement | null = null;
+
+    getPickerValue = (): Moment => toMoment(this.props.value);
+
+    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);
+    };
+
+    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);
+    };
+
+    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);
+    }
+
+    onClickToday = () => {
+        const {onChange} = this.props;
+        onChange(true)(toMoment());
+    };
+
+    onSelectDay = (day: number, month?: number, year?: number) => () => {
+        const {onChange, value} = this.props, pickerValue = this.getPickerValue();
+        if (day !== pickerValue.date() || value === null) {
+            pickerValue.date(day);
+            if (month !== undefined) pickerValue.month(month);
+            if (year !== undefined) pickerValue.year(year);
+            onChange(true)(pickerValue);
+        }
+    }
+
+    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);
+    };
+
+    keyListener = (evt: KeyboardEvent) => {
+        const {key, shiftKey, ctrlKey} = evt, {onClose} = this.props;
+        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();
+        }
+    };
+
+    onLeftKey = (shiftKey: boolean, ctrlKey: boolean) => {
+        const {onChange} = this.props, pickerValue = this.getPickerValue()
+        if (shiftKey) {
+            if (ctrlKey) this.onReduce('year')();
+            else this.onReduce('month')();
+        } else onChange(false)(pickerValue.add(-1, 'd'));
+    }
+
+    onRightKey = (shiftKey: boolean, ctrlKey: boolean) => {
+        const {onChange} = this.props, pickerValue = this.getPickerValue();
+        if (shiftKey) {
+            if (ctrlKey) this.onAdd('year')();
+            else this.onAdd('month')();
+        } else onChange(false)(pickerValue.add(1, 'd'));
+    }
+
+    onUpKey = () => {
+        const {onChange} = this.props, pickerValue = this.getPickerValue();
+        onChange(false)(pickerValue.add(-7, 'd'));
+    }
+
+    onDownKey = () => {
+        const {onChange} = this.props, pickerValue = this.getPickerValue();
+        onChange(false)(pickerValue.add(7, 'd'));
+    }
+
+    addMountClass = () => {
+        if (!this.ref?.classList.contains('switch-mount'))
+            this.ref?.classList.add('switch-mount');
+    };
+
+    removeMountClass = () => {
+        if (!this.props.alwaysShowArrows)
+            this.ref?.classList.remove('switch-mount');
+    };
+
+    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);
+        return <AwesomeIcon name={icon} title={title} className={classNames('switcher-icon', kind)} onClick={onClick}/>
+    }
+
+    renderTooltipContainer = () => {
+        return (
+            <div className='tooltip-container'>
+                <AwesomeIcon name='question-circle' className='tooltip-icon' prefix='far'/>
+                <div className='tooltip'>
+                    <label className='tooltip-label'>Shortcuts</label>
+                    <div className='key'>
+                        <AwesomeIcon name='arrow-left' className='shortcut'/>
+                        <span className='directive'>-1 dag</span>
+                    </div>
+                    <div className='key'>
+                        <div className='directives'>
+                            <span className='shortcut text'>SHIFT</span>
+                            <span className='directive'>+</span>
+                            <AwesomeIcon name='arrow-left' className='shortcut'/>
+                        </div>
+                        <span className='directive'>-1 maand</span>
+                    </div>
+                    <div className='key'>
+                        <div className='directives full'>
+                            <span className='shortcut text'>CTRL</span>
+                            <span className='directive'>+</span>
+                            <span className='shortcut text'>SHIFT</span>
+                            <span className='directive'>+</span>
+                            <AwesomeIcon name='arrow-left' className='shortcut'/>
+                        </div>
+                        <span className='directive'>-1 jaar</span>
+                    </div>
+                    <div className='key'>
+                        <AwesomeIcon name='arrow-right' className='shortcut'/>
+                        <span className='directive'>+1 dag</span>
+                    </div>
+                    <div className='key'>
+                        <div className='directives'>
+                            <span className='shortcut text'>SHIFT</span>
+                            <span className='directive'>+</span>
+                            <AwesomeIcon name='arrow-right' className='shortcut'/>
+                        </div>
+                        <span className='directive'>+1 maand</span>
+                    </div>
+                    <div className='key'>
+                        <div className='directives full'>
+                            <span className='shortcut text'>CTRL</span>
+                            <span className='directive'>+</span>
+                            <span className='shortcut text'>SHIFT</span>
+                            <span className='directive'>+</span>
+                            <AwesomeIcon name='arrow-right' className='shortcut'/>
+                        </div>
+                        <span className='directive'>+1 jaar</span>
+                    </div>
+                    <div className='key'>
+                        <AwesomeIcon name='arrow-up' className='shortcut'/>
+                        <span className='directive'>-7 dagen</span>
+                    </div>
+                    <div className='key'>
+                        <AwesomeIcon name='arrow-down' className='shortcut'/>
+                        <span className='directive'>+7 dagen</span>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+
+    componentDidUpdate = (prevProps: PickerProps) => {
+        const {open} = this.props, prevOpen = prevProps.open;
+        if (open && !prevOpen) {
+            document.addEventListener('keydown', this.keyListener);
+            this.addMountClass();
+            window.setTimeout(this.removeMountClass, 500);
+        } 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++);
+        }
+
+        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>
+                    <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>
+                    <div className='current-date-container'>
+                        <label className='current-date-label'>{pickerValue.format('dddd D MMMM YYYY')}</label>
+                        {this.renderTooltipContainer()}
+                    </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>
+                    <div className='actions-container'>
+                        <DvrdButton onClick={this.onClickToday} label='Vandaag' className='action'/>
+                        <DvrdButton onClick={onClose} label='Sluiten' secondary className='action'/>
+                    </div>
+                </div>
+            </WithBackground>
+        )
+    }
+}

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

@@ -0,0 +1,307 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+@import '../../../style/variables';
+
+.dvrd-date-picker {
+  display: flex;
+  flex-direction: column;
+  color: $color-blue-text;
+  position: relative;
+
+  .field-label {
+    font-size: .9rem;
+    margin-bottom: .25rem;
+    display: block;
+    transition: color .1s ease-in-out;
+  }
+
+  .value-container {
+    border: 1px solid #D9D9D9;
+    border-radius: 4px;
+    padding: .75rem;
+    transition: border-color .1s ease-in-out;
+    position: relative;
+    cursor: pointer;
+    background-color: white;
+
+    .value {
+      transition: color .1s ease-in-out;
+
+      &.placeholder {
+        color: $color-gray-4;
+      }
+    }
+
+    .calendar-icon {
+      position: absolute;
+      right: .75rem;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  .picker {
+    @include backgroundShadow2;
+    --day-size: 26px;
+    background-color: white;
+    display: grid;
+    grid-template-columns: 1fr;
+    width: calc(var(--day-size) * 7 + .5rem * 6 + 1rem);
+    max-width: 100vw;
+    color: $color-blue-text;
+
+    .switcher, .current-date-container, .days-container, .today-container, .actions-container {
+      padding: .5rem;
+    }
+
+    .switcher {
+      display: grid;
+      justify-content: center;
+      background-color: $color-blue-1;
+      color: white;
+      align-items: center;
+      grid-column-gap: .5rem;
+
+      .switcher-label {
+        cursor: pointer;
+        user-select: none;
+        border-bottom: 1px solid transparent;
+        transition: border-color .2s ease-in-out;
+        text-align: center;
+        justify-self: center;
+
+        &:hover {
+          border-bottom-color: currentColor;
+        }
+      }
+
+      .switcher-icon {
+        cursor: pointer;
+        font-size: .9rem;
+        visibility: hidden;
+        opacity: 0;
+        transition: color .2s ease-in-out, opacity .2s ease-in-out, visibility .2s ease-in-out;
+        padding: .25rem;
+        user-select: none;
+
+        &:hover {
+          color: $color-gray-7;
+        }
+      }
+
+      &.year {
+        grid-template-columns: fit-content(100%) 2rem fit-content(100%);
+        padding-bottom: .25rem;
+      }
+
+      &.month {
+        grid-template-columns: fit-content(100%) 4.5rem fit-content(100%);
+        padding-top: .25rem;
+      }
+
+      &:hover {
+        .switcher-icon {
+          visibility: visible;
+          opacity: 1;
+        }
+      }
+
+      &:first-child {
+        border-radius: .5rem .5rem 0 0;
+      }
+    }
+
+    .current-date-container {
+      position: relative;
+      display: flex;
+      justify-content: center;
+
+      .current-date-label {
+        font-size: .9rem;
+        color: $color-gray-3;
+      }
+
+      .tooltip-container {
+        @include centerY;
+        position: absolute;
+        right: .5rem;
+
+        .tooltip-icon {
+          color: $color-gray-3;
+          font-size: .8rem;
+          cursor: help;
+        }
+
+        .tooltip {
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          transform: translateY(100%);
+          background-color: white;
+          box-shadow: none;
+          visibility: hidden;
+          opacity: 0;
+          border-radius: .25rem !important;
+          padding: .25rem;
+          transition: visibility .2s ease-in-out, opacity .2s ease-in-out, box-shadow .2s ease-in-out;
+          display: grid;
+          grid-template-columns: auto;
+          grid-row-gap: .5rem;
+          border: 1px solid $color-gray-4;
+
+          .tooltip-label {
+            justify-self: center;
+            font-size: .8rem;
+            color: $color-gray-3;
+          }
+
+          .key {
+            display: grid;
+            grid-column-gap: .5rem;
+            grid-template-columns: 9.4rem fit-content(100%);
+            align-items: center;
+            justify-items: end;
+
+            .directives {
+              display: grid;
+              grid-template-columns: repeat(3, fit-content(100%));
+              grid-column-gap: .5rem;
+              align-items: center;
+
+              &.full {
+                grid-template-columns: repeat(5, fit-content(100%));
+              }
+            }
+
+            .shortcut, .directive {
+              font-size: .8rem;
+              color: $color-gray-3;
+              white-space: nowrap;
+            }
+
+            .shortcut {
+              font-size: .7rem;
+              padding: .1rem .25rem;
+              border: 1px solid $color-gray-3;
+
+              &.text {
+                padding: 0 .25rem;
+              }
+            }
+
+            .directive {
+              display: block;
+            }
+          }
+        }
+
+        &:hover {
+          .tooltip {
+            @include backgroundShadow;
+            visibility: visible;
+            opacity: 1;
+          }
+        }
+      }
+    }
+
+    .days-container {
+      display: grid;
+      grid-template-columns: repeat(7, var(--day-size));
+      grid-gap: .5rem;
+
+      .day {
+        width: var(--day-size);
+        height: var(--day-size);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50%;
+        cursor: pointer;
+        transition: color .2s ease-in-out, background-color .2s ease-in-out;
+
+        .day-label {
+          font-size: 14px;
+        }
+
+        &.no-select, &.hide, {
+          pointer-events: none;
+        }
+
+        &.hide {
+          visibility: hidden;
+        }
+
+        &.pad {
+          color: $color-gray-4;
+        }
+
+        &.selected {
+          background-color: $color-blue-1 !important;
+          color: white;
+        }
+
+        &:hover {
+          background-color: rgba($color-blue-1, .2);
+        }
+      }
+
+      .extra-row {
+        grid-column-start: span 7;
+        height: 24px;
+      }
+    }
+
+    .actions-container {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .action {
+        padding: .5rem;
+
+        .dvrd-button-label {
+          font-size: .9rem;
+        }
+      }
+    }
+
+    &.switch-mount {
+      .switcher {
+        .switcher-icon {
+          visibility: visible !important;
+          opacity: 1 !important;
+          transition: none !important;
+        }
+      }
+    }
+  }
+
+  .error-label {
+    position: absolute;
+    bottom: 0;
+    transform: translateY(1rem);
+    left: 0;
+    color: red;
+    font-size: .8rem;
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility .1s ease-in-out, opacity .1s ease-in-out;
+  }
+
+  &.error {
+    margin-bottom: 1rem;
+    color: red;
+
+    .value-container {
+      border-color: red;
+    }
+
+    .error-label {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+}