@dvrd/dvr-controls 1.0.14 → 1.0.16

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

@@ -0,0 +1,360 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import './style/dateField.scss';
+
+import React, {ChangeEvent, CSSProperties, KeyboardEventHandler, PureComponent} from 'react';
+import {ChangeFunction, ControlVariant} from "../../util/interfaces";
+import {DateTimeParts, DateType} from "./dateFieldController";
+import classNames from "classnames";
+import {Moment} from 'moment';
+import {ControlContext} from "../../util/controlContext";
+import {BACKSPACE_CODE} from "../../util/constants";
+import DatePicker from "./datePicker/datePicker";
+import TimePicker from "./timePicker/timePicker";
+import DateInput from "./input/dateInput";
+import {DVRInputControllerProps} from "../v2/inputController_v2";
+import mergeWith from 'lodash/mergeWith';
+import {colorIsWhite, convertColor, editColor} from '../../util/colorUtil';
+import {toMoment} from '../../util/momentUtil';
+import {pad} from '../../util/controlUtil';
+import AwesomeIcon from "../../icon/awesomeIcon";
+import WithBackground from '../../popup/withBackground';
+import ButtonController from "../../button/buttonController";
+
+export interface DateNumParts {
+    day: number;
+    month: number;
+    year: number;
+    hour: number;
+    minute: number;
+}
+
+interface Props extends DVRInputControllerProps {
+    onChange: ChangeFunction;
+    onChangeText: (value: any, evt?: ChangeEvent, callback?: Function) => void;
+    onKeyDown: KeyboardEventHandler;
+    dateType: DateType;
+    dateParts: DateTimeParts;
+    pickerClass: string;
+    disableFuture: boolean;
+    disablePast: boolean;
+    disableAfter?: Date | Moment | string;
+    disableBefore?: Date | Moment | string;
+    value: string;
+    mask: string;
+}
+
+enum PickerState {DATE, TIME}
+
+interface State {
+    pickerOpen: boolean;
+    pickerState: PickerState;
+    pickerValue: DateNumParts;
+}
+
+export enum PickerKey {DAY = 'day', MONTH = 'month', YEAR = 'year'}
+
+export default class DateField extends PureComponent<Props, State> {
+    declare context: React.ContextType<typeof ControlContext>;
+    static contextType = ControlContext;
+
+    constructor(props: Props) {
+        super(props);
+        this.state = {
+            pickerOpen: false,
+            pickerState: this.getDefaultPickerState(),
+            pickerValue: this.getInitPickerValue(),
+        }
+    }
+
+    onMouseEnterSelector = (forState: PickerState) => (evt: MouseEvent) => {
+        const {pickerState} = this.state;
+        if (forState !== pickerState) {
+            const target = evt.target as HTMLElement;
+            target.style.color = editColor(.2, this.getBaseColor(false));
+        }
+    };
+
+    onMouseLeaveSelector = (forState: PickerState) => (evt: MouseEvent) => {
+        const {pickerState} = this.state;
+        if (forState !== pickerState) {
+            const target = evt.target as HTMLElement;
+            target.style.color = this.getSelectorStyle(forState).color as string;
+        }
+    };
+
+    onClosePicker = () => {
+        this.setState({pickerOpen: false, pickerState: this.getDefaultPickerState()});
+    };
+
+    onOpenPicker = () => {
+        this.setState({pickerOpen: true, pickerValue: this.getInitPickerValue()});
+    };
+
+    onChangeInternalValue = (key: PickerKey, value: number, add: boolean = true) => () => {
+        const {pickerValue} = this.state;
+        let nextValue: DateNumParts;
+        if (add) {
+            const currentMoment = this.getCurrentMoment(pickerValue).add(value, key);
+            nextValue = {
+                day: Math.min(pickerValue.day, currentMoment.daysInMonth()),
+                month: currentMoment.month(),
+                year: currentMoment.year(),
+                hour: currentMoment.hour(),
+                minute: currentMoment.minute(),
+            };
+        } else {
+            nextValue = Object.assign({}, this.state.pickerValue, {[key]: value});
+            const nextMoment = toMoment().month(nextValue.month).year(nextValue.year).date(1),
+                maxDays = nextMoment.daysInMonth();
+            if (nextValue.day > maxDays)
+                nextValue.day = maxDays;
+        }
+        this.setState({pickerValue: nextValue}, () => {
+            const {dateType} = this.props;
+            if (key === PickerKey.DAY) {
+                if (dateType === DateType.DATE)
+                    this.onSubmit();
+                else if (dateType === DateType.DATETIME)
+                    this.onChangePickerState(PickerState.TIME)();
+            }
+        });
+    };
+
+    onChangeTime = (hour: number, minute: number) => {
+        this.setState({pickerValue: Object.assign({}, this.state.pickerValue, {hour, minute})});
+    };
+
+    onSubmit = () => {
+        const {dateType, onChange} = this.props, {pickerValue} = this.state,
+            date = `${pad(pickerValue.day)}-${pad(pickerValue.month + 1)}-${pickerValue.year}`,
+            time = `${pad(pickerValue.hour)}:${pad(pickerValue.minute)}`;
+
+        let value: string;
+        switch (dateType) {
+            case DateType.DATE:
+                value = date;
+                break;
+            case DateType.DATETIME:
+                value = `${date} ${time}`;
+                break;
+            case DateType.TIME:
+                value = time;
+                break;
+        }
+        onChange(value);
+        this.onClosePicker();
+    };
+
+    onKeyDown = (evt: React.KeyboardEvent<HTMLInputElement>) => {
+        if (evt.key === BACKSPACE_CODE)
+            this.onBackSpace(evt);
+        else if (!/\d|ArrowRight|ArrowLeft|Escape|Esc|Enter|Tab/.test(evt.key)) {
+            // Prevent everything else then allowed keys
+            evt.preventDefault();
+        } else {
+            this.props.onKeyDown(evt);
+        }
+    };
+
+    onBackSpace = (evt: React.KeyboardEvent<HTMLInputElement>) => {
+        const target = evt.target as HTMLInputElement, caretPos = target.selectionStart, selEnd = target.selectionEnd,
+            currentValue = target.value;
+        if (caretPos !== null && selEnd !== null && selEnd > caretPos) this.onDeleteSelection(evt);
+        else if (caretPos && caretPos > 0) {
+            const charToDelete = currentValue.charAt(caretPos - 1);
+            evt.preventDefault();
+            if (/[-: ]/.test(charToDelete)) {
+                const nextValue = currentValue.substr(0, caretPos - 2) +
+                    currentValue.substr(caretPos, currentValue.length);
+                this.props.onChangeText(nextValue, undefined, () => {
+                    target.selectionStart = caretPos - 2;
+                    target.selectionEnd = caretPos - 2;
+                });
+            } else {
+                const nextValue = currentValue.substr(0, caretPos - 1) +
+                    currentValue.substr(caretPos, currentValue.length);
+                this.props.onChangeText(nextValue, undefined, () => {
+                    target.selectionStart = caretPos - 1;
+                    target.selectionEnd = caretPos - 1;
+                });
+            }
+        }
+    };
+
+    onDeleteSelection = (evt: React.KeyboardEvent<HTMLInputElement>) => {
+        evt.preventDefault();
+        const target: HTMLInputElement = evt.target as HTMLInputElement, start = target.selectionStart,
+            end = target.selectionEnd, currentValue: string = target.value;
+        if (start !== null && end !== null) {
+            let nextValue = '';
+            for (let i = 0; i < currentValue.length; i++) {
+                if (i >= start && i <= end) nextValue += ' ';
+                else nextValue += currentValue.charAt(i);
+            }
+            this.props.onChangeText(nextValue, undefined, () => {
+                target.selectionStart = start;
+                target.selectionEnd = start;
+            });
+        }
+    };
+
+    onClickToday = () => {
+        const today = toMoment();
+        this.setState({
+            pickerValue: {
+                month: today.month(),
+                day: today.date(),
+                minute: today.minute(),
+                hour: today.hour(),
+                year: today.year(),
+            }
+        }, () => {
+            if (this.props.dateType === DateType.DATE) {
+                this.onSubmit();
+            } else if (this.state.pickerState === PickerState.TIME) this.scrollToCurrent();
+        });
+    };
+
+    onChangePickerState = (nextState: PickerState) => () => {
+        if (nextState !== this.state.pickerState)
+            this.setState({pickerState: nextState});
+    };
+
+    onChangeInput = (value: Moment) => {
+        this.setState({
+            pickerValue: Object.assign({}, this.state.pickerValue, {
+                day: value.date(),
+                hour: value.hour(),
+                minute: value.minute(),
+                month: value.month(),
+                year: value.year()
+            })
+        }, () => {
+            this.onSubmit();
+        });
+    };
+
+    getDefaultPickerState = () => {
+        const {dateType} = this.props;
+        if (dateType === DateType.TIME) return PickerState.TIME;
+        return PickerState.DATE;
+    };
+
+    getInitPickerValue = () => {
+        const dateParts = Object.assign({}, this.props.dateParts), now = toMoment();
+        if (!isNaN(Number(dateParts.month))) dateParts.month = (Number(dateParts.month) - 1).toString();
+        return mergeWith(dateParts, {
+            day: now.date(),
+            month: now.month(),
+            year: now.year(),
+            hour: now.hour(),
+            minute: now.minute(),
+        }, (source1: string, source2: number) => {
+            if (!source1 || source1.length === 0 || ['dd', 'mm', 'yyyy', 'hh'].includes(source1)) return source2;
+            return Number(source1);
+        });
+    };
+
+    scrollToCurrent = () => {
+        const currentMoment = this.getCurrentMoment(), hour = currentMoment.hour(), minute = currentMoment.minute();
+        this.scrollTime('hour', hour);
+        this.scrollTime('minute', minute);
+    };
+
+    getSelectorStyle = (forState: PickerState): CSSProperties => {
+        const {pickerState} = this.state, styles: CSSProperties = {color: convertColor('color-gray-4')};
+        if (pickerState === forState) styles.color = this.getBaseColor(false);
+        return styles;
+    };
+
+    getBaseColor = (allowWhite: boolean = true): string => {
+        let color = convertColor(this.context.baseColor);
+        if (!allowWhite && colorIsWhite(color)) color = convertColor(this.context.contrastColor);
+        return color;
+    };
+
+    getCurrentMoment = (value?: DateNumParts): Moment => {
+        const {pickerValue} = this.state, toUse: DateNumParts = value !== undefined ? value : pickerValue;
+        return toMoment().year(toUse.year).month(toUse.month).date(toUse.day).hour(toUse.hour).minute(toUse.minute);
+    };
+
+    getInputValue = (): Moment | null => {
+        const {value, dateType} = this.props;
+        if (value.length) {
+            if (dateType === DateType.DATE)
+                return toMoment(value, 'DD-MM-YYYY');
+            if (dateType === DateType.DATETIME)
+                return toMoment(value, 'DD-MM-YYYY HH:mm');
+            return toMoment(value, 'HH:mm');
+        }
+        return null;
+    };
+
+    scrollTime = (type: 'hour' | 'minute', id: number) => {
+        const element = document.getElementById(`${type}-${pad(id)}`);
+        if (element) element.scrollIntoView({block: 'center'});
+    };
+
+    getTodayText = () => this.state.pickerState === PickerState.TIME ? 'Nu' : 'Vandaag';
+
+    renderPicker = () => {
+        const {pickerState, pickerValue} = this.state,
+            {pickerClass, dateType, dateParts, disablePast, disableFuture, disableBefore, disableAfter} = this.props;
+        return (
+            <div className={classNames('dvr-datepicker-container', pickerClass)}>
+                {pickerState === PickerState.DATE &&
+                <DatePicker onChange={this.onChangeInternalValue} getCurrentMoment={this.getCurrentMoment}
+                            pickerValue={pickerValue} dateParts={dateParts} disableAfter={disableAfter}
+                            disableBefore={disableBefore} disableFuture={disableFuture} disablePast={disablePast}/>}
+                {pickerState === PickerState.TIME &&
+                <TimePicker pickerValue={pickerValue} dateType={dateType} onChange={this.onChangeTime}/>}
+                {dateType === DateType.DATETIME && this.renderStateSelector()}
+                <div className='dvr-datepicker-footer'>
+                    <ButtonController onClick={this.onClickToday} label={this.getTodayText()}
+                                      type={ControlVariant.SIMPLE}
+                                      primary={false}/>
+                    {dateType != DateType.DATE &&
+                    <ButtonController onClick={this.onSubmit} label='Oké' type={ControlVariant.SIMPLE}
+                                      primary={false}/>}
+                </div>
+            </div>
+        )
+    };
+
+    renderStateSelector = () => {
+        return (
+            <div className='dvr-pickerstate-container'>
+                <AwesomeIcon name='calendar-alt' title='Datum' onClick={this.onChangePickerState(PickerState.DATE)}
+                             className='selector' style={this.getSelectorStyle(PickerState.DATE)}
+                             onMouseEnter={this.onMouseEnterSelector(PickerState.DATE)}
+                             onMouseLeave={this.onMouseLeaveSelector(PickerState.DATE)}/>
+                <AwesomeIcon name='clock' title='Tijd' onClick={this.onChangePickerState(PickerState.TIME)}
+                             className='selector' style={this.getSelectorStyle(PickerState.TIME)}
+                             onMouseEnter={this.onMouseEnterSelector(PickerState.TIME)}
+                             onMouseLeave={this.onMouseLeaveSelector(PickerState.TIME)}/>
+            </div>
+        )
+    };
+
+    componentDidUpdate = (prevProps: Props, prevState: State) => {
+        const {pickerState, pickerOpen} = this.state, prevPickerState = prevState.pickerState;
+        if (pickerState === PickerState.TIME &&
+            (prevPickerState === PickerState.DATE || (!prevState.pickerOpen && pickerOpen)))
+            this.scrollToCurrent();
+    };
+
+    render = () => {
+        const {dateType, label, error, fullWidth, onEnter, disabled} = this.props, {pickerOpen} = this.state;
+        return (
+            <>
+                <DateInput onChange={this.onChangeInput} value={this.getInputValue()} dateType={dateType}
+                           onEnter={onEnter} onClickOrnament={this.onOpenPicker} label={label} error={error}
+                           fullWidth={fullWidth} disabled={disabled}/>
+                <WithBackground onClose={this.onClosePicker} active={pickerOpen}>{this.renderPicker()}</WithBackground>
+            </>
+        )
+    };
+}

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

