@dvrd/dvr-controls 1.0.4 → 1.0.7

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

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

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

@@ -1,213 +0,0 @@
-/*
- * 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";
-
-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 = (): string => 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

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

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