@dvrd/dvr-controls 1.0.6 → 1.0.7

package/src/js/date/dvrdDatePicker.tsx

@@ -1,357 +0,0 @@
-/*
- * 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

@@ -1,307 +0,0 @@
-/*!
- * 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;
-    }
-  }
-}