@@ -0,0 +1,245 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import React, {PureComponent} from 'react';
+import moment, {Moment} from 'moment';
+import {ControlVariant} from "../../util/interfaces";
+import DateField from "./dateField";
+import {DefaultInputProps, DVRInputControllerProps} from "../v2/inputController_v2";
+import {toMoment} from "../../util/momentUtil";
+
+export enum DateType {DATETIME, DATE, TIME}
+
+export enum DateReturnType {DATE, MOMENT, STRING}
+
+interface Props<T extends string | Moment | Date = string> extends Omit<DVRInputControllerProps, 'value' | 'onChange'> {
+    onChange: (value: T) => void;
+    dateType: DateType;
+    disableFuture: boolean;
+    disablePast: boolean;
+    disableAfter?: T;
+    disableBefore?: T;
+    value?: T;
+    returnType: DateReturnType;
+    pickerClass: string;
+}
+
+interface State {
+    value: string;
+}
+
+export interface DateTimeParts {
+    day: string;
+    month: string;
+    year: string;
+    hour: string;
+    minute: string;
+}
+
+export default class DateFieldController<T extends string | Moment | Date> extends PureComponent<Props<T>, State> {
+    static defaultProps = Object.assign(DefaultInputProps, {
+        dateType: DateType.DATE,
+        disableFuture: false,
+        disablePast: false,
+        returnType: DateReturnType.STRING,
+        variant: ControlVariant.SIMPLE,
+        clearAble: true,
+        disabled: false,
+        readOnly: false,
+        fullWidth: false,
+        multiLine: false,
+        error: null,
+        label: null,
+        className: '',
+        containerClass: '',
+        inputContainerClass: '',
+        inputClass: '',
+        labelClass: '',
+        errorClass: '',
+        pickerClass: '',
+        ornaments: [],
+        rows: 3,
+        autoFocus: false,
+        type: 'text',
+        step: 1,
+        inputProps: {},
+        unControlled: false,
+        autoSelect: false,
+    });
+
+    constructor(props: Props<T>) {
+        super(props);
+        this.state = {
+            value: this.getInitValue(props),
+        };
+    }
+
+    private getInitValue = (props: Props<T>): string => {
+        let momentValue: Moment;
+        const {value, dateType} = props;
+        if (!value || (typeof value === 'string' && !value.length)) {
+            return '';
+        }
+        if (value) {
+            if (moment.isMoment(value)) momentValue = value;
+            else {
+                if (value instanceof Date) momentValue = moment(value);
+                else {
+                    momentValue = toMoment(value);
+                }
+            }
+        } else momentValue = moment();
+        let format: string;
+        if (dateType === DateType.DATE) format = 'DD-MM-YYYY';
+        else if (dateType === DateType.DATETIME) format = 'DD-MM-YYYY HH:mm';
+        else format = 'HH:mm';
+        return momentValue.format(format);
+    };
+
+    onKeyDown = (evt: React.KeyboardEvent) => {
+        if (/\d/.test(evt.key)) {
+            const target = evt.target as HTMLInputElement, charPos = target.selectionStart, currentValue = target.value;
+            if (charPos !== null) {
+                let nextValue: string;
+                if (charPos === 0) {
+                    nextValue = evt.key + currentValue.substr(1);
+                } else if (charPos === currentValue.length - 1) {
+                    nextValue = currentValue.substr(0, currentValue.length - 1) + evt.key;
+                } else nextValue =
+                    currentValue.substr(0, charPos) + evt.key + currentValue.substr(charPos + 1, currentValue.length);
+                this.onChangeText(nextValue, evt);
+            }
+        }
+        if (this.props.onKeyDown) this.props.onKeyDown(evt);
+    };
+
+    onChangeText = (value: string, evt?: React.ChangeEvent | React.KeyboardEvent, callback?: Function) => {
+        if (!/\d/.test(value)) {
+            this.onChange('');
+            this.setState({value: ''}, () => {
+                if (callback) callback();
+            });
+        } else {
+            let target: HTMLInputElement | null = null, currentCaret: number | null = null;
+            if (evt) {
+                target = evt.target as HTMLInputElement;
+                currentCaret = target.selectionStart;
+            }
+            let mask: string = this.getMask(), newValue = mask,
+                valueChars = value.replace(/[-:a-z ]/g, '').split('');
+            if (valueChars.length) {
+                for (let i = 0; i < mask.length; i++) {
+                    if (/[-: ]/.test(mask.charAt(i))) continue;
+                    newValue = newValue.substr(0, i) + valueChars[0] + newValue.substr(i + 1, newValue.length);
+                    valueChars = valueChars.slice(Math.min(1, valueChars.length), valueChars.length);
+                    if (!valueChars.length) break;
+                }
+            }
+            this.onChange(newValue);
+            this.setState({value: newValue}, () => {
+                if (callback) callback();
+                else if (target && currentCaret !== null) {
+                    // Skip mask chars
+                    currentCaret++;
+                    if (/[-: ]/.test(newValue.charAt(currentCaret))) currentCaret++;
+                    window.setTimeout(() => {
+                        if (target) {
+                            target.selectionStart = currentCaret;
+                            target.selectionEnd = currentCaret;
+                        }
+                    });
+                }
+            });
+        }
+    };
+
+    onChange = (value: string) => {
+        const {returnType, onChange, dateType} = this.props;
+        this.setState({value});
+        // Only call onChange when the date is validly (only containing numbers)
+        if (!/[a-zA-Z]/.test(value)) {
+            let momentValue: Moment;
+            if (dateType === DateType.DATE) momentValue = toMoment(value, 'DD-MM-YYYY');
+            else if (dateType === DateType.TIME) momentValue = toMoment(value, 'HH:mm');
+            else momentValue = toMoment(value, 'DD-MM-YYYY HH:mm');
+            switch (returnType) {
+                case DateReturnType.STRING:
+                    switch (dateType) {
+                        case DateType.TIME:
+                            onChange(momentValue.format('HH:mm') as T);
+                            break;
+                        case DateType.DATETIME:
+                            onChange(momentValue.toISOString(true) as T);
+                            break;
+                        case DateType.DATE:
+                            onChange(momentValue.format('YYYY-MM-DD') as T);
+                            break;
+                    }
+                    break;
+                case DateReturnType.DATE:
+                    onChange(momentValue.toDate() as T);
+                    break;
+                case DateReturnType.MOMENT:
+                    onChange(momentValue as T);
+                    break;
+            }
+        }
+    };
+
+    getMask = (): string => {
+        const {dateType} = this.props;
+        switch (dateType) {
+            case DateType.TIME:
+                return 'uu:mm';
+            case DateType.DATETIME:
+                return 'dd-mm-yyyy uu:mm';
+            case DateType.DATE:
+                return 'dd-mm-yyyy';
+        }
+    };
+
+    getDateTimeParts = (): DateTimeParts => {
+        const {value} = this.state, {dateType} = this.props, dateTimeParts: DateTimeParts = {
+            day: 'dd',
+            hour: 'hh',
+            minute: 'mm',
+            month: 'mm',
+            year: 'yyyy',
+        };
+        if (value && value.length) {
+            let dateParts: string[], timeParts: string[];
+            switch (dateType) {
+                case DateType.DATE:
+                    dateParts = value.split('-');
+                    timeParts = [];
+                    break;
+                case DateType.DATETIME:
+                    const date = value.split(' ')[0], time = value.split(' ')[1];
+                    dateParts = date.split('-');
+                    timeParts = time.split(':');
+                    break;
+                case DateType.TIME:
+                    timeParts = value.split(':');
+                    dateParts = [];
+                    break;
+            }
+            if (dateParts.length) {
+                dateTimeParts.day = dateParts[0];
+                dateTimeParts.month = dateParts[1];
+                dateTimeParts.year = dateParts[2];
+            }
+            if (timeParts.length) {
+                dateTimeParts.hour = timeParts[0];
+                dateTimeParts.minute = timeParts[1];
+            }
+        }
+        return dateTimeParts;
+    };
+
+    render = () => {
+        const {value} = this.state;
+        return <DateField dateParts={this.getDateTimeParts()} {...this.props} value={value} onChange={this.onChange}
+                          onChangeText={this.onChangeText} mask={this.getMask()} onKeyDown={this.onKeyDown}/>
+    };
+}