@dvrd/dvr-controls 1.0.14 → 1.0.16

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

@@ -0,0 +1,186 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+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 {Moment, unitOfTime} from 'moment';
+import {DateTimeParts} from "../dateFieldController";
+import {toMoment} from '../../../util/momentUtil';
+import AwesomeIcon from '../../../icon/awesomeIcon';
+
+interface Props {
+    onChange: (key: PickerKey, value: number, add?: boolean) => VoidFunction;
+    getCurrentMoment: (value?: DateNumParts) => Moment;
+    pickerValue: DateNumParts;
+    dateParts: DateTimeParts;
+    disableAfter?: Date | Moment | string;
+    disableBefore?: Date | Moment | string;
+    disableFuture?: boolean;
+    disablePast?: boolean;
+}
+
+export default class DatePicker extends PureComponent<Props> {
+    declare context: React.ContextType<typeof ControlContext>;
+    static contextType = ControlContext;
+
+    onClickReset = (type: 'year' | 'month') => () => {
+        const {onChange} = this.props, today = toMoment();
+        let key: PickerKey, value: number;
+        if (type === 'year') {
+            key = PickerKey.YEAR;
+            value = today.year();
+        } else {
+            key = PickerKey.MONTH;
+            value = today.month();
+        }
+        onChange(key, value, false)();
+    };
+
+    onLeaveDay = (hoverAble: boolean) => (evt: React.MouseEvent<HTMLLabelElement>) => {
+        if (hoverAble) {
+            const target = evt.target as HTMLLabelElement;
+            target.style.backgroundColor = 'transparent';
+            target.style.color = convertColor('color-gray-header');
+        }
+    };
+
+    onEnterDay = (hoverAble: boolean) => (evt: React.MouseEvent<HTMLLabelElement>) => {
+        if (hoverAble) {
+            const target = evt.target as HTMLLabelElement;
+            target.style.backgroundColor = editColor(.1, this.getBaseColor(false));
+            target.style.color = this.getContrastColor(false);
+        }
+    };
+
+    getBaseColor = (allowWhite: boolean = true): string => {
+        let color = convertColor(this.context.baseColor);
+        if (!allowWhite && colorIsWhite(color)) color = convertColor(this.context.contrastColor);
+        return color;
+    };
+
+    getContrastColor = (allowWhiteBase: boolean = true): string => {
+        if (!allowWhiteBase) {
+            const base = this.getBaseColor(true);
+            if (colorIsWhite(base)) return base;
+        }
+        return convertColor(this.context.contrastColor);
+    };
+
+    getMonthLabel = (index: number): string =>
+        toMoment().month(index).format('MMMM');
+
+    getDaysToRender = (): { day: number, isCurrentMonth: boolean }[] => {
+        const daysToRender: { day: number, isCurrentMonth: boolean }[] = [],
+            currentMoment = this.props.getCurrentMoment(), dayPadding = currentMoment.date(1).day() - 1,
+            days = currentMoment.daysInMonth(), maxPrevMonth = currentMoment.subtract(1, 'month').daysInMonth();
+
+        // Add days to pad begin weekdays
+        for (let i = dayPadding; i > 0; i--)
+            daysToRender.push({day: maxPrevMonth - (i - 1), isCurrentMonth: false});
+
+        for (let day = 1; day <= days; day++) daysToRender.push({day, isCurrentMonth: true});
+
+        // Add days to pad end weekdays
+        for (let i = 1; daysToRender.length / 7 < 5; i++)
+            daysToRender.push({day: i, isCurrentMonth: false});
+
+        return daysToRender;
+    };
+
+    isDateDisabled = (date: Moment, granularity: unitOfTime.StartOf = 'd'): boolean => {
+        const {disableAfter, disableBefore, disableFuture, disablePast} = this.props, now = toMoment();
+        if (disablePast && date.isBefore(now, granularity)) return true;
+        if (disableFuture && date.isAfter(now, granularity)) return true;
+        if (disableAfter && date.isAfter(toMoment(disableAfter), granularity)) return true;
+        return !!(disableBefore && date.isBefore(toMoment(disableBefore), granularity));
+    };
+
+    isDayCurrent = (day: number) => {
+        const {pickerValue, dateParts, getCurrentMoment} = this.props, pickerCurrent = getCurrentMoment(),
+            currentMonth = dateParts.month.includes('m') ? toMoment().month() : Number(dateParts.month) - 1;
+        return pickerCurrent.month() === currentMonth && day === Number(pickerValue.day);
+    };
+
+    renderYearContainer = () => {
+        const {pickerValue, onChange} = this.props, year = pickerValue.year, baseColor = this.getBaseColor(),
+            contrast = this.getContrastColor();
+        return (
+            <div className='dvr-year-container' style={{backgroundColor: baseColor}}>
+                <AwesomeIcon name='chevron-left' className='dvr-year-toggle' style={{color: contrast}}
+                             onClick={onChange(PickerKey.YEAR, -1)}/>
+                <label className='dvr-year-label' style={{color: contrast}}
+                       onClick={this.onClickReset('year')}>{year}</label>
+                <AwesomeIcon name='chevron-right' className='dvr-year-toggle' style={{color: contrast}}
+                             onClick={onChange(PickerKey.YEAR, 1)}/>
+            </div>
+        )
+    };
+
+    renderMonthContainer = () => {
+        const {pickerValue, onChange} = this.props, month = pickerValue.month;
+        return (
+            <div className='dvr-month-container'>
+                <AwesomeIcon name='chevron-left' className='dvr-month-toggle' onClick={onChange(PickerKey.MONTH, -1)}/>
+                <label className='dvr-month-label' onClick={this.onClickReset('month')}>{this.getMonthLabel(
+                    month)}</label>
+                <AwesomeIcon name='chevron-right' className='dvr-month-toggle' onClick={onChange(PickerKey.MONTH, 1)}/>
+
+            </div>
+        )
+    };
+
+    renderDaysContainer = () => {
+        const daysToRender = this.getDaysToRender(), weekDays: string[] = [];
+        for (let i = 1; i <= 7; i++)
+            weekDays.push(toMoment().day(i).format('dd'));
+        return (
+            <div className='dvr-days-container'>
+                {weekDays.map((day: string, index: number) => (
+                    <div key={index} className='dvr-day-container'>
+                        <label className='weekday-label'>{day}</label>
+                    </div>
+                ))}
+                {daysToRender.map(this.renderDay)}
+            </div>
+        )
+    };
+
+    renderDay = (dayData: { day: number, isCurrentMonth: boolean }, index: number) => {
+        const {day, isCurrentMonth} = dayData, {onChange} = this.props,
+            dayMoment = this.props.getCurrentMoment().date(day),
+            isDisabled = this.isDateDisabled(dayMoment) || !isCurrentMonth,
+            isCurrent = this.isDayCurrent(day) && isCurrentMonth, isHoverAble = !isCurrent && isCurrentMonth,
+            key: string = isCurrentMonth ? `day-${day}-${index}` : `other-day-${day}-${index}`;
+
+        return (
+            <div key={key}
+                 className={classNames('dvr-day-container', isCurrent && 'current', isDisabled && 'disabled',
+                     !isCurrentMonth && 'other-month')}>
+                <label className='day-label'
+                       onMouseEnter={isDisabled ? voidFunction : this.onEnterDay(isHoverAble)}
+                       onMouseLeave={isDisabled ? voidFunction : this.onLeaveDay(isHoverAble)}
+                       style={isCurrent ?
+                           {color: this.getContrastColor(false), backgroundColor: this.getBaseColor(false)} :
+                           {}} onClick={isDisabled ? voidFunction :
+                    onChange(PickerKey.DAY, day, false)}>{day}</label>
+            </div>
+        )
+    };
+
+    render = () => {
+        return (
+            <div className='datepicker-container'>
+                {this.renderYearContainer()}
+                {this.renderMonthContainer()}
+                {this.renderDaysContainer()}
+            </div>
+        )
+    };
+}

