@dvrd/dvr-controls 1.0.4 → 1.0.7

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

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

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