package/src/js/input/date/datePicker/style/datePicker.scss

@@ -0,0 +1,102 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+@import '../../../../../style/variables';
+
+.datepicker-container {
+  height: 21.5rem;
+
+  .dvr-year-container {
+    padding: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .dvr-year-toggle {
+      font-size: .9rem;
+      cursor: pointer;
+      height: .9rem;
+    }
+
+    .dvr-year-label {
+      margin: 0 1rem;
+      font-size: 1.2rem;
+      font-weight: 500;
+      cursor: pointer;
+    }
+  }
+
+  .dvr-month-container {
+    color: $color-gray-header;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+
+    .dvr-month-toggle {
+      font-size: .9rem;
+      height: .9rem;
+      cursor: pointer;
+    }
+
+    .dvr-month-label {
+      width: 6.6rem;
+      display: block;
+      text-align: center;
+      cursor: pointer;
+    }
+  }
+
+  .dvr-days-container {
+    padding: 0 1rem 1rem;
+    display: grid;
+    grid-template-columns: repeat(7, 2rem);
+
+    .day-padding {
+      padding: .5rem;
+      visibility: hidden;
+    }
+
+    .dvr-day-container {
+      width: 2rem;
+      height: 2rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .weekday-label, .day-label {
+        font-size: .9rem;
+        user-select: none;
+      }
+
+      .weekday-label {
+        width: 100%;
+        text-align: center;
+        border-bottom: 1px solid $color-gray-7;
+      }
+
+      .day-label {
+        cursor: pointer;
+        transition: background-color .2s ease-in-out, color .2s ease-in-out;
+        border-radius: 50%;
+        padding: .25rem;
+        width: 1.5rem;
+        text-align: center;
+      }
+
+      &.disabled .day-label{
+        cursor: not-allowed;
+        color: $color-gray-4;
+      }
+
+      &.other-month {
+        .day-label {
+          color: $color-gray-4;
+          cursor: default;
+          transition: none;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,214 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+import React, {KeyboardEventHandler, MouseEventHandler, PureComponent} from 'react';
+import moment, {Moment} from 'moment';
+import {DateType} from "../dateFieldController";
+import {AwesomeIcon, ElementPosition, OrnamentShape, TextField, generateComponentId} from "../../../../../";
+import {voidFunction} from "../../../util/controlUtil";
+import {ErrorType} from "../../../util/interfaces";
+import {DefaultInputProps} from "../../v2/inputController_v2";
+import { IconName } from '@fortawesome/fontawesome-svg-core';
+
+type DateIndex = {
+    index: number;
+    value: string;
+    placeholder: string;
+    mutable: boolean;
+}
+
+interface Props {
+    onClickOrnament?: MouseEventHandler;
+    onChange: (value: Moment) => void;
+    onEnter?: KeyboardEventHandler;
+    dateType: DateType;
+    value: Moment | null;
+    error?: ErrorType;
+    label?: string | number;
+    fullWidth?: boolean;
+    disabled?: boolean;
+}
+
+interface State {
+    indexes: DateIndex[];
+}
+
+const BACKSPACE = 'Backspace', ENTER = 'Enter', RIGHT = 'ArrowRight', LEFT = 'ArrowLeft', TAB = 'Tab';
+
+const allowedKeys = new RegExp(`^\\d|${BACKSPACE}|${ENTER}|${RIGHT}|${LEFT}|${TAB}$`);
+
+export default class DateInput extends PureComponent<Props, State> {
+    static defaultProps = DefaultInputProps;
+    private id = generateComponentId(null);
+
+    constructor(props: Props) {
+        super(props);
+        this.state = {
+            indexes: this.parseValue(props.value)
+        };
+    }
+
+    onKeyDown = (evt: React.KeyboardEvent) => {
+        const key = evt.key;
+        if (allowedKeys.test(key)) {
+            if (key !== TAB && key !== ENTER) {
+                evt.persist();
+                evt.preventDefault();
+                if (key === BACKSPACE) this.onBackspace(evt);
+                else if (key === RIGHT) this.setCaretPos(evt, 1);
+                else if (key === LEFT) this.setCaretPos(evt, -1);
+                else this.onEnterDigit(evt);
+            }
+        }
+    };
+
+    onBackspace = (evt: React.KeyboardEvent) => {
+        const {start, end} = this.getCaretStartEnd(evt), indexes = this.getIndexesCopy();
+        if (start > -1) {
+            if (start < end) {
+                // Remove selection
+                this.onBackspaceSelection(start, end, evt);
+            } else if (start > 0) {
+                let prevPos = start - 1, nextCaret = prevPos;
+                while (prevPos > 0 && !indexes[prevPos].mutable) prevPos--;
+                while (nextCaret > 0 && !indexes[nextCaret - 1].mutable) nextCaret--;
+                if (prevPos > -1) {
+                    indexes[prevPos].value = indexes[prevPos].placeholder;
+                    this.setState({indexes}, () => {
+                        this.setCaretPos(evt, Math.max(0, nextCaret), false);
+                    });
+                }
+            }
+        }
+    };
+
+    onBackspaceSelection = (start: number, end: number, evt: React.KeyboardEvent) => {
+        const indexes = this.getIndexesCopy();
+        for (let i = start; i < end; i++)
+            if (indexes[i].mutable) indexes[i].value = indexes[i].placeholder;
+        this.setState({indexes}, () => {
+            this.setCaretPos(evt, start, false);
+        })
+    }
+
+    onEnterDigit = (evt: React.KeyboardEvent) => {
+        const pos = this.getCaretPos(evt), indexes = this.getIndexesCopy();
+        if (pos > -1 && pos < indexes.length) {
+            indexes[pos].value = evt.key;
+            let nextPos = pos + 1;
+            while (nextPos < indexes.length && !indexes[nextPos].mutable) nextPos++;
+            this.setState({indexes}, () => {
+                this.setCaretPos(evt, nextPos, false);
+            });
+        }
+    };
+
+    getIndexesCopy = (): DateIndex[] => this.state.indexes.map((index: DateIndex) => ({
+        value: index.value,
+        mutable: index.mutable,
+        placeholder: index.placeholder,
+        index: index.index
+    }));
+
+    getCaretPos = (evt: React.KeyboardEvent): number => {
+        const target: HTMLInputElement = evt.target as HTMLInputElement,
+            pos = target.selectionStart;
+        if (pos !== null) return pos;
+        return -1;
+    };
+
+    getCaretStartEnd = (evt: React.KeyboardEvent): { start: number, end: number } => {
+        const target = evt.target as HTMLInputElement;
+        let start = target.selectionStart, end = target.selectionEnd;
+        if (start === null) start = -1;
+        if (end === null) end = -1;
+        return {start, end};
+    }
+
+    setCaretPos = (evt: React.KeyboardEvent, position: number, relative: boolean = true) => {
+        const target: HTMLInputElement = evt.target as HTMLInputElement;
+        if (relative) {
+            const newPosition = (target.selectionStart || 0) + position;
+            target.selectionStart = newPosition;
+            target.selectionEnd = newPosition;
+        } else {
+            target.selectionStart = position;
+            target.selectionEnd = position;
+        }
+    };
+
+    parseValue = (value: Moment | null): DateIndex[] => {
+        const indexes: DateIndex[] = [], {dateType} = this.props;
+        let chars: string, defaultChars: string;
+        if (dateType === DateType.DATE) {
+            defaultChars = 'dd-mm-jjjj';
+            chars = value ? value.format('DD-MM-YYYY') : defaultChars;
+        } else if (dateType === DateType.DATETIME) {
+            defaultChars = 'dd-mm-jjjj uu:mm';
+            chars = value ? value.format('DD-MM-YYYY HH:mm') : defaultChars;
+        } else {
+            defaultChars = 'uu:mm';
+            chars = value ? value.format('HH:mm') : defaultChars;
+        }
+        const breakPoint: number = Math.min(chars.length, defaultChars.length);
+        for (let i = 0; i < breakPoint; i++) {
+            const char = chars.charAt(i);
+            indexes.push({index: i, value: char, placeholder: defaultChars.charAt(i), mutable: !/[-: ]/.test(char)});
+        }
+        return indexes;
+    };
+
+    getStringValue = (length: number = -1): string => {
+        const {indexes} = this.state;
+        return (length > -1 ? indexes.slice(0, length) : indexes).reduce(
+            (prev: string, current: DateIndex) => prev + current.value, '');
+    };
+
+    getIconName = (): IconName => this.props.dateType === DateType.TIME ? 'clock' : 'calendar-alt';
+
+    tryOnChange = (indexes: DateIndex[]) => {
+        const {dateType, onChange} = this.props;
+        let momentValue: Moment,
+            format: string = dateType === DateType.DATE ? 'DD-MM-YYYY' : dateType === DateType.DATETIME ?
+                'DD-MM-YYYY HH:mm' : 'HH:mm';
+        if (indexes.length >= format.length) {
+            const stringValue = this.getStringValue(format.length);
+            momentValue = moment(stringValue, format);
+            if (!/[a-zA-Z]/.test(stringValue) && momentValue.isValid()) onChange(momentValue);
+        }
+    };
+
+    indexesAreDifferent = (indexes: DateIndex[], prevIndexes: DateIndex[]) => {
+        if (indexes.length !== prevIndexes.length) return true;
+        for (let i = 0; i < indexes.length; i++)
+            if (indexes[i].value !== prevIndexes[i].value) return true;
+        return false;
+    };
+
+    renderOrnament = (): OrnamentShape | [] => {
+        const {onClickOrnament} = this.props;
+        if (onClickOrnament) return {
+            placement: ElementPosition.RIGHT,
+            element: <AwesomeIcon name={this.getIconName()} onClick={onClickOrnament}/>,
+            allowPropagation: false,
+        };
+        return [];
+    };
+
+    componentDidUpdate = (prevProps: Props, prevState: State) => {
+        const {indexes} = this.state, prevIndexes = prevState.indexes, {value} = this.props,
+            prevValue = prevProps.value;
+        if (this.indexesAreDifferent(indexes, prevIndexes)) this.tryOnChange(indexes);
+        if ((!prevValue && value) || (!value && prevValue) || (value && prevValue && !value.isSame(prevValue)))
+            this.setState({indexes: this.parseValue(value)});
+    };
+
+    render = () => {
+        const {label, error, fullWidth, onEnter, disabled} = this.props;
+        return (
+            <TextField onChange={voidFunction} value={this.getStringValue()} inputProps={{onKeyDown: this.onKeyDown}}
+                       ornaments={this.renderOrnament()} id={this.id} label={label} error={error}
+                       fullWidth={fullWidth} onEnter={onEnter} disabled={disabled}/>
+        );
+    };
+}

package/src/js/input/date/style/dateField.scss

@@ -0,0 +1,40 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+@import '../../../../style/variables';
+
+.dvr-datepicker-container {
+  @include backgroundShadow;
+  background-color: white;
+  min-width: 16rem;
+  max-width: 100vw;
+
+  &, * {
+    user-select: none;
+  }
+
+  .dvr-pickerstate-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: .5rem 0;
+    border-top: 1px solid $color-gray-7;
+
+    .selector {
+      color: $color-gray-4;
+      cursor: pointer;
+      transition: color .2s ease-in-out;
+
+      &:first-child {
+        margin-right: 1rem;
+      }
+    }
+  }
+
+  .dvr-datepicker-footer {
+    padding: .5rem;
+    display: flex;
+    justify-content: space-between;
+  }
+}

package/src/js/input/date/timePicker/style/timePicker.scss

@@ -0,0 +1,95 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+@import '../../../../../style/variables';
+
+.timepicker-container {
+  height: 21.5rem;
+
+  .header-container {
+    padding: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .header-title {
+      font-size: 1.2rem;
+      font-weight: 500;
+    }
+  }
+
+  .date-label {
+    display: flex;
+    justify-content: center;
+    padding-top: 1rem;
+
+    &.invis {
+      visibility: hidden;
+    }
+  }
+
+  .time-body-container {
+    display: grid;
+    grid-template-columns: 50% 50%;
+    justify-items: center;
+    padding: 1rem;
+
+    .time-column {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      //height: 14rem;
+
+      .time-col-title {
+        font-weight: 500;
+        margin-bottom: 1rem;
+      }
+
+      .time-select-background-container {
+        position: relative;
+
+        .selected-background {
+          @include centerY;
+          position: absolute;
+          width: 100%;
+          height: calc(100% / 3);
+          z-index: 0;
+          background-color: $color-gray-4;
+        }
+
+        .time-select-container {
+          position: relative;
+          border: 1px solid $color-gray-7;
+          border-radius: .25rem;
+          height: 6rem;
+          overflow-y: auto;
+          scroll-snap-type: y mandatory;
+          -ms-overflow-style: none;
+          z-index: 1;
+
+          .time-unit-container {
+            height: 2rem;
+            padding: 0 1rem;
+            scroll-snap-align: start;
+            display: flex;
+            align-items: center;
+
+            .time-unit-label {
+              height: 1rem;
+            }
+
+            &.invis {
+              visibility: hidden;
+            }
+          }
+
+          &::-webkit-scrollbar {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}